写点什么

Native Drawing 开发指导,实现 HarmonyOS 基本图形和字体的绘制

  • 2023-12-07
    北京
  • 本文字数:3113 字

    阅读完需:约 10 分钟

Native Drawing开发指导,实现HarmonyOS基本图形和字体的绘制

场景介绍

Native Drawing 模块提供了一系列的接口用于基本图形和字体的绘制。常见的应用场景举例:

● 2D 图形绘制。

● 文本绘制。

接口说明



详细的接口说明请参考Drawing

2D 图形绘制开发步骤

以下步骤描述了如何使用 Native Drawing 模块的画布画笔绘制一个基本的 2D 图形:

1.  创建 Bitmap 实例。使用 drawing_bitmap.h 的 OH_Drawing_BitmapCreate 接口创建一个 Bitmap 实例 cBitmap,并使用 OH_Drawing_BitmapBuild 指定其长宽大小和像素格式。


// 创建一个bitmap对象OH_Drawing_Bitmap* cBitmap = OH_Drawing_BitmapCreate();// 定义bitmap的像素格式OH_Drawing_BitmapFormat cFormat {COLOR_FORMAT_RGBA_8888, ALPHA_FORMAT_OPAQUE};// 构造对应格式的bitmapOH_Drawing_BitmapBuild(cBitmap, width, height, &cFormat);

复制代码


2.  创建画布实例。使用 drawing_canvas.h 的 OH_Drawing_CanvasCreate 接口创建一个画布实例 cCanvas,并使用 OH_Drawing_CanvasBind 接口将 cBitmap 实例绑定到 cCanvas 上,后续在画布上绘制的内容会输出到绑定的 cBitmap 实例中。


// 创建一个canvas对象OH_Drawing_Canvas* cCanvas = OH_Drawing_CanvasCreate();// 将画布与bitmap绑定,画布画的内容会输出到绑定的bitmap内存中OH_Drawing_CanvasBind(cCanvas, cBitmap);// 使用白色清除画布内容OH_Drawing_CanvasClear(cCanvas, OH_Drawing_ColorSetArgb(0xFF, 0xFF, 0xFF, 0xFF));

复制代码


3.  构造 Path 形状。使用 drawing_path.h 提供的接口完成一个五角星形状的构造 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;
// 创建一个path对象,然后使用接口连接成一个五角星形状OH_Drawing_Path* cPath = OH_Drawing_PathCreate();// 指定path的起始位置OH_Drawing_PathMoveTo(cPath, aX, aY);// 用直线连接到目标点OH_Drawing_PathLineTo(cPath, bX, bY);OH_Drawing_PathLineTo(cPath, cX, cY);OH_Drawing_PathLineTo(cPath, dX, dY);OH_Drawing_PathLineTo(cPath, eX, eY);// 闭合形状,path绘制完毕OH_Drawing_PathClose(cPath);

复制代码


4.  设置画笔和画刷样式。使用 drawing_pen.h 的 OH_Drawing_PenCreate 接口创建一个画笔实例 cPen, 并设置抗锯齿、颜色、线宽等属性,画笔用于形状边框线的绘制。使用 drawing_brush.h 的 OH_Drawing_BrushCreate 接口创建一个画刷实例 cBrush, 并设置填充颜色, 画刷用于形状内部的填充。使用 drawing_canvas.h 的 OH_Drawing_CanvasAttachPen 和 OH_Drawing_CanvasAttachBrush 接口将画笔画刷的实例设置到画布实例中。


// 创建一个画笔Pen对象,Pen对象用于形状的边框线绘制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);// 将Pen画笔设置到canvas中OH_Drawing_CanvasAttachPen(cCanvas, cPen);
// 创建一个画刷Brush对象,Brush对象用于形状的填充OH_Drawing_Brush* cBrush = OH_Drawing_BrushCreate();OH_Drawing_BrushSetColor(cBrush, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0xFF, 0x00));
// 将Brush画刷设置到canvas中OH_Drawing_CanvasAttachBrush(cCanvas, cBrush);

复制代码


5.  绘制 Path 形状。使用 drawing_canvas.h 的 OH_Drawing_CanvasDrawPath 接口将五角星绘制到画布上,绘制完毕后不再使用的实例需要调用对应的接口进行销毁。


