鸿蒙几何形状绘制：点、弧、圆、路径、区域、矩形

当前支持绘制的几何形状主要包括：点、圆弧、圆、路径、区域、矩形、圆角矩形。

大部分的几何形状均可以选择使用画笔或使用画刷来实现绘制，其中点的绘制只能使用画笔。

一、接口

二、绘制点

特点：点只能基于画笔在画布上进行绘制。

// 设置画笔 let pen = new drawing.Pen(); // 设置颜色为红色 pen.setColor(0xFF, 0xFF, 0x00, 0x00); // 设置线宽为40px（点的大小） pen.setStrokeWidth(40); // 设置画笔描边效果 canvas.attachPen(pen); // 绘制5个点 canvas.drawPoint(200, 200); canvas.drawPoint(400, 400); canvas.drawPoint(600, 600); canvas.drawPoint(800, 800); canvas.drawPoint(1000, 1000); // 去除描边效果 canvas.detachPen();

drawPoint参数：

三、绘制圆弧

可以使用画笔或画刷在画布上进行圆弧的绘制。

绘制圆弧需要一个矩形（common2D.Rect），以矩形的边为轮廓进行绘制，还需要两个参数：起始角度和扫描角度。

// 创建画笔 let pen = new drawing.Pen(); // 设置颜色为红色 pen.setColor({ alpha: 0xFF, red: 0xFF, green: 0x00, blue: 0x00 }); // 设置线宽为20px pen.setStrokeWidth(20); // 设置画笔描边效果 canvas.attachPen(pen); // 创建矩形对象（圆弧的轮廓） const rect: common2D.Rect = { left: 100, top: 200, right: 1000, bottom: 600 }; // 绘制圆弧（从0度开始，扫描180度） canvas.drawArc(rect, 0, 180); // 去除描边效果 canvas.detachPen();

drawArc参数：

四、绘制圆

可以使用画笔或画刷在画布上进行圆的绘制。

绘制圆需要圆心点的x坐标和y坐标，以及圆半径。

// 创建画笔 let pen = new drawing.Pen(); // 设置颜色为红色 pen.setColor({ alpha: 0xFF, red: 0xFF, green: 0x00, blue: 0x00 }); // 设置线宽为20px pen.setStrokeWidth(20); // 设置画笔描边效果 canvas.attachPen(pen); // 绘制圆（圆心(630,630)，半径500） canvas.drawCircle(630, 630, 500); // 去除描边效果 canvas.detachPen();

drawCircle参数：

五、绘制路径

可以使用画笔或画刷在画布上进行路径的绘制。路径可以用于绘制直线、弧线、贝塞尔曲线等，也可以通过路径组合的方式组成其他复杂的形状。

5.1 Path常用接口

5.2 绘制五角星示例

let height_ = 1800; let width_ = 1800; let len = height_ / 4; let aX = width_ / 3; let aY = height_ / 6; let dX = aX - len * Math.sin(18.0); let dY = aY + len * Math.cos(18.0); let cX = aX + len * Math.sin(18.0); let cY = dY; let bX = aX + (len / 2.0); let bY = aY + Math.sqrt((cX - dX) * (cX - dX) + (len / 2.0) * (len / 2.0)); let eX = aX - (len / 2.0); let eY = bY; // 创建一个path对象，连接成一个五角星形状 let path = new drawing.Path(); // 指定path的起始位置 path.moveTo(aX, aY); // 用直线连接到目标点 path.lineTo(bX, bY); path.lineTo(cX, cY); path.lineTo(dX, dY); path.lineTo(eX, eY); // 闭合形状，path绘制完毕 path.close(); // 创建画笔对象（描边） let pen = new drawing.Pen(); pen.setAntiAlias(true); pen.setColor(0xFF, 0xFF, 0x00, 0x00); // 红色描边 pen.setStrokeWidth(10.0); canvas.attachPen(pen); // 创建画刷对象（填充） let brush = new drawing.Brush(); brush.setColor(0xFF, 0x00, 0xFF, 0x00); // 绿色填充 canvas.attachBrush(brush); // 绘制路径 canvas.drawPath(path); // 去除效果 canvas.detachBrush(); canvas.detachPen();

六、绘制区域

区域不是一个特定的形状，可以设置为指定的矩形或路径，也可以对两个区域进行组合操作。可以使用画笔或画刷对区域进行绘制。

6.1 Region常用接口

6.2 区域组合操作（RegionOp）

6.3 绘制矩形组合区域示例

// 创建画刷 let brush = new drawing.Brush(); brush.setColor(0xFF, 0xFF, 0x00, 0x00); // 红色填充 canvas.attachBrush(brush); // 创建左上角的region1（矩形100,100到700,700） let region1 = new drawing.Region(); region1.setRect(100, 100, 600, 600); // 创建右下角的region2（矩形300,300到900,900） let region2 = new drawing.Region(); region2.setRect(300, 300, 900, 900); // 将两个区域以XOR的方式组合 region1.op(region2, drawing.RegionOp.XOR); // 绘制区域 canvas.drawRegion(region1); // 去除填充效果 canvas.detachBrush();

七、绘制矩形

可以使用画笔或画刷在画布上进行矩形的绘制。使用drawRect接口，传入四个浮点数，分别表示矩形的左、上、右、下四个位置的坐标。

// 创建画刷 let brush = new drawing.Brush(); brush.setColor(0xFF, 0xFF, 0x00, 0x00); // 红色填充 canvas.attachBrush(brush); // 绘制矩形（左200，上200，右1000，下700） canvas.drawRect(200, 200, 1000, 700); // 去除填充效果 canvas.detachBrush();

drawRect参数：

八、绘制圆角矩形

可以使用画笔或画刷在画布上进行圆角矩形的绘制。使用drawRoundRect接口，接受一个RoundRect对象作为参数。

// 创建画刷 let brush = new drawing.Brush(); brush.setColor(0xFF, 0xFF, 0x00, 0x00); // 红色填充 canvas.attachBrush(brush); // 创建矩形对象 let rect: common2D.Rect = { left: 200, top: 200, right: 1000, bottom: 700 }; // 创建圆角矩形对象（矩形，x轴圆角半径30，y轴圆角半径30） let rrect = new drawing.RoundRect(rect, 30, 30); // 绘制圆角矩形 canvas.drawRoundRect(rrect); // 去除填充效果 canvas.detachBrush();

RoundRect构造函数参数：