HarmonyOS 5.0应用开发——Canvas制作个人签名

【高心星出品】

Canvas制作个人签名

Canvas提供画布组件，用于自定义绘制图形，开发者使用CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象在Canvas组件上进行绘制，绘制对象可以是基础形状、文本、图片等。

案例介绍

使用鸿蒙Canvas制作个人签名是一种在HarmonyOS系统环境下，利用Canvas组件实现手写签名功能的技术。以下是对该技术的详细介绍：

1. 基础准备
   • 环境搭建：确保开发环境已正确配置，包括安装HarmonyOS SDK及相关开发工具，以便进行应用程序的开发和调试。
   • 创建项目：在开发环境中创建一个新的鸿蒙应用项目，并选择合适的应用模板，如空应用模板等。
2. 页面布局与Canvas初始化
   • 页面布局：在项目的页面文件中，使用ArkTS语言或其他相关语言设计页面布局，为Canvas签名区域预留合适的空间，并可添加其他相关的按钮或控件，如生成签名按钮、清除按钮等。
   • Canvas初始化：通过创建Canvas组件实例，并设置其宽度、高度、背景颜色等属性来初始化Canvas。可以使用ArkTS中的相关类和方法，如CanvasRenderingContext2D等，来获取Canvas的绘图上下文，以便后续进行绘图操作。
3. 手势监听与绘制逻辑
   • 手势监听：利用鸿蒙系统的手势监听机制，为Canvas组件添加触摸事件监听器，如PanGesture等，以捕捉用户的手指触摸动作，包括按下、移动和抬起等操作。
   • 绘制逻辑：在触摸事件回调函数中，根据用户的操作实时更新画笔的位置和状态，并通过Canvas的绘图方法将用户的签名轨迹绘制到画布上。例如，在手指按下时记录起始位置，在手指移动时绘制线条，在手指抬起时结束绘制。
4. 功能扩展与优化
   • 撤销与重做功能：为了提供更好的用户体验，可以实现撤销和重做功能。可以通过记录用户每次绘制的操作步骤，当用户点击撤销按钮时，回退到上一步的操作状态；点击重做按钮时，重新执行被撤销的操作。
   • 签名生成与保存：用户可以点击生成签名按钮，将Canvas上的签名内容转换为图片格式，如PNG或JPEG等，并保存到本地存储或上传到服务器，以便后续使用。
   • 界面美化与交互优化：对签名界面进行美化，如添加边框、阴影等效果，提升视觉效果。同时，优化交互细节，使签名过程更加流畅和自然。

综上所述，使用鸿蒙Canvas制作个人签名技术涉及多个方面。这种技术为用户在鸿蒙设备上提供了一种便捷、高效的手写签名方式，可应用于电子合同签署、表单填写等多种场景。

运行结果

开发步骤

整体布局

整体布局是两个层叠的Canvas画板，居于顶部绘制了绿色的十字网格，居于底部接受用户的手势动作，来绘制线段。

这里为了不被上层Canvas阻止事件传递，使用.hitTestBehavior(HitTestMode.Transparent)方法。

Stack() {// 负责绘制Canvas(this.canvascontext).width(300).height(300).backgroundColor(Color.Grey).onReady(() => {}).onTouch((event) => {let x1 = 0let y1 = 0if (event.type == TouchType.Down) {this.x = event.touches[0].xthis.y = event.touches[0].y} else if (event.type == TouchType.Move) {x1 = event.touches[0].xy1 = event.touches[0].y// 手指滑动的时候 跟着手指绘制this.drawtings((width: number, height: number) => {this.drawline(x1, y1)})this.x = x1this.y = y1}})// 只绘制绿色十字Canvas(this.canvascontext1).width(300).height(300).backgroundColor(Color.Transparent).onReady(() => {this.drawshi1()})// 不阻止事件传递.hitTestBehavior(HitTestMode.Transparent)
}

---

清空按钮和提交按钮

清空按钮负责清空画板，提交按钮负责将底层画板绘制的内容转化成图片，在下面的image中展示。

Row(){// 底层画板清屏Button('清空').onClick(()=>{let width=this.canvascontext.widthlet height=this.canvascontext.heightthis.canvascontext.clearRect(0, 0, width, height)})// 将绘制内容转化成图片展示Button('提交').onClick(()=>{let width=this.canvascontext.widthlet height=this.canvascontext.heightthis.pm= this.canvascontext.getPixelMap(0,0,width,height)})
}
.width('100%')
.justifyContent(FlexAlign.SpaceAround)
Image(this.pm).width(200).height(200)

标准绘制过程

// 标准绘制模板 clear---save---设置绘制属性 开始绘制 绘制结束--restore呈现
// draw 是具体的绘制过程 isclear 是在绘制前是否清屏
drawtings(draw:(width:number,height:number)=>void,isclear:boolean=false){let width=this.canvascontext.widthlet height=this.canvascontext.heightif(isclear) {this.canvascontext.clearRect(0, 0, width, height)}this.canvascontext.save()draw(width,height)this.canvascontext.restore()
}

绘制上层十字画板

上层十字画板要绘制两个线段，一个水平，一个垂直