// 在画布上画path的形状,五角星的边框样式为pen设置,颜色填充为Brush设置OH_Drawing_CanvasDrawPath(cCanvas, cPath);// 销毁创建的对象OH_Drawing_BrushDestroy(cBrush);OH_Drawing_PenDestroy(cPen);OH_Drawing_PathDestroy(cPath);

复制代码


6.  获取像素数据。使用 drawing_bitmap.h 的 OH_Drawing_BitmapGetPixels 接口获取到画布绑定 bitmap 实例的像素地址,该地址指向的内存包含画布刚刚绘制的像素数据。


// 画完后获取像素地址,地址指向的内存包含画布画的像素数据void* bitmapAddr = OH_Drawing_BitmapGetPixels(cBitmap);std::copy(addr, addr + addrSize, static_cast<uint8_t*>(bitmapAddr));// 销毁canvas对象OH_Drawing_CanvasDestroy(cCanvas);// 销毁bitmap对象OH_Drawing_BitmapDestroy(cBitmap);

复制代码


文本绘制开发步骤

以下步骤描述了如何使用 Native Drawing 模块的文字显示功能:

1.  创建画布和 bitmap 实例


// 创建bitmapOH_Drawing_Bitmap* cBitmap = OH_Drawing_BitmapCreate();OH_Drawing_BitmapFormat cFormat {COLOR_FORMAT_RGBA_8888, ALPHA_FORMAT_OPAQUE};OH_Drawing_BitmapBuild(cBitmap, width, height, &cFormat);// 创建canvasOH_Drawing_Canvas* cCanvas = OH_Drawing_CanvasCreate();OH_Drawing_CanvasBind(cCanvas, cBitmap);OH_Drawing_CanvasClear(cCanvas, OH_Drawing_ColorSetArgb(0xFF, 0xFF, 0xFF, 0xFF));

复制代码


2.  设置排版风格


// 选择从左到右/左对齐等排版属性OH_Drawing_TypographyStyle* typoStyle = OH_Drawing_CreateTypographyStyle();OH_Drawing_SetTypographyTextDirection(typoStyle, TEXT_DIRECTION_LTR);OH_Drawing_SetTypographyTextAlign(typoStyle, TEXT_ALIGN_LEFT);

复制代码


3.  设置文本风格


// 设置文字颜色,例如黑色OH_Drawing_TextStyle* txtStyle = OH_Drawing_CreateTextStyle();OH_Drawing_SetTextStyleColor(txtStyle, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0x00, 0x00));// 设置文字大小、字重等属性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);// 设置字体类型等const char* fontFamilies[] = {"Roboto"};OH_Drawing_SetTextStyleFontFamilies(txtStyle, 1, fontFamilies);OH_Drawing_SetTextStyleFontStyle(txtStyle, FONT_STYLE_NORMAL);OH_Drawing_SetTextStyleLocale(txtStyle, "en");

复制代码


4.  生成最终文本显示效果


OH_Drawing_TypographyCreate* handler = OH_Drawing_CreateTypographyHandler(typoStyle,    OH_Drawing_CreateFontCollection());OH_Drawing_TypographyHandlerPushTextStyle(handler, txtStyle);// 设置文字内容const char* text = "HarmonyOS\n";OH_Drawing_TypographyHandlerAddText(handler, text);OH_Drawing_TypographyHandlerPopTextStyle(handler);OH_Drawing_Typography* typography = OH_Drawing_CreateTypography(handler);// 设置页面最大宽度double maxWidth = 800.0;OH_Drawing_TypographyLayout(typography, maxWidth);// 设置文本在画布上绘制的起始位置double position[2] = {10.0, 15.0};// 将文本绘制到画布上OH_Drawing_TypographyPaint(typography, cCanvas, position[0], position[1]);

复制代码


用户头像

每一位开发者都是华为要汇聚的星星之火 2021-10-15 加入

提供HarmonyOS关键技术解析、版本更新、开发者实践和活动资讯,欢迎各位开发者加入HarmonyOS生态,一起创造无限可能!

评论

发布
暂无评论
Native Drawing开发指导,实现HarmonyOS基本图形和字体的绘制_HarmonyOS_HarmonyOS开发者_InfoQ写作社区