1# 几何形状绘制（C/C++） 2 3 4## 场景介绍 5 6当前支持绘制的几何形状，主要包括以下几种： 7 8- 点 9 10- 圆弧 11 12- 圆 13 14- 路径 15 16- 区域 17 18- 矩形 19 20- 圆角矩形 21 22大部分的几何形状均可以选择使用画笔或者使用画刷来实现绘制，其中点的绘制只能使用画笔。 23 24 25## 接口说明 26 27几何形状绘制的常用接口如下表所示，详细的使用和参数说明请见[drawing_canvas.h](../reference/apis-arkgraphics2d/drawing__canvas_8h.md)。 28 29| 接口 | 描述 | 30| -------- | -------- | 31| OH_Drawing_Point\* OH_Drawing_PointCreate (float x, float y) | 用于创建一个坐标点对象。 | 32| OH_Drawing_ErrorCode OH_Drawing_CanvasDrawPoint (OH_Drawing_Canvas \*canvas, const OH_Drawing_Point2D \*point) | 用于画一个点。 | 33| OH_Drawing_Rect\* OH_Drawing_RectCreate (float left, float top, float right, float bottom) | 用于创建一个矩形对象。 | 34| void OH_Drawing_CanvasDrawArc (OH_Drawing_Canvas\*, const OH_Drawing_Rect\*, float startAngle, float sweepAngle) | 用于画一个弧。 | 35| void OH_Drawing_CanvasDrawCircle (OH_Drawing_Canvas\*, const OH_Drawing_Point\*, float radius) | 用于画一个圆形。 | 36| OH_Drawing_Path\* OH_Drawing_PathCreate (void) | 用于创建一个路径对象。 | 37| void OH_Drawing_CanvasDrawPath (OH_Drawing_Canvas\*, const OH_Drawing_Path\*) | 用于画一个自定义路径。 | 38| OH_Drawing_Region\* OH_Drawing_RegionCreate (void) | 用于创建一个区域对象。 | 39| void OH_Drawing_CanvasDrawRegion (OH_Drawing_Canvas\*, const OH_Drawing_Region\*) | 用于画一块区域。 | 40| void OH_Drawing_CanvasDrawRect (OH_Drawing_Canvas\*, const OH_Drawing_Rect\*) | 用于画一个矩形。 | 41| OH_Drawing_RoundRect\* OH_Drawing_RoundRectCreate (const OH_Drawing_Rect\*, float xRad, float yRad) | 用于创建一个圆角矩形对象。 | 42| void OH_Drawing_CanvasDrawRoundRect (OH_Drawing_Canvas\*, const OH_Drawing_RoundRect\*) | 用于画一个圆角矩形。 | 43 44 45## 绘制点 46 47点只能基于画笔在画布上进行绘制，通过使用OH_Drawing_CanvasDrawPoint()接口绘制点。接口接受两个参数，一个是画布对象Canvas，请确保已创建或获取得到画布Canvas，具体可见[画布的获取与绘制结果的显示（C/C++）](canvas-get-result-draw-c.md)；另一个是要绘制的点的指针。 48 49简单示例如下： 50 51```c++ 52// 创建画笔对象 53OH_Drawing_Pen* pen = OH_Drawing_PenCreate(); 54// 设置画笔颜色 55OH_Drawing_PenSetColor(pen, OH_Drawing_ColorSetArgb(0xFF, 0xFF, 0x00, 0x00)); 56// 设置画笔线宽 57OH_Drawing_PenSetWidth(pen, 40); 58// 设置画布的画笔 59OH_Drawing_CanvasAttachPen(canvas, pen); 60// 绘制5个点 61OH_Drawing_Point2D point1 = {200.0f, 200.0f}; 62OH_Drawing_CanvasDrawPoint(canvas, &point1); 63OH_Drawing_Point2D point2 = {400.0f, 400.0f}; 64OH_Drawing_CanvasDrawPoint(canvas, &point2); 65OH_Drawing_Point2D point3 = {600.0f, 600.0f}; 66OH_Drawing_CanvasDrawPoint(canvas, &point3); 67OH_Drawing_Point2D point4 = {800.0f, 800.0f}; 68OH_Drawing_CanvasDrawPoint(canvas, &point4); 69OH_Drawing_Point2D point5 = {1000.0f, 1000.0f}; 70OH_Drawing_CanvasDrawPoint(canvas, &point5); 71// 去除掉画布中的画笔 72OH_Drawing_CanvasDetachPen(canvas); 73// 销毁各类对象 74OH_Drawing_PenDestroy(pen); 75``` 76 77 78效果如下： 79 80 81 82 83 84## 绘制圆弧 85 86可以使用画笔或画刷在画布上进行圆弧的绘制，通过使用OH_Drawing_CanvasDrawArc()接口绘制圆弧。使用接口需要传入4个参数，分别如下： 87 88- 需要画布对象Canvas，请确保已创建或获取得到画布Canvas，具体可见[画布的获取与绘制结果的显示（C/C++）](canvas-get-result-draw-c.md)。 89 90- 绘制圆弧还需要一个矩形，会以矩形的边为轮廓进行绘制。 91 92- 需要一个浮点参数，表示弧形的起始角度。 93 94- 需要另一个浮点参数，表示弧形的扫描角度。 95 96此处以使用画笔绘制圆弧为例，简单示例如下： 97 98```c++ 99// 创建画笔对象 100OH_Drawing_Pen* pen = OH_Drawing_PenCreate(); 101// 设置画笔描边颜色 102OH_Drawing_PenSetColor(pen, OH_Drawing_ColorSetArgb(0xFF, 0xFF, 0x00, 0x00)); 103// 设置画笔线宽 104OH_Drawing_PenSetWidth(pen, 20); 105// 设置画布的画笔 106OH_Drawing_CanvasAttachPen(canvas, pen); 107// 创建矩形对象 108OH_Drawing_Rect* rect = OH_Drawing_RectCreate(100, 200, 500, 300); 109// 基于矩形对象绘制圆弧 110OH_Drawing_CanvasDrawArc(canvas, rect, 10, 200); 111// 去除掉画布中的画笔 112OH_Drawing_CanvasDetachPen(canvas); 113// 销毁各类对象 114OH_Drawing_PenDestroy(pen); 115OH_Drawing_RectDestroy(rect); 116``` 117 118效果如下： 119 120 121 122 123## 绘制圆 124 125可以使用画笔或画刷在画布上进行圆的绘制，通过使用OH_Drawing_CanvasDrawCircle()接口绘制圆。使用接口需要传入3个参数，分别如下： 126 127- 需要画布对象Canvas，请确保已创建或获取得到画布Canvas，具体可见[画布的获取与绘制结果的显示（C/C++）](canvas-get-result-draw-c.md)。 128 129- 绘制圆还需要一个指向圆心点对象的指针，会以此点为圆心进行绘制。 130 131- 最后需要一个浮点参数，表示圆的半径。 132 133此处以使用画笔绘制圆为例，简单示例如下： 134 135```c++ 136// 创建画笔对象 137OH_Drawing_Pen* pen = OH_Drawing_PenCreate(); 138// 设置画笔描边颜色 139OH_Drawing_PenSetColor(pen, OH_Drawing_ColorSetArgb(0xFF, 0xFF, 0x00, 0x00)); 140// 设置画笔线宽 141OH_Drawing_PenSetWidth(pen, 20); 142// 设置画布的画笔 143OH_Drawing_CanvasAttachPen(canvas, pen); 144// 创建圆心点 145OH_Drawing_Point *point = OH_Drawing_PointCreate(700, 700); 146// 基于圆心点和半径在画布上绘制圆 147OH_Drawing_CanvasDrawCircle(canvas, point, 600); 148// 去除掉画布中的画笔 149OH_Drawing_CanvasDetachPen(canvas); 150// 销毁各类对象 151OH_Drawing_PenDestroy(pen); 152OH_Drawing_PointDestroy(point); 153``` 154 155效果如下： 156 157 158 159 160## 绘制路径 161 162可以使用画笔或画刷在画布上进行路径的绘制，路径具体可以用于绘制直线、弧线、贝塞尔曲线等，也可以通过路径组合的方式组成其他复杂的形状。 163 164绘制路径的相关接口和实现如下，详细的使用和参数说明请见[drawing_path](../reference/apis-arkgraphics2d/drawing__path_8h.md)。常用的接口如下： 165 1661. 使用OH_Drawing_PathCreate()接口可以创建一个路径对象。 167 1682. 使用OH_Drawing_PathMoveTo()接口可以设置自定义路径的起始点位置。 169 1703. 使用OH_Drawing_PathLineTo()接口可以添加一条从起始点或路径的最后点位置（若路径没有内容则默认为(0,0)）到目标点位置的线段。 171 172此处以使用画笔和画刷绘制五角星为例，示例如下： 173 174```c++ 175// 创建画笔对象 176OH_Drawing_Pen* pen = OH_Drawing_PenCreate(); 177// 设置画笔描边颜色 178OH_Drawing_PenSetColor(pen, OH_Drawing_ColorSetArgb(0xFF, 0xFF, 0x00, 0x00)); 179// 设置画笔线宽 180OH_Drawing_PenSetWidth(pen, 10); 181// 设置 画笔转角样式 182OH_Drawing_PenSetJoin(pen, LINE_ROUND_JOIN); 183// 设置画布中的画笔 184OH_Drawing_CanvasAttachPen(canvas, pen); 185// 创建画刷，此例对闭合路径进行了颜色填充，所以需要使用画刷 186OH_Drawing_Brush *brush = OH_Drawing_BrushCreate(); 187OH_Drawing_BrushSetColor(brush , OH_Drawing_ColorSetArgb(0xFF, 0x00, 0xFF, 0x00)); 188// 设置画布中的画刷 189OH_Drawing_CanvasAttachBrush(canvas, brush ); 190int len = 551; 191float aX = 630; 192float aY = 551; 193float dX = aX - len * std::sin(18.0f); 194float dY = aY + len * std::cos(18.0f); 195float cX = aX + len * std::sin(18.0f); 196float cY = dY; 197float bX = aX + (len / 2.0); 198float bY = aY + std::sqrt((cX - dX) * (cX - dX) + (len / 2.0) * (len / 2.0)); 199float eX = aX - (len / 2.0); 200float eY = bY; 201// 创建路径 202OH_Drawing_Path* path = OH_Drawing_PathCreate(); 203// 到起始点 204OH_Drawing_PathMoveTo(path, aX, aY); 205// 绘制直线 206OH_Drawing_PathLineTo(path, bX, bY); 207OH_Drawing_PathLineTo(path, cX, cY); 208OH_Drawing_PathLineTo(path, dX, dY); 209OH_Drawing_PathLineTo(path, eX, eY); 210// 直线闭合，形成五角星 211OH_Drawing_PathClose(path); 212// 绘制闭合路径 213OH_Drawing_CanvasDrawPath(canvas, path); 214// 去除掉画布中的画笔和画刷 215OH_Drawing_CanvasDetachPen(canvas); 216OH_Drawing_CanvasDetachBrush(canvas); 217// 销毁各类对象 218OH_Drawing_PenDestroy(pen); 219OH_Drawing_BrushDestroy(brush); 220OH_Drawing_PathDestroy(path); 221``` 222 223效果如下： 224 225 226 227 228## 绘制区域 229 230区域不是一个特定的形状，可以设置为指定的矩形或路径，也可以对两个区域进行组合操作。可以使用画笔或画刷在画布上进行区域的绘制。详细的API说明请参考[drawing_region.h](../reference/apis-arkgraphics2d/drawing__region_8h.md)。 231 232目前支持设置矩形区域和路径区域，分别通过OH_Drawing_RegionSetRect()接口和OH_Drawing_RegionSetPath()接口来设置。 233 234此处以使用画刷绘制矩形的组合区域为例，示例如下： 235 236```c++ 237// 创建画刷对象 238OH_Drawing_Brush* brush = OH_Drawing_BrushCreate(); 239// 设置画刷填充颜色 240OH_Drawing_BrushSetColor(brush, OH_Drawing_ColorSetArgb(0xFF, 0xFF, 0x00, 0x00)); 241// 设置画布的画刷 242OH_Drawing_CanvasAttachBrush(canvas, brush); 243// 矩形区域1 244OH_Drawing_Region *region1 = OH_Drawing_RegionCreate(); 245OH_Drawing_Rect *rect1 = OH_Drawing_RectCreate(100.0f, 100.0f, 600.f, 600.f); 246OH_Drawing_RegionSetRect(region1, rect1); 247// 矩形区域2 248OH_Drawing_Region *region2 = OH_Drawing_RegionCreate(); 249OH_Drawing_Rect *rect2 = OH_Drawing_RectCreate(300.0f, 300.0f, 900.f, 900.f); 250OH_Drawing_RegionSetRect(region2, rect2); 251// 两个矩形区域组合 252OH_Drawing_RegionOp(region1, region2, OH_Drawing_RegionOpMode::REGION_OP_MODE_XOR); 253OH_Drawing_CanvasDrawRegion(canvas, region1); 254// 去除掉画布中的画刷 255OH_Drawing_CanvasDetachBrush(canvas); 256// 销毁各类对象 257OH_Drawing_BrushDestroy(brush); 258OH_Drawing_RegionDestroy(region1); 259OH_Drawing_RegionDestroy(region2); 260OH_Drawing_RectDestroy(rect1); 261OH_Drawing_RectDestroy(rect2); 262``` 263 264效果如下： 265 266 267 268 269## 绘制矩形 270 271可以使用画笔或画刷在画布上进行矩形的绘制。使用OH_Drawing_RectCreate()接口创建矩形。接口需要传入四个浮点数，分别表示矩形的左、上、右、下四个位置的坐标，连接这4个坐标形成一个矩形。 272 273简单示例如下： 274 275```c++ 276// 创建画刷对象 277OH_Drawing_Brush *brush = OH_Drawing_BrushCreate(); 278// 设置画刷的填充颜色 279OH_Drawing_BrushSetColor(brush, 0xffff0000); 280// 设置画布的画刷 281OH_Drawing_CanvasAttachBrush(canvas, brush); 282OH_Drawing_Rect* rect = OH_Drawing_RectCreate(0, 0, 800, 800); 283// 绘制矩形 284OH_Drawing_CanvasDrawRect(canvas, rect); 285// 去除画布中的画刷 286OH_Drawing_CanvasDetachBrush(canvas); 287// 销毁各类对象 288OH_Drawing_BrushDestroy(brush); 289OH_Drawing_RectDestroy(rect); 290``` 291 292效果如下： 293 294 295 296 297## 绘制圆角矩形 298 299可以使用画笔或画刷在画布上进行圆角矩形的绘制。使用OH_Drawing_RoundRectCreate()接口创建圆角矩形。接口需要传入3个参数，分别如下： 300 301- 需要传入指向OH_Drawing_Rect矩形对象的指针，用于在此矩形的基础上切圆角进行绘制。 302 303- 需要一个浮点参数，表示x轴上的圆角半径。 304 305- 还需要一个浮点参数，表示y轴上的圆角半径。 306 307简单示例如下： 308 309```c++ 310// 创建画刷对象 311OH_Drawing_Brush *brush = OH_Drawing_BrushCreate(); 312// 设置画刷的填充颜色 313OH_Drawing_BrushSetColor(brush, 0xffff0000); 314// 设置画布的画刷 315OH_Drawing_CanvasAttachBrush(canvas, brush); 316// 创建矩形 317OH_Drawing_Rect* rect = OH_Drawing_RectCreate(100, 100, 900, 600); 318// 创建圆角矩形 319OH_Drawing_RoundRect* roundRect = OH_Drawing_RoundRectCreate(rect, 30, 30); 320// 绘制圆角矩形 321OH_Drawing_CanvasDrawRoundRect(canvas, roundRect); 322// 去除掉画布中的画刷 323OH_Drawing_CanvasDetachBrush(canvas); 324// 销毁各类对象 325OH_Drawing_BrushDestroy(brush); 326OH_Drawing_RectDestroy(rect); 327OH_Drawing_RoundRectDestroy(roundRect); 328``` 329 330 331效果如下： 332 333 334 335 336<!--RP1--> 337## 相关实例 338 339针对Drawing(C/C++)的开发，有以下相关实例可供参考： 340 341- [NDKGraphicsDraw (API14)](https://gitee.com/openharmony/applications_app_samples/tree/master/code/DocsSample/Drawing/NDKGraphicsDraw) 342<!--RP1End-->
