README_zh.md
1# Native Drawing
2
3### 介绍
4
5本示例中主要介绍开发者在利用Native XComponent来获取NativeWindow实例、获取布局/事件信息、注册事件回调并通过Drawing API实现在页面上绘制形状。功能主要包括点击按钮绘制一个五角星和“Hello World Drawing”文字。
6
7使用说明
8
91. 安装编译生成的hap包，并打开应用。
10
112. 点击页面底部“Draw Path”按钮，页面将绘制一个五角星；
12
133. 点击页面底部“Draw Text”按钮，页面将绘制“Hello World Drawing”。
14
15> **说明**
16> 本示例XComponent接口使用方法已停止演进，推荐使用方法请参考[ArkTSXComponent示例](../ArkTSXComponent/README_zh.md)。
17### 效果预览
18
19| 主页 | 绘制五角星 | 绘制文字 |
20| ------------------------------------ |-----------------------------------------------| --------------------------------------------------- |
21|  |  |  |
22
23### 工程目录
24
25```
26├──entry/src/main
27│ ├──cpp // C++代码区
28│ │ ├──CMakeLists.txt // CMake配置文件
29│ │ ├──hello.cpp // Napi模块注册
30│ │ ├──common
31│ │ │ └──log_common.h // 日志封装定义文件
32│ │ ├──plugin // 生命周期管理模块
33│ │ │ ├──plugin_manager.cpp
34│ │ │ └──plugin_manager.h
35│ │ ├──samples // samples渲染模块
36│ │ │ ├──sample_bitmap.cpp
37│ │ │ └──sample_bitmap.h
38│ ├──ets // ets代码区
39│ │ ├──entryability
40│ │ │ ├──EntryAbility.ts // 程序入口类
41| | | └──EntryAbility.ets
42| | ├──interface
43│ │ │ └──XComponentContext.ts // XComponentContext
44│ │ └──pages // 页面文件
45│ │ └──Index.ets // 主界面
46| ├──resources // 资源文件目录
47```
48
49### 具体实现
50
51通过在IDE中创建Native c++ 工程，在c++代码中定义对外接口为drawPattern和drawText，在js侧调用该接口可在页面上绘制出一个五角星和“Hello World Drawing”文字。
52
53在XComponent的OnSurfaceCreated回调中获取NativeWindow实例并初始化NativeWindow环境。调用OH_NativeXComponent_GetXComponentSize接口获取XComponent的宽高，并以此为输入调用Drawing相关的绘制接口在NativeWindow上绘制出一个五角星和文字。
54
55源码参考：[samples目录](entry/src/main/cpp/samples)下的文件。
56
57涉及到的相关接口：
58
59
60| 接口名 | 描述 |
61| -------- | -------- |
62| OH_Drawing_BitmapCreate (void) | 创建一个位图对象。 |
63| OH_Drawing_BitmapBuild (OH_Drawing_Bitmap *, const uint32_t width, const uint32_t height, const OH_Drawing_BitmapFormat *) | 初始化位图对象的宽度和高度，并且为该位图设置像素格式。 |
64| OH_Drawing_CanvasCreate (void) | 创建一个画布对象。 |
65| OH_Drawing_CanvasBind (OH_Drawing_Canvas *, OH_Drawing_Bitmap *) | 将一个位图对象绑定到画布中，使得画布绘制的内容输出到位图中（即CPU渲染）。 |
66| OH_Drawing_CanvasAttachBrush (OH_Drawing_Canvas *, const OH_Drawing_Brush *) | 设置画刷给画布，画布将会使用设置的画刷样式和颜色去填充绘制的图形形状。 |
67| OH_Drawing_CanvasAttachPen (OH_Drawing_Canvas *, const OH_Drawing_Pen *) | 设置画笔给画布，画布将会使用设置画笔的样式和颜色去绘制图形形状的轮廓。 |
68| OH_Drawing_CanvasDrawPath (OH_Drawing_Canvas *, const OH_Drawing_Path *) | 画一个自定义路径。 |
69| OH_Drawing_PathCreate (void) | 创建一个路径对象。 |
70| OH_Drawing_PathMoveTo (OH_Drawing_Path *, float x, float y) | 设置自定义路径的起始点位置。 |
71| OH_Drawing_PathLineTo (OH_Drawing_Path *, float x, float y) | 添加一条到目标点的线段。 |
72| OH_Drawing_PathClose (OH_Drawing_Path *) | 闭合路径，会添加一条到路径起点位置的线段。 |
73| OH_Drawing_PenCreate (void) | 创建一个画笔对象。 |
74| OH_Drawing_PenSetAntiAlias (OH_Drawing_Pen *, bool) | 设置抗锯齿属性，如果为真则说明画笔会启用抗锯齿功能，在绘制图形时会对图形的边缘像素进行半透明的模糊处理。 |
75| OH_Drawing_PenSetWidth (OH_Drawing_Pen *, float width) | 设置画笔的厚度属性，厚度属性描述了画笔绘制图形轮廓的宽度。 |
76| OH_Drawing_BrushCreate (void) | 创建一个画刷对象。 |
77| OH_Drawing_BrushSetColor (OH_Drawing_Brush *, uint32_t color) | 设置画刷的颜色属性，颜色属性描述了画刷填充图形时使用的颜色，用一个32位（ARGB）的变量表示。 |
78| OH_Drawing_CreateTypographyStyle (void) | 创建一个排版对象，用于定义排版样式。 |
79| OH_Drawing_CreateTextStyle (void) | 创建一个文本对象，用于定义文本样式。 |
80| OH_Drawing_TypographyHandlerAddText (OH_Drawing_TypographyCreate *, const char *) | 设置文本内容。 |
81| OH_Drawing_TypographyPaint (OH_Drawing_Typography *, OH_Drawing_Canvas *, double, double) | 显示文本。 |
82
83详细的接口说明请参考[Drawing](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/native-apis/_drawing.md)。
84
85### 相关权限
86
87不涉及。
88
89### 依赖
90
91XComponent NativeWindow。
92
93### 约束与限制
94
951. 本示例仅支持标准系统上运行。
962. 本示例为Stage模型，已适配API version 10版本SDK，SDK版本号(API Version 10 Release),镜像版本号(4.0 Release);
973. 本示例需要使用DevEco Studio 版本号(4.0 Release)及以上版本才可编译运行。
98### 下载
99
100如需单独下载本工程，执行如下命令：
101
102```
103git init
104git config core.sparsecheckout true
105echo code/BasicFeature/Native/NdkDrawing/ > .git/info/sparse-checkout
106git remote add origin https://gitee.com/openharmony/applications_app_samples.git
107git pull origin master
108```
109
