微信小程序手写签字版

在这里插入图片描述

wxml

请在下面的白框中签名 重置 提交 # js Page({ data: { signPath: [], cardNo: '', preX: '', preY: '', }, onLoad(options) { this.setData({ cardNo: options.cardNo }) wx.createSelectorQuery().select('#myCanvas').fields({ node: true, size: true }).exec(this.init.bind(this)) }, init(data) { console.log(data); const width = data[0].width; const height = data[0].height; const canvas = data[0].node; const ctx = canvas.getContext('2d'); const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = width * dpr
canvas.height = height * dpr
ctx.scale(dpr, dpr)this._dpr = dpr
this._ctx = ctx
this._canvas = canvas

},
touchStart(e) {
console.log(e)
const {
_ctx: ctx
} = this
const {
clientX: x,
clientY: y
} = e.touches[0]
ctx.beginPath()
// ctx.moveTo(x-e.target.offsetLeft, y-e.target.offsetTop)
ctx.moveTo(x - e.target.offsetLeft, y - e.target.offsetTop)
this.setData({
preX: x - e.target.offsetLeft,
preY: y - e.target.offsetTop,
})
},
touchMove(e) {
const {
_ctx: ctx
} = this
const {
clientX: x,
clientY: y
} = e.touches[0]
this.data.signPath.push([x, y])
this.setData({
signPath: this.data.signPath
})
let preX = this.data.preX
let preY = this.data.preY
let curX = x - e.target.offsetLeft
let curY = y - e.target.offsetTop
let deltaX = Math.abs(preX - curX)
let deltaY = Math.abs(preY - curY)
if (deltaX >= 3 || deltaY >= 3) {
// 前后两点中心点
let centerX = (preX + curX) / 2
let centerY = (preY + curY) / 2

  //这里以前一点作为控制点,中心点作为终点,起始点为上一次的中点,很流畅啊!ctx.quadraticCurveTo(preX, preY, centerX, centerY);ctx.stroke();this.setData({preX: curX,preY: curY,})
}
// ctx.lineTo(x-e.target.offsetLeft, y-e.target.offsetTop)
// ctx.lineTo(x, y)
// ctx.stroke()

},
//重绘
reset() {
wx.showModal({
title: ‘提示’,
content: ‘确定要重置吗?’,
cancelText: ‘取消’,
confirmText: ‘确定’,
success: res => {
if (res.confirm) {
const {
_ctx: ctx,
_canvas: canvas
} = this
this.setData({
signPath: []
})
ctx.clearRect(0, 0, canvas.width, canvas.height)
}
}
})
},
//提交签名图片
sure() {
if (this.data.signPath.length <= 0) {
wx.showToast({
title: ‘签名不能为空’,
icon: ‘none’
})
return
}
wx.showModal({
title: ‘提示’,
content: ‘确定提交吗?’,
cancelText: ‘取消’,
confirmText: ‘确定’,
success: res => {
if (res.confirm) {
//导出图片
this.outImage()
}
}
})
},
sureSignature() {
if (this.data.signPath.length <= 0) {
wx.showToast({
title: ‘签名不能为空’,
icon: ‘none’
})
return
}
},
outImage() {
const {
_canvas: canvas,
_dpr: dpr
} = this
var image = canvas.toDataURL(“image/png”); // 得到生成后的签名base64位 url 地址
console.log(image)
let pages = getCurrentPages(); //获取当前页面js里面的pages里的所有信息。
//prevPage 是获取上一个页面的js里面的pages的所有信息。 -2 是上一个页面,-3是上上个页面以此类推。
let prevPage = pages[pages.length - 2];
//给上个页面赋值
prevPage.setData({
qianimg: image
})
wx.navigateBack({
delta: 1,
})
}
})

wxss

.content {
width: 100vw;
height: 100vh;
}

