贝塞尔曲线

一、moveTo(float,float)

用于移动路径的起始点到Point(x,y)，咱们都知道对于android系统来说，屏幕的左上角的坐标是 (0,0) , 我们在做一些操作的时候默认基准点也是 (0,0)，比如调用canvas.rotate(float degrees) 将Canvas (画布) 旋转对应的角度，当然 ，Canvas还有另外一个方法rotate(float degrees,float px, float py)，其中所做的事情就是通过 translate(px, py) 改变了canvas.rotate() 的基准点，Path 的moveTo 方法可以与此进行一个类比，就是为了改变 Path 的起始点；

我们一起看下小例子：

[html] view plain copy

  1. private void init() {
  2. mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  3. mPaint.setStyle(Style.STROKE);
  4. mPaint.setStrokeWidth(PATH_WIDTH);
  5. mPaint.setColor(Color.RED);
  6. mPath = new Path();
  7. mPath.lineTo(150, 150);
  8. }
  9. @Override
  10. protected void onDraw(Canvas canvas) {
  11. super.onDraw(canvas);
  12. canvas.drawColor(Color.WHITE);
  13. canvas.drawPath(mPath, mPaint);
  14. }

此时屏幕上展现的效果即从屏幕上画了一条直线，从 (0,0) 到 (150,150)，效果如下：

我们在

[html] view plain copy

  1. mPath.lineTo(150, 150)

前面加上一句 mPath.moveTo(50,50)，看看效果：

此时线的起始点移动到了(50,50) ，即从 (50,50) 连到了 (150,150) ;

二、rMoveTo(float,float)

前面加上 r 的 XXXTo方法，只需要理解它的意义即可明白， r 即 relative ，会相对于前一个点往后计量;

我们对前面的例子稍作改动：

[html] view plain copy

  1. <span style="white-space:pre">    </span>mPath = new Path();
  2. <span style="white-space:pre">    </span>mPath.moveTo(50, 50);
  3. mPath.lineTo(150, 150);
  4. // 相对前面的点 x 往后移动 100 个像素，y 往下移动 100 个像素
  5. mPath.rMoveTo(100, 100);
  6. mPath.lineTo(400, 400);

按照我们的预期，此时应该是画两条线分别从 (0,0) - (150,150) 和 (250,250) - (400,400) , 当调 rMoveTo(float,float) 时前一个点为 (0,0) ，那么效果等同于 moveTo(float,float);

三、lineTo(float x,float y)

上面的例子也已经能看出该方法的作用了，即从上一个点以直线方式连接到参数里的 （x,y）

四、rLineTo(float x,float y) , 即以当前点作为基准点，以直线的形式连接到 (currentX + x , currentY + y)

五、arcTo(RectF oval, float startAngle, float sweepAngle,boolean forceMoveTo)

该方法是添加一段弧线到path中，我们先来看看各参数的意义：

第一个参数：RectF oval 代表弧线所在椭圆所占的矩形区域；

这句话看起来还有点绕，细细一想，一段弧线必然是附属于一个椭圆或正圆，只不过只是显示了这个椭圆或正圆的一部分，而这个椭圆或正圆又必然刚好被包含于一个矩形区域，该参数就是这个矩形区域：

第二个参数：float startAngle 代表弧线的起始角度；

第三个参数：float sweepAngle 代表弧线所划过的角度；

第四个参数：boolean forceMoveTo 如果为true ，则效果相当于新建一条路径并 moveTo 到弧线起始点，然后添加弧线,可能有人会问，这个方法有何用，待会一起看例子；

大家需要注意的是 0 度所在点并不是正上方，而是时钟上三点钟所在的位置；

接下来我们添加一段弧线到刚才的 path 里：

[html] view plain copy

  1. mPath = new Path();
  2. mPath.moveTo(50, 50);
  3. mPath.lineTo(150, 150);
  4. // 相对前面的点 x 往后移动 100 个像素，y 往下移动 100 个像素
  5. mPath.rMoveTo(100, 100);
  6. mPath.lineTo(400, 400);
  7. mRectF = new RectF(0, 400, 800, 800);
  8. mPath.arcTo(mRectF, 0, 90);
  9. }
  10. @Override
  11. protected void onDraw(Canvas canvas) {
  12. super.onDraw(canvas);
  13. canvas.drawColor(Color.WHITE);
  14. canvas.drawPath(mPath, mPaint);
  15. canvas.drawRect(mRectF, mPaint);
  16. }

