【Android UI】貝塞爾曲線 ③ ( 貝塞爾曲線關鍵點坐标記錄 | 二階貝塞爾曲線示例 )

文章目錄

• ​​一、貝塞爾曲線關鍵點坐标記錄​​
• ​​二、二階貝塞爾曲線示例​​
• ​​三、代碼示例​​

貝塞爾曲線參考 : ​​https://github.com/venshine/BezierMaker​​

一、貝塞爾曲線關鍵點坐标記錄

貝塞爾曲線 繪制時 , 使用 android.graphics.Path 記錄 貝塞爾曲線 的 ① 起始點 , ② 終止點 , 以及 ③ 若幹 控制點 ;

一階貝塞爾曲線有 個控制點 , 二階貝塞爾曲線有 個控制點 , 三階貝塞爾曲線有 個控制點 , , 有

二、二階貝塞爾曲線示例

建立 android.graphics.Path 執行個體對象後 , 首先調用 Path#moveTo

Path#moveTo 函數原型如下 :

/**
     * 将下一個輪廓的起點設定為點（x，y）。
     *
     * @param x 新輪廓起點的x坐标
     * @param y 新輪廓起點的y坐标
     */
    public void moveTo(float x, float y) {
        nMoveTo(mNativePath, x, y);
    }      

然後調用 Path#quadTo 方法 , 設定 二階貝塞爾曲線 的 控制點 和 終止點 ;

/**
     * 從最後一個點開始添加二次貝塞爾，
     * 接近控制點（x1，y1），并在（x2，y2）處結束。
     * 如果未對此輪廓進行moveTo（）調用，
     * 則第一個點将自動設定為（0,0）。
     *
     * @param x1 二次曲線上控制點的x坐标
     * @param y1 二次曲線上控制點的y坐标
     * @param x2 二次曲線端點的x坐标
     * @param y2 二次曲線端點的y坐标
     */
    public void quadTo(float x1, float y1, float x2, float y2) {
        isSimplePath = false;
        nQuadTo(mNativePath, x1, y1, x2, y2);
    }      

最後 , 調用 Canvas 畫布的 Canvas#drawPath 方法 , 将上述設定 起始點 控制點 終止點 的 Path 執行個體對象 繪制到畫布上 ;

三、代碼示例

package kim.hsl.android_ui;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.View;
import androidx.annotation.Nullable;

public class BesselCurve2 extends View {

    public BesselCurve2(Context context) {
        this(context, null);
    }

    public BesselCurve2(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public BesselCurve2(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onSizeChanged(int width, int height, int oldWidth, int oldHeight) {
        super.onSizeChanged(width, height, oldWidth, oldHeight);
    }

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

        // 初始化 曲線 和 畫筆 執行個體對象
        Path path = new Path();
        Paint paint = new Paint();
        paint.setColor(Color.BLACK);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(20);

        // 設定起始點
        path.moveTo(0, getHeight() / 2F);

        // 設定控制點 和 終止點
        path.quadTo(getWidth() / 2F, getHeight(), getWidth(), getHeight() / 2F);

        // 繪制貝塞爾曲線
        canvas.drawPath(path, paint);
    }
}