Android用Canvas繪制貝塞爾曲線

Posted on by

用Canvas畫貝塞爾曲線，要畫貝塞爾曲線首先瞭解貝塞爾曲線：

由於用計算機畫圖大部分時間是操作鼠標來掌握線條的路徑，與手繪的感覺和效果有很大的差別。即使是一位精明的畫師能輕松繪出各種圖形，拿到鼠標想隨心所欲的畫圖也不是一件容易的事。這一點是計算機萬萬不能代替手工的工作，所以到目前為止人們隻能頗感無奈。使用貝塞爾工具畫圖很大程度上彌補瞭這一缺憾。

貝塞爾曲線是計算機圖形圖像造型的基本工具，是圖形造型運用得最多的基本線條之一。它通過控制曲線上的四個點（起始點、終止點以及兩個相互分 離的中間點）來創造、編輯圖形。其中起重要作用的是位於曲線中央的控制線。這條線是虛擬的，中間與貝塞爾曲線交叉，兩端是控制端點。移動兩端的端點時貝塞 爾曲線改變曲線的曲率（彎曲的程度）；移動中間點（也就是移動虛擬的控制線）時，貝塞爾曲線在起始點和終止點鎖定的情況下做均勻移動。註意，貝塞爾曲線上 的所有控制點、節點均可編輯。這種“智能化”的矢量線條為藝術傢提供瞭一種理想的圖形編輯與創造的工具。

在安卓開發中Canvas提供瞭畫貝塞爾曲線的方法，在Canvas中的quadTo方法隻能畫3次的貝塞爾曲線，不過還提供瞭rQuadTo方法實現瞭以結束點為原點的續接。用這個做一個滾動的波浪線，如果把這個波浪線截取一塊可以做成類似加速球的東西

/**
 * Created by Administrator on 2015/9/17.
 */
public class MyPathView extends View {
private int height;
private int width;
private Path path;//路徑
private Paint mPaint;
private Paint mPaintpoint;
private int count;
private Handler handler = new Handler() {
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
switch (msg.what) {
case 0x23://這應該寫一個static final的變量
count++;
if (count < 80) {//形成循環，因為波浪線是兩段40所以一個周期80
                        setCount(count);
handler.sendEmptyMessageDelayed(0x23, 20);
                    } else {
count = 0;
handler.sendEmptyMessageDelayed(0x23, 20);
                    }
break;
            }

        }
    };

public void setCount(int count) {
this.count = count;
        invalidate();
    }

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

public MyPathView(Context context, AttributeSet attrs) {
super(context, attrs);
path = new Path();
mPaint = new Paint();
mPaintpoint = new Paint();
mPaintpoint.setStrokeWidth(10);
mPaintpoint.setColor(Color.YELLOW);
mPaint.setAntiAlias(true);
mPaint.setTextSize(50);
mPaint.setStyle(Paint.Style.STROKE);
handler.sendEmptyMessage(0x23);//
    }

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
        setMeasuredDimension(width, height);
    }

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

path.reset();
path.moveTo(count, 100);
for (int i = 0; i < 10; i++) {
path.rQuadTo(20, 10, 40, 0);//以（count=0，100）為原點開始畫，控制點、結束點
path.rQuadTo(20, -10, 40, 0);//以（40，0）為原點開始畫，形成一個類似餘弦的波浪周期
        }
        canvas.drawPath(path, mPaint);
使用quadTo繪制曲線
//      path.moveTo(100, 100);
//        path.quadTo(100, 400, 300, 300);//控制點終點
//        canvas.drawPoint(100,100,mPaintpoint);//起點
//        canvas.drawPoint(100,400,mPaintpoint);//控制點
//        canvas.drawPoint(300,300,mPaintpoint);//終點
}
}

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

推薦閱讀：