1# ArkTSGraphicsDraw 2 3## 介绍 4 5本示例基于开发>图形->ArkGraphics 2D（方舟2D图形服务）-> [图形绘制与显示](https://gitee.com/openharmony/docs/tree/OpenHarmony-5.0.1-Release/zh-cn/application-dev/graphics#/openharmony/docs/blob/OpenHarmony-5.0.1-Release/zh-cn/application-dev/graphics/textblock-drawing-arkts.md)中的ArkTS部分开发。 6 7本示例主要功能如下： 8 9- 演示画布的获取与绘制结果的显示，画布的类型分为直接画布与离屏画布。 10- 演示画布操作及状态处理，通过对画布进行裁剪、平移等操作控制绘图结果 11- 演示绘制效果，绘制经过填充、描边、着色器、滤波器等效果处理过后的图形。 12- 演示图元绘制，绘制多种几何形状、绘制位图及绘制字块。 13 14## 效果预览 15 16| 主页 | 画布获取 | 绘制效果 | 图元绘制 | 17| --------------------------------- | ----------------------------------- | ----------------------------------- | --------------------------------- | 18|  |  |  |  | 19 20 21使用说明： 22 231. 点击主页的导航标签组件，进入对应的演示页面。演示页面包括： 24 - 画布的获取与绘制结果的显示 25 - 画布操作及状态处理 26 - 基础绘制效果 27 - 复杂绘制效果 28 - 几何图形绘制 29 - 图片绘制 30 - 字块绘制 312. 在演示页面内点击绘制按钮，界面绘制出对应图案。 323. 点击返回按钮，退出应用。 33 34## 工程目录 35 36``` 37ArkTSGraphicsDraw 38entry/src/main 39├──ets 40│ ├──drawing 41| | └──pages 42| | ├──BasicEffect.ets (基础渲染效果界面) 43| | ├──CanvasGetResult.ets (画布的获取与绘制结果的显示界面) 44| | ├──CanvasOperationState.ets (画布操作及状态处理界面) 45| | ├──ComplexEffect.ets (复杂绘制效果界面) 46| | ├──PixelMapDrawing.ets (图片绘制界面) 47| | ├──ShapeDrawing.ets (几何形状绘制界面) 48| | └──TextBlockDrawing.ets (字块绘制界面) 49│ └──pages 50│ └──Index.ets (UI主界面) 51└──resources (资源文件) 52entry/src/ohosTest/ets/ 53├── test 54| ├── Ability.test.ets (UI测试代码) 55| └── List.test.ets (测试套件列表) 56└── utils 57 └── Logger.ets (logger日志类) 58``` 59 60## 具体实现 61 621. 自定义渲染节点 (`MyRenderNode`)：继承自 `RenderNode`，重写draw函数绘制图案。 632. 自定义节点控制器 (`MyNodeController`)：继承自 `NodeController`，自定义`makeNode` 方法。创建了一个根节点 (`rootNode`)，并将 `myRenderNode` 添加为根节点的子节点。通过设置 `backgroundColor`、`frame`、`pivot`、`scale` 等属性，来控制渲染节点的显示效果。 643. 绘制内容的切换：`MyRenderNode`中的`drawFunctions` 数组存储了多个绘制函数，`draw` 方法根据当前的绘制函数索引调用对应的绘制函数。当绘制索引更改时，调用 `invalidate()`触发重绘，切换绘制内容。 65 66## 相关权限 67 68不涉及 69 70## 依赖 71 72不涉及。 73 74## 约束和限制 75 761. 本示例支持标准系统上运行，支持设备：RK3568; 77 782. 本示例支持API14版本SDK，版本号：5.0.2.58； 79 803. 本示例已支持使DevEco Studio 5.0.1 Release (构建版本：5.0.5.306，构建 2024年12月6日)编译运行 81 82## 下载 83 84如需单独下载本工程，执行如下命令： 85 86``` 87git init 88git config core.sparsecheckout true 89echo code/DocsSample/Drawing/ArkTSGraphicsDraw/ > .git/info/sparse-checkout 90git remote add origin OpenHarmony/applications_app_samples 91git pull origin master 92```
