【HarmonyOS 5】鸿蒙实现手写板

简介: 【HarmonyOS 5】鸿蒙实现手写板


##鸿蒙开发能力 ##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%')


1. 将组件的宽高设置需要展示的画布区域大小。

height和width为百分之百。

2. 设置线的样式颜色和宽度。

stroke为Color.Black,strokeWidth为5

3. 设置绘制闭合的填充区域的颜色。

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;

       }

   }


5. 当需要清空手写板。

只需要对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%')


 }

}



注意:

1. 因为path不能作为build的根节点,所以用容器组件row进行了包裹。

2. onTouch得到的坐标xy单位为vp,而svg描述符的单位为vp,所以数值要做单位转化。否则会造成能画出东西, 但是坐标跟下笔的位置都缩小了。

3. 需要给path组件设置宽高,否则会不显示。

目录
相关文章
|
4月前
|
物联网 开发工具
【HarmonyOS】鸿蒙应用蓝牙功能实现 (二)
【HarmonyOS】鸿蒙应用蓝牙功能实现 (二)
121 9
【HarmonyOS】鸿蒙应用蓝牙功能实现 (二)
|
4月前
|
存储 安全 API
【HarmonyOS 5】鸿蒙应用隐私保护详解
【HarmonyOS 5】鸿蒙应用隐私保护详解
163 1
|
4月前
|
开发工具
【HarmonyOS 5】使用openCustomDialog如何禁止手势关闭的方案
openCustomDialog提供了onWillDismiss回调函数,当用户尝试通过滑动、点击外部、返回键等操作关闭弹窗时,会触发该回调。通过在回调中判断关闭原因并拦截操作,即可实现禁止手势关闭的效果。
125 1
|
4月前
|
前端开发 JavaScript API
【HarmonyOS 5】鸿蒙跨平台开发方案详解(一)
2025年是鸿蒙生态迎来关键发展期。根据前几天的2025 HDC数据显示,鸿蒙原生应用数量已从2024年的2000款增长至5000款,微信鸿蒙版安装量突破1.2亿,公安部交管系统完成全国300城鸿蒙适配。
302 1
|
4月前
|
传感器 自动驾驶 物联网
【HarmonyOS 5】鸿蒙星闪NearLink详解
鸿蒙星闪NearLink Kit 是 HarmonyOS 提供的短距离通信服务,支持星闪设备间的连接、数据交互。例如,手机可作为中心设备与外围设备(如鼠标、手写笔、智能家电、车钥匙等)通过星闪进行连接。
130 0
|
4月前
|
消息中间件 物联网 开发工具
【HarmonyOS 5】鸿蒙中如何使用MQTT
MQTT(Message Queuing Telemetry Transport,消息队列遥测传输)是一种轻量级、基于发布 / 订阅(Publish/Subscribe)模式的即时通讯协议,专为资源受限的物联网(IoT)设备和低带宽、高延迟或不可靠网络环境设计。
238 0
|
4月前
|
移动开发 Dart 前端开发
【HarmonyOS 5】鸿蒙跨平台开发方案详解(二)
作为最早实现鸿蒙适配的跨平台框架,Flutter在社区推动下已形成较完整的技术方案。当前鸿蒙版Flutter已发布3.22.0-ohos版本,该版本基于Flutter 3.22.0核心。
264 0
|
4月前
|
定位技术 开发工具 开发者
【HarmonyOS 5】桌面快捷方式功能实现详解
在移动应用开发中,如何让用户快速触达核心功能,是目前很常见的功能之一。 鸿蒙系统提供的**桌面快捷方式(Shortcuts)**功能,允许开发者为应用内常用功能创建直达入口,用户通过长按应用图标即可快速启动特定功能,大幅减少操作层级。 本文将结合地图导航场景,详细解析鸿蒙快捷方式的实现原理与开发流程。结合华为官方开源示例 DesktopShortcut 展开,该示例基于HarmonyOS 5.0实现,完整演示了地图导航场景的快捷方式开发流程。
236 0
|
4月前
|
人工智能 自然语言处理 IDE
【HarmonyOS 5】鸿蒙CodeGenie AI辅助编程工具详解
1、CodeGenie是什么? CodeGenie (代码精灵)作为鸿蒙DevEco IDE自带的AI辅助编码工具。
173 0
|
4月前
|
监控 JavaScript 开发工具
【HarmonyOS 5】鸿蒙中@State的原理详解
@State 是 HarmonyOS ArkTS 框架中用于管理组件状态的核心装饰器,其核心作用是实现数据驱动 UI 的响应式编程模式。通过将变量标记为 @State,开发者可以确保当状态值发生变化时,依赖该状态的 UI 组件会自动重新渲染,从而保持数据与界面的实时同步。 @State 是 HarmonyOS ArkTS 实现响应式编程的大基础核心,可以说整个V1和V2都是围绕它来进行组合使用。
166 0