自定义View

自定义View(七)Path 贝塞尔曲线

2018-11-14  本文已影响0人  光羽隼

简单点说,贝塞尔曲线在Android上就是用来画曲线的。
贝塞尔曲线是按阶分的,曲线有数据点和控制点两个重要参数绘制出来的,数据点是曲线的两端,控制点是控制曲线的弯曲程度。n阶曲线有n-1个控制点,所以一阶曲线是没有控制点的,是一条直线。
Path中关于贝塞尔曲线的方法只有二阶曲线(quadTo)和三阶曲线(cubicTo)。再复杂的曲线可以使用二阶曲线或者三阶曲线复合而成,也可以自己动手套公式画出来。

二阶贝塞尔曲线
上图中B点是控制点,A和C是数据点
三阶贝塞尔曲线
上图中B和C点是控制点,A和D是数据点
这里还提供了一个练习贝塞尔曲线的网站The Bézier Game
废话不多说,直接讲path中提供的两个方法:

quadTo() 二阶贝塞尔曲线

        Path path = new Path();

        path.moveTo(start.x,start.y);
        path.quadTo(control.x,control.y,end.x,end.y);

        canvas.drawPath(path, mPaint);

上边例子中control.x和control.y是二阶贝塞尔曲线的控制点的坐标;end.x和end.y是曲线的重点的坐标点。起点是moveTo中的参数。


二阶贝塞尔举例

cublicTo()三阶贝塞尔曲线

        Path path = new Path();

        path.moveTo(start.x, start.y);
        path.cubicTo(control1.x, control1.y, control2.x,control2.y, end.x, end.y);

        canvas.drawPath(path, mPaint);

和二阶不同,三阶贝塞尔曲线有两个控制点,就是cublicTo方法中的contro1和control2这两个点。


三阶贝塞尔曲线举例

我们平常见到的app中的小圆点的拖拽,天气预报中的曲线图的变化,都是时时根据计算不断地改变数据点和控制点得到的。数据点和控制点改变,就会改变曲线的形态。

上一篇下一篇

猜你喜欢

热点阅读