自定义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这两个点。
三阶贝塞尔曲线举例