|
你知不知 已于 2022-07-27 14:31:52 修改 2303 收藏 9 分类专栏： uniapp那些事 文章标签： javascript css vue.js html5 node.js 版权 uniapp那些事 专栏收录该内容 24 篇文章1 订阅 订阅专栏 先放效果图 主页面代码： <!-- 这是签名 --> <button type="primary" @tap="doss" style="margin: 10px;">点击签名</button> <view class="imgs"><image class="img" :src="img1" mode="widthFix" style="margin: 0px 24px;"></image></view> <catSignature canvasId="canvas1" @close="close" @save="save" :visible="isShow" /> data() { return { isShow: false, } } js代码 doss() { this.isShow = true; }, close() { this.isShow = false; }, save(val) { this.isShow = false; this.img1 = this.$refs.hello.signImage; // console.log('微信小程序产生的',this.img1); } 实现电子签名的组件代码 <template> <view class="uni-list list-pd"> <view v-if="visibleSync" class="cat-signature" :class="{ visible: show }" @touchmove.stop.prevent="moveHandle"> <view class="mask" @tap="close" /> <view class="content"> <canvas class="firstCanvas" :canvas-id="canvasId" name="autograph" @touchmove="move" @touchstart="start($event)" @touchend="end" @touchcancel="cancel" @longtap="tap" disable-scroll="true" @error="error" /> <view class="btns"> <view class="btn" @tap="clear">清除</view> <view class="btn" @tap="save">保存</view> </view> </view> </view> </view> </template> <script> var content = null; var touchs = []; var canvasw = 0; var canvash = 0; //获取系统信息 uni.getSystemInfo({ success: function(res) { canvasw = res.windowWidth; canvash = (canvasw * 9) / 16; } }); export default { name: 'cat-signature', props: { visible: { type: Boolean, default: false }, canvasId: { type: String, default: 'firstCanvas' } }, data() { return { show: false, visibleSync: false, signImage: '', hasDh: false }; }, watch: { visible(val) { this.visibleSync = val; this.show = val; this.getInfo(); } }, created(options) { this.visibleSync = this.visible; this.getInfo(); setTimeout(() => { this.show = this.visible; }, 100); }, methods: { getInfo() { //获得Canvas的上下文 content = uni.createCanvasContext(this.canvasId, this); //设置线的颜色 content.setStrokeStyle('#000'); //设置线的宽度 content.setLineWidth(5); //设置线两端端点样式更加圆润 content.setLineCap('round'); //设置两条线连接处更加圆润 content.setLineJoin('round'); }, // close() { this.show = false; this.hasDh = false; this.$emit('close'); }, moveHandle() {}, // 画布的触摸移动开始手势响应 start(e) { let point = { x: e.touches[0].x, y: e.touches[0].y }; touchs.push(point); this.hasDh = true; }, // 画布的触摸移动手势响应 move: function(e) { let point = { x: e.touches[0].x, y: e.touches[0].y }; touchs.push(point); if (touchs.length >= 2) { this.draw(touchs); } }, // 画布的触摸移动结束手势响应 end: function(e) { //清空轨迹数组 for (let i = 0; i < touchs.length; i++) { touchs.pop(); } }, // 画布的触摸取消响应 cancel: function(e) { // console.log("触摸取消" + e) }, // 画布的长按手势响应 tap: function(e) { // console.log("长按手势" + e) }, error: function(e) { // console.log("画布触摸错误" + e) }, //绘制 draw: function(touchs) { let point1 = touchs[0]; let point2 = touchs[1]; // console.log(JSON.stringify(touchs)) content.moveTo(point1.x, point1.y); content.lineTo(point2.x, point2.y); content.stroke(); content.draw(true); touchs.shift(); }, //清除操作 clear: function() { //清除画布 content.clearRect(0, 0, canvasw, canvash); content.draw(true); // this.close() this.hasDh = false; this.$emit('clear'); }, save() { var that = this; if (!this.hasDh) { uni.showToast({ title: '请先签字', icon: 'none' }); return; } uni.showLoading({ title: '生成中...', mask: true }); setTimeout(() => { uni.canvasToTempFilePath( { canvasId: this.canvasId, success: function(res) { that.signImage = res.tempFilePath; that.$emit('save', res.tempFilePath); uni.hideLoading(); that.hasDh = false; that.show = false; }, fail: function(err) { console.log(err); uni.hideLoading(); } }, this ); }, 100); } } }; </script> <style lang="scss"> .cat-signature.visible { visibility: visible; } .cat-signature { display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; z-index: 11; height: 100vh; visibility: hidden; .mask { display: block; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); transition: opacity 0.3s; } .content { display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 94%; height: 500upx; background: #fff; border-radius: 8upx; box-shadow: 0px 3px 3px #333; // canvas .firstCanvas { background-color: #fff; width: 100%; height: 400upx; } // canvas .btns { padding: 0 15px; height: 100upx; overflow: hidden; position: absolute; bottom: 10upx; left: 0; right: 0; margin: auto; display: flex; justify-content: space-between; .btn { width: 40%; text-align: center; font-size: 28upx; height: 60upx; line-height: 60upx; background-color: #999; color: #fff; border-radius: 6upx; } } } } .visible .mask { display: block; opacity: 1; } .uni-list:after { // 全局样式里面有一个，所以我们用白色把他隐藏起来 background-color: #ffffff; } </style> 千万要记得引用电子签名代码哦 // 调用手写签名组件,路径记得修改 import catSignature from '@/common/cat-signature.vue'; 1 2 export default { components: { catSignature }, } ———————————————— 版权声明：本文为CSDN博主「你知不知」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/qq_42899245/article/details/106123633 |
|
|