此时的效果如下：

我们可以看到此时多了一条线（处理成蓝色），由于弧线的起始点和 path 的最后一个点不是同一个点，path 会直接lineTo到弧线的起始点，然后arcTo ，而对于我们来说，我们不想要这一条多余的线，该怎么办呢？arcTo(RectF oval, float startAngle, float sweepAngle,boolean forceMoveTo) 方法就派上用场了：

改使用

[html] view plain copy

  1. mPath.arcTo(mRectF, 0, 90, true);

此时效果为：

六、close()

顾名思义，即关闭当前路径，还是使用前面的例子：

[html] view plain copy

  1. <span style="white-space:pre">    </span>mPath.rMoveTo(100, 100);
  2. mPath.lineTo(400, 400);
  3. mRectF = new RectF(0, 400, 800, 800);
  4. mPath.arcTo(mRectF, 0, 90);
  5. mPath.close();

大家可以先想象一下现在的结果应该是什么：

我们再看看改为

[html] view plain copy

  1. mPath.arcTo(mRectF, 0, 90, true);

之后的效果：

此时对于close的结果是否有结论了呢？close相当于lineTo到最后一次moveTo的终点，为了便于理解，可以把每次调用moveTo 之后的Path 当作一条独立的路径；

七、path 里与贝塞尔曲线相关的方法：

我们先简单的了解下贝塞尔曲线：

贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。贝塞尔曲线是计算机图形学中相当重要的参数曲线，在一些比较成熟的位图软件中也有贝塞尔曲线工具，如PhotoShop等。

在Flash4中还没有完整的曲线工具，而在Flash5里面已经提供出贝塞尔曲线工具。

贝塞尔曲线的一般参数方程为：

二次贝塞尔曲线(有一个控制点)方程为：

三次贝塞尔曲线(有两个控制点)方程为：

android 只对低阶贝塞尔曲线进行了封装，二次贝塞尔曲线对应 quadTo(float x1,float y1,float x2, float y2) , 三次贝塞尔曲线对应 cubicTo(float x1,float y1, floatx2, float y2, float x3,float y3)

(1)、quadTo(float x1, float y1, float x2, float y2)

x1、y1 代表控制点的 x、y，即一个控制点动态图中的P1，x2、y2 代表目标点的 x、y；

(2)、cubicTo(float x1, float y1, float x2, float y2, float x3, float y3)

x1、y1 代表控制点1的 x、y；

x2、y2 代表控制点2的 x、y；

x3、y3 代表目标点的 x、y；

接下来咱们利用上面的两个方法画个令人怦然心动的爱心出来：

[html] view plain copy

  1. public class HeartView extends View {
  2. private static final int PATH_WIDTH = 2;
  3. // 起始点
  4. private static final int[] START_POINT = new int[] {
  5. 300, 270
  6. };
  7. // 爱心下端点
  8. private static final int[] BOTTOM_POINT = new int[] {
  9. 300, 400
  10. };
  11. // 左侧控制点
  12. private static final int[] LEFT_CONTROL_POINT = new int[] {
  13. 450, 200
  14. };
  15. // 右侧控制点
  16. private static final int[] RIGHT_CONTROL_POINT = new int[] {
  17. 150, 200
  18. };
  19. private Paint mPaint;
  20. private Path mPath;
  21. public HeartView(Context context) {
  22. super(context);
  23. init();
  24. }
  25. private void init() {
  26. mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  27. mPaint.setStyle(Style.STROKE);
  28. mPaint.setStrokeWidth(PATH_WIDTH);
  29. mPaint.setColor(Color.RED);
  30. mPath = new Path();
  31. mPath.moveTo(START_POINT[0], START_POINT[1]);
  32. mPath.quadTo(RIGHT_CONTROL_POINT[0], RIGHT_CONTROL_POINT[1], BOTTOM_POINT[0],
  33. BOTTOM_POINT[1]);
  34. mPath.quadTo(LEFT_CONTROL_POINT[0], LEFT_CONTROL_POINT[1], START_POINT[0], START_POINT[1]);
  35. }
  36. @Override
  37. protected void onDraw(Canvas canvas) {
  38. super.onDraw(canvas);
  39. canvas.drawColor(Color.WHITE);
  40. canvas.drawPath(mPath, mPaint);
  41. canvas.drawCircle(RIGHT_CONTROL_POINT[0], RIGHT_CONTROL_POINT[1], 5, mPaint);
  42. canvas.drawCircle(LEFT_CONTROL_POINT[0], LEFT_CONTROL_POINT[1], 5, mPaint);
  43. }
  44. }