//绘制十字方法
drawshi1() {let width = this.canvascontext1.widthlet height = this.canvascontext1.heightthis.canvascontext1.clearRect(0, 0, width, height)this.canvascontext1.save()// 线条粗细this.canvascontext1.lineWidth = 2// 线条颜色this.canvascontext1.strokeStyle = '#00ff00'// 线条虚线间隔this.canvascontext1.setLineDash([10, 20])// 开始绘制this.canvascontext1.beginPath()this.canvascontext1.moveTo(width as number / 2, 0)this.canvascontext1.lineTo(width as number / 2, height)this.canvascontext1.closePath()// 绘制结束this.canvascontext1.stroke()this.canvascontext1.beginPath()this.canvascontext1.moveTo(0, height as number / 2)this.canvascontext1.lineTo(width, height as number / 2)this.canvascontext1.closePath()this.canvascontext1.stroke()this.canvascontext1.restore()
}

绘制手势线段

根据手势事件获取坐标点，然后将这些点链接在一起形成线段。

//画线段
drawline(x1:number,y1:number){this.canvascontext.lineWidth=3this.canvascontext.beginPath()this.canvascontext.moveTo(this.x, this.y)this.canvascontext.lineTo(x1,y1)this.canvascontext.closePath()this.canvascontext.stroke()
}

完整代码

@Entry
@Component
struct Canvaspage1 {@State message: string = 'Hello World';// 定义了两个canvas画板 两个设置项private settings:RenderingContextSettings=new RenderingContextSettings(true)private canvascontext:CanvasRenderingContext2D=new CanvasRenderingContext2D(this.settings)private settings1:RenderingContextSettings=new RenderingContextSettings(true)private canvascontext1:CanvasRenderingContext2D=new CanvasRenderingContext2D(this.settings1)// 记录手指滑动坐标private x:number=0private y:number=0// 保存图片@State pm:PixelMap|null=nullbuild() {Column({space:20}){Text('签名').fontSize(20).fontWeight(FontWeight.Bolder)// 层叠了两个画板 一个负责显示绿十字  一个负责接受绘制Stack() {// 负责绘制Canvas(this.canvascontext).width(300).height(300).backgroundColor(Color.Grey).onReady(() => {}).onTouch((event) => {let x1 = 0let y1 = 0if (event.type == TouchType.Down) {this.x = event.touches[0].xthis.y = event.touches[0].y} else if (event.type == TouchType.Move) {x1 = event.touches[0].xy1 = event.touches[0].y// 手指滑动的时候 跟着手指绘制this.drawtings((width: number, height: number) => {this.drawline(x1, y1)})this.x = x1this.y = y1}})// 只绘制绿色十字Canvas(this.canvascontext1).width(300).height(300).backgroundColor(Color.Transparent).onReady(() => {this.drawshi1()})// 不阻止事件传递.hitTestBehavior(HitTestMode.Transparent)}Row(){// 底层画板清屏Button('清空').onClick(()=>{let width=this.canvascontext.widthlet height=this.canvascontext.heightthis.canvascontext.clearRect(0, 0, width, height)})// 将绘制内容转化成图片展示Button('提交').onClick(()=>{let width=this.canvascontext.widthlet height=this.canvascontext.heightthis.pm= this.canvascontext.getPixelMap(0,0,width,height)})}.width('100%').justifyContent(FlexAlign.SpaceAround)Image(this.pm).width(200).height(200)}.height('100%').width('100%').justifyContent(FlexAlign.Center)}//画线段drawline(x1:number,y1:number){this.canvascontext.lineWidth=3this.canvascontext.beginPath()this.canvascontext.moveTo(this.x, this.y)this.canvascontext.lineTo(x1,y1)this.canvascontext.closePath()this.canvascontext.stroke()}// 标准绘制模板 clear---save---设置绘制属性 开始绘制 绘制结束--restore呈现// draw 是具体的绘制过程 isclear 是在绘制前是否清屏drawtings(draw:(width:number,height:number)=>void,isclear:boolean=false){let width=this.canvascontext.widthlet height=this.canvascontext.heightif(isclear) {this.canvascontext.clearRect(0, 0, width, height)}this.canvascontext.save()draw(width,height)this.canvascontext.restore()}//绘制十字方法drawshi1() {let width = this.canvascontext1.widthlet height = this.canvascontext1.heightthis.canvascontext1.clearRect(0, 0, width, height)this.canvascontext1.save()// 线条粗细this.canvascontext1.lineWidth = 2// 线条颜色this.canvascontext1.strokeStyle = '#00ff00'// 线条虚线间隔this.canvascontext1.setLineDash([10, 20])// 开始绘制this.canvascontext1.beginPath()this.canvascontext1.moveTo(width as number / 2, 0)this.canvascontext1.lineTo(width as number / 2, height)this.canvascontext1.closePath()// 绘制结束this.canvascontext1.stroke()this.canvascontext1.beginPath()this.canvascontext1.moveTo(0, height as number / 2)this.canvascontext1.lineTo(width, height as number / 2)this.canvascontext1.closePath()this.canvascontext1.stroke()this.canvascontext1.restore()}
}