Drawing Development

When to Use

The NativeDrawing module provides APIs for drawing 2D graphics and text. The following scenarios are common for drawing development: * Drawing 2D graphics * Drawing text drawing

Available APIs

For details about the APIs, see Drawing.

Development Procedure for 2D Graphics Drawing

The following steps describe how to use the canvas and brush of the NativeDrawing module to draw a 2D graphics.

1. 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.

   // Create a bitmap object.
   OH_Drawing_Bitmap* cBitmap = OH_Drawing_BitmapCreate();
   // Define the pixel format of the bitmap.
   OH_Drawing_BitmapFormat cFormat {COLOR_FORMAT_RGBA_8888, ALPHA_FORMAT_OPAQUE};
   // Set the pixel format for the bitmap.
   OH_Drawing_BitmapBuild(cBitmap, width, height, &cFormat);
   

2. 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.

   // Create a canvas object.
   OH_Drawing_Canvas* cCanvas = OH_Drawing_CanvasCreate();
   // Bind the bitmap to the canvas. The content drawn on the canvas will be output to the bound bitmap memory.
   OH_Drawing_CanvasBind(cCanvas, cBitmap);
   // Use white to clear the canvas.
   OH_Drawing_CanvasClear(cCanvas, OH_Drawing_ColorSetArgb(0xFF, 0xFF, 0xFF, 0xFF));
   

3. Construct a shape. Use the APIs provided in drawing_path.h to draw a pentagram cPath.

   int len = 300;
   
   
   float aX = 500;
   float aY = 500;
   
   
   float dX = aX - len * std::sin(18.0f);
   float dY = aY + len * std::cos(18.0f);
   
   
   float cX = aX + len * std::sin(18.0f);
   float cY = dY;
   
   
   float bX = aX + (len / 2.0);
   float bY = aY + std::sqrt((cX - dX) * (cX - dX) + (len / 2.0) * (len / 2.0));
   
   
   float eX = aX - (len / 2.0);
   float eY = bY;
   
   
   // Create a path object and use the APIs to draw a pentagram.
   OH_Drawing_Path* cPath = OH_Drawing_PathCreate();
   // Specify the start point of the path.
   OH_Drawing_PathMoveTo(cPath, aX, aY);
   // Draw a line segment from the last point of a path to the target point.
   OH_Drawing_PathLineTo(cPath, bX, bY);
   OH_Drawing_PathLineTo(cPath, cX, cY);
   OH_Drawing_PathLineTo(cPath, dX, dY);
   OH_Drawing_PathLineTo(cPath, eX, eY);
   // Close the path. Now the path is drawn.
   OH_Drawing_PathClose(cPath);
   

4. 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.

   // Create a pen object and set the anti-aliasing, color, and thickness.
   OH_Drawing_Pen* cPen = OH_Drawing_PenCreate();
   OH_Drawing_PenSetAntiAlias(cPen, true);
   OH_Drawing_PenSetColor(cPen, OH_Drawing_ColorSetArgb(0xFF, 0xFF, 0x00, 0x00));
   OH_Drawing_PenSetWidth(cPen, 10.0);
   OH_Drawing_PenSetJoin(cPen, LINE_ROUND_JOIN);
   // Attach the pen to the canvas.
   OH_Drawing_CanvasAttachPen(cCanvas, cPen);
   
   
   // Create a brush object and set the color.
   OH_Drawing_Brush* cBrush = OH_Drawing_BrushCreate();
   OH_Drawing_BrushSetColor(cBrush, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0xFF, 0x00));
   
   
   // Attach the brush to the canvas.
   OH_Drawing_CanvasAttachBrush(cCanvas, cBrush);
   

5. 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.

   // 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.
   OH_Drawing_CanvasDrawPath(cCanvas, cPath);
   // Destroy the created objects when they are no longer needed.
   OH_Drawing_BrushDestroy(cBrush);
   OH_Drawing_PenDestroy(cPen);
   OH_Drawing_PathDestroy(cPath);
   