效果如下：

到这里，path的基本使用应该没啥问题了，下一篇我们给这个爱心加上动效，使之更有feel；

如果对这个桃心绘制有问题或有兴趣的同学，可以链接到 Path相关方法讲解(二)，此时我们的需求是这样的：

假定我们现在是一个婚恋产品，有一个“心动”的功能，用户点击“心动”按钮的时候，有一个光点快速的沿着桃心转一圈，然后整个桃心泛起光晕！

针对这个需求，很多人可能会想到以下方案：

不就一个光点沿着桃心跑一圈么，既然桃心是使用贝塞尔曲线画出来的，那么我们就可以用对应的函数模拟出这条曲线，然后算出对应位置上的点，不断将光点绘制到对应的位置上！

这个思路当然没有问题，但我们还有相对简单的方式，那就是使用 PathMeasure:

我们主要使用它两个方法：

1.getLength() - 获取路径的长度

2.getPosTan(float distance, float pos[],float tan[]) － path 为 null ，返回 false

distance 为一个 0 － getLength() 之间的值，根据这个值 PathMeasure 会计算出当前点的坐标封装到 pos 中；

上面这句话我们可以这么来理解，不管实际 Path 多么的复杂，PathMeasure 都相当于做了一个事情，就是把 Path “拉直”，然后给了我们一个接口(getLength)告诉我们path的总长度，然后我们想要知道具体某一点的坐标，只需要用相对的distance去取即可，这样就省去了自己用函数模拟path，然后计算获取点坐标的过程；

接下来，我们用代码实现这一效果：

我们先创建一个 PathMeasure ，并将创建好的 path 作为参数传入

[html] view plain copy

  1. mPath = new Path();
  2. mPath.moveTo(START_POINT[0], START_POINT[1]);
  3. mPath.quadTo(RIGHT_CONTROL_POINT[0], RIGHT_CONTROL_POINT[1], BOTTOM_POINT[0],
  4. BOTTOM_POINT[1]);
  5. mPath.quadTo(LEFT_CONTROL_POINT[0], LEFT_CONTROL_POINT[1], START_POINT[0], START_POINT[1]);
  6. mPathMeasure = new PathMeasure(mPath, true);

然后用一个数组纪录点的坐标：

[html] view plain copy

  1. private float[] mCurrentPosition = new float[2];

向外暴露一个开启动效的接口：

[html] view plain copy

  1. // 开启路径动画
  2. public void startPathAnim(long duration) {
  3. // 0 － getLength()
  4. ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, mPathMeasure.getLength());
  5. Log.i(TAG, "measure length = " + mPathMeasure.getLength());
  6. valueAnimator.setDuration(duration);
  7. // 减速插值器
  8. valueAnimator.setInterpolator(new DecelerateInterpolator());
  9. valueAnimator.addUpdateListener(new AnimatorUpdateListener() {
  10. @Override
  11. public void onAnimationUpdate(ValueAnimator animation) {
  12. float value = (Float) animation.getAnimatedValue();
  13. // 获取当前点坐标封装到mCurrentPosition
  14. mPathMeasure.getPosTan(value, mCurrentPosition, null);
  15. postInvalidate();
  16. }
  17. });
  18. valueAnimator.start();
  19. }

实时获取到当前点之后，将目标绘制到对应位置：

[html] view plain copy

  1. protected void onDraw(Canvas canvas) {
  2. super.onDraw(canvas);
  3. canvas.drawColor(Color.WHITE);
  4. canvas.drawPath(mPath, mPaint);
  5. canvas.drawCircle(RIGHT_CONTROL_POINT[0], RIGHT_CONTROL_POINT[1], 5, mPaint);
  6. canvas.drawCircle(LEFT_CONTROL_POINT[0], LEFT_CONTROL_POINT[1], 5, mPaint);
  7. // 绘制对应目标
  8. canvas.drawCircle(mCurrentPosition[0], mCurrentPosition[1], 10, mPaint);
  9. }

