##鸿蒙开发能力 ##HarmonyOS SDK应用服务##鸿蒙金融类应用 （金融理财# 一、前言 实现一个手写板功能，基本思路如下： 创建一个可交互的组件，用户在屏幕上触摸并移动手指时，会根据触摸的位置动态生成路径，并使用黑色描边绘制在屏幕上。当用户按下屏幕时，记录按下点的坐标作为路径的起点。当用户移动手指时，不断记录移动点的坐标，通过线段连接起来形成路径。 功能效果图如下所示：
二、方案思路 系统提供了非常便捷的画线组件Path。该组件将画布和画线功能合二为一。提供了简洁的画线组件。 详情参见，官方组件API文档链接：Path-图形绘制-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者 【https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-drawing-components-path】 Path该组件的使用思路很简单，如下代码所示： Path() .commands(this.pathCommands) // 设置SVG路径描述字符串 .strokeWidth(5) // 设置路径的描边宽度为 5 .fill("none") // 设置路径的填充颜色为无 .stroke(Color.Black) // 设置路径的描边颜色为黑色 .height('100%') .width('100%')
- 将组件的宽高设置需要展示的画布区域大小。 height和width为百分之百。
- 设置线的样式颜色和宽度。 stroke为Color.Black，strokeWidth为5
- 设置绘制闭合的填充区域的颜色。 fill为none 若你修改了fill有填充色，就会得到如下的效果：
因为该效果并非手写板的需求，所以需要设置fill为none，不要填充色。 4. 设置SVG路径描述字符串。 该组件最核心的属性。它的值是字符串大概是这样的： M225.99999999999997 409.99999999999994 L225.99999999999997 409.99999999999994
首先我们先了解SVG 路径描述符是干嘛的？ SVG 路径描述符是用于定义矢量图形路径的一组命令，在使用Path组件绘制图形时发挥关键作用，可创建各种复杂的自定义形状。主要作用如下：
（1）构建基础图形： 通过M（moveto）命令确定起始点，配合L（lineto）、H（horizontal lineto）、V（vertical lineto）等命令绘制直线段，能构建出三角形、矩形等基础图形。例如commands('M0 20 L50 50 L50 100 Z')定义了一个起始于（0，20），通过绘制两条直线段，最后用Z（closepath）命令关闭路径形成的三角形 。 （2）绘制曲线图形： 借助C（curveto）、S（smooth curveto）、Q（quadratic Belzier curve）、T（smooth quadratic Belzier curveto）等命令，能绘制不同类型的贝塞尔曲线，实现复杂的曲线图形绘制。像C100 100 250 100 250 200可绘制一条从当前点到（250, 200）点的三次贝塞尔曲线，用于创建诸如花瓣、波浪线等曲线形状。 （3）绘制椭圆弧： A（elliptical Arc）命令用于从当前点到指定点绘制椭圆弧，通过设置椭圆的半径、旋转角度以及其他标志位，能绘制各种椭圆形状的部分弧线，比如绘制饼图的扇区。
而在手写板场景中，SVG 路径描述符仅使用M（moveto）和L（lineto）命令就能实现主要功能。 原因在于手写板的核心需求是实时记录并呈现用户绘制的轨迹。M命令用于确定绘制轨迹的起始点，每次用户触摸屏幕开始书写时，就相当于启动一个新的路径，M命令记录下这个起始坐标，如同在纸上确定第一笔的落点。L命令从当前点到指定坐标画一条线，在手写板中，随着用户手指的移动，不断获取移动过程中的坐标点，通过L命令依次连接这些点，就能形成连续的线条，精准地呈现出手写的笔迹。 最终我们只需要在Path组件外添加onTouch事件 记录用户的手指触摸事件，得到其x，y坐标，即可实现手写板的svg路径描述符： // 处理触摸事件的方法 onTouchEvent(event: TouchEvent) { // 根据触摸事件的类型进行不同的处理 switch (event.type) { // 当触摸类型为按下时 case TouchType.Down: // 在 pathCommands 中添加一个移动命令（M），并记录按下点的坐标 this.pathCommands += 'M' + event.touches[0].x + ' ' + event.touches[0].y; break; // 当触摸类型为移动时 case TouchType.Move: // 在 pathCommands 中添加一个线段命令（L），并记录移动点的坐标 this.pathCommands += 'L' + event.touches[0].x + ' ' + event.touches[0].y; break; // 其他触摸类型，不做处理 default: break; } }
当需要清空手写板。 只需要对Path组件的commands属性设置为空字符串即可。 三、源码示例： @Entry @Component struct PathTestPage {
@State pathCommands: string = "";
private setPathCommands(str: string, event: TouchEvent){ let x = event.touches[0].x; let y = event.touches[0].y; this.pathCommands += str + vp2px(x) + ' ' + vp2px(y); console.log("georgeDebug", " this.pathCommands: " + this.pathCommands); }
onTouchEvent(event: TouchEvent){ // event xy 单位：vp switch (event.type){ case TouchType.Down:
this.setPathCommands('M', event); break;case TouchType.Move:
this.setPathCommands('L', event); break; default: break;} }
build() { Stack({ alignContent: Alignment.TopStart }){ Path()
.commands(this.pathCommands) // 设置SVG路径描述字符串 .strokeWidth(5) // 设置路径的描边宽度为 5 .fill("none") // 设置路径的填充颜色为无 .stroke(Color.Black) // 设置路径的描边颜色为黑色 .height('100%') .width('100%') .onTouch((event: TouchEvent)=>{ this.onTouchEvent(event); })Button("清空绘制")
.onClick(()=>{ this.pathCommands = ""; })} .height('100%') .width('100%')
} }
注意：
- 因为path不能作为build的根节点，所以用容器组件row进行了包裹。
- onTouch得到的坐标xy单位为vp，而svg描述符的单位为vp，所以数值要做单位转化。否则会造成能画出东西， 但是坐标跟下笔的位置都缩小了。
- 需要给path组件设置宽高，否则会不显示。