6. 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.

   // Obtain the pixel address after drawing. The memory to which the address points contains the pixel data of the drawing on the canvas.
   void* bitmapAddr = OH_Drawing_BitmapGetPixels(cBitmap);
   std::copy(addr, addr + addrSize, static_cast<uint8_t*>(bitmapAddr));
   // Destroy the canvas object.
   OH_Drawing_CanvasDestroy(cCanvas);
   // Destroy the bitmap object.
   OH_Drawing_BitmapDestroy(cBitmap);
   

Development Procedure for Text Drawing

The following steps describe how to use the text drawing feature of the Nativerawing module. 1. Create a canvas and a bitmap.

```c++
// Create a bitmap.
OH_Drawing_Bitmap* cBitmap = OH_Drawing_BitmapCreate();
OH_Drawing_BitmapFormat cFormat {COLOR_FORMAT_RGBA_8888, ALPHA_FORMAT_OPAQUE};
OH_Drawing_BitmapBuild(cBitmap, width, height, &cFormat);
// Create a canvas.
OH_Drawing_Canvas* cCanvas = OH_Drawing_CanvasCreate();
OH_Drawing_CanvasBind(cCanvas, cBitmap);
OH_Drawing_CanvasClear(cCanvas, OH_Drawing_ColorSetArgb(0xFF, 0xFF, 0xFF, 0xFF));
```

1. Set the typography style.

   // Set the typography attributes such as left to right (LTR) for the text direction and left-aligned for the text alignment mode.
   OH_Drawing_TypographyStyle* typoStyle = OH_Drawing_CreateTypographyStyle();
   OH_Drawing_SetTypographyTextDirection(typoStyle, TEXT_DIRECTION_LTR);
   OH_Drawing_SetTypographyTextAlign(typoStyle, TEXT_ALIGN_LEFT);
   

2. Set the text style.

   // Set the text color, for example, black.
   OH_Drawing_TextStyle* txtStyle = OH_Drawing_CreateTextStyle();
   OH_Drawing_SetTextStyleColor(txtStyle, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0x00, 0x00));
   // Set text attributes such as the font size and weight.
   double fontSize = 30;
   OH_Drawing_SetTextStyleFontSize(txtStyle, fontSize);
   OH_Drawing_SetTextStyleFontWeight(txtStyle, FONT_WEIGHT_400);
   OH_Drawing_SetTextStyleBaseLine(txtStyle, TEXT_BASELINE_ALPHABETIC);
   OH_Drawing_SetTextStyleFontHeight(txtStyle, 1);
   // Set the font families.
   const char* fontFamilies[] = {"Roboto"};
   OH_Drawing_SetTextStyleFontFamilies(txtStyle, 1, fontFamilies);
   OH_Drawing_SetTextStyleFontStyle(txtStyle, FONT_STYLE_NORMAL);
   OH_Drawing_SetTextStyleLocale(txtStyle, "en");
   

3. Generate the final text display effect.

   OH_Drawing_TypographyCreate* handler = OH_Drawing_CreateTypographyHandler(typoStyle,
       OH_Drawing_CreateFontCollection());
   OH_Drawing_TypographyHandlerPushTextStyle(handler, txtStyle);
   // Set the text content.
   const char* text = "Hello World\n";
   OH_Drawing_TypographyHandlerAddText(handler, text);
   OH_Drawing_TypographyHandlerPopTextStyle(handler);
   OH_Drawing_Typography* typography = OH_Drawing_CreateTypography(handler);
   // Set the maximum width.
   double maxWidth = 800.0;
   OH_Drawing_TypographyLayout(typography, maxWidth);
   // Set the start position for drawing the text on the canvas.
   double position[2] = {10.0, 15.0};
   // Draw the text on the canvas.
   OH_Drawing_TypographyPaint(typography, cCanvas, position[0], position[1]);
   

你可能感兴趣的鸿蒙文章

harmony 鸿蒙Native APIs

harmony 鸿蒙CPU Features

harmony 鸿蒙Drawing and Display Sample

harmony 鸿蒙Hardware Compatibility

harmony 鸿蒙Using MindSpore Lite for Model Inference

harmony 鸿蒙Using MindSpore Lite for Offline Model Conversion and Inference

harmony 鸿蒙Using Native APIs in Application Projects

harmony 鸿蒙NativeBuffer Development

harmony 鸿蒙NativeImage Development

harmony 鸿蒙RelationalStore Development