Android 繪圖——Canvas

Canvas簡介

Canvas也就是Android中的畫布，它保存了一些列的draw方法，你能夠是用Canvas繪製圖形、文字和位圖等，其功能可謂是十分的強大，幾乎能夠繪製全部的圖像和文字。既然Canvas功能如此強大，其豐富了Android的圖形，也是Android圖形學不可或缺的類，而學習和熟練Canvas，可謂是學習Android UI的重點之一，接下來咱們開始學習Canvas的API。

Canvas繪圖

既然Canvas提供了繪製圖形的功能，那麼看下其對應的API有那些。

繪製直線

public class CanvasView extends View {
    Paint paint;
    public CanvasView(Context context) {
        this(context,null);
    }

    public CanvasView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        paint = new Paint();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        paint.setColor(Color.RED);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(5);
        canvas.drawLine(0, 0, 100, 100, paint);
    }
}
複製代碼

使用數組，繪製直線

float []pts = {0,0,100,100,200,200,300,300};
canvas.drawLines(pts, paint);
複製代碼

先繪製（0，0）到（100，100）的直線，而後繪製（200，200）到（300，300）的直線。

定義數組，也能夠使用下面語句來繪製直線

drawLines(@Size(multiple = 4) @NonNull float[] pts, int offset, int count, @NonNull Paint paint)
複製代碼

pts：座標數組 offset：設置線的間隔距離 count：繪製直線的條數 paint：畫筆

drawPoint

繪製點：

drawPoint(float x, float y, @NonNull Paint paint)
複製代碼

繪製多個點：

float []pts = {0,0,100,100,200,200,300,300};
canvas.drawPoints(pts, paint);
複製代碼

drawRect

繪製矩形，矩形區域有兩種表示方式：Rect和RectF，Rect表示int類型，RectF表示float類型。

RectF r = new RectF(100, 100, 400, 500);
canvas.drawRect(r, paint);
複製代碼

也能夠以下表示：

drawRect(float left, float top, float right, float bottom, @NonNull Paint paint)
複製代碼

drawRoundRect

使用drawRoundRect，繪製圓角矩形

drawRoundRect(@NonNull RectF rect, float rx, float ry, @NonNull Paint paint)

rx：x軸的圓角半徑大小 ry：y軸的圓角半徑大小

RectF r = new RectF(100, 100, 400, 500);
canvas.drawRoundRect(r, 100, 100, paint);
複製代碼

drawCircle

繪製圓 ：

drawCircle(float cx, float cy, float radius, @NonNull Paint paint)
複製代碼

cx、cy：圓心座標 radius：半徑

canvas.drawCircle(300, 300, 200, paint);
複製代碼

drawOval

使用drawOval函數繪製橢圓

drawOval(@NonNull RectF oval, @NonNull Paint paint) oval：定義的矩形 paint：畫筆

除了上述方法參數，能夠使用如下方法參數：

drawOval(float left, float top, float right, float bottom, @NonNull Paint paint)

之因此提供一個矩形區域，是由於該橢圓是矩形的內切圓。

RectF r = new RectF(100, 100, 400, 500);
canvas.drawRect(r, paint);
canvas.drawOval(r, paint);
複製代碼

drawArc

使用drawArc方法繪製扇形圖。

drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter,@NonNull Paint paint)
複製代碼

oval：矩形，該扇形是在矩形區域內繪製的，並且圍繞着矩形的中心點來繪製。 startAngle：開始角度，相對X軸正方向 sweepAngle：畫多少角度的弧度 useCenter：false表示只有一個純弧線，true表示閉合的邊 paint：畫筆

RectF r = new RectF(100, 100, 400, 500);
canvas.drawRect(r, paint);
canvas.drawArc(r, 0, 90, true, paint);//順時針旋轉90度
複製代碼

drawPath

使用drawPath來繪製路徑，更加靈活的繪製出各式各樣的圖形。繪製路徑，咱們須要理解如下幾個方法： 1）moveTo(float x, float y)：畫筆落筆的位置 2）lineTo(float x, float y)：畫筆移動的到（x，y）座標，並沿着繪製出路徑。 3）cubicTo(float x1, float y1, float x2, float y2,float x3, float y3)：實現貝塞爾曲線路徑， (x1,y1) 爲控制點，(x2,y2)爲控制點，(x3,y3) 爲結束點。 4）quadTo(float x1, float y1, float x2, float y2)：也是繪製貝塞爾曲線，即橢圓曲線。(x1，y1)控制點，(x2，y2)結束點。 5）arcTo：繪製弧線。

