Android UI效果之繪圖篇（二）_Android

一、Canvas
Canvas中的方法很多，這裡我們只挑常用的進行講解說明
Canvas可以繪製的對象有：

• 弧線(arcs) canvas.
• 填充顏色(argb和color)
• Bitmap
• 圓(circle和oval)
• 點(point)
• 線(line)
• 矩形(Rect)
• 圖片(Picture)
• 圓角矩形 (RoundRect)
• 文本(text)
• 頂點(Vertices)
• 路徑(path)

繪製弧形

/**  * 繪製弧形  * @param oval 繪製地區  * @param startAngle 開始繪製的角度  * @param sweepAngle 結束繪製的角度  * @param useCenter 是否使用中心  * @param paint 畫筆  */ public void drawArc(RectF oval, float startAngle, float sweepAngle,boolean useCenter, Paint paint)

其中前三個參數都比較好理解，關鍵是第三個參數useCenter，看張圖你就明白了

可以發現當useCenter=true時，弧形的地區是開始角度的點和結束角度的點和中心點串連起來的地區；而useCenter=false時，弧形地區是開始角度的點和結束角度的點直接連接起來的地區。

繪製路徑

mPaint.setStyle(Paint.Style.STROKE);  mPaint.setStrokeWidth(3);  Path path = new Path();  path.moveTo(5, 10);  path.lineTo(120, 30);  path.lineTo(44, 66);  path.lineTo(77, 231);  canvas.drawPath(path, mPaint);

繪製路徑比較簡單，依次添加相應的座標點即可，注意設定畫筆的消除鋸齒和Style即可。
- 繪製文字路徑

 mPaint.setStyle(Paint.Style.STROKE);  mPaint.setStrokeWidth(3);  Path path = new Path();  path.moveTo(50, 50);  path.lineTo(200, 250);  path.lineTo(300, 450);  path.lineTo(300, 650);  mPaint.setTextSize(46);  canvas.drawTextOnPath("Hi_xiaoyu_bolg_in_android", path, 0, 0, mPaint);

這個和繪製路徑一樣，注意設定大小，畫筆粗細即可。

/**  * 畫圓  * @param cx  圓心X座標  * @param cy  圓心Y座標  * @param radius 圓的半徑  * @param paint   */ public void drawCircle(float cx, float cy, float radius, Paint paint) { }   // 畫圓  canvas.drawCircle(50, 50, 50, mPaint);  RectF r = new RectF(150, 0, 270, 110);  // 畫矩形  canvas.drawRect(r, mPaint);  RectF oval = new RectF(0, 120, 50, 270);  // 畫橢圓  canvas.drawOval(oval, mPaint);  RectF rect = new RectF(100, 120, 170, 200);  // 畫圓角矩形  canvas.drawRoundRect(rect, 30, 20, mPaint);  // 畫線  canvas.drawLine(200, 120, 300, 300, mPaint);

其他的drawXxx方法這裡就不再贅述，大家可以一一去嘗試。
這裡再來看下canvas中幾個比較重要的方法：

canvas.save();canvas.restore();canvas.translate(dx, dy);canvas.rotate(degrees);canvas.saveLayer(bounds, paint, saveFlags);

save()：把當前的繪製的映像儲存起來，讓後續的操作相當於是在一個新的圖層上的操作。
restore()：將sava()之前的圖層和save之後的圖層進行合併作業
translate()：畫布平移
rotate()：畫布旋轉
大家可能會有疑問，既然我們可以利用座標系來定位畫布中的所有座標點，為什麼還要畫布平移和畫布旋轉的api呢？現在假設有這樣一個需求，需要繪製一個儀錶盤，而繪製儀錶盤的刻度我們可以利用三角函數sin cos 來計算出相應的位移角度，當然這對於數學學霸來說很easy，一般人而言就需要把三角函數的公式翻個遍了，所以Google工程師，為我們實現平移和旋轉的api，遇到類似於儀錶盤的效果是，只需要旋轉當前畫布就能實現相應的效果，為我們節省了計算量和工作量。

paint.setColor(0xff00ccff);  paint.setAntiAlias(true);  paint.setStyle(Style.STROKE);  canvas.translate(canvas.getWidth() / 2, 200); // 將位置移動畫紙的座標點,不用每次都從座標原點計算  canvas.drawCircle(0, 0, 100, paint);   Paint tmpPaint = new Paint(paint);   tmpPaint.setStrokeWidth(1);  float y = 100;  int count = 60; // 總刻度數  for (int i = 0; i < count; i++) {   if (i % 5 == 0) {    canvas.drawLine(0f, y, 0, y + 12f, paint);    canvas.drawText(String.valueOf(i / 5 + 1), -4f, y + 25f,      tmpPaint);   } else {    canvas.drawLine(0f, y, 0f, y + 5f, tmpPaint);   }   canvas.rotate(360 / count, 0f, 0f); // 旋轉畫紙  }  // 繪製指標  paint.setStrokeWidth(2);  canvas.drawLine(0, 10, 0, -65, paint);  paint.setStrokeWidth(4);  canvas.drawLine(0, 10, 20, -35, paint);

以上就是Android開發中的UI效果設計模組的第二部分內容，之後還會繼續更新，希望對大家的學習有所協助。