.canvasBox {
margin-top: 10px;
background-color: #fff;
width: 100%;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.title {
font-size: 28rpx;
padding: 0 24rpx;
}
.title::before {
content: ‘*’;
color: red;
}
.tips {
width: 100%;
color: red;
padding: 20px;
box-sizing: border-box;
}
.sign-canvas-view {
box-sizing: border-box;
border: 2rpx dashed #ddd;
margin: 0 24rpx;
}

.submitBtn {
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 30px;
}

.clickbtn{
background-color: rgb(14, 103, 175);
}
.clickbtn_1{
background-color: rgb(5, 76, 134);
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/20949.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python

文章目录 初识pythonpython的安装win系统Linux系统&#xff08;centos7&#xff09; 第一个Python程序常见问题 Python解释器Python开发环境PyCharm的基础使用创建项目修改主题修改默认字体和大小汉化插件翻译软件常用快捷键 初识python Python语言的起源可以追溯到1989年&…

Ubuntu-文件和目录相关命令

&#x1f52e;linux的文件系统结构 ⛳目录结构及目录路径 &#x1f9e9;文件系统层次结构标准FHS Filesystem Hierarchy Standard(文件系统层次结构标准&#xff09; Linux是开源的软件&#xff0c;各Linux发行机构都可以按照自己的需求对文件系统进行裁剪&#xff0c;所以众多…

17. Spring 事务

目录 1. 事务定义 2. MySQL 中的事务使用 3. 没有事务时的插入 4. Spring 编程式事务 5. Spring 声明式事务 5.1 Transactional 作用范围 5.2 Transactional 参数说明 5.3 Transactional 工作原理 1. 事务定义 将⼀组操作封装成一个执行单元&#xff08;封装到一起…

解决spring.thymeleaf.cache=false不起作用的问题

目录 spring.thymeleaf.cachefalse不起作用thymeleaf缓存关闭 spring.thymeleaf.cachefalse不起作用 配置是清除缓存&#xff0c;实现热部署。 也就是修改了html后不用重启&#xff0c;刷新页面就能看到效果。 修改完html后一定要ctrlf9重新build一下。 再回到浏览器刷新&…

ffplay——QT项目移植

一、ffmpeg源码编译 参考&#xff1a; https://blog.csdn.net/sgzed/article/details/119850119 在生成时做了一些修改&#xff1a; ./configure --toolchainmsvc --enable-shared --enable-postproc --enable-gpl --prefixwindows 二、对文件做调整 ffplay只需要三个文件&…

stm32常见数据类型

stm32的数据类型的字节长度 s8 占用1个byte&#xff0c;数据范围 -2^7 到 (2^7-1) s16 占用2个byte&#xff0c;数据范围 -2^15 到 (2^15-1) s32 占用 4个byte&#xff0c;数据范围 -2^31 到 (231-1)231 2147483647 int64_t占用8个byte&#xff0c;数据范围 -2^63 到 (2^63-1)…

RpcController作用浅析

RpcController作用浅析 前面提到了RpcConsumer的实现思路&#xff0c;但是并没说明RpcController有什么作用&#xff0c;不妨看看google::protobuf::RpcController&#xff1a; class PROTOBUF_EXPORT RpcController {public:inline RpcController() {}virtual ~RpcControlle…

linux启动oracle

一、启动方法 方法1&#xff1a; Sql代码 cd $ORACLE_HOME/bin #进入到oracle的安装目录 ./dbstart #重启服务器 ./lsnrctl start #重启监听器 ----------------------------------- 方法2&#xff1a; &#xff08;1&#xff09; 以oracle身份登录​​数据库​​&am…

C#仿热血江湖GClass11

目录 1 GClass11 1.1 GetEnumerator 1.2 Dispose 1.3 imethod_1 1.4 imethod_0 GClass1using System; using System.Collections; using System.Collections.Generic; using Sys

一文快速入门Byzer-python

目录 一、Byzer-Python介绍 二、Byzer-python工具语法糖 三、环境依赖 1. Python 环境搭建 2. Ray 环境搭建 3. Byzer-python 与 Ray 四、参数详解 五、数据处理 1. Byzer-python 处理数据 2. Byzer-python 代码说明 3. Byzer-python 读写 Excel 文件 4. Byzer-pytho…

数据持久化之Web存储

​ 前端数据持久化是指在前端&#xff08;客户端&#xff09;应用中将数据保存在本地&#xff0c;使得数据在页面刷新、关闭或重新打开后依然保持存在的过程。在Web开发中&#xff0c;前端数据持久化可以使得用户不必每次都从服务器中获取数据。 常见的前端持久化方法&#xf…

如何搭建一个口才培训的网站?需要具备哪些条件?

论文题目&#xff1a;如何搭建一个口才培训的网站及所需条件 摘要&#xff1a; 本文探讨了如何搭建一个口才培训的网站&#xff0c;并详细分析了所需的关键条件。口才培训作为一种重要的社交技能&#xff0c;能够帮助人们提升自信和影响力&#xff0c;因此具有广阔的市场前景。…

day17 | 654.最大的二叉树 617.合并二叉树 700.二叉搜索树中的搜索 98.验证二叉搜索树

文章目录 一、最大的二叉树二、合并二叉树三、二叉搜索树中的搜索四、验证二叉搜索树 一、最大的二叉树 654.最大的二叉树 构建二叉树的题目&#xff0c;都用前序遍历。 因为我们一定要先构建根节点&#xff0c;才能继续向后构建。 递归函数的参数和返回值&#xff1a; Tree…

AssetBundle学习

官方文档&#xff1a;AssetBundle 工作流程 - Unity 手册 (unity3d.com) 之前写的博客&#xff1a;AssetBundle学习_zaizai1007的博客-CSDN博客 使用流程图&#xff1a; 1&#xff0c;指定资源的AssetBundle属性 &#xff08;xxxa/xxx&#xff09;这里xxxa会生成目录&…

redux-promise-middleware和applyMiddleware的理解与使用

一、作用&#xff1a; applyMiddleware是一个中间件&#xff0c;通常和applyMiddleware结合使用&#xff0c;是dispatch与reducers之间的应用&#xff0c;用于处理dispatch发送的异步action操作 二、使用 1、安装redux-promise-middleware cnpm i redux-promise-middleware…

【Android】使用 CameraX 实现基础图像分析功能

1. 基础开发环境 JDK&#xff1a;JDK17 Android Studio&#xff1a;Android Studio Giraffe | 2022.3.1 Android SDK&#xff1a;Android API 34 Gradle: gradle-8.0-bin.zip CameraX Version: 1.1.0-alpha05 2. 添加相关依赖 在 build.gradle 中添加 CameraX 的相关依赖 // *…

Micropython STM32F4入门点灯第一课

Micropython STM32F4入门点灯第一课 &#x1f4cc;固件刷可参考前面一篇《STM32刷Micropython固件参考指南》&#x1f4cd;固件下载&#xff1a;https://micropython.org/download/?mcustm32f4&#x1f516;本例程基于STM32F4DISC&#xff0c;主控芯片STM32F407VGT6&#x1f4…

ospf复习

工作过程 启动OSPF配置之后&#xff0c;OSPF会向本地所有激活OSPF的接口发送hello包&#xff0c;以组播 224.0.0.5&#xff08;所有运行OSPFV2协议的设备监听的地址&#xff09;的形式发送。hello包中将携带本 地的RID及本地已知邻居的RID&#xff0c;之后&#xff0c;将收集到…

vue 混入(mixin)的使用

在 vue 组件内&#xff0c;如果想将一些公共功能&#xff0c;如组件、方法、钩子函数等复用&#xff0c;混入是一个很好的选择。 现在开始我们的混入使用吧 1、我们可以创建一个目录mixins&#xff0c;在创建一个comment.js文件如图&#xff1a; // 在 common.js 里写你想共享…

20230803激活手机realme GT Neo3

20230803激活手机realme GT Neo3 缘起&#xff1a; 新买的手机&#xff1a;realme GT Neo3 需要确认&#xff1a; 1、4K录像&#xff0c;时间不限制。 【以前的很多手机都是限制8/10/12/16分钟】 2、通话自动录音 3、定时开关机。 4、GPS记录轨迹不要拉直线&#xff1a;户外助…