HarmonyOS应用开发-手写板(二）

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:

this.path2D.moveTo(x, y);

break;

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 imageStr = this.canvas.toDataURL().split(',')[1];

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];

let file = fs.openSync(uri, fs.OpenMode.READ_WRITE);

const 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);

}

}

}

this.path2D.moveTo(x, y)

this.path2D.lineTo(x, y)

this.path2D = new Path2D();

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