Android自定義View繪制貝塞爾曲線的方法

Posted on by

本文實例為大傢分享瞭Android自定義View繪制貝塞爾曲線的具體代碼，供大傢參考，具體內容如下

在平面內任選 3 個不共線的點，依次用線段連接。

在第一條線段上任選一個點 D。計算該點到線段起點的距離 AD，與該線段總長 AB 的比例。

根據上一步得到的比例，從第二條線段上找出對應的點 E，使得 AD:AB = BE:BC。

連接這兩點 DE。

從新的線段 DE 上再次找出相同比例的點 F，使得 DF:DE = AD:AB = BE:BC。

到這裡，我們就確定瞭貝塞爾曲線上的一個點 F。接下來，請稍微回想一下中學所學的極限知識，讓選取的點 D 在第一條線段上從起點 A 移動到終點 B，找出所有的貝塞爾曲線上的點 F。所有的點找出來之後，我們也得到瞭這條貝塞爾曲線。

回過頭來看這條貝塞爾曲線，為瞭確定曲線上的一個點，需要進行兩輪取點的操作，因此我們稱得到的貝塞爾曲線為二次曲線（這樣記憶很直觀，但曲線的次數其實是由前面提到的伯恩斯坦多項式決定的）。

三個點的基本關系如下：

Android 的Path類提供瞭繪制二階貝塞爾曲線的方法，使用方法如下：

public class CurveView extends View{

    private float mSupX;
    private float mSupY;

    private int mWidth;
    private int mHeight;

    private Paint mPaint;
    private Path mPath;

    public CurveView(Context context) {
        super(context);
    }

    public CurveView(Context context, AttributeSet attrs) {
        super(context, attrs, 0);
        mPaint = new Paint();
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(10);
        mPath = new Path();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        if (widthMode == MeasureSpec.EXACTLY) {
            mWidth = widthSize;
        }
        if (heightMode == MeasureSpec.EXACTLY) {
            mHeight = heightSize;
        }
        setMeasuredDimension(mWidth, mHeight);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        mPath.reset();
        mPath.moveTo(mWidth / 5, mHeight / 2);  //設置起點
        mPath.quadTo(mSupX, mSupY, mWidth * 4 / 5, mHeight / 2);  //設置輔助點和終點
        canvas.drawPath(mPath, mPaint);
        canvas.drawPoint(mSupX, mSupY, mPaint);
        super.onDraw(canvas);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_MOVE:
                mSupX = event.getX();
                mSupY = event.getY();
                invalidate();
        }
        return true;
    }
}

Draw以後效果如下：

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：