到这里目标环绕 path 的效果就ok了，不管这条路径简单也好，复杂也罢，我们都可以如此简单的完成对应的效果，而不需要自己用简单或复杂函数模拟求解了；

完成了一步，自己提的需求还有一点就是光晕的问题，这个东西如何是好呢？切图？！ 不需要，Android 已经给我们提供了一个好用的东西 MaskFilter ,后面我就不做了，大家有兴趣自己做的玩玩，只需要注意一点，MaskFilter 不支持硬件加速，记得关掉！

好了，PathMeasure 看似很简单，但着实很有用，有了它，再结合上 Path 、Shader、ColorMatrix  等利器，我们已经可以做出很多酷炫的效果了！

最后，完整的代码献上，请笑纳：

[html] view plain copy

  1. public class DynamicHeartView extends View {
  2. private static final String TAG = "DynamicHeartView";
  3. private static final int PATH_WIDTH = 2;
  4. // 起始点
  5. private static final int[] START_POINT = new int[] {
  6. 300, 270
  7. };
  8. // 爱心下端点
  9. private static final int[] BOTTOM_POINT = new int[] {
  10. 300, 400
  11. };
  12. // 左侧控制点
  13. private static final int[] LEFT_CONTROL_POINT = new int[] {
  14. 450, 200
  15. };
  16. // 右侧控制点
  17. private static final int[] RIGHT_CONTROL_POINT = new int[] {
  18. 150, 200
  19. };
  20. private PathMeasure mPathMeasure;
  21. private Paint mPaint;
  22. private Path mPath;
  23. private float[] mCurrentPosition = new float[2];
  24. public DynamicHeartView(Context context) {
  25. super(context);
  26. init();
  27. }
  28. private void init() {
  29. mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  30. mPaint.setStyle(Style.STROKE);
  31. mPaint.setStrokeWidth(PATH_WIDTH);
  32. mPaint.setColor(Color.RED);
  33. mPath = new Path();
  34. mPath.moveTo(START_POINT[0], START_POINT[1]);
  35. mPath.quadTo(RIGHT_CONTROL_POINT[0], RIGHT_CONTROL_POINT[1], BOTTOM_POINT[0],
  36. BOTTOM_POINT[1]);
  37. mPath.quadTo(LEFT_CONTROL_POINT[0], LEFT_CONTROL_POINT[1], START_POINT[0], START_POINT[1]);
  38. mPathMeasure = new PathMeasure(mPath, true);
  39. mCurrentPosition = new float[2];
  40. }
  41. @Override
  42. protected void onDraw(Canvas canvas) {
  43. super.onDraw(canvas);
  44. canvas.drawColor(Color.WHITE);
  45. canvas.drawPath(mPath, mPaint);
  46. canvas.drawCircle(RIGHT_CONTROL_POINT[0], RIGHT_CONTROL_POINT[1], 5, mPaint);
  47. canvas.drawCircle(LEFT_CONTROL_POINT[0], LEFT_CONTROL_POINT[1], 5, mPaint);
  48. // 绘制对应目标
  49. canvas.drawCircle(mCurrentPosition[0], mCurrentPosition[1], 10, mPaint);
  50. }
  51. // 开启路径动画
  52. public void startPathAnim(long duration) {
  53. // 0 － getLength()
  54. ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, mPathMeasure.getLength());
  55. Log.i(TAG, "measure length = " + mPathMeasure.getLength());
  56. valueAnimator.setDuration(duration);
  57. // 减速插值器
  58. valueAnimator.setInterpolator(new DecelerateInterpolator());
  59. valueAnimator.addUpdateListener(new AnimatorUpdateListener() {
  60. @Override
  61. public void onAnimationUpdate(ValueAnimator animation) {
  62. float value = (Float) animation.getAnimatedValue();
  63. // 获取当前点坐标封装到mCurrentPosition
  64. mPathMeasure.getPosTan(value, mCurrentPosition, null);
  65. postInvalidate();
  66. }
  67. });
  68. valueAnimator.start();
  69. }
  70. }

以上代码的效果如下，其余效果大家自行补充：

时间： 2024-03-31 20:37:53

贝塞尔曲线的相关文章

UIBezierPath 贝塞尔曲线

