应用开发-手写板(二）

在前一篇手写板的文章中（应用开发-手写板），我们通过使用Path实现了一个基本的手写板，但遗憾的是，无法保存所绘制的图像。在本文中，我们将采用canvas和Path2D来重新构建手写板应用。依然只需几十行代码，就能轻松实现手写功能，并添加清空画布以及保存图片的功能。
一、先上效果图：



二、上代码

1. import picker from '@ohos.file.picker';
   
2. import fs from '@ohos.file.fs';
   
3. import buffer from '@ohos.buffer';
   
4. 
   
5. @Entry
   
6. @Component
   
7. struct CanvasPage {
   
8.   //手写路径
   
9.   @State pathCommands: string = '';
   
10.   canvas: CanvasRenderingContext2D = new CanvasRenderingContext2D();
    
11.   path2D: Path2D = new Path2D();
    
12. 
    
13.   build() {
    
14.     Column() {
    
15.       Row() {
    
16.         //清空画布按钮
    
17.         Button("清空")
    
18.           .margin(10)
    
19.           .onClick(() => {
    
20.             //将路径置空
    
21.             this.path2D = new Path2D();
    
22.             //清空画布
    
23.             this.canvas.clearRect(0, 0, this.canvas.width, this.canvas.height);
    
24.           })
    
25.         Button("保存")
    
26.           .onClick(() => {
    
27.             this.saveImage();
    
28.           })
    
29.       }
    
30. 
    
31.       Canvas(this.canvas)
    
32.         .width('100%')
    
33.         .height('100%')
    
34.         .onTouch((e) => {
    
35.           this.onTouchEvent(e);
    
36.         })
    
37.     }
    
38.   }
    
39. 
    
40.   onTouchEvent(event: TouchEvent) {
    
41.     //手指按下和移动时的位置转换成像素位置
    
42.     let x = (event.touches[0].x);
    
43.     let y = (event.touches[0].y);
    
44.     switch (event.type) {
    
45. 
    
46.     //手指按下
    
47.       case TouchType.Down:
    
48.       //移动到（x,y)点
    
49.         this.path2D.moveTo(x, y);
    
50.         break;
    
51. 
    
52.     //画线到（x,y)点
    
53.       case TouchType.Move:
    
54.         this.path2D.lineTo(x, y);
    
55.       //画笔颜色
    
56.         this.canvas.strokeStyle = "#0000ff";
    
57.       //画笔粗细
    
58.         this.canvas.lineWidth = 5;
    
59.       //画出线段
    
60.         this.canvas.stroke(this.path2D);
    
61.         break;
    
62.       default:
    
63.         break;
    
64.     }
    
65.   }
    
66. 
    
67.   saveImage() {
    
68.     //获取图片的base64字符串
    
69.     let imageStr = this.canvas.toDataURL().split(',')[1];
    
70.     //文件保存路径
    
71.     let uri = '';
    
72.     try {
    
73.       let PhotoSaveOptions = new picker.PhotoSaveOptions();
    
74.       //保存图片默认名称
    
75.       PhotoSaveOptions.newFileNames = ['11111.png'];
    
76.       let photoPicker = new picker.PhotoViewPicker();
    
77.       //调起系统的图片保存功能
    
78.       photoPicker.save(PhotoSaveOptions).then((PhotoSaveResult) => {
    
79.         uri = PhotoSaveResult[0];
    
80.         //打开文件
    
81.         let file = fs.openSync(uri, fs.OpenMode.READ_WRITE);
    
82.         //base64字符串转成buffer
    
83.         const decodeBuffer = buffer.from(imageStr, 'base64').buffer;
    
84.         //写入文件
    
85.         fs.writeSync(file.fd, decodeBuffer);
    
86.         //关闭文件
    
87.         fs.closeSync(file);
    
88.       }).catch((err: Error) => {
    
89.         console.error(err + '');
    
90.       })
    
91.     } catch (e) {
    
92.       console.error(e);
    
93.     }
    
94.   }
    
95. }

复制代码

在这段代码中，根据功能划分，主要涵盖了三个关键操作：绘制路径、清空画布和保存画布。

一、绘制路径

        在绘制路径方面，代码通过Canvas执行图像绘制，同时借助Path2D定义了具体的绘制路径。手写路径的生成通过记录手指按下和移动的位置实现。具体操作包括：

1. this.path2D.moveTo(x, y)  // 移动到(x, y)点
   
2. this.path2D.lineTo(x, y)  // 画线到(x, y)点

复制代码

二、清空画布

清空画布的操作分为两步：

1.将路径置空

1. // 重新生成新的Path2D对象，因为HarmonyOS中的Path2D没有reset方法
   
2. this.path2D = new Path2D();  

复制代码

2.清空canvas

1. this.canvas.clearRect(0, 0, this.canvas.width, this.canvas.height);

复制代码

三、保存画布

        保存画布的过程主要由saveImage方法完成，依赖于@ohos.file.picker组件，调用系统的图片保存功能。具体步骤包括：

1.通过PhotoViewPicker的save方法获取用户选择的保存文件路径。

2.利用Canvas的toDataURL()方法将Canvas转换为base64字符串形式的图片。

3.通过@ohos.buffer将base64字符串转换为buffer。

4.最终，通过@ohos.file.fs将buffer写入文件，文件的路径为之前获取的保存路径。

        这一系列步骤成功实现了将绘制的图像保存为一个完整的图片文件。整体而言，代码清晰地展示了绘制路径、清空画布和保存画布的功能实现。

牛逼牛逼，请问有办法实现那种 笔锋效果不，就是画图过程可以随着按压改变画笔粗细，我用了您这个案例，发现改变画笔粗细的时候，会把之前绘制的图的粗细也改变  还望大佬能看看