HarmonyOS Next 手写绘制及保存图片案例，2024年最新一线互联网移动架构师NDK模块开发_鸿蒙next pixelmap 重新绘制图片的位置

介绍

本示例使用drawing库的Pen和Path结合NodeContainer组件实现手写绘制功能，并通过image库的packToFile和packing接口将手写板的绘制内容保存为图片。

效果图预览

使用说明

1. 在虚线区域手写绘制，点击撤销按钮撤销前一笔绘制，点击重置按钮清空绘制。
2. 点击packToFile保存图片按钮和packing保存图片按钮可以将绘制内容保存为图片写入文件，显示图片保存路径。

实现思路

1. 创建NodeController的子类MyNodeController，用于获取根节点的RenderNode和绑定的NodeContainer组件宽高。源码参考RenderNodeModel.ets

export class MyNodeController extends NodeController {
private rootNode: FrameNode | null = null; // 根节点
rootRenderNode: RenderNode | null = null; // 从NodeController根节点获取的RenderNode，用于添加和删除新创建的MyRenderNode实例
width: number = 0; // 实例绑定的NodeContainer组件的宽，单位px
height: number = 0; // 实例绑定的NodeContainer组件的宽，单位px

// MyNodeController实例绑定的NodeContainer创建时触发，创建根节点rootNode并将其挂载至NodeContainer
makeNode(uiContext: UIContext): FrameNode {
this.rootNode = new FrameNode(uiContext);
if (this.rootNode !== null) {
this.rootRenderNode = this.rootNode.getRenderNode();
}
return this.rootNode;
}

// 绑定的NodeContainer布局时触发，获取NodeContainer的宽高
aboutToResize(size: Size): void {
this.width = size.width;
this.height = size.height;
// 设置画布底色为白色
if (this.rootRenderNode !== null) {
// NodeContainer布局完成后设置rootRenderNode的背景色为白色
this.rootRenderNode.backgroundColor = 0XFFFFFFFF;
// rootRenderNode的位置从组