1# Drawing开发指导 2 3## 场景介绍 4 5Native Drawing模块提供了一系列的接口用于基本图形和字体的绘制。常见的应用场景举例： 6* 2D图形绘制。 7* 文本绘制。 8 9## 接口说明 10 11| 接口名 | 描述 | 12| -------- | -------- | 13| OH_Drawing_BitmapCreate (void) | 创建一个位图对象。 | 14| OH_Drawing_BitmapBuild (OH_Drawing_Bitmap *, const uint32_t width, const uint32_t height, const OH_Drawing_BitmapFormat *) | 初始化位图对象的宽度和高度，并且为该位图设置像素格式。 | 15| OH_Drawing_CanvasCreate (void) | 创建一个画布对象。 | 16| OH_Drawing_CanvasBind (OH_Drawing_Canvas *, OH_Drawing_Bitmap *) | 将一个位图对象绑定到画布中，使得画布绘制的内容输出到位图中（即CPU渲染）。 | 17| OH_Drawing_CanvasAttachBrush (OH_Drawing_Canvas *, const OH_Drawing_Brush *) | 设置画刷给画布，画布将会使用设置的画刷样式和颜色去填充绘制的图形形状。 | 18| OH_Drawing_CanvasAttachPen (OH_Drawing_Canvas *, const OH_Drawing_Pen *) | 设置画笔给画布，画布将会使用设置画笔的样式和颜色去绘制图形形状的轮廓。 | 19| OH_Drawing_CanvasDrawPath (OH_Drawing_Canvas *, const OH_Drawing_Path *) | 画一个自定义路径。 | 20| OH_Drawing_PathCreate (void) | 创建一个路径对象。 | 21| OH_Drawing_PathMoveTo (OH_Drawing_Path *, float x, float y) | 设置自定义路径的起始点位置。 | 22| OH_Drawing_PathLineTo (OH_Drawing_Path *, float x, float y) | 添加一条到目标点的线段。 | 23| OH_Drawing_PathClose (OH_Drawing_Path *) | 闭合路径，会添加一条到路径起点位置的线段。 | 24| OH_Drawing_PenCreate (void) | 创建一个画笔对象。 | 25| OH_Drawing_PenSetAntiAlias (OH_Drawing_Pen *, bool) | 设置抗锯齿属性，如果为真则说明画笔会启用抗锯齿功能，在绘制图形时会对图形的边缘像素进行半透明的模糊处理。 | 26| OH_Drawing_PenSetWidth (OH_Drawing_Pen *, float width) | 设置画笔的厚度属性，厚度属性描述了画笔绘制图形轮廓的宽度。 | 27| OH_Drawing_BrushCreate (void) | 创建一个画刷对象。 | 28| OH_Drawing_BrushSetColor (OH_Drawing_Brush *, uint32_t color) | 设置画刷的颜色属性，颜色属性描述了画刷填充图形时使用的颜色，用一个32位（ARGB）的变量表示。 | 29| OH_Drawing_CreateTypographyStyle (void) | 创建一个排版对象，用于定义排版样式。 | 30| OH_Drawing_CreateTextStyle (void) | 创建一个文本对象，用于定义文本样式。 | 31| OH_Drawing_TypographyHandlerAddText (OH_Drawing_TypographyCreate *, const char *) | 设置文本内容。 | 32| OH_Drawing_TypographyPaint (OH_Drawing_Typography *, OH_Drawing_Canvas *, double, double) | 显示文本。 | 33 34详细的接口说明请参考[Drawing](../reference/native-apis/_drawing.md)。 35 36## 2D图形绘制开发步骤 37 38以下步骤描述了在**OpenHarmony**如何使用 **Native Drawing** 模块的画布画笔绘制一个基本的2D图形： 39 401. **创建Bitmap实例**。使用 **drawing_bitmap.h** 的 **OH_Drawing_BitmapCreate** 接口创建一个Bitmap实例 **cBitmap**，并使用 **OH_Drawing_BitmapBuild** 指定其长宽大小和像素格式。 41 42 ```c++ 43 // 创建一个bitmap对象 44 OH_Drawing_Bitmap* cBitmap = OH_Drawing_BitmapCreate(); 45 // 定义bitmap的像素格式 46 OH_Drawing_BitmapFormat cFormat {COLOR_FORMAT_RGBA_8888, ALPHA_FORMAT_OPAQUYE}; 47 // 构造对应格式的bitmap 48 OH_Drawing_BitmapBuild(cBitmap, width, height, &cFormat); 49 ``` 50 512. **创建画布实例**。使用 **drawing_canvas.h** 的 **OH_Drawing_CanvasCreate** 接口创建一个画布实例 **cCanvas**，并使用 **OH_Drawing_CanvasBind** 接口将 **cBitmap** 实例绑定到 **cCanvas** 上，后续在画布上绘制的内容会输出到绑定的 **cBitmap** 实例中。 52 53 ```c++ 54 // 创建一个canvas对象 55 OH_Drawing_Canvas* cCanvas = OH_Drawing_CanvasCreate(); 56 // 将画布与bitmap绑定，画布画的内容会输出到绑定的bitmap内存中 57 OH_Drawing_CanvasBind(cCanvas, cBitmap); 58 // 使用白色清除画布内容 59 OH_Drawing_CanvasClear(cCanvas, OH_Drawing_ColorSetArgb(0xFF, 0xFF, 0xFF, 0xFF)); 60 ``` 61 623. **构造Path形状**。使用 **drawing_path.h** 提供的接口完成一个五角星形状的构造 **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 // 创建一个path对象，然后使用接口连接成一个五角星形状 83 OH_Drawing_Path* cPath = OH_Drawing_PathCreate(); 84 // 指定path的起始位置 85 OH_Drawing_PathMoveTo(cPath, aX, aY); 86 // 用直线连接到目标点 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 // 闭合形状，path绘制完毕 92 OH_Drawing_PathClose(cPath); 93 ``` 94 954. **设置画笔和画刷样式**。使用 **drawing_pen.h** 的 **OH_Drawing_PenCreate** 接口创建一个画笔实例 **cPen**, 并设置抗锯齿、颜色、线宽等属性，画笔用于形状边框线的绘制。使用**drawing_brush.h** 的 **OH_Drawing_BrushCreate** 接口创建一个画刷实例 **cBrush**, 并设置填充颜色， 画刷用于形状内部的填充。使用 **drawing_canvas.h** 的 **OH_Drawing_CanvasAttachPen** 和 **OH_Drawing_CanvasAttachBrush** 接口将画笔画刷的实例设置到画布实例中。 96 97 ```c++ 98 // 创建一个画笔Pen对象，Pen对象用于形状的边框线绘制 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 // 将Pen画笔设置到canvas中 105 OH_Drawing_CanvasAttachPen(cCanvas, cPen); 106 107 // 创建一个画刷Brush对象，Brush对象用于形状的填充 108 OH_Drawing_Brush* cBrush = OH_Drawing_BrushCreate(); 109 OH_Drawing_BrushSetColor(cBrush, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0xFF, 0x00)); 110 111 // 将Brush画刷设置到canvas中 112 OH_Drawing_CanvasAttachBrush(cCanvas, cBrush); 113 ``` 114 1155. **绘制Path形状**。使用 **drawing_canvas.h** 的 **OH_Drawing_CanvasDrawPath** 接口将五角星绘制到画布上，绘制完毕后不再使用的实例需要调用对应的接口进行销毁。 116 117 ```c++ 118 // 在画布上画path的形状，五角星的边框样式为pen设置，颜色填充为Brush设置 119 OH_Drawing_CanvasDrawPath(cCanvas, cPath); 120 // 销毁创建的对象 121 OH_Drawing_BrushDestroy(cBrush); 122 OH_Drawing_PenDestroy(cPen); 123 OH_Drawing_PathDestroy(cPath); 124 ``` 125 1266. **获取像素数据**。使用 **drawing_bitmap.h** 的 **OH_Drawing_BitmapGetPixels** 接口获取到画布绑定bitmap实例的像素地址，该地址指向的内存包含画布刚刚绘制的像素数据。 127 128 ```c++ 129 // 画完后获取像素地址，地址指向的内存包含画布画的像素数据 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 // 销毁canvas对象 136 OH_Drawing_CanvasDestroy(cCanvas); 137 // 销毁bitmap对象 138 OH_Drawing_BitmapDestroy(cBitmap); 139 ``` 140 141## 文本绘制开发步骤 142 143以下步骤描述了在OpenHarmony中，如何使用**Native Drawing**模块的文字显示功能： 1441. **创建画布和bitmap实例**。 145 146 ```c++ 147 // 创建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 // 创建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. **设置排版风格**。 158 159 ```c++ 160 // 选择从左到右/左对齐等排版属性 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. **设置文本风格**。 167 168 ```c++ 169 // 设置文字颜色，例如黑色 170 OH_Drawing_TextStyle* txtStyle = OH_Drawing_CreateTextStyle(); 171 OH_Drawing_SetTextStyleColor(txtStyle, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0x00, 0x00)); 172 // 设置文字大小、字重等属性 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 // 设置字体类型等 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. **生成最终文本显示效果**。 186 187 ```c++ 188 OH_Drawing_TypographyCreate* handler = OH_Drawing_CreateTypographyHandler(typoStyle, 189 OH_Drawing_CreateFontCollection()); 190 OH_Drawing_TypographyHandlerPushTextStyle(handler, txtStyle); 191 // 设置文字内容 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 // 设置页面最大宽度 197 double maxWidth = 800.0; 198 OH_Drawing_TypographyLayout(typography, maxWidth); 199 // 设置文本在画布上绘制的起始位置 200 double position[2] = {10.0, 15.0}; 201 // 将文本绘制到画布上 202 OH_Drawing_TypographyPaint(typography, cCanvas, position[0], position[1]); 203 ``` 204 205## 相关实例 206 207针对Drawing模块的使用，有以下相关实例可供参考： 208* [Drawing模块2D图形绘制](https://gitee.com/openharmony/graphic_graphic_2d/blob/master/rosen/samples/2d_graphics/drawing_c_sample.cpp)。 209* [Drawing模块文本绘制](https://gitee.com/openharmony/graphic_graphic_2d/blob/master/rosen/samples/text/renderservice/drawing_text_c_sample.cpp)。 210