鸿蒙如何实现简单手写板效果,提供实现方案思路和源码
一、结论
实现一个手写板功能,基本思路如下:
创建一个可交互的组件,用户在屏幕上触摸并移动手指时,会根据触摸的位置动态生成路径,并使用黑色描边绘制在屏幕上。当用户按下屏幕时,记录按下点的坐标作为路径的起点。当用户移动手指时,不断记录移动点的坐标,通过线段连接起来形成路径。
系统提供了非常便捷的画线组件Path。该组件将画布和画线功能合二为一。提供了简洁的画线组件。
二、代码实现和详细解释
注意:
因为path不能作为build的根节点,所以用容器组件row进行了包裹。
onTouch得到的坐标xy单位为vp,而svg描述符的单位为vp,所以数值要做单位转化。否则会造成能画出东西, 但是坐标跟下笔的位置都缩小了。
需要给path组件设置宽高,否则会不显示。
@Entry @Component struct PathTestPage{@State pathCommands:string="";privatesetPathCommands(str:string,event:TouchEvent){letx=event.touches[0].x;lety=event.touches[0