场景介绍

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

● 2D图形绘制。

● 文本绘制。

接口说明

接口名

描述

OH_Drawing_BitmapCreate (void)

创建一个位图对象。

OH_Drawing_BitmapBuild (OH_Drawing_Bitmap *, const uint32_t width, const uint32_t height, const OH_Drawing_BitmapFormat *)

初始化位图对象的宽度和高度,并且为该位图设置像素格式。

OH_Drawing_CanvasCreate (void)

创建一个画布对象。

OH_Drawing_CanvasBind (OH_Drawing_Canvas *, OH_Drawing_Bitmap *)

将一个位图对象绑定到画布中,使得画布绘制的内容输出到位图中(即CPU渲染)。

OH_Drawing_CanvasAttachBrush (OH_Drawing_Canvas *, const OH_Drawing_Brush *)

设置画刷给画布,画布将会使用设置的画刷样式和颜色去填充绘制的图形形状。

OH_Drawing_CanvasAttachPen (OH_Drawing_Canvas *, const OH_Drawing_Pen *)

设置画笔给画布,画布将会使用设置画笔的样式和颜色去绘制图形形状的轮廓。

OH_Drawing_CanvasDrawPath (OH_Drawing_Canvas *, const OH_Drawing_Path *)

画一个自定义路径。

OH_Drawing_PathCreate (void)

创建一个路径对象。

OH_Drawing_PathMoveTo (OH_Drawing_Path *, float x, float y)

设置自定义路径的起始点位置。

OH_Drawing_PathLineTo (OH_Drawing_Path *, float x, float y)

添加一条到目标点的线段。

OH_Drawing_PathClose (OH_Drawing_Path *)

闭合路径,会添加一条到路径起点位置的线段。

OH_Drawing_PenCreate (void)

创建一个画笔对象。

OH_Drawing_PenSetAntiAlias (OH_Drawing_Pen *, bool)

设置抗锯齿属性,如果为真则说明画笔会启用抗锯齿功能,在绘制图形时会对图形的边缘像素进行半透明的模糊处理。

OH_Drawing_PenSetWidth (OH_Drawing_Pen *, float width)

设置画笔的厚度属性,厚度属性描述了画笔绘制图形轮廓的宽度。

OH_Drawing_BrushCreate (void)

创建一个画刷对象。

OH_Drawing_BrushSetColor (OH_Drawing_Brush *, uint32_t color)

设置画刷的颜色属性,颜色属性描述了画刷填充图形时使用的颜色,用一个32位(ARGB)的变量表示。

OH_Drawing_CreateTypographyStyle (void)

创建一个排版对象,用于定义排版样式。

OH_Drawing_CreateTextStyle (void)

创建一个文本对象,用于定义文本样式。

OH_Drawing_TypographyHandlerAddText (OH_Drawing_TypographyCreate *, const char *)

设置文本内容。

OH_Drawing_TypographyPaint (OH_Drawing_Typography *, OH_Drawing_Canvas *, double, double)

显示文本。

详细的接口说明请参考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};
// 构造对应格式的bitmap
OH_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实例。

// 创建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);
// 创建canvas
OH_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]);

  

