二次貝塞爾曲線

貝塞爾曲線簡介

貝塞爾曲線(Bézier curve)，又稱貝茲曲線或貝濟(jì)埃曲線，是應(yīng)用于二維圖形應(yīng)用程序的數(shù)學(xué)曲線。一般的矢量圖形軟件通過它來精確畫出曲線，貝茲曲線由線段與節(jié)點(diǎn)組成，節(jié)點(diǎn)是可拖動的支點(diǎn)，線段像可伸縮的皮筋，我們在繪圖工具上看到的鋼筆工具就是來做這種矢量曲線的。貝塞爾曲線是計(jì)算機(jī)圖形學(xué)中相當(dāng)重要的參數(shù)曲線，在一些比較成熟的位圖軟件中也有貝塞爾曲線工具，如PhotoShop等。在Flash4中還沒有完整的曲線工具，而在Flash5里面已經(jīng)提供出貝塞爾曲線工具。

貝塞爾曲線于1962，由法國工程師皮埃爾·貝塞爾（Pierre Bézier）所廣泛發(fā)表，他運(yùn)用貝塞爾曲線來為汽車的主體進(jìn)行設(shè)計(jì)。貝塞爾曲線最初由Paul de Casteljau于1959年運(yùn)用de Casteljau演算法開發(fā)，以穩(wěn)定數(shù)值的方法求出貝茲曲線。

以上內(nèi)容從采取自百度百科

貝塞爾曲線目前被廣泛應(yīng)用于計(jì)算機(jī)制圖中，可以說貝塞爾曲線奠定了計(jì)算機(jī)制圖的基礎(chǔ)。

Android中繪制Path的API

Android中繪制Path常用方法：

reset不保留內(nèi)部數(shù)據(jù)結(jié)構(gòu)，但會保留FillType.
rewind會保留內(nèi)部的數(shù)據(jù)結(jié)構(gòu)，但不保留FillType |
| 矩陣操作 | transform | 矩陣變換 |

貝塞爾曲線應(yīng)用簡單場景：

• QQ小紅點(diǎn)拖拽效果
• 平滑的折線圖的制作
• 閱讀軟件的翻書效果

繪制貝塞爾曲線

一階貝塞爾曲線

一階貝塞爾曲線的原理就是一條直線，其實(shí)就是直接畫了一個(gè)Path出來，在這里不做過多的介紹，本文主要介紹的是二階的貝塞爾曲線。

二階貝塞爾曲線

二階貝塞爾曲線效果圖：

bezier

實(shí)現(xiàn)原理

二階曲線由兩個(gè)數(shù)據(jù)點(diǎn)(A 和 C)，一個(gè)控制點(diǎn)(B)來描述曲線狀態(tài)，大致如下：

image

上圖中紅色曲線部分就是傳說中的二階貝塞爾曲線，那么這條紅色曲線是如何生成的呢？接下來我們就以其中的一個(gè)狀態(tài)分析一下：

image

連接AB BC，并在AB上取點(diǎn)D，BC上取點(diǎn)E，使其滿足條件：

image.png

image

連接DE，取點(diǎn)F，使得:

AD／AB = BE／BC = DF／DE

這樣獲取到的點(diǎn)F就是貝塞爾曲線上的一個(gè)點(diǎn)，動態(tài)過程如下：

image

實(shí)現(xiàn)代碼

public class Bezier2 extends View {

    private Paint mPaint;
    private int centerX, centerY;

    private PointF start, end, control;

    public Bezier2(Context context) {
        super(context);
        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 Bezier2(Context context, @Nullable 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);
        control = new PointF(0,0);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        centerX = w/2;
        centerY = h/2;

        // 初始化數(shù)據(jù)點(diǎn)和控制點(diǎn)的位置
        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) {
        // 根據(jù)觸摸位置更新控制點(diǎn)，并提示重繪
        control.x = event.getX();
        control.y = event.getY();
        invalidate();
        return true;
    }

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

        // 繪制數(shù)據(jù)點(diǎn)和控制點(diǎn)
        mPaint.setColor(Color.GRAY);
        mPaint.setStrokeWidth(20);
        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();

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

        canvas.drawPath(path, mPaint);
    }
}

項(xiàng)目地址:https://github.com/pengMaster/Bezier