uniapp用自带的canvas做画板签字

news2024/9/21 2:36:52

如下图移动端经常需要做此功能,用户签字。用户填表啥的。

先用touch进行监听手指的触摸事件

获取所点击的坐标位置。

这里有很多要注意的地方。

初始化

uniapp里的canvas与原生的canvas有区别,渲染之后会多很多莫名其妙的div节点,并且还有个div直接就把原生的canvas覆盖掉了。如下图:下面的div直接就把上面的canvas覆盖掉了,所以我们在当前canvas里写了很多监听都无效。

initCanvas() {
        this.canvas = this.$refs.my_canvas.$el.children[0]
        this.ctx = this.canvas.getContext('2d');

    }

绑定触摸事件

去uniapp官网之后才发现,uniapp对原生canvas做了封装。并且做好了各种触摸事件的指令

绑定事件获取坐标

原生canva

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

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

相关文章

仿真入门必看:怎么用CST软件自带宏提取材料的DK,Df值

我们知道如果在CST中要做精确的仿真,进行仿真测试对比,其中第一步就是要搞清楚仿真模型的参数,如果输入数据不对,那也避免不了垃圾进垃圾出的原则。和仿真相关的数据很多,其中PCB板的介质参数Dk, Df就是介电常数的实部…

吓傻!自有品牌社交电商靠AI 智能名片商城小程序逆天改命!

摘要:本文深入探讨了自有品牌型社交电商的发展历程、显著特点以及未来趋势,特别以微商品牌为典型案例进行了详细剖析。同时,重点阐述了在数字化时代的大背景下,自有品牌型社交电商如何通过与 AI 智能名片商城小程序的有机融合&…

VueRouter 相关信息

VueRouter 是Vue.js官方路由插件,与Vue.js深度集成,用于构建单页面应用。构建的单页面是基于路由和组件,路由设定访问路径,将路径与组件进行映射。VueRouter有两中模式 :hash 和 history ,默认是hash模式。…

scikit-learn 算法选择决策树

介绍 下图帮助我们在使用 scikit-learn 库时选择合适的算法,可作为参考。

leetCode - - - 数组

1.移动0(leetcode283) 给定一个数组 nums,编写一个函数将所有 0 移动到数组的末尾,同时保持非零元素的相对顺序。 请注意 ,必须在不复制数组的情况下原地对数组进行操作。 class Solution {public void moveZeroes(i…

邮件API的API文档和技术支持资源如何获取?

邮件API如何集成到现有系统中?如何选邮件API服务? 对于开发者来说,理解和获取邮件API的API文档和技术支持资源至关重要。AokSend将详细介绍如何高效获取这些资源,帮助开发者顺利集成邮件API,并在项目中发挥其最大功效…

音频剪辑软件哪个好用?轻松处理音频的6款软件

在日常生活中,我们常常需要对音频进行编辑,无论是为了制作个性化的音乐铃声,还是剪辑重要的录音,或是创作音频片段。 面对这些音频剪辑的挑战,一款好用的在线音频剪辑免费版软件就显得尤为重要。 下面为大家推荐6个好…

打音游(补全程序)

首先最外层循环枚举的是总共的得分次数,包括x1,x,x/2,那么n-i就是没得分的情况。 里层循环j代表得x/2的情况,要么没有,要么最多1次,如果两次会变成x那么之前的循环已经枚举过了。 lower代表的是得x1分的下限那就是总…

六通道CAN(FD) 集线器

一 、功能概述 1.1 设备简介 CANFD 完全向下兼容 CAN, 以下统称 CAN(FD) 。本产品是CAN(FD)集线器, 支持名义 波特率 5k-1M, 数据波特率5k-5M, 开启位速率转换最低数据波特率100k。 支持每路单独设置接收帧类型(软…

Apache Camel Karavan -理解一

Apache Camel 开始接触是在ETL数据,数据处理成为了现代企业必须面对的一个挑战。在数据处理中,etl(提取-转换-加载)的概念被广泛采用,其中提取指从源数据中收集数据,转换指将数据与所需数据配对&#xff0c…

uniapp创建一个新项目并导入uview-plus框架

近年来,随着技术的发展,人们越来越意识到跨平台和统一的重要性。对于同一款应用来说,一般都会有移动端、PC端、甚至小程序端。这是由于设备的不同,我们必须要做很多的客户端来满足不同的用户需求。但是由于硬件设施的不同&#xf…

谷粒商城实战笔记-131~132-商城业务-商品上架-构造sku检索属性和库存查询

文章目录 一,131-商城业务-商品上架-构造sku检索属性1,开发目标2,详细设计2.1,根据spu_id获取所有的规格参数2.2,根据上一步中查询结果进一步确认是否可搜索2.3,将可搜索的属性封装到Java模型中 二&#xf…

MySQL命令行工具的配置和使用

一、Windows启动命令行工具 1.打开Windows的开始菜单,找到安装好的MySQL,点击MySQL 8.0 Command Line Client - Unicode,这个带有Unicode的,是支持中文的,允许在命令行中敲中文。 然后从打开的窗口输入安装MySQL时设置…

【探索Linux】P.45(NAT技术 | NAPT技术)

阅读导航 引言一、NAT技术1. NAT技术引入2. NAT技术简介(1)基本原理(2)主要类型(3)技术优点(4)技术挑战(5)应用场景 二、NAPT温馨提示 引言 在上一篇文章中&…

NC 没有重复项数字的全排列

系列文章目录 文章目录 系列文章目录前言 前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。 描述 给出一组数字…

【网络安全入门】学习网络安全必须知道的100 个网络基础知识_网络安全知识入门基础

什么是链接? 链接是指两个设备之间的连接。它包括用于一个设备能够与另一个设备通信的电缆类型和协议。 2 OSI 参考模型的层次是什么? 有 7 个 OSI 层:物理层,数据链路层,网络层,传输层,会话层,表示层…

接口测试之python+rquest+unittest分层自动化框架

接口测试之接口po框架 一、新建一个项目 接口自动化框架设计实战: 第一包:config 案例: #登录接口 dl_url http://cms.duoceshi.cn/cms/manage/loginJump.do dl_d {userAccount: admin, loginPwd: 123456} dl_h "Content-Type:app…

IP地址申请SSL证书的详细流程(ip地址实现https访问)

IP地址SSL证书是一种特殊的SSL/TLS证书,它被设计用于保护直接通过IP地址访问的服务。这种证书可以为IP地址提供HTTPS加密和身份验证。 IP地址申请SSL证书的详细流程如下: IP SSL证书-JoySSLhttps://www.joyssl.com/certificate/select/ip_certificate.…

查看pycharm里面的库的版本

1. 点击右下角 点击 2. 点击设置

金蝶云星空与致远 OA 的集成:实现高效流程审批

在当今数字化转型中,企业对于信息化系统的集成需求日益增长。金蝶云星空作为一款强大的企业资源管理系统,致远 OA 作为优秀的协同办公平台,两者的对接集成能够为企业带来更高效、更流畅的业务流程和审批体验。 一、集成的背景与意义 随着企业…