1# Drawing Development 2 3## When to Use 4 5The Native Drawing module provides APIs for drawing 2D graphics and text. The following scenarios are common for drawing development: 6* Drawing 2D graphics 7* Drawing text drawing 8 9## Available APIs 10 11| API| Description| 12| -------- | -------- | 13| OH_Drawing_BitmapCreate (void) | Creates a bitmap object.| 14| OH_Drawing_BitmapBuild (OH_Drawing_Bitmap *, const uint32_t width, const uint32_t height, const OH_Drawing_BitmapFormat *) | Initializes the width and height of a bitmap object and sets the pixel format for the bitmap.| 15| OH_Drawing_CanvasCreate (void) | Creates a canvas object.| 16| OH_Drawing_CanvasBind (OH_Drawing_Canvas *, OH_Drawing_Bitmap *) | Binds a bitmap to a canvas so that the content drawn on the canvas is output to the bitmap (this process is called CPU rendering).| 17| OH_Drawing_CanvasAttachBrush (OH_Drawing_Canvas *, const OH_Drawing_Brush *) | Attaches a brush to a canvas so that the canvas will use the style and color of the brush to fill in a shape.| 18| OH_Drawing_CanvasAttachPen (OH_Drawing_Canvas *, const OH_Drawing_Pen *) | Attaches a pen to a canvas so that the canvas will use the style and color of the pen to outline a shape.| 19| OH_Drawing_CanvasDrawPath (OH_Drawing_Canvas *, const OH_Drawing_Path *) | Draws a path.| 20| OH_Drawing_PathCreate (void) | Creates a path object.| 21| OH_Drawing_PathMoveTo (OH_Drawing_Path *, float x, float y) | Sets the start point of a path.| 22| OH_Drawing_PathLineTo (OH_Drawing_Path *, float x, float y) | Draws a line segment from the last point of a path to the target point.| 23| OH_Drawing_PathClose (OH_Drawing_Path *) | Closes a path. A line segment from the start point to the last point of the path is added.| 24| OH_Drawing_PenCreate (void) | Creates a pen object.| 25| OH_Drawing_PenSetAntiAlias (OH_Drawing_Pen *, bool) | Checks whether anti-aliasing is enabled for a pen. If anti-aliasing is enabled, edges will be drawn with partial transparency.| 26| OH_Drawing_PenSetWidth (OH_Drawing_Pen *, float width) | Sets the thickness for a pen. This thickness determines the width of the outline of a shape.| 27| OH_Drawing_BrushCreate (void) | Creates a brush object.| 28| OH_Drawing_BrushSetColor (OH_Drawing_Brush *, uint32_t color) | Sets the color for a brush. The color will be used by the brush to fill in a shape.| 29| OH_Drawing_CreateTypographyStyle (void) | Creates a `TypographyStyle` object.| 30| OH_Drawing_CreateTextStyle (void) | Creates a `TextStyle` object.| 31| OH_Drawing_TypographyHandlerAddText (OH_Drawing_TypographyCreate *, const char *) | Sets the text content.| 32| OH_Drawing_TypographyPaint (OH_Drawing_Typography *, OH_Drawing_Canvas *, double, double) | Paints text on the canvas.| 33 34 35 36## Development Procedure for 2D Graphics Drawing 37 38The following steps describe how to use the canvas and brush of the Native Drawing module to draw a 2D graphics. 39 401. **Create a bitmap object.** Use `OH_Drawing_BitmapCreate` in `drawing_bitmap.h` to create a bitmap object (named `cBitmap` in this example), and use `OH_Drawing_BitmapBuild` to specify its length, width, and pixel format. 41 42 ```c++ 43 // Create a bitmap object. 44 OH_Drawing_Bitmap* cBitmap = OH_Drawing_BitmapCreate(); 45 // Define the pixel format of the bitmap. 46 OH_Drawing_BitmapFormat cFormat {COLOR_FORMAT_RGBA_8888, ALPHA_FORMAT_OPAQUYE}; 47 // Set the pixel format for the bitmap. 48 OH_Drawing_BitmapBuild(cBitmap, width, height, &cFormat); 49 ``` 50 512. **Create a canvas object.** Use `OH_Drawing_CanvasCreate` in `drawing_canvas.h` to create a canvas object (named `cCanvas` in this example), and use `OH_Drawing_CanvasBind` to bind `cBitmap` to this canvas. The content drawn on the canvas will be output to the bound `cBitmap` object. 52 53 ```c++ 54 // Create a canvas object. 55 OH_Drawing_Canvas* cCanvas = OH_Drawing_CanvasCreate(); 56 // Bind the bitmap to the canvas. The content drawn on the canvas will be output to the bound bitmap memory. 57 OH_Drawing_CanvasBind(cCanvas, cBitmap); 58 // Use white to clear the canvas. 59 OH_Drawing_CanvasClear(cCanvas, OH_Drawing_ColorSetArgb(0xFF, 0xFF, 0xFF, 0xFF)); 60 ``` 61 623. **Construct a shape.** Use the APIs provided in `drawing_path.h` to draw a pentagram `cPath`. 63 64 ```c++ 65 int len = 300; 66 67 float aX = 500; 68 float aY = 500; 69 70 float dX = aX - len * std::sin(18.0f); 71 float dY = aY + len * std::cos(18.0f); 72 73 float cX = aX + len * std::sin(18.0f); 74 float cY = dY; 75 76 float bX = aX + (len / 2.0); 77 float bY = aY + std::sqrt((cX - dX) * (cX - dX) + (len / 2.0) * (len / 2.0)); 78 79 float eX = aX - (len / 2.0); 80 float eY = bY; 81 82 // Create a path object and use the APIs to draw a pentagram. 83 OH_Drawing_Path* cPath = OH_Drawing_PathCreate(); 84 // Specify the start point of the path. 85 OH_Drawing_PathMoveTo(cPath, aX, aY); 86 // Draw a line segment from the last point of a path to the target point. 87 OH_Drawing_PathLineTo(cPath, bX, bY); 88 OH_Drawing_PathLineTo(cPath, cX, cY); 89 OH_Drawing_PathLineTo(cPath, dX, dY); 90 OH_Drawing_PathLineTo(cPath, eX, eY); 91 // Close the path. Now the path is drawn. 92 OH_Drawing_PathClose(cPath); 93 ``` 94 954. **Set the brush and pen styles.** Use `OH_Drawing_PenCreate` in `drawing_pen.h` to create a pen (named `cPen` in this example), and set the attributes such as the anti-aliasing, color, and thickness. The pen is used to outline a shape. Use `OH_Drawing_BrushCreate` in `drawing_brush.h` to create a brush (named `cBrush` in this example), and set the brush color. The brush is used to fill in a shape. Use `OH_Drawing_CanvasAttachPen` and `OH_Drawing_CanvasAttachBrush` in `drawing_canvas.h` to attach the pen and brush to the canvas. 96 97 ```c++ 98 // Create a pen object and set the anti-aliasing, color, and thickness. 99 OH_Drawing_Pen* cPen = OH_Drawing_PenCreate(); 100 OH_Drawing_PenSetAntiAlias(cPen, true); 101 OH_Drawing_PenSetColor(cPen, OH_Drawing_ColorSetArgb(0xFF, 0xFF, 0x00, 0x00)); 102 OH_Drawing_PenSetWidth(cPen, 10.0); 103 OH_Drawing_PenSetJoin(cPen, LINE_ROUND_JOIN); 104 // Attach the pen to the canvas. 105 OH_Drawing_CanvasAttachPen(cCanvas, cPen); 106 107 // Create a brush object and set the color. 108 OH_Drawing_Brush* cBrush = OH_Drawing_BrushCreate(); 109 OH_Drawing_BrushSetColor(cBrush, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0xFF, 0x00)); 110 111 // Attach the brush to the canvas. 112 OH_Drawing_CanvasAttachBrush(cCanvas, cBrush); 113 ``` 114 1155. **Draw a shape.** Use `OH_Drawing_CanvasDrawPath` in `drawing_canvas.h` to draw a pentagram on the canvas. Call the corresponding APIs to destroy the objects when they are no longer needed. 116 117 ```c++ 118 // Draw a pentagram on the canvas. The outline of the pentagram is drawn by the pen, and the color is filled in by the brush. 119 OH_Drawing_CanvasDrawPath(cCanvas, cPath); 120 // Destroy the created objects when they are no longer needed. 121 OH_Drawing_BrushDestroy(cBrush); 122 OH_Drawing_PenDestroy(cPen); 123 OH_Drawing_PathDestroy(cPath); 124 ``` 125 1266. **Obtain pixel data.** Use `OH_Drawing_BitmapGetPixels` in `drawing_bitmap.h` to obtain the pixel address of the bitmap bound to the canvas. The memory to which the address points contains the pixel data of the drawing on the canvas. 127 128 ```c++ 129 // Obtain the pixel address after drawing. The memory to which the address points contains the pixel data of the drawing on the canvas. 130 void* bitmapAddr = OH_Drawing_BitmapGetPixels(cBitmap); 131 auto ret = memcpy_s(addr, addrSize, bitmapAddr, addrSize); 132 if (ret != EOK) { 133 LOGI("memcpy_s failed"); 134 } 135 // Destroy the canvas object. 136 OH_Drawing_CanvasDestroy(cCanvas); 137 // Destroy the bitmap object. 138 OH_Drawing_BitmapDestroy(cBitmap); 139 ``` 140 141## Development Procedure for Text Drawing 142 143The following steps describe how to use the text drawing and display feature of the Native Drawing module. 1441. **Create a canvas and a bitmap.** 145 146 ```c++ 147 // Create a bitmap. 148 OH_Drawing_Bitmap* cBitmap = OH_Drawing_BitmapCreate(); 149 OH_Drawing_BitmapFormat cFormat {COLOR_FORMAT_RGBA_8888, ALPHA_FORMAT_OPAQUE}; 150 OH_Drawing_BitmapBuild(cBitmap, width, height, &cFormat); 151 // Create a canvas. 152 OH_Drawing_Canvas* cCanvas = OH_Drawing_CanvasCreate(); 153 OH_Drawing_CanvasBind(cCanvas, cBitmap); 154 OH_Drawing_CanvasClear(cCanvas, OH_Drawing_ColorSetArgb(0xFF, 0xFF, 0xFF, 0xFF)); 155 ``` 156 1572. **Set the typography style.** 158 159 ```c++ 160 // Set the typography attributes such as left to right (LTR) for the text direction and left-aligned for the text alignment mode. 161 OH_Drawing_TypographyStyle* typoStyle = OH_Drawing_CreateTypographyStyle(); 162 OH_Drawing_SetTypographyTextDirection(typoStyle, TEXT_DIRECTION_LTR); 163 OH_Drawing_SetTypographyTextAlign(typoStyle, TEXT_ALIGN_LEFT); 164 ``` 165 1663. **Set the text style.** 167 168 ```c++ 169 // Set the text color, for example, black. 170 OH_Drawing_TextStyle* txtStyle = OH_Drawing_CreateTextStyle(); 171 OH_Drawing_SetTextStyleColor(txtStyle, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0x00, 0x00)); 172 // Set text attributes such as the font size and weight. 173 double fontSize = 30; 174 OH_Drawing_SetTextStyleFontSize(txtStyle, fontSize); 175 OH_Drawing_SetTextStyleFontWeight(txtStyle, FONT_WEIGHT_400); 176 OH_Drawing_SetTextStyleBaseLine(txtStyle, TEXT_BASELINE_ALPHABETIC); 177 OH_Drawing_SetTextStyleFontHeight(txtStyle, 1); 178 // Set the font families. 179 const char* fontFamilies[] = {"Roboto"}; 180 OH_Drawing_SetTextStyleFontFamilies(txtStyle, 1, fontFamilies); 181 OH_Drawing_SetTextStyleFontStyle(txtStyle, FONT_STYLE_NORMAL); 182 OH_Drawing_SetTextStyleLocale(txtStyle, "en"); 183 ``` 184 1854. **Generate the final text display effect.** 186 187 ```c++ 188 OH_Drawing_TypographyCreate* handler = OH_Drawing_CreateTypographyHandler(typoStyle, 189 OH_Drawing_CreateFontCollection()); 190 OH_Drawing_TypographyHandlerPushTextStyle(handler, txtStyle); 191 // Set the text content. 192 const char* text = "Hello World\n"; 193 OH_Drawing_TypographyHandlerAddText(handler, text); 194 OH_Drawing_TypographyHandlerPopTextStyle(handler); 195 OH_Drawing_Typography* typography = OH_Drawing_CreateTypography(handler); 196 // Set the maximum width. 197 double maxWidth = 800.0; 198 OH_Drawing_TypographyLayout(typography, maxWidth); 199 // Set the start position for drawing the text on the canvas. 200 double position[2] = {10.0, 15.0}; 201 // Draw the text on the canvas. 202 OH_Drawing_TypographyPaint(typography, cCanvas, position[0], position[1]); 203 ``` 204