1# Drawing Geometric Shapes (C/C++) 2 3 4## When to Use 5 6Currently, the following geometric shapes can be drawn: 7 8- Point 9 10- Arc 11 12- Circle 13 14- Path 15 16- Region 17 18- Rectangle 19 20- Rounded rectangle 21 22Most geometric shapes can be drawn by using a pen or brush. Only a pen can be used to draw a point. 23 24 25## Available APIs 26 27The following table lists the common APIs for drawing geometric shapes. For details about the usage and parameters, see [drawing_canvas.h](../reference/apis-arkgraphics2d/drawing__canvas_8h.md). 28 29| Interface| Description| 30| -------- | -------- | 31| OH_Drawing_Point\* OH_Drawing_PointCreate (float x, float y) | Creates an **OH_Drawing_Point** object.| 32| OH_Drawing_ErrorCode OH_Drawing_CanvasDrawPoint (OH_Drawing_Canvas \*canvas, const OH_Drawing_Point2D \*point) | Draws a point.| 33| OH_Drawing_Rect\* OH_Drawing_RectCreate (float left, float top, float right, float bottom) | Creates an **OH_Drawing_Rect** object.| 34| void OH_Drawing_CanvasDrawArc (OH_Drawing_Canvas\*, const OH_Drawing_Rect\*, float startAngle, float sweepAngle) | Draws an arc.| 35| void OH_Drawing_CanvasDrawCircle (OH_Drawing_Canvas\*, const OH_Drawing_Point\*, float radius) | Draws a circle.| 36| OH_Drawing_Path\* OH_Drawing_PathCreate (void) | Creates an **OH_Drawing_Path** object.| 37| void OH_Drawing_CanvasDrawPath (OH_Drawing_Canvas\*, const OH_Drawing_Path\*) | Draws a path.| 38| OH_Drawing_Region\* OH_Drawing_RegionCreate (void) | Creates a region object.| 39| void OH_Drawing_CanvasDrawRegion (OH_Drawing_Canvas\*, const OH_Drawing_Region\*) | Draws a region.| 40| void OH_Drawing_CanvasDrawRect (OH_Drawing_Canvas\*, const OH_Drawing_Rect\*) | Draws a rectangle.| 41| OH_Drawing_RoundRect\* OH_Drawing_RoundRectCreate (const OH_Drawing_Rect\*, float xRad, float yRad) | Creates an **OH_Drawing_RoundRect** object.| 42| void OH_Drawing_CanvasDrawRoundRect (OH_Drawing_Canvas\*, const OH_Drawing_RoundRect\*) | Draws a rounded rectangle.| 43 44 45## Drawing Points 46 47Points can be drawn only on the canvas based on the pen. You can draw points by calling OH_Drawing_CanvasDrawPoint(). The interface accepts two parameters. One is the canvas object. Ensure that the canvas has been created or obtained. For details, see [Obtaining a Canvas and Displaying Drawing Results (C/C++)](canvas-get-result-draw-c.md). The other is the pointer to the point to be drawn. 48 49A simple example is as follows: 50 51```c++ 52// Create a pen object. 53OH_Drawing_Pen* pen = OH_Drawing_PenCreate(); 54 // Set the stroke color. 55OH_Drawing_PenSetColor(pen, OH_Drawing_ColorSetArgb(0xFF, 0xFF, 0x00, 0x00)); 56// Set the line width of the pen. 57OH_Drawing_PenSetWidth(pen, 40); 58// Set the pen of the canvas. 59OH_Drawing_CanvasAttachPen(canvas, pen); 60// Draw five points. 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// Remove the pen from the canvas. 72OH_Drawing_CanvasDetachPen(canvas); 73// Destroy various objects. 74OH_Drawing_PenDestroy(pen); 75``` 76 77 78The effect is as follows: 79 80 81 82 83 84## Drawing Arcs 85 86You can draw an arc on the canvas by using the OH_Drawing_CanvasDrawArc() interface. The following four parameters need to be transferred when the interface is used: 87 88- The canvas object is required. Ensure that the canvas has been created or obtained. For details, see [Obtaining a Canvas and Displaying Drawing Results (C/C++)](canvas-get-result-draw-c.md). 89 90- Drawing an arc also requires a rectangle, which is drawn with the edges of the rectangle as the outline. 91 92- A floating-point parameter is required to indicate the start angle of the arc. 93 94- Another floating-point parameter is required to indicate the scanning angle of the arc. 95 96The following is an example of drawing an arc using a pen: 97 98```c++ 99// Create a pen object. 100OH_Drawing_Pen* pen = OH_Drawing_PenCreate(); 101// Set the stroke color. 102OH_Drawing_PenSetColor(pen, OH_Drawing_ColorSetArgb(0xFF, 0xFF, 0x00, 0x00)); 103// Set the line width of the pen. 104OH_Drawing_PenSetWidth(pen, 20); 105// Set the pen of the canvas. 106OH_Drawing_CanvasAttachPen(canvas, pen); 107// Create a rectangle object. 108OH_Drawing_Rect* rect = OH_Drawing_RectCreate(100, 200, 500, 300); 109// Draw an arc based on a rectangular object. 110OH_Drawing_CanvasDrawArc(canvas, rect, 10, 200); 111// Remove the pen from the canvas. 112OH_Drawing_CanvasDetachPen(canvas); 113// Destroy various objects. 114OH_Drawing_PenDestroy(pen); 115OH_Drawing_RectDestroy(rect); 116``` 117 118The effect is as follows: 119 120 121 122 123## Drawing Circles 124 125You can draw a circle on the canvas by using the OH_Drawing_CanvasDrawCircle() interface. The following three parameters need to be transferred when the interface is used: 126 127- The canvas object is required. Ensure that the canvas has been created or obtained. For details, see [Obtaining a Canvas and Displaying Drawing Results (C/C++)](canvas-get-result-draw-c.md). 128 129- Drawing a circle also requires a pointer pointing to the circle center object, which is used as the circle center for drawing. 130 131- Finally, a floating-point parameter is required to indicate the radius of the circle. 132 133The following is an example of drawing a circle using a pen: 134 135```c++ 136// Create a pen object. 137OH_Drawing_Pen* pen = OH_Drawing_PenCreate(); 138// Set the stroke color. 139OH_Drawing_PenSetColor(pen, OH_Drawing_ColorSetArgb(0xFF, 0xFF, 0x00, 0x00)); 140// Set the line width of the pen. 141OH_Drawing_PenSetWidth(pen, 20); 142// Set the pen of the canvas. 143OH_Drawing_CanvasAttachPen(canvas, pen); 144// Create a circle center point. 145OH_Drawing_Point *point = OH_Drawing_PointCreate(700, 700); 146// Draw a circle on the canvas based on the center point and radius. 147OH_Drawing_CanvasDrawCircle(canvas, point, 600); 148// Remove the pen from the canvas. 149OH_Drawing_CanvasDetachPen(canvas); 150// Destroy various objects. 151OH_Drawing_PenDestroy(pen); 152OH_Drawing_PointDestroy(point); 153``` 154 155The effect is as follows: 156 157 158 159 160## Drawing Paths 161 162A path may be drawn on the canvas by using a pen or brush. The path may be specifically used to draw a straight line, an arc, a Bezier curve, or the like, or may form another complex shape in a path combination manner. 163 164The following describes the APIs and implementation for drawing a path. For details about the usage and parameters, see [drawing_path](../reference/apis-arkgraphics2d/drawing__path_8h.md). The common interfaces are as follows: 165 1661. You can use the OH_Drawing_PathCreate() interface to create a path object. 167 1682. You can call the OH_Drawing_PathMoveTo() API to set the start point of a custom path. 169 1703. You can use the OH_Drawing_PathLineTo() API to add a line segment from the start point or the last point of the path (if the path does not contain any content, the default value is (0,0)) to the target point. 171 172The following is an example of drawing a five-pointed star using a pen and brush: 173 174```c++ 175// Create a pen object. 176OH_Drawing_Pen* pen = OH_Drawing_PenCreate(); 177// Set the stroke color. 178OH_Drawing_PenSetColor(pen, OH_Drawing_ColorSetArgb(0xFF, 0xFF, 0x00, 0x00)); 179// Set the line width of the pen. 180OH_Drawing_PenSetWidth(pen, 10); 181// Set the pen corner style. 182OH_Drawing_PenSetJoin(pen, LINE_ROUND_JOIN); 183// Set the pen in the canvas. 184OH_Drawing_CanvasAttachPen(canvas, pen); 185// Create a brush. In this example, the closed path is filled with colors. Therefore, a brush is required. 186OH_Drawing_Brush *brush = OH_Drawing_BrushCreate(); 187OH_Drawing_BrushSetColor(brush , OH_Drawing_ColorSetArgb(0xFF, 0x00, 0xFF, 0x00)); 188// Set the brush in the canvas. 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; 201Paths 202OH_Drawing_Path* path = OH_Drawing_PathCreate(); 203// To the start point 204OH_Drawing_PathMoveTo(path, aX, aY); 205// Draw a straight line on the canvas. 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// The straight line is closed to form a pentagon. 211OH_Drawing_PathClose(path); 212// Draw a closed path. 213OH_Drawing_CanvasDrawPath(canvas, path); 214// Remove the pen and brush from the canvas. 215OH_Drawing_CanvasDetachPen(canvas); 216OH_Drawing_CanvasDetachBrush(canvas); 217// Destroy various objects. 218OH_Drawing_PenDestroy(pen); 219OH_Drawing_BrushDestroy(brush); 220OH_Drawing_PathDestroy(path); 221``` 222 223The effect is as follows: 224 225 226 227 228## Drawing Regions 229 230A region is not a specific shape. You can set it to a specified rectangle or path, or combine two regions. You can use a pen or brush to draw a region on the canvas. For details about the APIs, see [drawing_region.h](../reference/apis-arkgraphics2d/drawing__region_8h.md). 231 232Currently, the rectangular region and path region can be set by calling OH_Drawing_RegionSetRect() and OH_Drawing_RegionSetPath() respectively. 233 234The following is an example of drawing a rectangular combined area using a brush: 235 236```c++ 237// Create a brush object. 238OH_Drawing_Brush* brush = OH_Drawing_BrushCreate(); 239// Set the brush fill color. 240OH_Drawing_BrushSetColor(brush, OH_Drawing_ColorSetArgb(0xFF, 0xFF, 0x00, 0x00)); 241// Set the brush of the canvas. 242OH_Drawing_CanvasAttachBrush(canvas, brush); 243// Rectangular area 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// Rectangular area 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// Combination of two rectangular areas 252OH_Drawing_RegionOp(region1, region2, OH_Drawing_RegionOpMode::REGION_OP_MODE_XOR); 253OH_Drawing_CanvasDrawRegion(canvas, region1); 254// Remove the brush from the canvas. 255OH_Drawing_CanvasDetachBrush(canvas); 256// Destroy various objects. 257OH_Drawing_BrushDestroy(brush); 258OH_Drawing_RegionDestroy(region1); 259OH_Drawing_RegionDestroy(region2); 260OH_Drawing_RectDestroy(rect1); 261OH_Drawing_RectDestroy(rect2); 262``` 263 264The effect is as follows: 265 266 267 268 269## Drawing Rectangles 270 271You can use a pen or brush to draw a rectangle on the canvas. Create a rectangle by calling OH_Drawing_RectCreate(). The interface needs to transfer four floating point numbers, which indicate the coordinates of the left, top, right, and bottom positions of the rectangle respectively. The four coordinates are connected to form a rectangle. 272 273A simple example is as follows: 274 275```c++ 276// Create a brush object. 277OH_Drawing_Brush *brush = OH_Drawing_BrushCreate(); 278// Set the fill color of the brush. 279OH_Drawing_BrushSetColor(brush, 0xffff0000); 280// Set the brush of the canvas. 281OH_Drawing_CanvasAttachBrush(canvas, brush); 282OH_Drawing_Rect* rect = OH_Drawing_RectCreate(0, 0, 800, 800); 283// Draw a rectangle. 284OH_Drawing_CanvasDrawRect(canvas, rect); 285// Remove the brush from the canvas. 286OH_Drawing_CanvasDetachBrush(canvas); 287// Destroy various objects. 288OH_Drawing_BrushDestroy(brush); 289OH_Drawing_RectDestroy(rect); 290``` 291 292The effect is as follows: 293 294 295 296 297## Drawing Rounded Rectangles 298 299You can use a pen or brush to draw a rounded rectangle on the canvas. Call the OH_Drawing_RoundRectCreate() API to create a rounded rectangle. The interface needs to transfer the following parameters: 300 301- The pointer pointing to the OH_Drawing_Rect rectangle object needs to be transferred to draw a rounded rectangle based on the rectangle. 302 303- A floating-point parameter is required to indicate the radius of a rounded corner on the x-axis. 304 305- A floating-point parameter is required to indicate the radius of the rounded corner on the y-axis. 306 307A simple example is as follows: 308 309```c++ 310// Create a brush object. 311OH_Drawing_Brush *brush = OH_Drawing_BrushCreate(); 312// Set the fill color of the brush. 313OH_Drawing_BrushSetColor(brush, 0xffff0000); 314// Set the brush of the canvas. 315OH_Drawing_CanvasAttachBrush(canvas, brush); 316// Create a rectangle. 317OH_Drawing_Rect* rect = OH_Drawing_RectCreate(100, 100, 900, 600); 318// Create a rounded rectangle. 319OH_Drawing_RoundRect* roundRect = OH_Drawing_RoundRectCreate(rect, 30, 30); 320// Draw a round rectangle on the canvas. 321OH_Drawing_CanvasDrawRoundRect(canvas, roundRect); 322// Remove the brush from the canvas. 323OH_Drawing_CanvasDetachBrush(canvas); 324// Destroy various objects. 325OH_Drawing_BrushDestroy(brush); 326OH_Drawing_RectDestroy(rect); 327OH_Drawing_RoundRectDestroy(roundRect); 328``` 329 330 331The effect is as follows: 332 333 334 335
