【uni-app】uni-app实现手写签名效果：

文章目录

一、效果:
二、实现:
三、扩展：

一、效果:

二、实现:

<template><view class="signature"><canvas class="signature-canvas" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove"@touchend="touchend"></canvas><view class="signature-button"><button type="warn" @click="clear">重写</button><button type="primary" @click="finish">保存</button></view></view>
</template><script>export default {data() {return {ctx: '', //绘图图像points: [], //路径点集合 signature: '', //签名后台图片地址}},onLoad() {this.createCanvas()},methods: {//创建并显示画布createCanvas: function() {this.ctx = uni.createCanvasContext("mycanvas", this); //创建绘图对象this.ctx.setStrokeStyle('red')//设置画笔样式this.ctx.lineWidth = 4;this.ctx.lineCap = "round"this.ctx.lineJoin = "round"},//触摸开始，获取到起点touchstart: function(e) {let startX = e.changedTouches[0].x;let startY = e.changedTouches[0].y;let startPoint = {X: startX,Y: startY};this.points.push(startPoint);//每次触摸开始，开启新的路径this.ctx.beginPath();},//触摸移动，获取到路径点touchmove: function(e) {let moveX = e.changedTouches[0].x;let moveY = e.changedTouches[0].y;let movePoint = {X: moveX,Y: moveY};this.points.push(movePoint); //存点let len = this.points.length;if (len >= 2) {this.draw(); //绘制路径}},// 触摸结束，将未绘制的点清空防止对后续路径产生干扰touchend: function() {this.points = [];},/* ***********************************************#   绘制笔迹#    1.为保证笔迹实时显示，必须在移动的同时绘制笔迹#    2.为保证笔迹连续，每次从路径集合中区两个点作为起点（moveTo）和终点(lineTo)# 3.将上一次的终点作为下一次绘制的起点（即清除第一个点）************************************************ */draw: function() {let point1 = this.points[0]let point2 = this.points[1]this.points.shift()this.ctx.moveTo(point1.X, point1.Y)this.ctx.lineTo(point2.X, point2.Y)this.ctx.stroke()this.ctx.draw(true)},//清空画布clear: function() {let that = this;uni.getSystemInfo({success: function(res) {let canvasw = res.windowWidth;let canvash = res.windowHeight;that.ctx.clearRect(0, 0, canvasw, canvash);that.ctx.draw(true);},})},//完成绘画并保存到本地finish: function() {let that = this;uni.canvasToTempFilePath({canvasId: 'mycanvas',success: function(res) {console.log(res)//上传到服务器// that.api.uploadFile({//     url: 'user/upload/one',//     filePath: res.tempFilePath,//   name: 'file',//   success: (uploadFileRes) => {//         console.log(uploadFileRes)//        that.signature = uploadFileRes.data.url;//         that.clear();//         that.showCanvas = false;//     }// })//保存到本地// let path = res.tempFilePath;// uni.saveImageToPhotosAlbum({//  filePath: path,//   success: function() {//         uni.showToast({//           title: "保存成功"//       })//    },//    fail: function() {//        uni.showToast({//           title: "保存失败"//       })//    }// })}})},}}
</script><style lang="scss">.signature {padding: 0 10px;&-canvas {width: 100%;height: 360px;box-sizing: border-box;border: 1px solid lightgrey;}&-button {width: 100%;margin-top: 10px;display: flex;button {flex: 1;border-radius: 0 !important;}}}
</style>

三、扩展：

https://uniapp.dcloud.net.cn/api/canvas/CanvasContext.html

【uni-app】uni-app实现手写签名效果：相关推荐

html 手写字效果,canvas画布实现手写签名效果的示例代码
最近项目中涉及到移动端手写签名的功能需求,将实现代码记录于此,供小伙伴们参考指摘哦~ HTML代码: 手写区清除确定 CSS样式: .mSign_signMark_box{padding: 15p ...
android 手写签批_Android手写签名效果
任何画线的程序,都是先在界面上获取若干不连续的点,然后将这些点连成线. 一些常见的笔型比较好实现,比如说铅笔.钢笔等等,这类笔型的线条的宽度和线条的颜色是固定的,只需要将点连接成固定颜色和固定宽度的线 ...
html app签名,html5手写签名
sxqm 清空生成图片 var canvas, board; canvas = document.getElementById('myCanvas'); canvas.height = 300; ...
html5 在线签名,html5手写签名
sxqm 清空生成图片 var canvas, board; canvas = document.getElementById('myCanvas'); canvas.height = 300; ...
html5 移动端手写签名,H5移动端项目实现手写签名功能 vue实现手写签名
vue 移动端实现手写签名效果,功能很完美,保存时保存为base64格式. 刚好项目用到此功能,就网上找了一下,清理了无用代码,简单方便,因为项目中多个地方需要使用,所以我将它整理为组件,通过ref和 ...
H5移动端项目实现手写签名功能 vue实现手写签名
vue 移动端实现手写签名效果,功能很完美,保存时保存为base64格式. base64转file文件格式 vue中将base64转file文件格式刚好项目用到此功能,就网上找了一下,清理了无用代码 ...
Android App实战项目之实现手写签名APP功能（附源码，简单易懂可直接实用）
运行有问题或需要源码请点赞关注收藏后评论区留言~~~ 一.跟踪滑动轨迹实现手写签名手写签名的原理是把手机屏幕当作画板,把用户手指当作画笔,手指在屏幕上划来划去,屏幕就会显示手指的移动轨迹,就像画笔在 ...
在app端手写签名并保存下来（以文件形式或者是base64编码）
最近做的项目有个需求,在app端手写签名的并保存为文件或者base64编码.所以就刚好有时间写了一下并记录下来: 先上效果图: 分析思路:因为这里是要获取手势轨迹并画出来,所以肯定是有个Touch事件 ...
uniapp手写_手写签名
前言: 简单的手写签名参考 https://www.auiaa.com/fron/uni/2019-03-17/103.html 的例子,进行了修改主要代码 @touchcancel='cance ...

【uni-app】uni-app实现手写签名效果：

文章目录

一、效果:

二、实现:

三、扩展：

【uni-app】uni-app实现手写签名效果：相关推荐

最新文章

热门文章