Android 贝塞尔曲线的实现（一）
什么是贝塞尔曲线
简单的来说贝塞尔曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，带来视觉上的冲击，我们可以利用它来画出各种意想不到的曲线，
这里就不在列出贝塞尔曲线的繁琐定义及推导了，感兴趣的小伙伴可自行百度。
贝塞尔曲线分为一阶贝塞尔曲线，二阶贝塞尔曲线，三阶贝塞尔曲线甚至多阶。
对于Android开发十分友好，已经为我们封装好了简单的api供使用。
AndroidApi
二阶贝塞尔绘制API：
公式：
B（t）为当前的运动坐标 P0表示起始固定点，P1表示贝塞尔曲线控制点，P2表示结束固定点。
简单的来说我们确定固定点（起始固定点（startX,startY）,终止固定点（endX,endY）），决定曲线变化的是控制点
（controllX,controllY），我们通过改变控制点来改变贝塞尔曲线的形状。
mBezierPath.moveTo(startX,startY);
mBezierPath.quadTo(controllX,controllY,endX,endY);
canvas.drawPath(mBezierPath, mCustonPaint);
三阶贝塞尔绘制API：
公式：
B（t）为当前的运动坐标 P0表示起始固定点，P1表示贝塞尔曲线左控制点，P2表示贝塞尔曲线右控制点，P3表示结束固定点。
简单的来说我们确定固定点（起始固定点（startX，startY）,终止固定点（endX,endY）），决定曲线变化的是控制点（左控制点（eventLeftX,eventLeftY），右控制点）（eventRightX,eventRightY），我们通过改变控制点来改变贝塞尔曲线的形状。
path.moveTo(startX, startY);
path.cubicTo(eventLeftX, eventLeftY, eventRightX, eventRightY, endX, endY);
canvas.drawPath(path, mCustonPaint);
贝塞尔曲线原理
一阶贝塞尔曲线
原理图：
原理：
线性贝塞尔曲线函数中的 t 会经过由 P0 至P1 的 B(t) 所描述的曲线。例如当 t=0.25时，B(t) 即一条由点 P0 至 P1 路径的四分之一处。就像由 0 至 1 的连续 t，B(t) 描述一条由 P0 至 P1 的直线。
实现：
一阶贝塞尔曲线其实就是一条直线，实现相当简单这里不再演示。
二阶贝塞尔曲线
原理图：
原理：
为建构二次贝塞尔曲线，可以中介点 Q0 和 Q1 作为由 0 至 1 的 t：
由 P0 至 P1 的连续点 Q0，描述一条线性贝塞尔曲线。
由 P1 至 P2 的连续点 Q1，描述一条线性贝塞尔曲线。
由 Q0 至 Q1 的连续点 B(t)，描述一条二次贝塞尔曲线。
实现：
下面我们利用Android的api来绘制贝塞尔曲线
效果图如下：
代码：
实现出来非常简单，这里列出核心代码
@Override
protected void onDraw(Canvas canvas) {
Path path = new Path();
path.reset();
path.moveTo(startX, startY);
path.quadTo(eventX, eventY, endX, endY);
canvas.drawPath(path, mCustonPaint);
canvas.drawCircle(startX, startY, 25, mCustomCirlePaint);//左固定点圆
canvas.drawCircle(endX, endY, 25, mCustomCirlePaint);//右固定点圆
canvas.drawCircle(eventX, eventY, 25, mCustomCirlePaint);//控制点圆
canvas.drawLine(startX, startY, eventX, eventY, mCustomLinePaint);//路径连线
canvas.drawLine(eventX, eventY, endX, endY, mCustomLinePaint);//路径连线
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_MOVE:
eventX = (int) event.getX();
eventY = (int) event.getY();
postInvalidate();
break;
}
return true;
}
三阶贝塞尔曲线
原理图：
原理：
阶贝塞尔曲线其实就是在二阶的基础上，再增加一条边线。
实现：
下面我们利用Android的api来绘制贝塞尔曲线
效果图如下：
核心代码实现：
@Override
protected void onDraw(Canvas canvas) {
Path path = new Path();
path.moveTo(startX, startY);
path.cubicTo(eventLeftX, eventLeftY, eventRightX, eventRightY, endX, endY);
canvas.drawPath(path, mCustonPaint);
canvas.drawCircle(startX, startY, 25, mCustomCirlePaint);//左固定点圆
canvas.drawCircle(endX, endY, 25, mCustomCirlePaint);//右固定点圆
canvas.drawCircle(eventLeftX, eventLeftY, 25, mCustomCirlePaint);//左控制点圆
canvas.drawCircle(eventRightX, eventRightY, 25, mCustomCirlePaint);//右控制点圆
canvas.drawLine(startX, startY, eventLeftX, eventLeftY, mCustomLinePaint);//路径连线
canvas.drawLine(eventRightX, eventRightY, endX, endY, mCustomLinePaint);//路径连线
canvas.drawLine(eventLeftX, eventLeftY, eventRightX, eventRightY, mCustomLinePaint);//路径连线
path.reset();
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_MOVE:
if (isMoveLeft) {
eventLeftX = (int) event.getX();
eventLeftY = (int) event.getY();
} else {
eventRightX = (int) event.getX();
eventRightY = (int) event.getY();
}
postInvalidate();
break;
}
return true;
}
到这里我们就实现了简单贝塞尔曲线。
详细代码
二阶贝塞尔曲线
/**
* @description：二阶贝塞尔曲线实现
* @Author MRyan
* @Date 2020/3/4 10:56
* @Version 1.0
*/
public class BaseBezier2 extends View {
private int mCustomSize;
private int mCustomColor;
private Paint mCustonPaint;
private Paint mCustomCirlePaint;
private int mSize;
private int weight;
private int height;
private int startX;
private int startY;
private int endX;
private int endY;
private int eventX;
private int eventY;
private Paint mCustomLinePaint;
private Boolean isClean = false;
public BaseBezier2(Context context) {
super(context);
}
public BaseBezier2(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
initAttr(context, attrs);
initPaint();
}
public BaseBezier2(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, 0);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
weight = MeasureSpec.getSize(widthMeasureSpec);
height = MeasureSpec.getSize(heightMeasureSpec);
setMeasuredDimension(weight, height);
startX = weight / 2 - 500;
startY = height / 2;
endX = weight / 2 + 500;
endY = height / 2;
eventX = weight / 2;
eventY = height / 2 - 500;
}
@Override
protected void onDraw(Canvas canvas) {
Path path = new Path();
path.reset();
path.moveTo(startX, startY);
path.quadTo(eventX, eventY, endX, endY);
canvas.drawPath(path, mCustonPaint);
canvas.drawCircle(startX, startY, 25, mCustomCirlePaint);//左固定点圆
canvas.drawCircle(endX, endY, 25, mCustomCirlePaint);//右固定点圆
canvas.drawCircle(eventX, eventY, 25, mCustomCirlePaint);//控制点圆
canvas.drawLine(startX, startY, eventX, eventY, mCustomLinePaint);//路径连线
canvas.drawLine(eventX, eventY, endX, endY, mCustomLinePaint);//路径连线
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_MOVE:
eventX = (int) event.getX();
eventY = (int) event.getY();
postInvalidate();
break;
}
return true;
}
private void initPaint() {
mCustonPaint = new Paint();
mCustonPaint.setColor(mCustomColor);
mCustonPaint.setAntiAlias(true);
mCustonPaint.setStrokeWidth(20);
mCustonPaint.setStyle(Paint.Style.STROKE);
mCustomCirlePaint = new Paint();
mCustomCirlePaint.setColor(Color.parseColor("#ffffff"));
mCustomCirlePaint.setAntiAlias(true);
mCustomCirlePaint.setStrokeWidth(17);
mCustomCirlePaint.setStyle(Paint.Style.STROKE);
mCustomLinePaint = new Paint();
mCustomLinePaint.setColor(Color.parseColor("#ffffff"));
mCustomLinePaint.setAntiAlias(true);
mCustomLinePaint.setStrokeWidth(13);
}
private void initAttr(Context context, AttributeSet attrs) {
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.BaseBezier2);
mCustomColor = typedArray.getColor(R.styleable.BaseBezier2_custom_color2, mCustomColor);
mCustomSize = (int) typedArray.getDimension(R.styleable.BaseBezier2_custom_size2, mCustomSize);
typedArray.recycle();
}
public void cleanSub() {
if (onIsCleanSubListener != null) {
onIsCleanSubListener.onCleanSub(isClean);
}
isClean = false;
mCustomLinePaint.setAlpha(255);
postInvalidate();
}
public void Sub() {
if (onIsCleanSubListener != null) {
onIsCleanSubListener.onCleanSub(isClean);
}
isClean = true;
mCustomLinePaint.setAlpha(0);
postInvalidate();
}
/**
* 是否清除辅助线
*/
public void iscleanSub() {
if (isClean) {
cleanSub();
} else {
Sub();
}
}
/**
* 暴露接口
*/
public onIsCleanSubListener2 onIsCleanSubListener;
public interface onIsCleanSubListener2 {
void onCleanSub(Boolean isclean);
}
public void setOnIsCleanSubListener(onIsCleanSubListener2 onIsCleanSubListener) {
this.onIsCleanSubListener = onIsCleanSubListener;
}
}
三阶贝塞尔曲线
/**
* @description：三阶贝塞尔曲线实现
* @Author MRyan
* @Date 2020/3/4 10:56
* @Version 1.0
*/
public class BaseBezier3 extends View {
private int mCustomSize;
private int mCustomColor;
private Paint mCustonPaint;
private Paint mCustomCirlePaint;
private int mSize;
private int weight;
private int height;
private int startX;
private int startY;
private int endX;
private int endY;
private int eventLeftX;
private int eventLeftY;
private int eventRightX;
private int eventRightY;
private Paint mCustomLinePaint;
private boolean isMoveLeft = true;
private boolean isClean = false;
public BaseBezier3(Context context) {
super(context);
}
public BaseBezier3(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
initAttr(context, attrs);
initPaint();
}
public BaseBezier3(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, 0);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
weight = MeasureSpec.getSize(widthMeasureSpec);
height = MeasureSpec.getSize(heightMeasureSpec);
setMeasuredDimension(weight, height);
startX = weight / 2 - 500;
startY = height / 2;
endX = weight / 2 + 500;
endY = height / 2;
eventLeftX = weight / 2 / 2;
eventLeftY = height / 2 - 500;
eventRightX = weight / 4 * 3;
eventRightY = height / 2 - 500;
}
@Override
protected void onDraw(Canvas canvas) {
Path path = new Path();
path.moveTo(startX, startY);
path.cubicTo(eventLeftX, eventLeftY, eventRightX, eventRightY, endX, endY);
canvas.drawPath(path, mCustonPaint);
canvas.drawCircle(startX, startY, 25, mCustomCirlePaint);//左固定点圆
canvas.drawCircle(endX, endY, 25, mCustomCirlePaint);//右固定点圆
canvas.drawCircle(eventLeftX, eventLeftY, 25, mCustomCirlePaint);//左控制点圆
canvas.drawCircle(eventRightX, eventRightY, 25, mCustomCirlePaint);//右控制点圆
canvas.drawLine(startX, startY, eventLeftX, eventLeftY, mCustomLinePaint);//路径连线
canvas.drawLine(eventRightX, eventRightY, endX, endY, mCustomLinePaint);//路径连线
canvas.drawLine(eventLeftX, eventLeftY, eventRightX, eventRightY, mCustomLinePaint);//路径连线
path.reset();
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_MOVE:
if (isMoveLeft) {
eventLeftX = (int) event.getX();
eventLeftY = (int) event.getY();
} else {
eventRightX = (int) event.getX();
eventRightY = (int) event.getY();
}
postInvalidate();
break;
}
return true;
}
//移动左控制点
public void moveLeft() {
isMoveLeft = true;
}
//移动右控制点
public void moveRight() {
isMoveLeft = false;
}
private void initPaint() {
mCustonPaint = new Paint();
mCustonPaint.setColor(mCustomColor);
mCustonPaint.setAntiAlias(true);
mCustonPaint.setStrokeWidth(20);
mCustonPaint.setStyle(Paint.Style.STROKE);
mCustomCirlePaint = new Paint();
mCustomCirlePaint.setColor(Color.parseColor("#ffffff"));
mCustomCirlePaint.setAntiAlias(true);
mCustomCirlePaint.setStrokeWidth(17);
mCustomCirlePaint.setStyle(Paint.Style.STROKE);
mCustomLinePaint = new Paint();
mCustomLinePaint.setColor(Color.parseColor("#ffffff"));
mCustomLinePaint.setAntiAlias(true);
mCustomLinePaint.setStrokeWidth(13);
}
private void initAttr(Context context, AttributeSet attrs) {
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.BaseBezier3);
mCustomColor = typedArray.getColor(R.styleable.BaseBezier3_custom_color3, mCustomColor);
mCustomSize = (int) typedArray.getDimension(R.styleable.BaseBezier3_custom_size3, mCustomSize);
typedArray.recycle();
}
public void cleanSub() {
if (onIsCleanSubListener != null) {
onIsCleanSubListener.onCleanSub(isClean);
}
isClean = false;
mCustomLinePaint.setAlpha(255);
postInvalidate();
}
public void Sub() {
if (onIsCleanSubListener != null) {
onIsCleanSubListener.onCleanSub(isClean);
}
isClean = true;
mCustomLinePaint.setAlpha(0);
postInvalidate();
}
/**
* 是否清除辅助线
*/
public void iscleanSub() {
if (isClean) {
cleanSub();
} else {
Sub();
}
}
/**
* 暴露接口
*/
public onIsCleanSubListener onIsCleanSubListener;
public interface onIsCleanSubListener {
void onCleanSub(Boolean isclean);
}
public void setOnIsCleanSubListener(BaseBezier3.onIsCleanSubListener onIsCleanSubListener) {
this.onIsCleanSubListener = onIsCleanSubListener;
}
}
通过贝塞尔曲线可以实现很多好看的效果，例如
下一节我们一起实现这两个动画效果，我们下一节再见。
附上项目源码
项目源码