Android View专题4--贝塞尔曲线

概念：

 What：贝塞尔曲线是用一系列点来控制曲线状态的。可以用来实时绘制曲线。
 How:
 Why:

实例：

贝赛尔曲线最终2.gif

弹性的圆

实例1：让一个圆渐变成为心形：

贝赛尔曲线最终2.gif

1 绘制坐标

坐标系.png

 //绘制坐标系
private void drawCoordinate(Canvas canvas) {
    canvas.save();
    mPaint.setStrokeWidth(8);
    mPaint.setColor(getResources().getColor(R.color.gray));
    //绘制x轴
    canvas.drawLine(0, mCenterY, mCenterX * 2, mCenterY, mPaint);
    canvas.drawLine(mCenterX, 0, mCenterX, mCenterY * 2, mPaint);

    canvas.restore();
}

2 绘制数据点和辅助点，并连接他们：

辅助线.png

 //绘制辅助线
public void drawLine(Canvas canvas) {
    //绘制数据点
    mPaint.setColor(getResources().getColor(R.color.blue));
    mPaint.setStrokeWidth(8);
    for (int index = 0; index < mData.length; index += 2) {
        canvas.drawCircle(mData[index], mData[index + 1], 3, mPaint);
    }
    //绘制控制点
    mPaint.setColor(getResources().getColor(R.color.green));
    for (int index = 0; index < mCtrl.length; index += 2) {
        canvas.drawCircle(mCtrl[index], mCtrl[index + 1], 3, mPaint);
    }
    //绘制辅助线
    for (int i = 2, j = 2; i < 8; i += 2, j += 4) {
        canvas.drawLine(mData[i], mData[i + 1], mCtrl[j], mCtrl[j + 1], mPaint);
        canvas.drawLine(mData[i], mData[i + 1], mCtrl[j + 2], mCtrl[j + 3], mPaint);
    }
    canvas.drawLine(mData[0], mData[1], mCtrl[0], mCtrl[1], mPaint);
    canvas.drawLine(mData[0], mData[1], mCtrl[14], mCtrl[15], mPaint);
}

3 绘制贝赛尔曲线：

贝赛尔曲线.png

//绘制贝赛尔曲线
public void drawbezier(Canvas canvas) {
    mPaint.setColor(getResources().getColor(R.color.red));
    mPaint.setStrokeWidth(15);
    Path path = new Path();
    path.moveTo(mData[0], mData[1]);

    path.cubicTo(mCtrl[0], mCtrl[1], mCtrl[2], mCtrl[3], mData[2], mData[3]);
    path.cubicTo(mCtrl[4], mCtrl[5], mCtrl[6], mCtrl[7], mData[4], mData[5]);
    path.cubicTo(mCtrl[8], mCtrl[9], mCtrl[10], mCtrl[11], mData[6], mData[7]);
    path.cubicTo(mCtrl[12], mCtrl[13], mCtrl[14], mCtrl[15], mData[0], mData[1]);

    canvas.drawPath(path, mPaint);
}

4 执行循环，动态变成心形

贝赛尔曲线最终.gif

 //绘制贝赛尔曲线
public void drawbezier(Canvas canvas) {
    mPaint.setColor(getResources().getColor(R.color.red));
    mPaint.setStrokeWidth(15);
    Path path = new Path();
    path.moveTo(mData[0], mData[1]);

    path.cubicTo(mCtrl[0], mCtrl[1], mCtrl[2], mCtrl[3], mData[2], mData[3]);
    path.cubicTo(mCtrl[4], mCtrl[5], mCtrl[6], mCtrl[7], mData[4], mData[5]);
    path.cubicTo(mCtrl[8], mCtrl[9], mCtrl[10], mCtrl[11], mData[6], mData[7]);
    path.cubicTo(mCtrl[12], mCtrl[13], mCtrl[14], mCtrl[15], mData[0], mData[1]);

    canvas.drawPath(path, mPaint);


    mCurrent += mPiece;
    if (mCurrent < mDuration){

        mData[1] -= 120/mCount;
        mCtrl[7] += 80/mCount;
        mCtrl[9] += 80/mCount;

        mCtrl[4] -= 20/mCount;
        mCtrl[10] += 20/mCount;

        postInvalidateDelayed((long) mPiece);
    }

}

5 注释掉1，2步骤，即可。

贝赛尔曲线最终2.gif

实例2：弹性的圆：

弹性的圆

Demo源码：

GitHub:ExplainView

参考：

贝塞尔曲线开发的艺术
安卓自定义View进阶-Path之贝塞尔曲线
网页版本绘制
学习，思维三部曲：WHAT、HOW、WHY（通过现象看本质）
Android 贝塞尔曲线，QQ 删除小红点类似效果实现
Iwfu-贝塞尔曲线配合动画效果的小例子
三次贝塞尔曲线练习之弹性的圆
PullBezierZoomView 一个具有贝塞尔曲线下拉效果的自定义view
从Android动画到贝塞尔曲线
贝塞尔曲线实战--BackgroundView
贝塞尔曲线之购物车动画效果