啥也不說了，先上效果圖：貝塞爾曲線于1962年，由法國工程師皮埃爾·貝塞爾（Pierre Bézier）所廣泛發(fā)表，他運用貝塞爾曲線來為汽車的主體進行設計。貝塞爾曲線最初由 Paul de Casteljau 于1959年運用de Casteljau 算法開發(fā)，以穩(wěn)定數(shù)值的方法求出貝塞爾曲線。
需用到Path方法理解：
mPath.moveTo ????移動到操作起始點坐標，不會進行繪制，只用于移動移動畫筆
mPath.lineTo ??? ???從一個點連線到另一個點，用于進行直線繪制
mPath.quadTo(x1, y1, x2, y2) ??????生成二次貝塞爾曲線，(x1,y1) 為控制點，(x2,y2)為結(jié)束點
mPath.cubicTo(x1, y1, x2, y2, x3, y3) ??????生成三次貝塞爾曲線， (x1,y1) 為控制點，(x2,y2)為控制點，(x3,y3) 為結(jié)束點；即與二階區(qū)別多一個控制點
日常哪些是貝塞爾曲線？
刷禮物；水滴動畫；翻書效果；天氣預報曲線圖等；
線性貝塞爾曲線函數(shù)中的 t 會經(jīng)過由 P0 至P1 的 B(t) 所描述的曲線。例如當 t=0.25時，B(t) 即一條由點 P0 至 P1 路徑的四分之一處。就像由 0 至 1 的連續(xù) t，B(t) 描述一條由 P0 至 P1 的直線。
為建構(gòu)二次貝塞爾曲線，可以中介點 Q0 和 Q1 作為由 0 至 1 的 t：
由 P0 至 P1 的連續(xù)點 Q0，描述一條線性貝塞爾曲線。
由 P1 至 P2 的連續(xù)點 Q1，描述一條線性貝塞爾曲線。
由 Q0 至 Q1 的連續(xù)點 B(t)，描述一條二次貝塞爾曲線。
對于三次曲線，可由線性貝塞爾曲線描述的中介點 Q0、Q1、Q2，和由二次曲線描述的點 R0、R1 所建構(gòu)：
二階貝塞爾曲線
1.以屏幕為中心繪制左右兩個定點，中心偏上繪制移動點；2.drawline()將3個點路徑相連；3.onTouchEvent()方法中獲取手勢的點；4.path.moveTo(startX,startY)從起始點開始繪制，path.quadTo(eventX,eventY,endX,endY)以觸碰點為控制點，右定點為結(jié)束點，繪制path。
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
public class DrawQuadToView extends View{
private int eventX,eventY;
private int centerX,centerY;
private int startX,startY;
private int endX,endY;
private Paint paint;
public DrawQuadToView(Context context) {
super(context);
init();
}
public DrawQuadToView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
paint = new Paint();
paint.setAntiAlias(true);
}
//測量大小完成以后回調(diào)
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
centerX = w/2;
centerY = h/2;
startX = centerX-250;
startY = centerY;
endX = centerX + 250;
endY = centerY;
eventX = centerX;
eventY = centerY - 250;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
paint.setColor(Color.GRAY);
//畫3個點
canvas.drawCircle(startX,startY,8,paint);
canvas.drawCircle(endX,endY,8,paint);
canvas.drawCircle(eventX,eventY,8,paint);
//繪制連線
paint.setStrokeWidth(3);
canvas.drawLine(startX,centerY,eventX,eventY,paint);
canvas.drawLine(endX,centerY,eventX,eventY,paint);
//畫二階貝塞爾曲線
paint.setColor(Color.GREEN);
paint.setStyle(Paint.Style.STROKE);
Path path = new Path();
path.moveTo(startX,startY);
path.quadTo(eventX,eventY,endX,endY);
canvas.drawPath(path,paint);
}
@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();
invalidate();
break;
}
return true;
}
}
三階貝塞爾曲線
1.繪制2個定點和2個移動點；2.繪制點路徑；3.選擇操作左控制點還是右控制點，即分別修改左右點坐標；4.以左定點為起點， path.cubicTo(leftX,leftY,rightX,rightY,endX,endY)，觸點1，觸點2為控制點，右定點為結(jié)束點繪制三階貝塞爾曲線。
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
public class DrawCubicView extends View{
private int leftX,leftY;
private int rightX,rightY;
private int centerX,centerY;
private int startX,startY;
private int endX,endY;
private Paint paint;
private boolean isMoveLeft;
public DrawCubicView(Context context) {
super(context);
init();
}
public DrawCubicView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
paint = new Paint();
paint.setAntiAlias(true);
}
//測量大小完成以后回調(diào)
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
centerX = w/2;
centerY = h/2;
startX = centerX-250;
startY = centerY;
endX = centerX + 250;
endY = centerY;
leftX = startX;
leftY = centerY-250;
rightX = endX;
rightY = endY - 250;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
paint.setColor(Color.GRAY);
//畫4個點
canvas.drawCircle(startX,startY,8,paint);
canvas.drawCircle(endX,endY,8,paint);
canvas.drawCircle(leftX,leftY,8,paint);
canvas.drawCircle(rightX,rightY,8,paint);
//繪制連線
paint.setStrokeWidth(3);
canvas.drawLine(startX,startY,leftX,leftY,paint);
canvas.drawLine(leftX,leftY,rightX,rightY,paint);
canvas.drawLine(rightX,rightY,endX,endY,paint);
//畫二階貝塞爾曲線
paint.setColor(Color.GREEN);
paint.setStyle(Paint.Style.STROKE);
Path path = new Path();
path.moveTo(startX,startY);
path.cubicTo(leftX,leftY,rightX,rightY,endX,endY);
canvas.drawPath(path,paint);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_MOVE:
if(isMoveLeft){
leftX = (int) event.getX();
leftY = (int) event.getY();
}else{
rightX = (int) event.getX();
rightY = (int) event.getY();
}
invalidate();
break;
}
return true;
}
public void moveLeft(){
isMoveLeft = true;
}
public void moveRight(){
isMoveLeft = false;
}
}
這篇是貝塞爾曲線的基本原理和操作實現(xiàn)，下一篇講解路徑坐標計算并實現(xiàn)直播刷禮物。
貝塞爾曲線仿美拍直播刷禮物
