应用开发-手写板

这是一个基于ArkUI开发的手写板应用，只需几十行简洁的代码，即可轻松实现以下手写功能和清空画布的操作。

一、效果图：

二、代码

1. @Entry
   
2. @Component
   
3. struct Index {
   
4.   //手写路径
   
5.   @State pathCommands: string = '';
   
6. 
   
7.   build() {
   
8.     Column() {
   
9.       //清空画布按钮
   
10.       Button("清空")
    
11.         .onClick(() => {
    
12.           //将路径置空
    
13.           this.pathCommands = '';
    
14.         })
    
15.       Flex() {
    
16.         //如果路径不为空，那么展示path路径，
    
17.         // stokeWidth(5)表示画笔宽度为5，
    
18.         // fill('none')表示填充为空白，
    
19.         // stroke(Color.Blue)表示画笔为蓝色
    
20.         if (this.pathCommands != '') {
    
21.           Path().commands(this.pathCommands).strokeWidth(5).fill('none').stroke(Color.Blue)
    
22.         }
    
23.       }.onTouch((event: TouchEvent) => {
    
24.         //响应手势触摸操作
    
25.         this.onTouchEvent(event)
    
26.       }).width('100%').height('100%')
    
27.     }
    
28.   }
    
29. 
    
30.   onTouchEvent(event: TouchEvent) {
    
31.     //手指按下和移动时的位置转换成像素位置
    
32.     let x = vp2px(event.touches[0].x);
    
33.     let y = vp2px(event.touches[0].y);
    
34.     switch (event.type) {
    
35.       
    
36.       //手指按下
    
37.       case TouchType.Down:
    
38.       //绘制点移动到（x,y）位置
    
39.         this.pathCommands += 'M' + x + ' ' + y;
    
40.         break;
    
41.             
    
42.       //当前位置画线到（x,y）位置
    
43.       case TouchType.Move:
    
44.         this.pathCommands += 'L' + x + ' ' + y;
    
45.         break;
    
46.       default:
    
47.         break;
    
48.     }
    
49.   }
    
50. }

复制代码

在这个代码中，我们构建了一个手势绘图应用。以下是关键部分的解释：

• 手写路径存储：我们声明了一个字符串类型的变量“pathCommands”，用于存储手写路径的相关命令。
• 页面布局：在build函数中，我们创建了两个元素：一个是清空按钮，另一个是用于展示手写路径的“path”组件。在path组件中，我们设置“commands”属性值为pathCommands，这样就能显示手写路径了。其他属性如stokeWidth(5)表示画笔宽度为5，fill('none')表示填充为空白，stroke(Color.Blue)表示画笔为蓝色。清空按钮的作用是将“pathCommands”的值置为空字符串，从而清除手写路径。
• 数据生成： 在onTouchEvent方法中处理触摸事件，根据手指按下和移动的位置，将相应的绘制命令添加到路径“pathCommands”中，Path组件根据pathCommands生成相应的路径。其中两种绘制命令解释如下："Mx y"表示将绘制点移动到（x,y）位置，“L x y”表示从当前位置画线到（x,y）位置。