Native Drawing开发指导,实现HarmonyOS基本图形和字体的绘制的更多相关文章

  1. Native Application 开发详解(直接在程序中调用 ntdll.dll 中的 Native API,有内存小、速度快、安全、API丰富等8大优点)

    文章目录:                   1. 引子: 2. Native Application Demo 展示: 3. Native Application 简介: 4. Native Ap ...

  2. 【初探IONIC】不会Native可不可以开发APP?

    前言 Hybrid技术流行已经有一段日子了,楼主的关注点也一直围绕着移动端围绕着Hybrid相关展开,Hybrid已经是大大提升开发效率的开发方式了,但是仍然需要至少一个IOS与Andriod,那么可 ...

  3. Android原生(Native)C开发之一:环境搭建篇

    引用:http://blog.sina.com.cn/s/blog_4a0a39c30100auh9.html Android是基于Linux的操作系统,处理器是ARM的,所以要在Linux或Wind ...

  4. react-native —— 在Windows下搭建React Native Android开发环境

    在Windows下搭建React Native Android开发环境 前段时间在开发者头条收藏了 @天地之灵_邓鋆 分享的<在Windows下搭建React Native Android开发环 ...

  5. Cocoa Drawing Guide学习part1——基础和图形上下文 (转)

    原文:http://noark9.github.io/2013/12/28/cocoa-drawing-guide-study-part-1/ 简介 cocoa drawing由AppKit提供并且也 ...

  6. iOS之H5和Native混合开发

    今天需要用到一个H5和Native 混合开发的项目,简单的写一点入门的东西,很简答: 先介绍一下简单的配置步骤: 1.新建项目:SB拖一个UIWebView 按住Ctrl 拖线delegate 设置为 ...

  7. Cacti 是一套基于PHP,MySQL,SNMP及RRDTool开发的网络流量监测图形分析工具

    Cacti 是一套基于PHP,MySQL,SNMP及RRDTool开发的网络流量监测图形分析工具. mysqlreport是mysql性能监测时最常用的工具,对了解mysql运行状态和配置调整都有很大 ...

  8. Windows Phone开发(30):图形

    原文:Windows Phone开发(30):图形 图形如矩形.椭圆.路径等都从Shape类派生,它们一般表示规则或不规则图形,这些图形都是简单的二维图形,我相信大家都能理解的. 例一:矩形. 请看下 ...

  9. react-native —— 在Mac上配置React Native Android开发环境排坑总结

    配置React Native Android开发环境总结 1.卸载Android Studio,在终端(terminal)执行以下命令: rm -Rf /Applications/Android\ S ...

  10. Native App开发 与Web App开发(原生与web开发优缺点)

    Native App开发 Native App开发即我们所称的传统APP开发模式(原生APP开发模式),该开发针对IOS.Android等不同的手机操作系统要采用不同的语言和框架进行开发,该模式通常是 ...

随机推荐

  1. 【Azure 应用服务】添加自定义域时,Domain ownership 验证无法通过 

    问题描述 在Azure App Service添加自定义域名时,遇见了Domain ownership 验证无法通过的问题? 问题解决 因为DNS中配置App Service默认域名和自定义域名的CN ...

  2. ChatGPT用10秒画完一张UML流程图,而我用了。。。

    不用AI的程序员,失业潮真的快来临了. 一张订单履约的流程图,我花了10分钟才完成,而ChatGPT绘图过程只用了10秒钟,基本可以达到同样的水平,通过ChatGPT可以显著提高画流程图的效率. 订单 ...

  3. Java 多态性的使用

    1 package com.bytezreo.duotai3; 2 3 /*** 4 * 5 * @Description 练习多态性的使用 6 * @author Bytezero·zhenglei ...

  4. Git 系列:简介安装以及配置管理

    目录 简介安装 简介 Centos安装 配置管理 git help 概要 选项 示例 git-doc git config 概要 选项 变量 示例 初始化配置 简介安装 简介 https://git- ...

  5. 记一次maven不下来的经历

    起因:自己手动搭建个项目,参考公司项目使用了很多依赖,但是当自己maven时候发现一个依赖怎么也down不下来,就此展开了一番折腾 这个依赖叫 <dependency> <group ...

  6. yum总纲

    yum总纲 yum源搭建 首先本文档讲解两种搭建方式,第一有网络环境和第二种无网络环境. 第一种:有网络环境 首先 进入系统执行:以下命令,获取网络源 wget -O /etc/yum.repos.d ...

  7. 【实时渲染】3DCAT实时渲染云在BIM领域的应用

    很多人不知道实时渲染云在BIM领域都有哪些应用,今天3DCAT就为大家整理了一篇关于实时渲染云在BIM领域的应用介绍的文章.我们将会从什么是BIM.BIM在协作方面的挑战.3DCAT的解决方案及3DC ...

  8. Lifecycle详细分析

    Lifecycle源码分析 目录介绍 01.Lifecycle的作用是什么 02.Lifecycle的简单使用 03.Lifecycle的使用场景 04.如何实现生命周期感知 05.注解方法如何被调用 ...

  9. Vue中的$nextTick有什么作用?

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 一.NextTick是什么 官方对其的定义 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 D ...

  10. KingbaseES flashback drop table

    KingbaseES 引入回收站功能,实现drop table操作的数据恢复.回收站功能默认关闭,参数名称:kdb_flashback.db_recyclebin.如果不允许一个删除的表进回收站,需要 ...