Android原生繪圖工具Canvas詳細(xì)

更新時(shí)間：2021年09月26日 17:31:36 作者：MatumbaMan

上一篇文章給大家介紹了Android原生繪圖工具Paint，然而android中提供了類似的工具Canvas和Paint，分別對(duì)應(yīng)畫布和畫筆，所以今天的這篇文章就來介紹Androi原生繪圖的另一個(gè)工具Canvas，感興趣的小伙伴一起來學(xué)習(xí)下面文章內(nèi)容

1.Canvas提供的繪制函數(shù)
2.繪制背景
3.繪制矩形drawRect
4.繪制圓角矩形drawRoundRect
5.繪制圓形drawCircle
6.繪制路徑drawPath
7.繪制直線drawLine
8.繪制圓弧drawArc
9.繪制橢圓drawOval
10.繪制點(diǎn)drawPoint
11.繪制文本drawText 沿路徑繪制文本drawTextOnPath
12.繪制bitmap drawBitmap

如果對(duì)上一篇感興趣的話可以看看Android原生繪圖Paint

下面步入正題：先看看效果圖

1.Canvas提供的繪制函數(shù)

canvas.drawColor();
canvas.drawRGB();
canvas.drawRect();
canvas.drawRoundRect();
canvas.drawCircle();
canvas.drawPath();
canvas.drawLine();
canvas.drawArc();
canvas.drawOval();
canvas.drawPoint();
canvas.drawPoints();
canvas.drawText();
canvas.drawTextOnPath();
canvas.drawBitmap();

2.繪制背景

用于初始化和清空畫布

//繪制顏色，默認(rèn)模式
public void drawColor(@ColorInt int color) {
    super.drawColor(color);
}

//顏色繪制，設(shè)置mode
public void drawColor(@ColorInt int color, @NonNull PorterDuff.Mode mode) {
    super.drawColor(color, mode);
}

//參數(shù)0-255
public void drawARGB(int a, int r, int g, int b) {
    super.drawARGB(a, r, g, b);
}

//參數(shù)0-255
public void drawRGB(int r, int g, int b) {
    super.drawRGB(r, g, b);
}

第二個(gè)函數(shù)中用到PorterDuff.Mode，PorterDuff.Mode主要用于圖像混合模式，后面細(xì)說

3.繪制矩形drawRect

//傳入RectF 
public void drawRect(@NonNull RectF rect, @NonNull Paint paint) {
    super.drawRect(rect, paint);
}
//傳入Rect
public void drawRect(@NonNull Rect r, @NonNull Paint paint) {
    super.drawRect(r, paint);
}

//把Rect的四個(gè)點(diǎn)坐標(biāo)傳入
public void drawRect(float left, float top, float right, float bottom, @NonNull Paint paint) {
    super.drawRect(left, top, right, bottom, paint);
}

Rect 和RectF都是提供一個(gè)矩形局域。

(1)精度不一樣，Rect是使用int類型作為數(shù)值，RectF是使用float類型作為數(shù)值。
(2)兩個(gè)類型提供的方法也不是完全一致。

Rect rect = new Rect(100,100,300,300);
RectF rectf = new RectF(100,400,300,600);

canvas.drawRect(rect, mPaint);
canvas.drawRect(rectf, mPaint);
canvas.drawRect(100, 700, 300, 900, mPaint);

4.繪制圓角矩形drawRoundRect

public void drawRoundRect(@NonNull RectF rect, float rx, float ry, @NonNull Paint paint) {
    super.drawRoundRect(rect, rx, ry, paint);
}

//不利用RectF,直接設(shè)置四個(gè)點(diǎn)
public void drawRoundRect(float left, float top, float right, float bottom, float rx, float ry,
        @NonNull Paint paint) {
    super.drawRoundRect(left, top, right, bottom, rx, ry, paint);
}

rect：RectF對(duì)象，一個(gè)矩形區(qū)域。
rx：x方向上的圓角半徑。
ry：y方向上的圓角半徑。
paint：繪制時(shí)所使用的畫筆。

Rect rect = new Rect(100,100,300,300);
RectF rectf = new RectF(100,400,300,600);

canvas.drawRect(rect, mPaint);
canvas.drawRoundRect(rectf, 5, 20, mPaint);
canvas.drawRoundRect(100, 700, 300, 900, 20, 5, mPaint);

5.繪制圓形drawCircle

public void drawCircle(float cx, float cy, float radius, @NonNull Paint paint) {
    super.drawCircle(cx, cy, radius, paint);
}

參數(shù)解釋：

cx：圓心x
cy：圓心y
radius：半徑

canvas.drawCircle(500, 300, 100, mPaint);

6.繪制路徑drawPath

public void drawPath(@NonNull Path path, @NonNull Paint paint) {
    super.drawPath(path, paint);
}

需要一個(gè)Path

Path path = new Path();
path.moveTo(100, 100);
path.lineTo(100, 200);
path.lineTo(200, 300);
mPaint2.setStrokeJoin(Paint.Join.MITER);
canvas.drawPath(path, mPaint2);

7.繪制直線drawLine

//提供起點(diǎn)，終點(diǎn)和畫筆
public void drawLine(float startX, float startY, float stopX, float stopY,
        @NonNull Paint paint) {
    super.drawLine(startX, startY, stopX, stopY, paint);
}

public void drawLines(@Size(multiple = 4) @NonNull float[] pts, int offset, int count,
        @NonNull Paint paint) {
    super.drawLines(pts, offset, count, paint);
}

