当前位置：首页 > news >正文

鸿蒙中 Canvas画布的操作及状态处理（三）

news 2026/4/18 9:22:06

一、画布操作

常见的画布操作

操作类型	说明
裁剪	限制绘图区域，只在指定区域进行绘制
矩阵变换	平移、缩放、旋转等坐标变换
状态保存与恢复	保存/恢复画布状态（画布矩阵）

提示：需要先进行画布操作，再进行后续绘制，只有这样画布操作才有效果。

二、裁剪操作

裁剪是图形处理中的常见操作，裁剪针对的是画布本身，可以用于限制绘图区域，只在指定的区域进行绘制。

支持的裁剪操作

操作	说明
裁剪矩形	裁剪一个矩形区域
裁剪圆角矩形	裁剪一个圆角矩形区域
裁剪自定义路径	裁剪一个自定义路径区域
裁剪一个区域	裁剪一个指定区域

接口说明

接口	描述
`clipRect(rect, clipOp?, doAntiAlias?)`	用于裁剪一个矩形
`clipRoundRect(roundRect, clipOp?, doAntiAlias?)`	用于裁剪一个圆角矩形
`clipPath(path, clipOp?, doAntiAlias?)`	用于裁剪一个自定义路径
`clipRegion(region, clipOp?)`	用于裁剪一个区域

clipRect参数说明

参数	说明
`rect`	要裁剪的矩形区域
`clipOp`	裁剪方式：交集（INTERSECT）和差集（DIFFERENCE）
`doAntiAlias`	是否需要抗锯齿处理（true启用，false不启用）

开发示例：裁剪矩形

// 创建画刷 let brush = new drawing.Brush(); // 设置颜色为蓝色 brush.setColor(0xFF, 0x00, 0x00, 0xFF); // 设置画刷填充效果 canvas.attachBrush(brush); // 创建矩形对象 let rect: common2D.Rect = { left: 200, top: 200, right: 600, bottom: 600 }; // 裁剪矩形区域 canvas.clipRect(rect); // 绘制圆形（只在裁剪区域内显示） canvas.drawCircle(300, 300, 300); // 去除填充效果 canvas.detachBrush();

三、矩阵变换操作

矩阵变换也是常见的画布操作，是一种坐标系的转换，用于进行图形的变化。

支持的矩阵变换

操作	说明
平移	平移画布一段距离
缩放	画布缩放
旋转	画布旋转一定的角度
倾斜变换	画布倾斜变换（水平轴和垂直轴上的偏移）

接口说明

接口	描述
`translate(dx, dy)`	用于平移画布一段距离
`scale(sx, sy)`	用于画布缩放
`rotate(degrees, sx, sy)`	用于画布旋转，正数顺时针，负数逆时针
`skew(sx, sy)`	用于画布倾斜变换

平移（translate）

参数：dx（水平方向平移量，px）、dy（垂直方向平移量，px）

// 创建画刷 let brush = new drawing.Brush(); // 设置颜色为红色 brush.setColor(0xFF, 0xFF, 0x00, 0x00); // 设置画刷填充效果 canvas.attachBrush(brush); // 执行平移操作（向右向下各平移300px） canvas.translate(300, 300); // 绘制矩形 canvas.drawRect({ left: 200, top: 200, right: 600, bottom: 600 }); // 去除填充效果 canvas.detachBrush();

3.5 旋转（rotate）

参数：degrees（旋转角度，正数顺时针，负数逆时针）、sx（旋转中心x坐标）、sy（旋转中心y坐标）

// 创建画刷 let brush = new drawing.Brush(); // 设置颜色为红色 brush.setColor(0xFF, 0xFF, 0x00, 0x00); // 设置画刷填充效果 canvas.attachBrush(brush); // 顺时针旋转45度，旋转中心为(200, 200) canvas.rotate(45, 200, 200); // 绘制矩形 canvas.drawRect({ left: 200, top: 200, right: 600, bottom: 600 }); // 去除填充效果 canvas.detachBrush();

3.6 缩放（scale）

参数：sx（沿x轴的缩放因子）、sy（沿y轴的缩放因子）

// 创建画刷 let brush = new drawing.Brush(); // 设置颜色为红色 brush.setColor({ alpha: 0xFF, red: 0xFF, green: 0x00, blue: 0x00 }); // 设置画刷填充效果 canvas.attachBrush(brush); // 执行放大操作（x轴和y轴分别放大2倍） canvas.scale(2, 2); // 绘制矩形 canvas.drawRect({ left: 200, top: 200, right: 600, bottom: 600 }); // 去除填充效果 canvas.detachBrush();

四、画布状态保存与恢复

保存操作：用于保存当前画布的状态到栈顶
恢复操作：用于恢复保存在栈顶的画布状态
恢复操作一旦执行，保存和恢复操作中间一系列平移、缩放、裁剪等操作都会被清除

接口说明

接口	描述
`save()`	保存当前画布的状态（画布矩阵）到一个栈顶
`restore()`	恢复保存在栈顶的画布状态（画布矩阵）
`restoreToCount(count)`	恢复到指定数量的画布状态（画布矩阵）

开发示例

// 创建画笔 let pen = new drawing.Pen(); // 设置颜色为红色 pen.setColor({ alpha: 0xFF, red: 0xFF, green: 0x00, blue: 0x00 }); // 设置描边宽度为20px pen.setStrokeWidth(20); // 设置画笔描边效果 canvas.attachPen(pen); // 保存操作，当前是不存在放大等操作的，这个原始状态会被保存下来 canvas.save(); // x轴和y轴方向分别放大2倍 canvas.scale(2, 2); // 绘制圆形，因为执行过放大操作，所以此时绘制的是大圆 canvas.drawCircle(300, 300, 200); // 恢复操作，恢复到没有放大的原始状态 canvas.restore(); // 绘制圆形，因为已经恢复到没有放大的原始状态，所以此时绘制的是小圆 canvas.drawCircle(300, 300, 200); // 去除描边效果 canvas.detachPen();