Android开发贝塞尔曲线

一、效果图

贝塞尔曲线效果图.png

看这圆弧是不是你想要的，这就应用到了贝塞尔曲线，后面会给出它的源码

二、什么是贝塞尔曲线

就是按照比例确定点，点构成线。

绘制一段二阶贝塞尔曲线

绘制一段二阶贝塞尔曲线需要三个点：一个起始点，一个终点，一个控制点。
控制点的位置不同，决定曲线的弯曲程度不同。

假设：起始点A，终点C，控制点B
原理：连接AB，BC，并在AB上取点D，BC上取点E，使其满足条件AD/AB = BE/BC
然后连接DE，取点F，使其满足AD/AB = BE/BC = DF/DE

这样获取到的点F就是贝塞尔曲线上的一个点了。

示意图：

贝塞尔曲线.png

这个示意图可能描述得不是很清楚，下面来看下动图：

20170723231043085.gif

三、Android中的二阶贝塞尔曲线

绘制二阶贝塞尔曲线的方法为：quadTo(float x1, float y1, float x2, float y2)

示例代码：

mPath.moveTo(mStartPoint.x, mStartPoint.y);
// 添加贝塞尔曲线
mPath.quadTo(mControlPoint.x, mControlPoint.y, mEndPoint.x, mEndPoint.y);
// 绘制
canvas.drawPath(mPath, mPaint);  

最开始效果图的源码如下：

public class ArcHeaderView extends View {
private Paint mPaint;
private PointF mStartPoint,mEndPoint,mControlPoint;
private int mArcHeight; //圆弧高度
private int mSolidColor; //填充的颜色
private Path mPath = new Path();

public ArcHeaderView(Context context) {
    this(context,null);
}

public ArcHeaderView(Context context, @Nullable AttributeSet attrs) {
    this(context, attrs,0);
}

public ArcHeaderView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);

    init();
}

private void init(){
    mPaint = new Paint();
    mPaint.setAntiAlias(true);
    mPaint.setStyle(Paint.Style.FILL);

    mStartPoint = new PointF(0, 0);
    mEndPoint = new PointF(0, 0);
    mControlPoint = new PointF(0, 0);

    mArcHeight = UtilHelper.INSTANCE.dip2px(getContext(),52);
    mSolidColor = Color.parseColor("#ff1e2b39");

}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);

    mPath.reset();
    //先画矩形
    mPath.moveTo(0,0);
    mPath.addRect(0, 0, w, h - mArcHeight, Path.Direction.CCW);

    mStartPoint.x = 0;
    mStartPoint.y = h - mArcHeight;

    mEndPoint.x = w;
    mEndPoint.y = h - mArcHeight;

    mControlPoint.x = w / 2 ;
    mControlPoint.y = h + UtilHelper.INSTANCE.dip2px(getContext(),42);

    invalidate();
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    mPaint.setColor(mSolidColor);
    mPath.moveTo(mStartPoint.x, mStartPoint.y);
    mPath.quadTo(mControlPoint.x, mControlPoint.y, mEndPoint.x, mEndPoint.y);

    canvas.drawPath(mPath, mPaint);
}

/**
* @desc : 设置填充颜色
* @author : congge on 2019/11/25 9:51
**/
public void setColor(int solidColor){
    mSolidColor = solidColor;
    invalidate();
}
}