快捷導(dǎo)航

Android UI效果之繪圖篇（二）

更新時間：2016年02月23日 10:32:21 作者：_Hi_xiaoyu

這篇文章主要介紹了Android UI效果之繪圖篇，針對Android開發(fā)中的UI效果Canvas進行講解，感興趣的小伙伴們可以參考一下

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

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

繪制弧形

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

其中前三個參數(shù)都比較好理解，關(guān)鍵是第三個參數(shù)useCenter，看張圖你就明白了

可以發(fā)現(xiàn)當useCenter=true時，弧形的區(qū)域是開始角度的點和結(jié)束角度的點和中心點連接起來的區(qū)域；而useCenter=false時，弧形區(qū)域是開始角度的點和結(jié)束角度的點直接連接起來的區(qū)域。

繪制路徑

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);

繪制路徑比較簡單，依次添加相應(yīng)的坐標點即可，注意設(shè)置畫筆的抗鋸齒和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);

這個和繪制路徑一樣，注意設(shè)置大小，畫筆粗細即可。

/**
  * 畫圓
  * @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()：把當前的繪制的圖像保存起來，讓后續(xù)的操作相當于是在一個新的圖層上的操作。
restore()：將sava()之前的圖層和save之后的圖層進行合并操作
translate()：畫布平移
rotate()：畫布旋轉(zhuǎn)
大家可能會有疑問，既然我們可以利用坐標系來定位畫布中的所有坐標點，為什么還要畫布平移和畫布旋轉(zhuǎn)的api呢？現(xiàn)在假設(shè)有這樣一個需求，需要繪制一個儀表盤，而繪制儀表盤的刻度我們可以利用三角函數(shù)sin cos 來計算出相應(yīng)的偏移角度，當然這對于數(shù)學(xué)學(xué)霸來說很easy，一般人而言就需要把三角函數(shù)的公式翻個遍了，所以谷歌工程師，為我們實現(xiàn)平移和旋轉(zhuǎn)的api，遇到類似于儀表盤的效果是，只需要旋轉(zhuǎn)當前畫布就能實現(xiàn)相應(yīng)的效果，為我們節(jié)省了計算量和工作量。

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; // 總刻度數(shù)
  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); // 旋轉(zhuǎn)畫紙
  }
  // 繪制指針
  paint.setStrokeWidth(2);
  canvas.drawLine(0, 10, 0, -65, paint);
  paint.setStrokeWidth(4);
  canvas.drawLine(0, 10, 20, -35, paint);