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