Path path = new Path();
path.moveTo(100, 100);
path.lineTo(200, 100);
path.cubicTo(250, 200, 350, 300, 450, 400);
path.close();
canvas.drawPath(path, paint);
複製代碼

弧線

RectF r = new RectF(100, 100, 400, 500);
Path path = new Path();
path.addArc(r, 30, 70);
canvas.drawPath(path, paint);
複製代碼

圓角矩形路徑

RectF r = new RectF(100, 100, 400, 500);
Path path = new Path();
float radii[] = {//左上角開始，順時針依次的角度
                         10,//x1
                         10,//y1
                         10,//x2
                         10,//y2
                         10,//x3
                         10,//y30
                         50,//x4
                         60};//y4
path.addRoundRect(r, radii, Path.Direction.CCW);
canvas.drawPath(path, paint);
複製代碼

Canvas變換技巧

Canvas變換包括： 1）平移（Translate） 2）縮放（Scale） 3）旋轉（Rotate） 4）斜拉畫布（Skew） 5）裁剪畫布（clip）

平移

RectF r = new RectF(0, 0, 400, 500);
canvas.drawRect(r, paint);
paint.setColor(Color.BLUE);
//將畫布平移
canvas.translate(50, 50);
canvas.drawRect(r, paint);
複製代碼

上圖中畫布平移了，藍色的矩形平移了，可是紅色的矩形沒有平移，是由於當canvas執行drawXXX的時候就會新建一個新的畫布圖層，而平移知識平移新的圖層。

RectF r = new RectF(0, 0, 400, 500);
canvas.drawRect(r, paint);
paint.setColor(Color.BLUE);
 //將畫布平移
canvas.translate(50, 50);
canvas.drawRect(r, paint);
RectF r2 = new RectF(0, 0, 400, 500);
paint.setColor(Color.GREEN);
canvas.drawRect(r2, paint);
複製代碼

從上圖中能夠看到綠色矩形覆蓋了藍色的矩形，雖然draw的時候，新建了一個畫布圖層，可是仍是會沿用以前設置的平移變換。不可逆的。解決這種狀況須要使用save和restore來解決。

縮放

scale(float sx, float sy)

sx、sy：分別對x/y方向的一個縮放係數，畫布的縮放會致使裏面全部的繪製的東西都會有一個縮放效果。

RectF r = new RectF(0, 0, 400, 500);
canvas.drawRect(r, paint);
paint.setColor(Color.BLUE);
canvas.scale(1.5f, 0.5f);
canvas.drawRect(r, paint);
複製代碼

旋轉

rotate(float degrees)，degrees：旋轉角度，順時針旋轉 rotate(float degrees, float px, float py)，degrees旋轉角度，(px,py)旋轉中心點座標

RectF r = new RectF(200, 200, 400, 500);
canvas.drawRect(r, paint);
paint.setColor(Color.BLUE);
canvas.rotate(45);
canvas.drawRect(r, paint);
複製代碼

斜拉畫布

skew(float sx, float sy)：sx,sy傾斜度

RectF r = new RectF(200, 200, 400, 500);
canvas.drawRect(r, paint);
paint.setColor(Color.BLUE);
canvas.skew(1.73f, 0);
canvas.drawRect(r, paint);
複製代碼

裁剪畫布

clipRect(@NonNull Rect rect) rect：裁剪的矩形區域

RectF r = new RectF(200, 200, 400, 500);
canvas.drawRect(r, paint);
paint.setColor(Color.BLUE);
canvas.clipRect(new Rect(250, 250, 300, 400));
canvas.drawColor(Color.YELLOW);
複製代碼

理解canvas

Canvas畫布的正確的理解： 1）當canvas執行drawXXX的時候就會新建一個新的畫布圖層

2）雖而後面新建了一個畫布圖層，可是仍是會沿用以前設置的平移變換。不可逆的。（save和restore來解決）