自定义View绘制基础之Canvas

画布Canvas

? ?Canvas（画布）是一个用于绘制图形的重要类，它提供了一组绘图操作的方法，允许你在屏幕上绘制各种形状、图像和文本。下面是Canvas类的主要函数：

目录

一、绘制图形和图像

1.drawColor

2.drawCircle

3.drawRect

4.drawLine

5.drawText

5.drawBitmap

二、绘制路径

1.drawPath

三、绘制几何图形

1.drawArc

2.drawOval`

四、裁剪

1.clipRect

2.clipPath

五、几何变换

1.translate

2.scale

3.rotate

4.skew

5.concat

六、保存和恢复画布

1.save()和restore()

---

一、绘制图形和图像

1.drawColor

功能：用指定的颜色填充整个画布

原型：

public void drawColor(@ColorInt int color) 

参数：

• ?color：要填充的颜色

示例：

drawColor(Color.BLACK); ?// 纯黑
drawColor(Color.parse("#88880000"); // 半透明红色

2.drawCircle

功能：在画布上绘制一个圆形。

原型：

public void drawCircle(float cx, float cy, float radius, @NonNull Paint paint) 

参数：

• cx：圆心的横坐标。

• cy：圆心的纵坐标。

• radius：圆的半径。

• paint：用于指定绘制效果的画笔

示例：

Paint paint = new Paint();
?
paint.setColor(Color.RED); 
?
canvas.drawCircle(300, 300, 100, paint);
?

3.drawRect

功能：在画布上绘制一个矩形。

public void drawRect(float left, float top, float right, float bottom, @NonNull Paint paint) 

参数：

• left：矩形左上角的横坐标。

• top：矩形左上角的纵坐标。

• right：矩形右下角的横坐标。

• bottom：矩形右下角的纵坐标。

• paint：用于指定绘制效果的画笔。

示例：

Paint paint = new Paint();
paint.setColor(Color.GREEN);
canvas.drawRect(100, 100, 400, 300, paint);

4.drawLine

功能：在画布上绘制一条直线。

原型：

public void drawLine(float startX, float startY, float stopX, float stopY, @NonNull Paint paint) 

参数：

• startX：起点的横坐标。

• startY：起点的纵坐标。

• stopX：终点的横坐标。

• stopY：终点的纵坐标。

• paint：用于指定绘制效果的画笔。

示例：

Paint paint = new Paint();
paint.setColor(Color.BLACK);
canvas.drawLine(50, 50, 200, 200, paint);

5.drawText

功能： 在画布上绘制文本。

原型：

public void drawText(String text, float x, float y, @NonNull Paint paint)

参数：

• text：要绘制的文本。

• x：文本起始点的横坐标。

• y：文本起始点的纵坐标。

• paint：用于指定绘制效果的画笔。

示例：

Paint paint = new Paint();
paint.setColor(Color.BLUE);
paint.setTextSize(30);
canvas.drawText("Hello, Canvas!", 50, 50, paint);

5.drawBitmap

功能： 在画布上绘制位图。

原型：

void drawBitmap(Bitmap bitmap, float left, float top, Paint paint)

参数解释：

• bitmap：要绘制的位图。
• left：位图左上角的横坐标。
• top：位图左上角的纵坐标。
• paint：用于指定绘制效果的画笔。

示例：

Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.sample_image); 

canvas.drawBitmap(bitmap, 100, 200, null);

二、绘制路径

1.drawPath

功能：在画布上绘制指定的路径。

原型：

public void drawPath(Path path, @NonNull Paint paint)

参数：

• path：要绘制的路径。

• paint：用于指定绘制效果的画笔。

示例：

Paint paint = new Paint();
paint.setColor(Color.RED);
Path path = new Path();
path.moveTo(100, 100);
path.lineTo(300, 100);
path.lineTo(200, 300);
path.close();
canvas.drawPath(path, paint);

三、绘制几何图形

1.drawArc

功能：在画布上绘制一个弧形。

原型：

public void drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, @NonNull Paint paint)

参数解释：

• oval：包围弧形的矩形。

• startAngle：弧形起始角度，以 x 轴正方向为 0 度。

• sweepAngle：弧形扫过的角度。

• useCenter：是否连接到圆心形成一个扇形。

• paint：用于指定绘制效果的画笔。

示例：

Paint paint = new Paint();
paint.setColor(Color.GREEN);
RectF oval = new RectF(100, 100, 300, 300);
canvas.drawArc(oval, 45, 90, true, paint);

2.drawOval`

功能： 在画布上绘制一个椭圆。

原型：

public void drawOval(RectF oval, Paint paint)

参数：

• oval：包围椭圆的矩形。

• paint：用于指定绘制效果的画笔。

示例：

Paint paint = new Paint();
paint.setColor(Color.BLUE);
RectF oval = new RectF(100, 100, 300, 200);
canvas.drawOval(oval, paint);

四、裁剪

1.clipRect

功能：设置画布的裁剪区域为矩形。

原型：

public boolean clipRect(Rect rect)

参数：

• rect：裁剪的矩形区域。

示例：

Rect rect = new Rect(50, 50, 200, 200);
canvas.clipRect(rect);

2.clipPath

功能：设置画布的裁剪区域为路径。

原型：

public boolean clipPath(Path path)

参数：

• path：裁剪的路径。

示例：

Path path = new Path();
// 添加路径操作，例如 moveTo、lineTo
canvas.clipPath(path);

五、几何变换

1.translate

功能：平移画布。

原型：

public void translate(float dx, float dy)

参数：

• dx：水平方向上的平移距离。

• dy：垂直方向上的平移距离。

示例：

canvas.translate(100, 50);  // 将画布在水平方向上平移 100，垂直方向上平移 50

2.scale

功能： 缩放画布。

原型：

public void scale(float sx, float sy)

参数：

• sx：水平方向上的缩放比例。

• sy：垂直方向上的缩放比例。

示例：

canvas.scale(1.5f, 2.0f);  // 将画布在水平方向上放大 1.5 倍，垂直方向上放大 2 倍

3.rotate

功能： 旋转画布。

原型：

public void rotate(float degrees)

参数：

• degrees：旋转的角度。

示例：

canvas.rotate(45);  // 将画布顺时针旋转 45 度

4.skew

功能： 斜切（错切）画布。

原型：

void skew(float sx, float sy)

参数解释：

• sx：水平方向上的错切因子。
• sy：垂直方向上的错切因子。

示例：

canvas.skew(0.2f, 0);  // 在水平方向上进行横向错切

5.concat

功能： 使用矩阵进行多种变换。

原型：

void concat(Matrix matrix)

参数解释：

• matrix：变换矩阵。

示例：

Matrix matrix = new Matrix();
matrix.postTranslate(100, 50);  // 平移
matrix.postRotate(45);  // 旋转
canvas.concat(matrix);  // 应用变换矩阵

六、保存和恢复画布

1.save()和restore()

功能： 保存和恢复画布的状态，包括平移、缩放、旋转等变换。

原型：

int save()
void restore()

无参数。

示例：

int saveCount = canvas.save();  // 保存当前画布状态
// 在这里进行绘制和变换操作
canvas.restoreToCount(saveCount);  // 恢复到保存的画布状态