ArkTSGraphicsDraw

介绍

本示例基于开发>图形->ArkGraphics 2D（方舟2D图形服务）-> 图形绘制与显示中的ArkTS部分开发。

本示例主要功能如下：

• 演示画布的获取与绘制结果的显示，画布的类型分为直接画布与离屏画布。
• 演示画布操作及状态处理，通过对画布进行裁剪、平移等操作控制绘图结果。
• 演示基础绘制效果，绘制经过填充、描边等效果处理后的图形。
• 演示复杂绘制效果，绘制经过着色器、滤波器等效果处理过后的图形。
• 演示几何图形绘制，绘制点、圆弧、区域等多种几何形状。
• 演示图片绘制，绘制位图。
• 演示字块绘制，绘制多种字块类型，包括中文文字描边、主题文字、单字和特征字体等。

效果预览

主页	画布的获取与绘制结果的显示	复杂绘制效果-混合模式	几何图形绘制-绘制路径
字块绘制-中文文字描边	字块绘制-主题文字	字块绘制-单字	字块绘制-特征字体

使用说明：

1. 点击主页的导航标签组件，进入对应的演示页面。演示页面包括：
   • 画布的获取与绘制结果的显示
   • 画布操作及状态处理
   • 基础绘制效果
   • 复杂绘制效果
   • 几何图形绘制
   • 图片绘制
   • 字块绘制
2. 在演示页面内点击绘制按钮，界面绘制出对应图案。
3. 点击返回按钮，退出应用。

工程目录

ArkTSGraphicsDraw
entry/src/main
├──ets
│  ├──drawing
|  |  └──pages
|  |  	├──BasicEffect.ets (基础绘制效果界面)
|  |  	├──CanvasGetResult.ets (画布的获取与绘制结果的显示界面)
|  |  	├──CanvasOperationState.ets (画布操作及状态处理界面)
|  |  	├──ComplexEffect.ets (复杂绘制效果界面)
|  |  	├──PixelMapDrawing.ets (图片绘制界面)
|  |  	├──ShapeDrawing.ets (几何形状绘制界面)
|  |  	└──TextBlockDrawing.ets (字块绘制界面)
│  └──pages                      
│     └──Index.ets (UI主界面)
└──resources (资源文件)
entry/src/ohosTest/ets/
├── test
|   ├── Ability.test.ets (UI测试代码)
|   └── List.test.ets (测试套件列表)
└── utils
    └── Logger.ets (logger日志类)

具体实现

1. 自定义渲染节点 (MyRenderNode)：继承自 RenderNode，重写draw函数绘制图案。
2. 自定义节点控制器 (MyNodeController)：继承自 NodeController，自定义makeNode 方法。创建了一个根节点 (rootNode)，并将 myRenderNode 添加为根节点的子节点。通过设置 backgroundColor、frame、pivot、scale 等属性，来控制渲染节点的显示效果。
3. 绘制内容的切换：MyRenderNode中的drawFunctions 数组存储了多个绘制函数，draw 方法根据当前的绘制函数索引调用对应的绘制函数。当绘制索引更改时，调用 invalidate()触发重绘，切换绘制内容。

相关权限

不涉及

依赖

不涉及。

约束和限制

1. 本示例支持标准系统上运行，支持设备：RK3568，手机;（注意：由于底层硬件原因，RK3568设备上无法运行PixelMapDrawing.ets中的editPixel函数，对应图片绘制（ArkTS）文档的编辑PixelMap中像素部分）

2. 本示例支持API20版本SDK，版本号：6.0.0.47；

3. 本示例已支持使DevEco Studio 6.0.0 Release (构建版本：6.0.0.858，构建 2025年10月10日)编译运行

下载

如需单独下载本工程，执行如下命令：

git init
git config core.sparsecheckout true
echo code/DocsSample/Drawing/ArkTSGraphicsDraw/ > .git/info/sparse-checkout
git remote add origin OpenHarmony/applications_app_samples
git pull origin master