Android 贝塞尔曲线详解释和贝塞尔曲线路径动画（一）(看完包你会理解)

来源：互联网发布：海尔网络电视价格编辑：程序博客网时间：2024/06/06 09:46

工作这么久，第一次写博客，说来也惭愧，在创业公司没时间写博客啊，好不容易闲下来，就把贝塞尔整理下，写的很简单只是为了更好地理解

首先看下效果图

这里做下简单介绍这是一阶贝塞尔曲线，其实很简单需要三个点，起点控制点和终点

path.moveTo(start.x,start.y);

path.quadTo(control.x,control.y,end.x,end.y);

//moveTo 是将画笔放到这个位置

//quadTo(x1,y1,x2,y2) x1 y1 是控制点的坐标也就是效果图中鼠标那个点

//x2 y2 是终点的坐标

很简单吧

接下来看二阶效果图

这里有四个点分别是起点终点和两个控制点

path.moveTo(start.x, start.y);path.cubicTo(control1.x, control1.y, control2.x,control2.y, end.x, end.y);

和一阶一样只是多个控制点而已

三阶以及更高只是多个控制点，这里不做解释了。

我把源码发在下面，下一章贝塞尔路径动画

一阶：

import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Path;import android.graphics.PointF;import android.util.AttributeSet;import android.util.Log;import android.view.MotionEvent;import android.view.View;/** * Created by trc on 17/4/26. */public class Bezier extends View {    private Paint mPaint;    private int centerX, centerY;    /**     * 贝塞尔曲线 起点 终点 中间的控制点     */    private PointF start, end, control;    public Bezier(Context context) {        super(context);        init();    }    private void init() {        mPaint = new Paint();        mPaint.setColor(Color.BLACK);        mPaint.setStrokeWidth(8);        mPaint.setStyle(Paint.Style.STROKE);        mPaint.setTextSize(60);        start = new PointF(0, 0);        end = new PointF(0, 0);        control = new PointF(0, 0);    }    public Bezier(Context context, AttributeSet attrs) {        super(context, attrs);        init();    }    public Bezier(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        init();    }    public Bezier(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {        super(context, attrs, defStyleAttr, defStyleRes);        init();    }    @Override    protected void onSizeChanged(int w, int h, int oldw, int oldh) {        super.onSizeChanged(w, h, oldw, oldh);        centerX = w / 2;        centerY = h / 2;        // 初始化数据点和控制点的位置        start.x = centerX - 200;        start.y = centerY;        end.x = centerX + 200;        end.y = centerY;        control.x = centerX;        control.y = centerY - 100;    }    @Override    public boolean onTouchEvent(MotionEvent event) {        // 根据触摸位置更新控制点，并提示重绘        control.x = event.getX();        control.y = event.getY();        invalidate();        return true;    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        // 绘制数据点和控制点        mPaint.setColor(Color.GRAY);        mPaint.setStrokeWidth(40);        canvas.drawPoint(start.x, start.y, mPaint);        canvas.drawPoint(end.x, end.y, mPaint);        canvas.drawPoint(control.x, control.y, mPaint);        // 绘制辅助线        mPaint.setStrokeWidth(4);        canvas.drawLine(start.x, start.y, control.x, control.y, mPaint);        canvas.drawLine(end.x, end.y, control.x, control.y, mPaint);        // 绘制贝塞尔曲线        mPaint.setColor(Color.RED);        mPaint.setStrokeWidth(8);        Path path = new Path();        //moveTo 是将画笔放到这个位置        path.moveTo(start.x, start.y);        path.quadTo(control.x, control.y, end.x, end.y);        // canvas.drawTextOnPath("1234567890", path, 100, 10, mPaint);        canvas.drawPath(path, mPaint);    }}

二阶：
import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Path;import android.graphics.PointF;import android.util.AttributeSet;import android.view.MotionEvent;import android.view.View;/** * Created by trc on 17/4/26. * 贝塞尔曲线 */public class Bezier2  extends View {    //    private Paint mPaint;    //    private int centerX, centerY;    // 起点 终点 第一个控制地那 第二个控制点    private PointF start, end, control1, control2;    //    private boolean mode = true;    public Bezier2(Context context) {        this(context, null);    }    public Bezier2(Context context, AttributeSet attrs) {        super(context, attrs);        mPaint = new Paint();        mPaint.setColor(Color.BLACK);        mPaint.setStrokeWidth(8);        mPaint.setStyle(Paint.Style.STROKE);        mPaint.setTextSize(60);        start = new PointF(0, 0);        end = new PointF(0, 0);        control1 = new PointF(0, 0);        control2 = new PointF(0, 0);    }    public void setMode(boolean mode) {        this.mode = mode;    }    @Override    protected void onSizeChanged(int w, int h, int oldw, int oldh) {        super.onSizeChanged(w, h, oldw, oldh);        centerX = w / 2;        centerY = h / 2;        // 初始化数据点和控制点的位置        start.x = centerX - 200;        start.y = centerY;        end.x = centerX + 200;        end.y = centerY;        control1.x = centerX;        control1.y = centerY - 100;        control2.x = centerX;        control2.y = centerY - 100;    }    @Override    public boolean onTouchEvent(MotionEvent event) {        // 根据触摸位置更新控制点，并提示重绘        if (mode) {            control1.x = event.getX();            control1.y = event.getY();        } else {            control2.x = event.getX();            control2.y = event.getY();        }        invalidate();        return true;    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        //drawCoordinateSystem(canvas);        // 绘制数据点和控制点        mPaint.setColor(Color.GRAY);        mPaint.setStrokeWidth(30);        canvas.drawPoint(start.x, start.y, mPaint);        canvas.drawPoint(end.x, end.y, mPaint);        canvas.drawPoint(control1.x, control1.y, mPaint);        canvas.drawPoint(control2.x, control2.y, mPaint);        mPaint.setStrokeWidth(2);        canvas.drawText("x:"+String.valueOf(control1.x).substring(0,4)+"y:"+ String.valueOf(control1.y).substring(0,4),control1.x,control1.y-40,mPaint);        canvas.drawText("x:"+String.valueOf(control2.x).substring(0,4)+"y:"+ String.valueOf(control2.y).substring(0,4),control2.x,control2.y-40,mPaint);        // 绘制辅助线        mPaint.setStrokeWidth(4);        canvas.drawLine(start.x, start.y, control1.x, control1.y, mPaint);        canvas.drawLine(control1.x, control1.y,control2.x, control2.y, mPaint);        canvas.drawLine(control2.x, control2.y,end.x, end.y, mPaint);        // 绘制贝塞尔曲线        mPaint.setColor(Color.RED);        mPaint.setStrokeWidth(8);        Path path = new Path();        path.moveTo(start.x, start.y);        path.cubicTo(control1.x, control1.y, control2.x,control2.y, end.x, end.y);        canvas.drawPath(path, mPaint);    }}

2 0