HarmonyOS-实现签名功能

时间：2023-03-13 09:18:28 科技观察

了解更多开源请访问：开源基础软件社区https://ost.51cto.com前言刚接触鸿蒙不久，接触了很多不同的东西。虽然遇到了很多问题，但是学习起来并不容易，所以还是决定从简单到复杂，所以这次分享一个用canvas实现的签名效果。效果展示及功能实现签名效果的实现，以及签名相关的预览、取消、清除等功能，还在学习HarmonyOS，更多功能尚未完善。以后我会继续完善这个功能。实现思路hml代码如下：画布签名函数

预览撤消清除

css样式如下：.container{display:flex;证明内容：居中；弹性包装：裹;宽度：100%；}.title{宽度：100%；高度：60px；文字颜色：#000；不透明度：0.9;}.titletext{font-size:24px;-height:50px;}.canvas{border:1pxsolidgreen;}.btns{width:350px;高度：60px；对齐项目：居中；证明内容：周围空间；}.btn{边界半径：0；边框：1px纯绿色；宽度：20%；文字颜色：#000；background-color:#fff;}.preview{background-color:#fff;}index.js中的数据:data:{title:"",width:350,height:250,width2:0,height2:0,lineWidth:4,lineColor:'#000',ctx:null,//画笔对象startX:0,startY:0,endX:0,endY:0,storageSteps:[],//记录每个操作步骤isEmpty:true,//画板是否为空image:"",message:"",},实现签名效果：在onShow生命周期中初始化canvas画布，其中getBoundingClientRect方法是获取元素的大小和位置相对于窗口，ctx是canvas对象onShow(){this.initialize();},initialize(){constcanvas=this.$refs.canvas;this.canvasRect=canvas.getBoundingClientRect();this.ctx=canvas.getContext('2d');}、touchStart、touchMove、touchEnd函数和draw函数实现签名效果。通过触摸事件获取当前坐标值，然后通过画布绘制路径API绘制传递过来的路径。每次触摸事件执行后，会记录当前画布，以供以后撤消和其他功能使用。touchStart(e){this.startX=e.touches[0].localX-this.canvasRect.left;this.startY=e.touches[0].localY-this.canvasRect.top;this.endX=this.startX;this.endY=this.startY;this.draw();},touchMove(e){this.endX=e.changedTouches[0].localX-this.canvasRect.left;this.endY=e.changedTouches[0].localY-this.canvasRect.top;this.draw()this.startX=this.endX;this.startY=this.endY;},touchEnd(e){this.endX=e.changedTouches[0].localX-this.canvasRect.left;this.endY=e.changedTouches[0].localY-this.canvasRect.top;letimgData=this.ctx.getImageData(0,0,this.width,this.height)this.storageSteps.push(imgData)},//绘制绘图(){this.ctx.beginPath();this.ctx.moveTo(this.startX,this.startY);this.ctx.lineTo(this.endX,this.endY);this.ctx.lineCap='圆形';this.ctx.lineJoin='圆';this.ctx.lineWidth=this.lineWidth;this.ctx.strokeStyle=this.lineColor;这个.ctx。中风（）;this.ctx.closePath();this.isEmpty=false;},属性值属性说明moveTo()path从当前点移动到指定点lineTo()连接从当前点到指定点的路径lineCap属性设置或返回线头的样式在该行的末尾。lineJoin属性设置或返回创建角的类型。当两条线相交时，lineWidth就是线的宽度。strokeStyle设置描边的颜色。data显示canvas信息，这里数据已经保存在touchEnd函数中)//undorevert(){this.storageSteps.pop()constlen=this.storageSteps.length;如果(len){this.ctx.putImageData(this.storageSteps[len-1],0,0);}else{this.clear()}}，实现清空效果——清空storageStep数组中的所有数据。//清除clear(){this.ctx.clearRect(0,0,this.width,this.height);这个.storageSteps=[];//清空步骤记录this.image="";这个.width2=0;this.height2=0;this.isEmpty=true;//清除标记}实现预览效果。预览效果是将canvas信息转成base64，使用toDataURL方法，返回一个包含图片显示的数据URI。//previewpreview(){constbase64=this.$refs.canvas.toDataURL('image/png');console.log(base64)constimg=this.$element("preview");this.image=base64;这个.width2=350;this.height2=250;},注意：在写这个效果的过程中，我发现canvas中的一些函数需要更高的JSAPI版本才能实现，比如getBoundingClientRect和toDataURL函数，它们支持的版本是JSAPI6以上。如果版本太低，这两个函数会报错。签名效果在P40pro上模拟成功。综上所述，以上就是我的招牌效果的全部内容，最终效果如动画所示。虽然样式比较简单，但是至此已经实现了签名的基本功能。以后我会不断完善和完善，争取写出更完整漂亮的demo。了解更多开源知识，请访问：开源基础软件社区https://ost.51cto.com。

上一篇：frp做内网穿透访问首页

下一篇：git如何比较不同分支之间的差异

HarmonyOS-实现签名功能相关文章