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

当前支持绘制的几何形状主要包括点、圆弧、圆、路径、区域、矩形、圆角矩形。大部分的几何形状均可以选择使用画笔或使用画刷来实现绘制其中点的绘制只能使用画笔。一、接口接口描述drawPoint(x, y)画一个点drawArc(arc, startAngle, sweepAngle)画一个弧drawCircle(x, y, radius)画一个圆形drawPath(path)画一个自定义路径drawRegion(region)画一块区域drawRect(left, top, right, bottom)画一个矩形drawRoundRect(roundRect)画一个圆角矩形二、绘制点特点点只能基于画笔在画布上进行绘制。// 设置画笔 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参数参数说明x点的x坐标y点的y坐标三、绘制圆弧可以使用画笔或画刷在画布上进行圆弧的绘制。绘制圆弧需要一个矩形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参数参数说明arc矩形轮廓定义圆弧的范围startAngle起始角度度sweepAngle扫描角度度四、绘制圆可以使用画笔或画刷在画布上进行圆的绘制。绘制圆需要圆心点的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参数参数说明x圆心的x坐标y圆心的y坐标radius圆的半径五、绘制路径可以使用画笔或画刷在画布上进行路径的绘制。路径可以用于绘制直线、弧线、贝塞尔曲线等也可以通过路径组合的方式组成其他复杂的形状。5.1 Path常用接口接口描述new drawing.Path()创建一个路径对象moveTo(x, y)设置自定义路径的起始点位置lineTo(x, y)添加一条从起始点或路径最后点到目标点的线段close()闭合形状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常用接口接口描述setRect(left, top, right, bottom)设置矩形区域setPath(path)设置路径区域op(region, regionOp)区域组合操作6.2 区域组合操作RegionOp操作说明XOR异或两个区域中不重叠的部分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参数参数说明left矩形左边坐标top矩形上边坐标right矩形右边坐标bottom矩形下边坐标八、绘制圆角矩形可以使用画笔或画刷在画布上进行圆角矩形的绘制。使用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轴圆角半径30y轴圆角半径30 let rrect new drawing.RoundRect(rect, 30, 30); // 绘制圆角矩形 canvas.drawRoundRect(rrect); // 去除填充效果 canvas.detachBrush();RoundRect构造函数参数参数说明rect基础矩形对象xRadiusx轴上的圆角半径yRadiusy轴上的圆角半径