滨海新区网站建设,专门做纪录片的网站,淘宝客网站一定要备案,腾讯企业邮箱登录入口手机在前一篇手写板的文章中#xff08;HarmonyOS应用开发-手写板-CSDN博客#xff09;#xff0c;我们通过使用Path实现了一个基本的手写板#xff0c;但遗憾的是#xff0c;无法保存所绘制的图像。在本文中#xff0c;我们将采用canvas和Path2D来重新构建手写板应用。依然只… 在前一篇手写板的文章中HarmonyOS应用开发-手写板-CSDN博客我们通过使用Path实现了一个基本的手写板但遗憾的是无法保存所绘制的图像。在本文中我们将采用canvas和Path2D来重新构建手写板应用。依然只需几十行代码就能轻松实现手写功能并添加清空画布以及保存图片的功能。
一、先上效果图 二、上代码
import picker from ohos.file.picker;
import fs from ohos.file.fs;
import buffer from ohos.buffer;Entry
Component
struct CanvasPage {//手写路径State pathCommands: string ;canvas: CanvasRenderingContext2D new CanvasRenderingContext2D();path2D: Path2D new Path2D();build() {Column() {Row() {//清空画布按钮Button(清空).margin(10).onClick(() {//将路径置空this.path2D new Path2D();//清空画布this.canvas.clearRect(0, 0, this.canvas.width, this.canvas.height);})Button(保存).onClick(() {this.saveImage();})}Canvas(this.canvas).width(100%).height(100%).onTouch((e) {this.onTouchEvent(e);})}}onTouchEvent(event: TouchEvent) {//手指按下和移动时的位置转换成像素位置let x (event.touches[0].x);let y (event.touches[0].y);switch (event.type) {//手指按下case TouchType.Down://移动到x,y)点this.path2D.moveTo(x, y);break;//画线到x,y)点case TouchType.Move:this.path2D.lineTo(x, y);//画笔颜色this.canvas.strokeStyle #0000ff;//画笔粗细this.canvas.lineWidth 5;//画出线段this.canvas.stroke(this.path2D);break;default:break;}}saveImage() {//文件保存路径let uri ;try {let PhotoSaveOptions new picker.PhotoSaveOptions();//保存图片默认名称PhotoSaveOptions.newFileNames [11111.png];let photoPicker new picker.PhotoViewPicker();//调起系统的图片保存功能photoPicker.save(PhotoSaveOptions).then((PhotoSaveResult) {uri PhotoSaveResult[0];//获取图片的base64字符串let imageStr this.canvas.toDataURL().split(,)[1];//打开文件let file fs.openSync(uri, fs.OpenMode.READ_WRITE);//base64字符串转成bufferconst decodeBuffer buffer.from(imageStr, base64).buffer;//写入文件fs.writeSync(file.fd, decodeBuffer);//关闭文件fs.closeSync(file);}).catch((err: Error) {console.error(err );})} catch (e) {console.error(e);}}
}
在这段代码中根据功能划分主要涵盖了三个关键操作绘制路径、清空画布和保存画布。
一、绘制路径 在绘制路径方面代码通过Canvas执行图像绘制同时借助Path2D定义了具体的绘制路径。手写路径的生成通过记录手指按下和移动的位置实现。具体操作包括
this.path2D.moveTo(x, y) // 移动到(x, y)点
this.path2D.lineTo(x, y) // 画线到(x, y)点二、清空画布
清空画布的操作分为两步
1.将路径置空
// 重新生成新的Path2D对象因为HarmonyOS中的Path2D没有reset方法
this.path2D new Path2D(); 2.清空canvas
this.canvas.clearRect(0, 0, this.canvas.width, this.canvas.height);
三、保存画布 保存画布的过程主要由saveImage方法完成依赖于ohos.file.picker组件调用系统的图片保存功能。具体步骤包括
通过PhotoViewPicker的save方法获取用户选择的保存文件路径。利用Canvas的toDataURL()方法将Canvas转换为base64字符串形式的图片。通过ohos.buffer将base64字符串转换为buffer。最终通过ohos.file.fs将buffer写入文件文件的路径为之前获取的保存路径。 这一系列步骤成功实现了将绘制的图像保存为一个完整的图片文件。整体而言代码清晰地展示了绘制路径、清空画布和保存画布的功能实现。
