uniapp签字版

痛定思痛。 2022-10-15 07:56 178阅读 0赞

# 大小自己根据实际情况自己改 #

直接上代码

<template>
    	<view>
    		<canvas style="width: 300px; height: 200px;border: 1px solid;" canvas-id="firstCanvas1" id="firstCanvas1" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd" ></canvas>
    	</view>
    </template>
    
    <script> let context1= null; export default { name:"llt_signature", data() { return { canvasData:[] }; }, watch: { canvasData() { if(!this.canvasData.length){ return } context1.moveTo(this.canvasData[0].x, this.canvasData[0].y) for (let i = 0; i < this.canvasData.length; i++) { context1.lineTo(this.canvasData[i].x, this.canvasData[i].y) } context1.stroke() context1.draw(true) } }, created() { context1= uni.createCanvasContext('firstCanvas1',this) context1.setLineWidth(1) context1.setStrokeStyle("#000000") }, methods:{ handleTouchStart(e) { this.canvasData=[] const a = e.changedTouches[0] this.canvasData.push({ x: a.x, y: a.y }) }, handleTouchMove(e) { const a = e.changedTouches[0] this.canvasData.push({ x: a.x, y: a.y }) }, handleTouchEnd(e) { const a = e.changedTouches[0] this.canvasData.push({ x: a.x, y: a.y }) this.$emit('canvasDataChange',this.canvasData) }, handleEnd() { context1.stroke() context1.draw(true) }, } } </script>
    
    <style lang="scss"> </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，178人围观）

还没有评论，来说两句吧...

相关阅读

相关 canvas签字

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta na...

柔光的暖阳◎/ 2024年04月18日 06:46/ 0 赞/ 74 阅读

相关 uniapp zjy-calendar日历，uni-calendar日历增强版

一、zjy-calendar简介 > zjy-calendar日历是对uniapp uni-calendar日历的增强，支持圆点和文字自定义颜色。 ![在这里插入图片描

比眉伴天荒/ 2024年03月17日 17:48/ 0 赞/ 106 阅读

相关 SpringBoot实现电子文件签字+合同系统

本文已经收录到Github仓库，该仓库包含计算机基础、Java基础、多线程、JVM、数据库、Redis、Spring、Mybatis、SpringMVC、SpringBoot、

蔚落/ 2023年09月25日 15:02/ 0 赞/ 47 阅读

相关小程序实现人脸取景框摄像-uniapp版

> 此篇幅主要介绍，关于人脸取景框的摄像功能，如何实现及实现代码，以及createCameraContext使用时遇到的坑，使用到的组件有camera、cover-view、c

朴灿烈づ我的快乐病毒、/ 2023年01月11日 09:07/ 0 赞/ 263 阅读

相关小程序实现身份证取景框拍摄-uniapp版

> 此篇幅主要介绍，关于身份证取景框拍照，如何实现及实现代码，其他的银行卡取景框等等一些证件就可以照猫画虎了，使用到的组件有camera、cover-view、cover-im

淩亂°似流年/ 2023年01月11日 08:52/ 0 赞/ 458 阅读

相关小程序canvas签字功能

先看效果图 ![在这里插入图片描述][20200913201220223.gif_pic_center] 上代码 canvas.wxml <canvas

Dear 丶/ 2022年12月06日 15:05/ 0 赞/ 191 阅读

相关 uniapp签字版

大小自己根据实际情况自己改直接上代码 <template> <view> <canvas style="width: 300px; he

痛定思痛。/ 2022年10月15日 07:56/ 0 赞/ 179 阅读

相关 HTML使用JSignature签字并上传图片

1.jsignature签字插件下载 [jsignature签字插件下载][jsignature] 2.引入JS <script src="https://s

以你之姓@/ 2022年10月07日 10:57/ 0 赞/ 300 阅读

相关 jsp页面签字板及保存-jSignature

jSignature是jQuery的插件，简化了字段的创建，允许用户通过鼠标，手指在启用触摸的设备（例如iPhone，iPad或Android设备）或笔输入设备上输入签名。

谁践踏了优雅/ 2022年09月30日 10:55/ 0 赞/ 202 阅读

相关生成android 签字

O:\Users\。。。\.android>keytool -genkey -alias android.keystore -keyalg RSA -va li

傷城~/ 2022年07月13日 04:49/ 0 赞/ 130 阅读