OpenHarmony开发者论坛

标题: 应用开发-手写板(二） [打印本页]
作者: 海浪漂啊漂    时间: 2024-1-15 20:28
标题: 应用开发-手写板(二）
在前一篇手写板的文章中（应用开发-手写板），我们通过使用Path实现了一个基本的手写板，但遗憾的是，无法保存所绘制的图像。在本文中，我们将采用canvas和Path2D来重新构建手写板应用。依然只需几十行代码，就能轻松实现手写功能，并添加清空画布以及保存图片的功能。
一、先上效果图：

(, 下载次数: 21)

二、上代码

  1. import picker from '@ohos.file.picker';
  2. import fs from '@ohos.file.fs';
  3. import buffer from '@ohos.buffer';

  5. @Entry
  6. @Component
  7. struct CanvasPage {
  8.   //手写路径
  9.   @State pathCommands: string = '';
  10.   canvas: CanvasRenderingContext2D = new CanvasRenderingContext2D();
  11.   path2D: Path2D = new Path2D();

  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.       }

  31.       Canvas(this.canvas)
  32.         .width('100%')
  33.         .height('100%')
  34.         .onTouch((e) => {
  35.           this.onTouchEvent(e);
  36.         })
  37.     }
  38.   }

  40.   onTouchEvent(event: TouchEvent) {
  41.     //手指按下和移动时的位置转换成像素位置
  42.     let x = (event.touches[0].x);
  43.     let y = (event.touches[0].y);
  44.     switch (event.type) {

  46.     //手指按下
  47.       case TouchType.Down:
  48.       //移动到（x,y)点
  49.         this.path2D.moveTo(x, y);
  50.         break;

  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.   }

  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写入文件，文件的路径为之前获取的保存路径。

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





欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/) Powered by Discuz! X3.5