public void drawLines(@Size(multiple = 4) @NonNull float[] pts, @NonNull Paint paint) {
    super.drawLines(pts, paint);
}

繪制線的集合，參數(shù)中pts是點(diǎn)的集合，兩個(gè)值代表一個(gè)點(diǎn)，四個(gè)值代表一條線，互相之間不連接。
offset跳過的點(diǎn)，count跳過之后要繪制的點(diǎn)的總數(shù)，可以用于集合中部分點(diǎn)的繪制。

canvas.drawLine(500, 500, 500, 300, mPaint);

float[] pos = {20, 30, 40 , 100, 120, 160, 200, 290};
canvas.drawLines(pos, mPaint);

8.繪制圓弧drawArc

public void drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter,
        @NonNull Paint paint) {
    super.drawArc(oval, startAngle, sweepAngle, useCenter, paint);
}

public void drawArc(float left, float top, float right, float bottom, float startAngle,
        float sweepAngle, boolean useCenter, @NonNull Paint paint) {
    super.drawArc(left, top, right, bottom, startAngle, sweepAngle, useCenter, paint);
}

RectF oval:生成弧的矩形，中心為弧的圓心
float startAngle：弧開始的角度，以X軸正方向?yàn)?度，順時(shí)針
float sweepAngle：弧持續(xù)的角度
boolean useCenter:是否有弧的兩邊，True，還兩邊，False，只有一條弧

RectF rectF = new RectF(100, 100, 400, 400);
canvas.drawArc(rectF, 0, 270, false, mPaint2);

rectF = new RectF(500, 500, 800, 800);
canvas.drawArc(rectF, 0, 270, true, mPaint2);

9.繪制橢圓drawOval

public void drawOval(@NonNull RectF oval, @NonNull Paint paint) {
    super.drawOval(oval, paint);
}
public void drawOval(float left, float top, float right, float bottom, @NonNull Paint paint) {
    super.drawOval(left, top, right, bottom, paint);
}

在矩形框內(nèi)畫一個(gè)橢圓，如果是個(gè)正方形會(huì)畫出一個(gè)圓。

RectF rectF = new RectF(100, 100, 400, 400);
canvas.drawOval(rectF, mPaint2);

rectF = new RectF(500, 500, 900, 800);
canvas.drawOval(rectF, mPaint2);

10.繪制點(diǎn)drawPoint

public void drawPoint(float x, float y, @NonNull Paint paint) {
    super.drawPoint(x, y, paint);
}

public void drawPoints(@Size(multiple = 2) float[] pts, int offset, int count,
        @NonNull Paint paint) {
    super.drawPoints(pts, offset, count, paint);
}

public void drawPoints(@Size(multiple = 2) @NonNull float[] pts, @NonNull Paint paint) {
    super.drawPoints(pts, paint);
}

只需要提供兩個(gè)點(diǎn)一個(gè)坐標(biāo)就可以繪制點(diǎn)。

canvas.drawPoint(100, 100, mPaint2);
        
float[] points = {30, 40, 50, 60, 70, 80};
canvas.drawPoints(points, mPaint2);

11.繪制文本drawText 沿路徑繪制文本drawTextOnPath

public void drawText(@NonNull char[] text, int index, int count, float x, float y,
        @NonNull Paint paint) {
    super.drawText(text, index, count, x, y, paint);
}

public void drawText(@NonNull String text, float x, float y, @NonNull Paint paint) {
    super.drawText(text, x, y, paint);
}

public void drawText(@NonNull String text, int start, int end, float x, float y,
        @NonNull Paint paint) {
    super.drawText(text, start, end, x, y, paint);
}

public void drawText(@NonNull CharSequence text, int start, int end, float x, float y,
        @NonNull Paint paint) {
    super.drawText(text, start, end, x, y, paint);
}

canvas.drawText("MatumbaMan的博客",100,100,mTextPaint);

Path path = new Path();
path.addArc(new RectF(100, 100, 600, 600), 0, 260);
canvas.drawTextOnPath("MatumbaMan的博客", path, 10, 20, mTextPaint);

canvas.drawText("MatumbaMan的博客",100,100, mTextPaint);

drawTextOnPath
沿著一條 Path 來繪制文字
text 為所需要繪制的文字
path 為文字的路徑
hOffset 文字相對(duì)于路徑的水平偏移量，用于調(diào)整文字的位置
vOffset 文字相對(duì)于路徑豎直偏移量，用于調(diào)整文字的位置

12.繪制bitmap drawBitmap

public void drawBitmap(@NonNull Bitmap bitmap, @Nullable Rect src, @NonNull RectF dst,
        @Nullable Paint paint) {
    super.drawBitmap(bitmap, src, dst, paint);
}

public void drawBitmap(@NonNull Bitmap bitmap, @Nullable Rect src, @NonNull Rect dst,
        @Nullable Paint paint) {
    super.drawBitmap(bitmap, src, dst, paint);
}

Rect src：指定繪制圖片的區(qū)域
Rect dst或RectF dst：指定圖片在屏幕上的繪制（顯示）區(qū)域
首先指定圖片區(qū)域，然后指定繪制圖片的區(qū)域。

Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.rocket2);
canvas.drawBitmap(bitmap, 100, 100, mPaint);

Rect src = new Rect(0, 0, 100,100);
Rect dst = new Rect(200, 500, 300, 600);
canvas.drawBitmap(bitmap, src, dst, mPaint);