微信小程序使用 canvas 2d 实现签字板组件

本文是在微信小程序中使用 canvas 2d 来实现签字板功能;

效果图:
请添加图片描述
代码:
1、wxml

<view><canvas id="canvas"type="2d"bindtouchstart="start"bindtouchmove="move"bindtouchend="end"style="border: 1px solid #ccc; width:100%; height:800rpx"></canvas><view style="display: flex;"><button bindtap="clear">清除</button><button bindtap="save">保存</button></view><image src="{{canvanImg}}"></image>
</view>

2、js

Component({properties: {},data: {canvas:null,canvanImg:"",ctx:null},lifetimes:{ready(){let that = this;wx.createSelectorQuery().in(this).select("#canvas").fields({node:true,size:true}).exec((res)=>{let canvas = res[0].node;let ctx = canvas.getContext("2d");let dpr = wx.getSystemInfoSync().pixelRatio;canvas.width = res[0].width * dpr;canvas.height = res[0].height * dpr;ctx.fillStyle = "#fff";// 利用阴影,消除锯齿ctx.shadowBlur = 1;ctx.shadowColor = '#000';ctx.scale(dpr, dpr)that.setData({canvas,ctx})})}},methods: {//触摸开始start (e) {this.data.ctx.beginPath()this.data.ctx.moveTo(e.touches[0].x,e.touches[0].y)},//触摸移动move (e) {this.data.ctx.lineTo(e.touches[0].x, e.touches[0].y)this.data.ctx.stroke()//将上下文绘制到canvas中},//触摸结束end (e) {this.data.ctx.closePath()},//清除画布内容clear(){this.data.ctx.clearRect(0, 0,this.data.canvas.width, this.data.canvas.height)this.setData({canvanImg:""})},//点击保存生成图片save(){this.setData({canvanImg:this.data.canvas.toDataURL("image/png")})},}
})

3、总结
canvas 的宽度和高度可以写死,也可以根据当前可是区域动态计算;需要注意的是 res[0].node 的宽度和高度的计算是当前 canvas 元素上的宽度和高度乘设备的 pixelRatio ;

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

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

相关文章

Scratch Blocks自定义组件之「下拉图标」

一、背景 由于自带的下拉图标是给水平布局的block使用&#xff0c;放在垂直布局下显得别扭&#xff0c;而且下拉选择后回修改image字段的图片&#xff0c;这让我很不爽&#xff0c;所以在原来的基础上稍作修改&#xff0c;效果如下&#xff1a; 二、使用说明 &#xff08;1&am…

【图论】差分约束

一.情景导入 x1-x0<9 ; x2-x0<14 ; x3-x0<15 ; x2-x1<10 ; x3-x2<9; 求x3-x0的最大值&#xff1b; 二.数学解法 联立式子2和5&#xff0c;可得x3-x0<23;但式子3可得x3-x0<15。所以最大值为15&#xff1b; 三.图论 但式子多了我们就不好解了&#xff0…

开源的跨平台的音视频处理工具FFmpeg

文章目录 FFmpeg概述FFmpeg使用场景go语言中使用FFmpeg FFmpeg概述 FFmpeg是一个开源的跨平台的音视频处理工具&#xff0c;可以对音频、视频进行转码、裁剪、调节音量、添加水印等操作。 广泛的格式支持。 FFmpeg能够解码、编码、转码、复用、分离、流式传输、过滤和播放几乎…

【MySQL】视图与用户管理

【MySQL】视图 视图视图概念使用基表与视图的相互影响 用户管理新增用户删除修改密码 用户权限授予权限回收权限 视图 视图概念 视图就是一张虚拟表&#xff0c;其内容由查询定义。与真实的表一样&#xff0c;视图包含一系列带有名称的列和行数据。视图的数据变化影响到基表&…

SpringBoot内嵌的Tomcat:

SpringBoot内嵌Tomcat源码&#xff1a; 1、调用启动类SpringbootdemoApplication中的SpringApplication.run()方法。 SpringBootApplication public class SpringbootdemoApplication {public static void main(String[] args) {SpringApplication.run(SpringbootdemoApplicat…

异常统一处理实现

异常处理 4.6.1 异常问题分析 在service方法中有很多的参数合法性校验&#xff0c;当参数不合法则抛出异常&#xff0c;下边我们测试下异常处理。 请求创建课程基本信息&#xff0c;故意将必填项设置为空。 测试发现报500异常&#xff0c;如下&#xff1a; http://localho…

Vue3和typeScript路由传参

1 params传的参数&#xff0c;页面刷新就消失,而query传的参数&#xff0c;页面刷新还会存在&#xff0c;所以通常用query。 query传参 跳转页面&#xff1a;拿到router对象,调用push方法做跳转. import { useRoute,useRouter} from "vue-router"; export default…

iOS 搭建组件化私有库

一、创建私有库索引 步骤1是在没有索引库的情况下或者是新增索引的时候才需要用到&#xff08;创建基础组件库&#xff09; 首先在码云上建立一个私有库索引&#xff0c;起名为SYComponentSpec 二、本地添加私有库索引 添加私有库索引 pod repo add SYComponentSpec https:/…

Transformer 论文学习笔记

重新学习了一下&#xff0c;整理了一下笔记 论文&#xff1a;《Attention Is All You Need》 代码&#xff1a;http://nlp.seas.harvard.edu/annotated-transformer/ 地址&#xff1a;https://arxiv.org/abs/1706.03762v5 翻译&#xff1a;Transformer论文翻译 特点&#xff1…

ElasticSearch基础篇-Java API操作

ElasticSearch基础-Java API操作 演示代码 创建连接 POM依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:sch…

33.利用abs 解决绝对值问题(matlab程序 )

1.简述 abs函数的功能是绝对值和复数的模 语法 Y abs(X) 说明 Y abs(X) 返回数组 X 中每个元素的绝对值。如果 X 是复数&#xff0c;则 abs(X) 返回复数的模。 示例 标量的绝对值 y abs(-5) y 5 向量的绝对值 创建实值的数值向量。 x [1.3 -3.56 8.23 -5 -0.01…

【POP3/IMAP/SMTP】QQ邮箱设置

什么是 POP3/IMAP/SMTP 服务 POP3 &#xff08;Post Office Protocol - Version 3&#xff09;协议用于支持使用电子邮件客户端获取并删除在服务器上的电子邮件。 IMAP &#xff08;Internet Message Access Protocol&#xff09;协议用于支持使用电子邮件客户端交互式存取服务…

二十三种设计模式第二十二篇--中介者模式

说到这个模式就有趣了&#xff0c;不知道大家在生活中喷到过中介没&#xff1f;其实中介这个词吧&#xff0c;我也说不上好还是坏&#xff0c;有时候他可以帮助人们更快的达到某个目的&#xff0c;但有的时候吧&#xff0c;这个有贼坑人&#xff0c;相信网络上有各种被中介坑的…

【力扣】822. 翻转卡片游戏

以下为力扣官方题解&#xff0c;及本人代码 822. 翻转卡片游戏 题目题意示例 1示例 2提示 官方题解哈希集算法总结复杂度 本人代码Java提交结果&#xff1a;通过 题目 题意 在桌子上有 n n n 张卡片&#xff0c;每张卡片的正面和背面都写着一个正数&#xff08;正面与背面上…

Java程序员面试题

Java程序员面试题目 1.Java基础1.1 Java有list&#xff0c;list有很多种&#xff0c;你平时开发喜欢用哪个list&#xff1f;&#xff08;容易&#xff09;1.2 Java的map&#xff0c;你知道有哪几种map&#xff0c;你平时喜欢用哪个&#xff1f;&#xff08;容易&#xff09; 2.…

空指针NPE原因之一:判断顺序错误

不管是&&或者|| 一般都是将null或非null放在第一个判断 在Java中&#xff0c;逻辑运算符&&和||具有短路特性。这意味着如果使用&&运算符&#xff0c;如果第一个条件为false&#xff0c;将不会执行第二个条件&#xff0c;因为整个表达式已经确定为fals…

【Python】模块学习之matplotlib柱状图、饼状图、动态图及解决中文显示问题

目录 前言 安装 pip安装 安装包安装 柱状图 主要方法 参数说明 示例代码 效果图 解决中文显示问题 修改后的图片 饼状图 主要方法 示例代码 效果图 动态图 主要方法 动态图官方使用介绍 示例代码 颜色设置 内建颜色 字体设置 资料获取方法 前言 众所周…

【Golang 接口自动化04】 解析接口返回JSON串

目录 前言 解析到结构体 json数据与struct字段是如何相匹配的呢&#xff1f; 解析到interface Go类型和JSON类型 实例代码 simpleJson 总结 资料获取方法 前言 上一次我们一起学习了如何解析接口返回的XML数据&#xff0c;这一次我们一起来学习JSON的解析方法。 JSO…

[驱动开发]gpio子系统及中断实现led亮灭

编写LED灯的驱动&#xff0c;使用GPIO子系统&#xff0c;里面添加按键的中断处理 1.应用程序发送指令控制发光二极管亮灭 2.按键1按下&#xff0c;led1电位反转&#xff1b;按键2按下&#xff0c;led2电位反转&#xff1b;按键3按下&#xff0c;led3电位反转 //头文件 #i…

PHP并发处理详解

在今天的网络世界中&#xff0c;高并发是一个无法避免的问题。随着用户的增加和业务的复杂性&#xff0c;我们的应用可能会面临大量的并发请求。这时&#xff0c;如果我们不能很好地处理并发&#xff0c;就可能会导致应用的性能下降&#xff0c;甚至崩溃。在很多情况下&#xf…