Android基礎知識(9)—Android繪圖基礎Canvas、Paint

Android基礎知識(9)—Android繪圖基礎

　　Android的繪圖應該繼承View組件，並重寫它的onDraw(Canvas canvas)方法。Canvas代表“依附”與View的畫布。在Canvas提供的繪製方法中還用到了個API：Path，代表任意多條直線連接而成的任意圖案，當Canvas根據Path繪製時，可以繪製出任意的形狀。

繪製圓形：

canvas.drawCircle (float cx, float cy, float radius, Paint paint)；

　　參數說明： cx：圓心的x座標。cy：圓心的y座標。 radius：圓的半徑。 paint：繪製時所使用的畫筆。

繪製矩形/正方形：

canvas.drawRect(float left,float top,float right,float bottom,Paint paint);

　　參數說明：left：矩形的左邊位置。top：矩形的上邊位置。right：矩形的右邊位置。bottom：矩形的下邊位置。

繪製圓角矩形：

  RectF re1 = new RectF(float left,float top,float right,float bottom); //先畫矩形
  canvas.drawRoundRect(RectF rect, float cx, float cy,Paint paint);  

　　其實跟矩形的座標是一樣的，這些座標定義了一個矩形，然後只是在這個矩形中畫了一個圓角而已。

繪製橢圓：

  RectF re1 = new RectF(float left,float top,float right,float bottom); //先畫矩形
  canvas.drawRoundRect(RectF rect,Paint paint);  

　　同理，根據矩形的大小來畫橢圓。

繪製三角形：

　　在學習如何繪製三角形之前，先學習幾個方法：

　　參考文章：https://segmentfault.com/a/1190000000721127

１、moveTo(float x, float y)：不會進行繪製，只用於移動移動畫筆（就像下筆的地方），結合以下方法進行使用。、

Path path1 = new Path();
path1.moveTo(100, 100);

2、lineTo(float x, float y)：用於進行直線繪製。

Path path1 = new Path();
path1.lineTo(300, 300);
canvas.drawPath(path1, paint);

　　如果lineTo沒有結合moveTo使用，也就是lineTo默認從座標(0,0)開始繪製。如圖：

　　那麼結合moveTo了的繪製是怎麼樣的呢？

Path path1 = new Path();
path1.moveTo(100, 100);
path1.lineTo(300, 300);
canvas.drawPath(path1, paint);

　　把畫筆移動(100,100)處開始繪製，效果如圖：

3、quadTo(float x1, float y1, float x2, float y2)：用於繪製圓滑曲線，即貝塞爾曲線。

　　(x1,y1) 爲控制點，(x2,y2)爲結束點。

　　貝塞爾曲線的形成，就比如我們把一條橡皮筋拉直，橡皮筋的頭尾部對應起點和終點，然後從拉直的橡皮筋中選擇任意一點（除頭尾對應的點外）扯動橡皮筋形成的彎曲形狀，而那個扯動橡皮筋的點就是控制點；

　　同樣地，我們還是得需要moveTo來協助控制。

<pre name="code" class="java">        Path path3 = new Path();
        path3.moveTo(10, 900);
        path3.quadTo(100, 750, 200, 850);
        canvas.drawPath(path3, paint);

　　下就面以一個Demo來結合理解函數的應用，代碼如下：

       canvas.drawColor(Color.WHITE);          // 把整張畫布繪製成白色
        Paint paint = new Paint();              //畫筆
        paint.setAntiAlias(true);               // 去鋸齒
        paint.setColor(Color.BLUE);             //設置畫筆顏色
        paint.setStyle(Paint.Style.STROKE);     //空心效果
        paint.setStrokeWidth(4);               //線寬
        int viewWidth = this.getWidth();

        // 繪製圓形cx cy radius paint
        canvas.drawCircle(viewWidth / 10 + 10, viewWidth / 10 + 10, viewWidth / 10, paint);

        // 繪製正方形
        canvas.drawRect(10, viewWidth / 5 + 20, viewWidth / 5 + 10, viewWidth * 2 / 5 + 20, paint);

        // 繪製矩形
        canvas.drawRect(10, viewWidth * 2 / 5 + 30, viewWidth / 5 + 10, viewWidth / 2 + 30, paint);

        // 繪製圓角矩形
        RectF re1 = new RectF(10, viewWidth / 2 + 40, 10 + viewWidth / 5, viewWidth * 3 / 5 + 40);//先畫矩形 再畫圓角
        canvas.drawRoundRect(re1, 15, 15, paint);

        // 繪製橢圓
        RectF re11 = new RectF(10, viewWidth * 3 / 5 + 50, 10 + viewWidth / 5, viewWidth * 7 / 10 + 50);
        canvas.drawOval(re11, paint);

        // 定義一個Path對象，封閉成一個三角形
        Path path1 = new Path();
        path1.moveTo(10, viewWidth * 9 / 10 + 60);
        path1.lineTo(viewWidth / 5 + 10, viewWidth * 9 / 10 + 60);
        path1.lineTo(viewWidth / 10 + 10, viewWidth * 7 / 10 + 60);
        path1.close();
        // 根據Path進行繪製，繪製三角形
        canvas.drawPath(path1, paint);

        // 定義一個Path對象，封閉成一個五角形
        Path path2 = new Path();
        path2.moveTo(10 + viewWidth / 15, viewWidth * 9 / 10 + 70);
        path2.lineTo(10 + viewWidth * 2 / 15, viewWidth * 9 / 10 + 70);
        path2.lineTo(10 + viewWidth / 5, viewWidth + 70);
        path2.lineTo(10 + viewWidth / 10, viewWidth * 11 / 10 + 70);
        path2.lineTo(10, viewWidth + 70);
        path2.close();
        // 根據Path進行繪製，繪製五角形
        canvas.drawPath(path2, paint);

        Path path3 = new Path();
        path3.moveTo(10, 900);
        path3.quadTo(100, 750, 200, 850);
        canvas.drawPath(path3, paint);

　　效果如圖：

相關demo代碼下載：http://download.csdn.net/detail/qq_26849491/9602041