uniapp创建电子签名

参考：(9条消息) unniapp实现电子签名_你知不知的博客-CSDN博客_uniapp签名板

上面那位大佬写的不全，然后做了写修改

这是封装的电子签名组件

父组件：

//页面
<template><view><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" ref="hello"/></view>
</template>//js
<script>import catSignature from '@/components/canvas.vue';//引入组件components: {catSignature},//data函数isShow: false,img1:"",//methods函数doss() {this.isShow = true;},close() {this.isShow = false;},save(val) {this.isShow = false;this.img1 = this.$refs.hello.signImage;},</script>

子组件：

<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>

完成！！！

uniapp创建电子签名相关推荐

HQChart使用教程37 - 如何在uni-app创建k线图(app)
HQChart使用教程37 - 如何在uni-app创建k线图 app 插件目录创建步骤 1. 拷贝插件到工程中 2. 创建一个page页在page页中 3.运行到模拟器通过uniapp下载hq ...
使用uniapp创建小程序和H5界面
uniapp的介绍可以看官网,接下来我们使用uniapp创建小程序和H5界面,其他小程序也是可以的,只演示创建这2个,其实都是一套代码,只是生成的方式不一样而已. uni-app官网 1.打开HBui ...
HQChart使用教程35 - 如何在uni-app创建K线图(h5)
HQChart使用教程35 - 如何使用uni-app创建K线图插件目录创建步骤 1. 创建一个空的uni-app 工程, 把umychart_uniapp_h5 目录拷贝到工程中. 2. 创建一 ...
uniapp 创建与配置 tabbar
1. 创建页面删除 pages 下的 index 文件夹在 pages 文件夹处,右键 -> 选择新建页面确认新建页面的信息由于咱们删除了默认的index.vue页面,导致编译报错找到 ...
uni-app创建小程序项目并运行到微信开发者工具上@令狐张豪
在这直接说步骤 1. 创建uni-app小程序项目 2. 打开项目中的manifest.json文件进行配置 2.1 写入微信小程序AppID 2.2 打开HBuilder X 工具-设置填写外部w ...
前端学习（2748）：uniapp创建项目和演示
1创建项目 2运行项目 3配置在微信小程序注意配置路径 4注意开启端口号
WinCC在C脚本创建电子签名对话框
简介 C 示例显示了如何通过电子签名来保护过程控制操作,使其免受未经授权的执行. 调用"ShowDialog"函数在运行系统中打开一个对话框,通过该对话框对用户进行验证. 使输出命 ...
uniapp 创建小程序使用云开发
首先.小程序开通云开发,打开小程序项目一:云开发中第一次云开发,需要自己创建环境名称和环境ID 以下默认已经开通云开发后的步骤: 1.查看环境ID:运行到微信小程序,打开云开发->设置-&g ...
[server]基于uniapp创建小程序并上传照片到阿里云OSS
先说在前头,最近忙,随想随记,所以有些博客写了一半就发了,后续会慢慢补齐的.抱歉! 前端使用uniapp开发,后台挂在阿里云.选uniapp开发的原因是我这边人手不够,同时也不想维护这么多客户端,故选 ...
使用HBuilder X 创建项目，（uni-app创建项目步骤）
一.第一步点击左上角的文件--新建---项目二.根据以上步骤点击项目后会弹出一个中型的窗口:首先第一步在①的位置选择你要创建的项目是什么类型的,第二步②的位置是选择默认项目还是模板,第三步在③的位置 ...

uniapp创建电子签名

uniapp创建电子签名相关推荐

最新文章

热门文章