1. UIBezierPath * path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(30, 30, 100, 100) cornerRadius:0]; CAShapeLayer * layer = [CAShapeLayer layer];    layer.path = path.CGPath;    layer.fillColor = [[UIColor blackColor]CGColor]; layer.strokeC

iOS:使用贝塞尔曲线绘制图表（折线图、柱状图、饼状图）

1.介绍: UIBezierPath :画贝塞尔曲线的path类 UIBezierPath定义 : 贝赛尔曲线的每一个顶点都有两个控制点,用于控制在该顶点两侧的曲线的弧度. 曲线的定义有四个点:起始点.终止点(也称锚点)以及两个相互分离的中间点. 滑动两个中间点,贝塞尔曲线的形状会发生变化. UIBezierPath :对象是CGPathRef数据类型的封装,可以方便的让我们画出 矩形 . 椭圆 或者 直线和曲线的组合形状 初始化方法: + (instancetype)bezierPath; /

【开源项目解析】QQ“一键下班”功能实现解析——学习Path及贝塞尔曲线的基本使用

早在很久很久以前,QQ就实现了"一键下班"功能.何为"一键下班"?当你QQ有信息时,下部会有信息数量提示红点,点击拖动之后,就会出现"一键下班"效果.本文将结合github上关于此功能的一个简单实现,介绍这个功能的基本实现思路. 项目地址 https://github.com/chenupt/BezierDemo 最终实现效果 实现原理解析 我个人感觉,这个效果实现的很漂亮啊!那么咱们就来看看实现原理是什么~ 注:下面内容请参照项目源码观看. 其

贝塞尔曲线实现的购物车添加商品动画效果

效果图如下: 1.activity_main.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/rly_bezier_curve_shopping_cart" android:layout_w

svg path中的贝塞尔曲线

首先介绍以下什么是贝塞尔曲线 贝塞尔曲线又叫贝茨曲线(Bezier),由两个端点以及若干个控制点组成,只有两个端点在曲线上,控制点不在曲线上,只是控制曲线的走向. 控制点个数为0时,它是一条直线; 控制点个数为1时,它是二次贝塞尔曲线; 控制点个数为2时,它是三次贝塞尔曲线: .... 数学公式 二次贝塞尔曲线 p0,p2是起始点,p1是控制点 分别把p0,p1,p2点的x,y坐标带入,求出曲线上的点的x,y坐标 三次贝塞尔曲线 p0,p3是起始点,p1,p2是控制点 svg的path中与贝塞尔

贝塞尔曲线初识 (数学)

备注:贝塞尔曲线是由法国数学家“贝塞尔”发现的,他发现:任何一条曲线都能够由和它相切的直线的两个端点来描述,这种曲线表示方式后来被广泛应用到计算机中,称为“贝塞尔曲线”. https://www.jasondavies.com/animated-bezier/

通过UIBezierPath贝塞尔曲线画圆形、椭圆、矩形

/**创建椭圆形的贝塞尔曲线*/ UIBezierPath *_ovalPath=[UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 100)]; /**创建矩形的贝塞尔曲线*/ UIBezierPath *_rectPath=[UIBezierPath bezierPathWithRect:CGRectMake(0, 0, 200, 100)]; /**创建圆形的贝塞尔曲线*/ UIBezierPath *_circlePa

cubic-bezier贝塞尔曲线css3动画工具

今天在一本叫<HTML5触摸界面设计与开发>上看到一个做弹跳球的复杂动画效果,首先加速下降,停止,然后弹起时逐渐减速.是用cubic-bezier贝塞尔曲线来完成的.所以特地去学习了一下关于cubic-bezier贝塞尔曲线. cubic-bezier比较少用,因为PC端中,有浏览器不兼容.但是手机端中,可以使用并带来炫酷的动画及体验. 缓动函数:http://www.xuanfengge.com/easeing/easeing/ cubic-bezier:http://cubic-bezie

[控件] 动态实时设置CAShapeLayer贝塞尔曲线的坐标点

动态实时设置CAShapeLayer贝塞尔曲线的坐标点 效果图: 源码: PathDirectionView.h 与 PathDirectionView.m // // PathDirectionView.h // Path // // Created by XianMingYou on 15/2/27. // Copyright (c) 2015年 XianMingYou. All rights reserved. // #import <UIKit/UIKit.h> #import &qu