首先我们要知道什么是贝赛尔曲线,贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋,我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的(摘自百科)。
还有一堆数学公式。当然,在Android中,已经给我们提供了两个方法,来给我们画贝塞尔曲线,
在这里,推荐看一下这个编文章《//www.greatytc.com/p/12fcc3fedbbc》
,将的很清楚,主要是我们要理解,起始点、控制点、结束点。看明白后还是很容易的,没什么难度。
/**
* Add a quadratic bezier from the last point, approaching control point
* (x1,y1), and ending at (x2,y2). If no moveTo() call has been made for
* this contour, the first point is automatically set to (0,0).
*
* @param x1 The x-coordinate of the control point on a quadratic curve
* @param y1 The y-coordinate of the control point on a quadratic curve
* @param x2 The x-coordinate of the end point on a quadratic curve
* @param y2 The y-coordinate of the end point on a quadratic curve
*/
quadTo(float x1, float y1, float x2, float y2)
注释以及很清楚了,第一个参数是控制点的x坐标,第二个是参数是控制点y坐标,第三个参数是结束点x坐标和y坐标。
P1的坐标就是控制点,P2是结束点。
/**
* Same as quadTo, but the coordinates are considered relative to the last
* point on this contour. If there is no previous point, then a moveTo(0,0)
* is inserted automatically.
*
* @param dx1 The amount to add to the x-coordinate of the last point on
* this contour, for the control point of a quadratic curve
* @param dy1 The amount to add to the y-coordinate of the last point on
* this contour, for the control point of a quadratic curve
* @param dx2 The amount to add to the x-coordinate of the last point on
* this contour, for the end point of a quadratic curve
* @param dy2 The amount to add to the y-coordinate of the last point on
* this contour, for the end point of a quadratic curve
*/
public void rQuadTo(float dx1, float dy1, float dx2, float dy2) {
isSimplePath = false;
nRQuadTo(mNativePath, dx1, dy1, dx2, dy2);
}
这个API也是画贝赛尔曲线的,不过和quadTo()方法不一样的是,这个4个参数。前两个参数x,y表示并不是具体的坐标,而是,相对于上一个曲线的结尾点的如上图的P2的x,y值增量值,假如P2(100,100) ,那么我们把参数设置为rQuadTo(50,50,100,100),那么就是表示,下个曲线的控制点坐标为(100+50,100+50),结束点为(100+100,100+100)。如果没有参考的结尾点,那么就相对(0,0)点。
示例:
public class BezierView extends View {
public BezierView(Context context) {
super(context);
}
public BezierView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
Paint mPaint;
Path mBezierpath;
Path mPointPath;
Point mControlPoint;
Point mStartPoint;
Point mEndPoint;
private void init() {
mPaint = new Paint();
mPaint.setColor(Color.BLACK);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(5);
mBezierpath = new Path();
mPointPath = new Path();
//3个点,起始点、控制点、尾点
mStartPoint = new Point();
mStartPoint.set(100,300);
mControlPoint = new Point();
mControlPoint.set(300,100);
mEndPoint = new Point();
mEndPoint.set(500,500);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//贝塞尔
mBezierpath.moveTo(mStartPoint.x,mStartPoint.y);
mBezierpath.quadTo(mControlPoint.x,mControlPoint.y,mEndPoint.x,mEndPoint.y);
mBezierpath.rQuadTo(200,300,400,-200);
//连接线
mPointPath.moveTo(mStartPoint.x,mStartPoint.y);
mPointPath.lineTo(mControlPoint.x,mControlPoint.y);
mPointPath.lineTo(mEndPoint.x,mEndPoint.y);
//绘制起始点、控制点、终点的连接线
canvas.drawPath(mPointPath,mPaint);
mPaint.setColor(Color.RED);
//绘制贝塞尔曲线
canvas.drawPath(mBezierpath,mPaint);
}
}