可以参考这个demo:import { image } from '@kit.ImageKit' import { fileIo } from '@kit.CoreFileKit' @Entry @Component struct Demo3 { context: CanvasRenderingContext2D = new CanvasRenderingContext2D(new RenderingContextSettings(true)) //签字区域 guessContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(new RenderingContextSettings(true)) //自动生成图片画布 drawIng: boolean = false lastX: number = 0 lastY: number = 0 gLastX: number = 0 gLastY: number = 0 pointList: PointClass[] = [] timer: number = -1 @State imgStr: PixelMap | undefined = undefined drawLine(x: number, y: number) { this.context.moveTo(this.lastX, this.lastY) // 先将线移动到上一个点 this.context.lineTo(x, y) this.lastX = x // 将当前内容的x记录 this.lastY = y // 将当前的y记录 this.context.stroke() } drawGuess() { if (this.pointList.length && this.timer === -1) { this.timer = setInterval(() => { if (this.pointList.length === 0) { clearInterval(this.timer) this.timer = -1 return } let pt1: PointClass = this.pointList.shift() as PointClass this.guessLine(pt1) }, 100) } } guessLine(p: PointClass) { if (p.reset) { this.guessContext.closePath() this.guessContext.beginPath() this.gLastX = p.x this.gLastY = p.y } else { this.guessContext.moveTo(this.gLastX, this.gLastY) // 先将线移动到上一个点 this.guessContext.lineTo(p.x, p.y) this.gLastX = p.x // 将当前内容的x记录 this.gLastY = p.y // 将当前的y记录 this.guessContext.stroke() } } transFile() { } build() { Scroll() { Column({ space: 20 }) { Canvas(this.context) .width(360) .height(300) .backgroundColor(Color.Grey) .onTouch((event: TouchEvent) => { if (event.type === TouchType.Down) { this.lastX = event.touches[0].x this.lastY = event.touches[0].y this.drawIng = true this.context.beginPath() this.pointList.push({ x: this.lastX, y: this.lastY, reset: true }) } if (event.type === TouchType.Move) { if (this.drawIng) { this.pointList.push({ x: event.touches[0].x, y: event.touches[0].y, reset: false }) this.drawLine(event.touches[0].x, event.touches[0].y) } } if (event.type === TouchType.Up) { this.drawIng = false this.context.closePath() } // 开始模仿 this.drawGuess() } ) .onReady(() => { this.context.lineWidth = 4 this.context.strokeStyle = "blue" }) Row({ space: 20 }) { Button("清屏") .onClick(() => { this.context.clearRect(0, 0, 360, 300) this.guessContext.clearRect(0, 0, 360, 300) this.pointList = [] }) Button("存储图片") .onClick(() => { // this.imgStr = this.context.toDataURL("image/jpeg") // console.info('图片开始存储'+this.imgStr) this.imgStr = this.context.getPixelMap(0, 0, 360, 300) let packOpts: image.PackingOption = { format: "image/jpeg", quality: 98 } let file = fileIo.openSync(getContext(this).cacheDir + '/1.jpeg', fileIo.OpenMode.CREATE | fileIo.OpenMode.READ_WRITE); const imagePackerApi: image.ImagePacker = image.createImagePacker(); imagePackerApi.packToFile(this.context.getPixelMap(0, 0, 360, 300), file.fd, packOpts).then(() => { fileIo.close(file) }) }) } if (this.imgStr) { Image(this.imgStr).width(360).height(300) } } } } } class PointClass { x: number = 0 y: number = 0 reset?: boolean = false }
可以参考这个demo: