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

更新時(shí)間：2022年06月29日 14:42:10 作者：小北的博客

這篇文章主要為大家詳細(xì)介紹了Android自定義View繪制貝塞爾曲線的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Android自定義View繪制貝塞爾曲線的具體代碼，供大家參考，具體內(nèi)容如下

在平面內(nèi)任選 3 個(gè)不共線的點(diǎn)，依次用線段連接。

在第一條線段上任選一個(gè)點(diǎn) D。計(jì)算該點(diǎn)到線段起點(diǎn)的距離 AD，與該線段總長(zhǎng) AB 的比例。

根據(jù)上一步得到的比例，從第二條線段上找出對(duì)應(yīng)的點(diǎn) E，使得 AD:AB = BE:BC。

連接這兩點(diǎn) DE。

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

到這里，我們就確定了貝塞爾曲線上的一個(gè)點(diǎn) F。接下來(lái)，請(qǐng)稍微回想一下中學(xué)所學(xué)的極限知識(shí)，讓選取的點(diǎn) D 在第一條線段上從起點(diǎn) A 移動(dòng)到終點(diǎn) B，找出所有的貝塞爾曲線上的點(diǎn) F。所有的點(diǎn)找出來(lái)之后，我們也得到了這條貝塞爾曲線。

回過(guò)頭來(lái)看這條貝塞爾曲線，為了確定曲線上的一個(gè)點(diǎn)，需要進(jìn)行兩輪取點(diǎn)的操作，因此我們稱得到的貝塞爾曲線為二次曲線（這樣記憶很直觀，但曲線的次數(shù)其實(shí)是由前面提到的伯恩斯坦多項(xiàng)式?jīng)Q定的）。

三個(gè)點(diǎn)的基本關(guān)系如下：

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); ?//設(shè)置起點(diǎn)
? ? ? ? mPath.quadTo(mSupX, mSupY, mWidth * 4 / 5, mHeight / 2); ?//設(shè)置輔助點(diǎn)和終點(diǎn)
? ? ? ? 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以后效果如下：