HarmonyOS Next 手写绘制及保存图片案例(1)，HarmonyOS鸿蒙热修复面试

本文链接：https://blog.csdn.net/2401_83946284/article/details/137563124

本文介绍了在HarmonyOS中创建自定义节点容器组件NodeContainer，实现手写绘制功能。详细讲解了触摸事件处理、自定义节点的创建和移动轨迹绘制，以及撤销和重置画布的方法。此外，还提供了保存图片到本地的流程，包括使用componentSnapshot.get获取PixelMap和使用image库进行图片保存。文章最后提到了鸿蒙开发的学习路线和面试要点。

摘要由CSDN通过智能技术生成

创建自定义节点容器组件NodeContainer，接收MyNodeController的实例，将自定义的渲染节点挂载到组件上，实现自定义绘制。源码参考HandWritingToImage.ets

NodeContainer(this.myNodeController)
.width(‘100%’)
.height($r(‘app.integer.hand_writing_canvas_height’))
.onTouch((event: TouchEvent) => {
this.onTouchEvent(event);
})
.id(NODE_CONTAINER_ID)

在NodeContainer组件的onTouch回调函数中，手指按下创建新的节点并挂载到rootRenderNode，nodeCount加一，手指移动更新节点中的path对象，绘制移动轨迹，并将节点重新渲染。源码参考HandWritingToImage.ets

onTouchEvent(event: TouchEvent): void {
// TODO：知识点：在手指按下时创建新的MyRenderNode对象，挂载到rootRenderNode上，手指移动时根据触摸点坐标绘制线条，并重新渲染节点
// 获取手指触摸位置的坐标点
const positionX: number = vp2px(event.touches[0].x);
const positionY: number = vp2px(event.touches[0].y);
logger.info(TAG, Touch positionX: ${positionX}, Touch positionY: ${positionY});
switch (event.type) {
case TouchType.Down: {
// 每次手指按下，创建一个MyRenderNode对象，用于记录和绘制手指移动的轨迹
const newNode = new MyRenderNode();
// 定义newNode的大小和位置，位置从组件NodeContainer的左上角(0,0)坐标开始，大小为NodeContainer的宽高
newNode.frame = { x: 0, y: 0, width: this.myNodeController.width, height: this.myNodeController.height };
this.currentNode = newNode;
// 移动新节点中的路径path到手指按下的坐标点
this.currentNode.path.moveTo(positionX, positionY);
if (this.myNodeController.rootRenderNode !== null) {
// appendChild在renderNode最后一个子节点后添加新的子节点
this.myNodeController.rootRenderNode.appendChild(this.currentNode);
// 已挂载的节点数量加一
this.nodeCount++