鸿蒙APP实战案例分析——手写绘制及保存图片

📌往期推文全新看点（文中附带最新·鸿蒙全栈学习笔记）

📃 鸿蒙（HarmonyOS）北向开发知识点记录~

📃 鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~

📃 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？

📃 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~

📃 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？

📃 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？

📃 记录一场鸿蒙开发岗位面试经历~

📃 持续更新中……

---

介绍

本示例使用drawing库的Pen和Path结合NodeContainer组件实现手写绘制功能。手写板上完成绘制后，通过调用image库的packToFile和packing接口将手写板的绘制内容保存为图片，并将图片文件保存在应用沙箱路径中。

效果图预览

使用说明

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

实现思路

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

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的位置从组件NodeContainer的左上角(0,0)坐标开始，大小为NodeContainer的宽高
      this.rootRenderNode.frame = {
   
    x: 0, y: 0, width: this.width, height: this.height };