uniapp实现签名板效果

本插件是基于zwp-draw-pad插件来实现的

首先第一步封装插件

<template><canvas canvas-id="myCanvas" disable-scroll :style="drawPadStyles" @touchstart="onTouchStart"@touchmove="onTouchMove" @touchend="onTouchEnd" />
</template><script>function deepClone(data) {return JSON.parse(JSON.stringify(data))}export default {props: {width: {type: Number,required: true},height: {type: Number,required: true},color: {type: String,default: '#000'},size: {type: Number,default: 3},disabled: {type: Boolean,default: false}},computed: {drawPadStyles({width,height}) {return `width: ${width}px;height: ${height}px`}},methods: {onTouchStart(e) {const {disabled,points,originData} = thisif (disabled) returnconst {x,y} = e.changedTouches[0]points.push([x, y])originData.push([[x, y]])},onTouchMove(e) {const {disabled,points,originData,draw} = thisif (disabled) returnconst {x,y} = e.changedTouches[0]points.push([x, y])originData[originData.length - 1].push([x, y])draw()},onTouchEnd() {this.points = []},draw() {const {ctx,points} = thisif (points.length < 2) returnctx.moveTo(...points.shift())ctx.lineTo(...points[0])ctx.stroke()ctx.draw(true)},/*** 清空画布*/init() {const {ctx,width,height} = thisctx.clearRect(0, 0, width, height)ctx.draw()this.originData = []},/*** 回退到上一笔*/back() {const {originData,drawByData} = thisoriginData.pop()drawByData(originData)},/*** 根据传入的数据绘制* @param {Array} data*/drawByData(data) {const {init,ctx} = thisif (!data || !data.length) return init()const tempData = deepClone(data)while (!!tempData.length) {const lineData = tempData.shift()ctx.moveTo(...lineData.shift())while (!!lineData.length) ctx.lineTo(...lineData.shift())}ctx.stroke()ctx.draw()},/*** 临时保存画布上的数据* @param {Any} key 用于访问的key* @param {Boolean} isInit 保存完毕后是否清空画布，默认为true*/saveCache(key, isInit = true) {const {cache,originData,init} = thisconst temp = deepClone(originData)cache.set(key, temp)if (isInit) init()},/*** 用缓存的key恢复画布* @param {Any} key 用于访问的key*/restoreCache(key) {const {drawByData,cache} = thisthis.originData = cache.get(key)drawByData(this.originData)},/*** 清空缓存数据*/clearCache() {this.cache.clear()},save(options) {return new Promise((success, fail) => {const {width,height,canvasId} = thisuni.canvasToTempFilePath({x: 0,y: 0,width,height,...options,canvasId: 'myCanvas',success,fail},this)})}},created() {const {color,size} = thisconst ctx = uni.createCanvasContext('myCanvas', this)ctx.setStrokeStyle(color)ctx.setLineWidth(size)ctx.setLineCap('round')ctx.setLineJoin('round')this.ctx = ctxthis.points = []this.originData = []this.cache = new Map()}}
</script>

封装好插件以后我们把他放到公共文件夹

然后在需要使用的页面script引入

import QM from "@/common/qianming.vue" //具体名字，路径根据自己创建的来

然后在template标签内引入

<template><view class="qmb"><QM ref="drawview" :width="600" :height="300" />       <view class="button"><view class="clearbtn" @click="padinit()">清除</view><view class="surebtn" @click="padsave()">确定</view></view></view>
</template>

在method执行方法，下面列举一部分有需要可以根据自身情况来自己添加

具体用法参考清除按钮，在上面封装的文件里都有标注

// 清除按钮
padinit() {this.$refs.drawview.init()},
// 保存手写内容为图片（base64）
padsave() {var that = this;this.$refs.drawview.save().then(res => {console.log('保存图片的地址', res.tempFilePath)},

下面是样式，根据自己需求更改

<style lang="less">.button {width: 100%;height: 60px;color: #27408B;position: fixed;bottom: 0px;left: 0;}.clearbtn {background-color: #FFFFFF;width: 50%;height: 40px;color: #27408B;float: left;border: 2px solid #0390ff;font-size: 15px;font-family: '黑体';line-height: 40px;text-align: center;}.surebtn {background-color: #0390ff;width: 50%;height: 40px;color: #fff;float: left;font-size: 15px;font-family: '黑体';line-height: 40px;text-align: center;}.clearbtn:hover {background-color: #D8D8D8;}.surebtn:hover {background-color: #D8D8D8;}
</style>

有不明白或者更好的建议欢迎在下方评论

uniapp实现签名板效果相关推荐

uni-app实现尺子效果
这里写自定义目录标题实现的两种方式实现方法 1.通过uniapp提供的swiper组件实现通过uniapp提供的movable-view组件实现谢谢!!!! 实现的两种方式实现方法 1.通过 ...
【前端】uniapp实现美团效果，右侧滑动商品，左侧菜单高亮
有三步初始化左右滑块的高度得到右边每个区间的top和buttom 监听右边商品部分滑动事件,如果在某个区间内,则那个区间的菜单名高亮主界面index.vye <view style=&qu ...
uniapp一键复制功能效果demo（整理）
<template><view><view @click="copy('2022093987615371')"></view>< ...
uniapp 中使用不同字体
官方文档 uniapp 字体展示效果 : uniapp 多种字体的显示 H5网页 Android IOS uni.loadFontFace({family: 'Bitstream Vera Se ...
【持续更新】uni-app学习笔记
2022.10.20 updated 优先级 1)官方手册优先 uni-app官网uni-app:一个使用 Vue.js 开发跨平台应用的前端框架https://uniapp.dcloud.io/RE ...
uni-app运行到手机上，提示request:fail abort statusCode:-1 Failed to connect to localhost/127.0.0.1:8080
在HBuilderX里开发,想要在uni-app上看看效果,结果运行出界面了直接第一步登录就失败了,明明在电脑上可以完成登录,但是手机上却不行,uni.request请求失败.打印出error发现是没 ...
uniapp 自定义tabbar
uniapp 自定义tabbar 效果新建 mytab.vue 跟据传参转入相应页面优质资源分享效果选中效果是动态的新建 mytab.vue template <template> ...
小程序转h5之后 vant文件查找失败:_你还在使用原生开发小程序吗
最近帮别人在做一个小程序,因为官方的支持不够好,组件库也不够多,所以就没有使用官方的操作.网上查找了一番,觉得mpvue还不错(之前也没玩过),索性拿来用吧! 01 前言小程序的做法也是比较简单的, ...
论坛项目小程序和h5登录
项目中安装uview 出现npm安装uview 直接报错: 创建一个package.json配置文件在进行安装.cmd到项目.初始化一个package.json文件(vue项目的配置文件) npm i ...
关于Mongodb的全面总结
MongoDB的内部构造<MongoDB The Definitive Guide> MongoDB的官方文档基本是how to do的介绍,而关于how it worked却少之又少,本 ...

uniapp实现签名板效果

uniapp实现签名板效果相关推荐

最新文章

热门文章