android绘图之Canvas基础（2）_canvas2.drawcolor

Android 绘图学习

android绘图之Paint(1)
android绘图之Canvas基础（2）
Android绘图之Path（3）
Android绘图之drawText绘制文本相关（4）
Android绘图之Canvas概念理解（5）
Android绘图之Canvas变换（6）
Android绘图之Canvas状态保存和恢复（7）
Android绘图之PathEffect （8）
Android绘图之LinearGradient线性渐变（9）
Android绘图之SweepGradient（10）
Android绘图之RadialGradient 放射渐变（11）
Android绘制之BitmapShader（12）
Android绘图之ComposeShader，PorterDuff.mode及Xfermode（13）
Android绘图之drawText,getTextBounds,measureText,FontMetrics,基线（14）
Android绘图之贝塞尔曲线简介（15）
Android绘图之PathMeasure（16）
Android 动态修改渐变 GradientDrawable

1 Canvas 基础

Canvas画布，用于绘制出各种形状配合画布的变幻操作可以绘制出很多复杂图形，基本的绘制图形分类。
提供的绘制函数：

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

会在后面讲：
canvas.drawVertices();
canvas.drawPicture();
canvas.drawBitmapMesh();
canvas.drawTextRun();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

2 绘制背景，可以用于初始化和清空画布

//绘制颜色，默认模式
public void drawColor(@ColorInt int color) {
    super.drawColor(color);
}

//颜色绘制，设置mode
public void drawColor(@ColorInt int color, @NonNull PorterDuff.Mode mode) {
    super.drawColor(color, mode);
}

//参数0-255
public void drawARGB(int a, int r, int g, int b) {
    super.drawARGB(a, r, g, b);
}

//参数0-255
public void drawRGB(int r, int g, int b) {
    super.drawRGB(r, g, b);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

上面四个函数都可以绘制canvas的背景，注意到PorterDuff.Mode变量，它只对两个canvas绘制bitmap起作用，所以此处暂时不讨论mode参数（没有设置mode默认使用srcover porterduff mode）。

canvas.drawColor(Color.BLUE);
// canvas.drawColor(Color.GREEN, PorterDuff.Mode.CLEAR);//背景会变成黑色
//canvas.drawARGB(150,1,200,57);

1
2
3
4

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的四个点坐标传入
public void drawRect(float left, float top, float right, float bottom, @NonNull Paint paint) {
    super.drawRect(left, top, right, bottom, paint);
}
1
2
3
4
5
6
7
8
9
10
11
12
13

Rect 和RectF都是提供一个矩形局域。
(1)精度不一样，Rect是使用int类型作为数值，RectF是使用float类型作为数值。
(2)两个类型提供的方法也不是完全一致。

canvas.drawColor(Color.WHITE);
Rect rect1 = new Rect(100, 100, 300, 300);
RectF rect2 = new RectF(100, 400, 300, 600);
canvas.drawRect(100,700,300,900,mPaint);

canvas.drawRect(rect1,mPaint);
canvas.drawRect(rect2,mPaint);
1
2
3
4
5
6
7

4 drawRoundRect ：绘制圆角矩形

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

//不利用RectF,直接设置四个点
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);
}
1
2
3
4
5
6
7
8
9

**
rect：RectF对象，一个矩形区域。
rx：x方向上的圆角半径。
ry：y方向上的圆角半径。
paint：绘制时所使用的画笔。**

 canvas.drawColor(Color.WHITE);
RectF rect2 = new RectF(100, 400, 300, 600);
 canvas.drawRoundRect(rect2,50,50,mPaint);
1
2
3

5 drawCircle绘制圆形

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

**
cx 圆心x
cy 圆心y
radius半径**

canvas.drawColor(Color.WHITE);
canvas.drawCircle(400,400,200,mPaint);
1
2

6 drawPath：绘制路径

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

需要一个Path,代表路径后面会讲解。

Path path = new Path();
path.moveTo(200,200);//起点
path.lineTo(300,300);
path.lineTo(200,600);

canvas.drawPath(path,mPaint);
1
2
3
4
5
6

7 drawLine绘制直线

//提供起点，终点和画笔
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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

绘制线的集合，参数中pts是点的集合，两个值代表一个点，四个值代表一条线，互相之间不连接。
offset跳过的点，count跳过之后要绘制的点的总数，可以用于集合中部分点的绘制。

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

float[] positions = {20,20,20,35,40,40,50,87,60,70,90,120};
canvas.drawLines(positions,mPaint);

float[] positions2 = {20,20,20,35,320,320,320,335,340,340,350,387,360,370,390,420,410,200,90,170};
canvas.drawLines(positions2,4,12,mPaint);或者
canvas.drawLines(positions2,4,16,mPaint);
1
2
3
4
5
6
7
8

跳过部分节点：

没有跳过点

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

1
2
3
4
5
6
7
8
9
10

RectF oval:生成弧的矩形，中心为弧的圆心
float startAngle：弧开始的角度，以X轴正方向为0度，顺时针
float sweepAngle：弧持续的角度
boolean useCenter:是否有弧的两边，True，还两边，False，只有一条弧

RectF rectF1 = new RectF(100, 100, 400, 400);
canvas.drawArc(rectF1,0,270,false,mPaint);

RectF rectF2 = new RectF(400, 400, 700, 700);
canvas.drawArc(rectF2,0,270,true,mPaint);
1
2
3
4
5

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

1
2
3
4
5
6
7

在矩形框内画一个椭圆，如果是个正方形会画出一个圆。

RectF rectF1 = new RectF(200, 200, 400, 400);
RectF rectF2 = new RectF(200, 500, 700, 600);
canvas.drawOval(rectF1,mPaint);
canvas.drawOval(rectF2,mPaint);

1
2
3
4
5

10 drawPoint绘制点：

canvas.drawPoint();
canvas.drawPoints();

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);
}
1
2
3
4
5
6
7
8
9
10
11
12

**
只需要提供两个点一个坐标就可以绘制点。
canvas.drawPoint(20,20,mPaint);
float[] points = {30,40,40,50,60,60};
canvas.drawPoints(points,mPaint);**

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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

这几种方法类似：
canvas.drawText(“好好学习，天天向上”,100,100,mPaint);

canvas.drawText("好好学习，天天向上",100,100,mPaint);
Path path = new Path();
path.addArc(new RectF(100,100,600,600),0,260);
canvas.drawTextOnPath("好好学习，天天向上",path,10,10,mPaint);
1
2
3
4

drawTextOnPath
沿着一条 Path 来绘制文字
text 为所需要绘制的文字
path 为文字的路径
hOffset 文字相对于路径的水平偏移量，用于调整文字的位置
vOffset 文字相对于路径竖直偏移量，用于调整文字的位置
值得注意的是，在绘制 Path 的时候，应该在拐弯处使用圆角，这样文字显示时更舒服

大致讲解，后面会重点讲解。

12 drawBitmap 绘制bitmap

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);
}
1
2
3
4
5
6
7
8
9

Rect src
Rect dst
其中src和dst这两个矩形区域是用来做什么的？
Rect src：指定绘制图片的区域
Rect dst或RectF dst：指定图片在屏幕上的绘制（显示）区域
首先指定图片区域，然后指定绘制图片的区域。

 Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.mipmap.ic_launcher_round);
canvas.drawBitmap(bitmap,100,100,mPaint);
 Rect rect = new Rect(0, 0, 50, 50);
 Rect rect2 = new Rect(200, 200, 300, 300);
canvas.drawBitmap(bitmap,rect,rect2,mPaint);
1
2
3
4
5