- 创建自定义节点容器组件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++