贝塞尔曲线

Posted 2020-08-13 Coder QiangJJ

一、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.   
7.     mPath = new Path();  
8.     mPath.lineTo(150, 150);  
9. }  
10.   
11. @Override  
12. protected void onDraw(Canvas canvas) {  
13.     super.onDraw(canvas);  
14.     canvas.drawColor(Color.WHITE);  
15.     canvas.drawPath(mPath, mPaint);  
16.   
17. }  

此时屏幕上展现的效果即从屏幕上画了一条直线，从 (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.   
11. @Override  
12. protected void onDraw(Canvas canvas) {  
13.     super.onDraw(canvas);  
14.     canvas.drawColor(Color.WHITE);  
15.     canvas.drawPath(mPath, mPaint);  
16.     canvas.drawRect(mRectF, mPaint);  
17.   
18. }  

此时的效果如下：

我们可以看到此时多了一条线（处理成蓝色），由于弧线的起始点和 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.   
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 Paint mPaint;  
21.     private Path mPath;  
22.   
23.     public HeartView(Context context) {  
24.         super(context);  
25.         init();  
26.     }  
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.   
34.         mPath = new Path();  
35.         mPath.moveTo(START_POINT[0], START_POINT[1]);  
36.         mPath.quadTo(RIGHT_CONTROL_POINT[0], RIGHT_CONTROL_POINT[1], BOTTOM_POINT[0],  
37.                 BOTTOM_POINT[1]);  
38.         mPath.quadTo(LEFT_CONTROL_POINT[0], LEFT_CONTROL_POINT[1], START_POINT[0], START_POINT[1]);  
39.     }  
40.   
41.     @Override  
42.     protected void onDraw(Canvas canvas) {  
43.         super.onDraw(canvas);  
44.         canvas.drawColor(Color.WHITE);  
45.         canvas.drawPath(mPath, mPaint);  
46.   
47.         canvas.drawCircle(RIGHT_CONTROL_POINT[0], RIGHT_CONTROL_POINT[1], 5, mPaint);  
48.         canvas.drawCircle(LEFT_CONTROL_POINT[0], LEFT_CONTROL_POINT[1], 5, mPaint);  
49.     }  
50. }  

效果如下：

 

到这里，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.   
11.         @Override  
12.         public void onAnimationUpdate(ValueAnimator animation) {  
13.             float value = (Float) animation.getAnimatedValue();  
14.             // 获取当前点坐标封装到mCurrentPosition  
15.             mPathMeasure.getPosTan(value, mCurrentPosition, null);  
16.             postInvalidate();  
17.         }  
18.     });  
19.     valueAnimator.start();  
20. }  

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

 

 

[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.   
6.     canvas.drawCircle(RIGHT_CONTROL_POINT[0], RIGHT_CONTROL_POINT[1], 5, mPaint);  
7.     canvas.drawCircle(LEFT_CONTROL_POINT[0], LEFT_CONTROL_POINT[1], 5, mPaint);  
8.   
9.     // 绘制对应目标  
10.     canvas.drawCircle(mCurrentPosition[0], mCurrentPosition[1], 10, mPaint);  
11. }  

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

 

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

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

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

 

[html] view plain copy

 

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

 

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

以上是关于贝塞尔曲线的主要内容，如果未能解决你的问题，请参考以下文章

贝塞尔曲线

Android UI贝塞尔曲线 ① ( 一阶贝塞尔曲线 | 二阶贝塞尔曲线 )

贝塞尔曲线~~~

贝塞尔 平滑曲线

贝塞尔曲线是啥?

Android UI贝塞尔曲线 ⑥ ( 贝塞尔曲线递归算法原理 | 贝塞尔曲线递归算法实现 )