1.问题



微信开放社区链接

尝试过新版canvas,在企业微信中签名依然是依然断触,有问题的手机是iphoe15,系统版本以及企微版本微信版本均与签名正常的手机一致,但是那个手机就是无法正常签字,在微信中无论新旧canvas均能正常签字

2.解决方案

既然canvas的touchmove触发有问题,那么就可以通过替代canvas的touchmove来实现,通过在canvas上覆盖一层dom,通过这层dom的touchmove来获取手指划过的轨迹即可,此文章中并没有小程序实际代码只是使用了h5验证可行性的代码

2.1 注意点
  • 要区别手指是否连续滑动,由于点击事件触发存在如下情况

区别手指是否连续滑动采用时间间隔判断

触发事件间隔小于80ms 主要用于判断是否松开手指再次滑动,正常手速来说80ms,人很难在画完一个线段后,松手再次画一个线段,如果无这个处理会出现滑动一个线段之后,再次点击另一个点会把线段和新点位连接起来

没有采取通过touchstart与touchend做一个判断是因为touchmove并不是固定一直在start与end事件中间触发

2.2 移动端浏览器体验地址
2.2 vue2代码
<template>
<div class="DomCanvasSignature">
<div :style="{ height: height + 'px', width: width + 'px' }" class="signatureWrapper" id="signatureWrapper"
draggable="false" @mousedown="touchstart" @mouseup="touchend" @touchstart="touchstart" @touchend="touchend"
@touchmove="touchmove" @mousemove="touchmove">
<canvas canvas-id="999" :height="height" :width="width - 3" class="canvas" />
</div>
</div>
</template>
<script>
export default {
name: 'DomCanvasSignature',
data () {
return {
height: 302,
width: 302, mycanvas: null,
previousPoint: {
x: 0,
y: 0
},
isPcStart: false,
removeLisner: () => { }
}
}, methods: {
initSize () {
this.width = window.innerWidth
this.height = window.innerHeight - 300
},
lisner () {
this.initSize()
window.addEventListener('resize', this.initSize)
return () => {
window.removeEventListener('resize', this.initSize)
}
},
touchstart () {
this.isPcStart = true
console.log('====start') // zdz-log
},
touchend () {
this.isPcStart = false
console.log('====end') // zdz-log },
touchmove (e) {
console.log('move', e) // zdz-log
// 阻止滚动
e.preventDefault()
if (e.type === 'mousemove' && !this.isPcStart) {
return
}
// 合并处理 pc 与移动端
const changeObj = e.changedTouches && e.changedTouches[0] || e
const current = { x: changeObj.clientX, y: changeObj.clientY, timeStamp: e.timeStamp } // 1.获取元素
// 2.获取上下文,绘制工具箱
let ctx = this.mycanvas.getContext('2d')
// 3.移动画笔
const currentY = (current.y) - signatureWrapper.offsetTop
// todo 改为touchstart 与end判断 无法实现 因为move 执行存在在 start end事件之后
let diffLarge = false
console.log(current.timeStamp - this.previousPoint.timeStamp) // zdz-log
// 判断是否松手重新绘制
if (this.previousPoint.timeStamp) {
const timeDiff = current.timeStamp - this.previousPoint.timeStamp > 80
if (timeDiff) {
diffLarge = true
}
} const preY = diffLarge ? current.y - signatureWrapper.offsetTop : (this.previousPoint.y || current.y) - signatureWrapper.offsetTop
const moveX = diffLarge ? current.x : this.previousPoint.x || current.x
ctx.moveTo(moveX, preY < 0 ? 0 : preY)
// 4.绘制直线(轨迹,绘制路径)
ctx.lineTo(current.x, currentY < 0 ? 0 : currentY)
// 5.描边
ctx.stroke() this.previousPoint = current }, },
created () {
this.removeLisner = this.lisner()
},
destroyed () {
this.removeLisner()
},
mounted () {
this.mycanvas = document.querySelector('canvas')
this.signatureWrapper = document.getElementById('signatureWrapper')
}, }
</script> <style scoped>
.canvas {
border: 1px solid red;
} .signatureWrapper {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid black;
background-color: transparent;
}
</style>

对于小程序canvas在某些情况下touchmove 不能触发导致的签名不连续替代方案(企微)的更多相关文章

  1. 小程序Canvas性能优化实战

    以下内容转载自totoro的文章<小程序Canvas性能优化实战!> 作者:totoro 链接:https://blog.totoroxiao.com/canvas-perf-mini/ ...

  2. 技术博客--微信小程序canvas实现图片编辑

    技术博客--微信小程序canvas实现图片编辑 我们的这个小程序不仅仅是想给用户提供一个保存和查找的平台,还希望能给用户一个展示自己创意的舞台,因此我们实现了图片的编辑部分.我们对对图片的编辑集成了很 ...

  3. 微信小程序-canvas绘制文字实现自动换行

    在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...

  4. 优化版小程序canvas,增加失败逻辑,及完善文字

    wxml <view class="shareBox" style="backgound:{{isShow ? '#000' : '#fff'}}" wx ...

  5. [技术博客]海报图片生成——小程序canvas画布

    目录 背景介绍 canvas简介 代码实现 难点讲解 圆角矩形裁剪失败之PS的妙用 编码不要过硬 对过长的文字进行截取 真机首次生成时字体不对 drawImage只能使用本地图片 背景介绍 目标:利用 ...

  6. 微信小程序 - canvas实现多行文本 ,实现文本断行

    1.canvas绘制文本坑点 绘制的文本不管多长,永远只有一行,不会断行. 2.解决思路 根据每行文本字数来断行,超出的就向下排列. 由于 canvas绘制文本的语法如下: context.fillT ...

  7. 原创:WeZRender:微信小程序Canvas增强组件

    WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; h ...

  8. 微信小程序怎么用?线下商家最适合玩小程序

    随着微信小程序不断地释放新功能,许多行业越来越关注小程序,目前已经有不少餐饮和线下传统零售企业开始谋划利用好小程序.但是,线下商业有着复杂的场景,如何针对自己行业的特点和需求开发出属于自己的小程序,是 ...

  9. 记录一下小程序canvas

    小程序canvas学习 效果图: .wxml <canvas style="width: 100vw; height: 100vh;" canvas-id="fir ...

  10. 微信小程序 canvas 字体自动换行(支持换行符)

    微信小程序 canvas 自动适配 自动换行,保存图片分享到朋友圈  https://github.com/richard1015/News 微信IDE演示代码https://developers.w ...

随机推荐

  1. Git | Git Server 搭建,在自己的服务器上进行 git server 搭建

    系列文章目录 目录 系列文章目录 前言 操作 1. 创建 git 用户 2. 创建 .ssh 目录 3. 自定义仓库的根目录 4. 在服务器上创建个裸仓库 5. 手动配置一个公钥 6. 在本地测试一下 ...

  2. SparseTable ST表

    Sparse Table ST表是一个静态二维数组st[i][j],作用是快速查询(O(1))区间最值(不只是最值,可重复贡献问题都可以用),st[i][j]代表的是在以引索i为起点,长度为\(2^j ...

  3. Global AI Bootcamp 成都站 圆满结束!

    3月10日星期天下午2点「Global AI Bootcamp 2024 - 成都站」,在成都银泰中心蔚来汽车会议区圆满结束了! 本次活动共计吸引了约50名IT行业从业者线下参与,他们分别来自成都各行 ...

  4. Android 开发Day7

    <project version="4"> <component name="ExternalStorageConfigurationManager&q ...

  5. C++ pieces

    standard lib fmax double fmax (double x, double y); float fmax (float x, float y); long double fmax ...

  6. Elastic实战:彻底解决spring-data-elasticsearch日期、时间类型数据读取报错问题

    0. 引言在使用spring-data-elasticsearch读取es中时间类型的数据时出现了日期转换报错,不少初学者会在这里困惑很久,所以今天我们专门来解读该问题的几种解决方案. 1. 问题分析 ...

  7. CSP 2021 入门级

    CSP 2021 入门级(DONE) 1.C 语言不支持面向对象. 2.计算机界的最高奖项"图灵奖"以英国的阿兰·艾伦·图灵命名,被称为"计算机界的诺贝尔奖". ...

  8. Python爬取国家统计局2009至2020统计用区划和城乡划分代码(省市区/县三级)并存入mysql数据库

    国家统计局->统计标准网址:http://www.stats.gov.cn/tjsj/tjbz/tjyqhdmhcxhfdm/ 获取资源请关注公众号 [靠谱杨阅读人生]回复[城乡分类]获取 流程 ...

  9. Python爬虫爬取全球疫情数据并存储到mysql数据库

    思路:使用Python爬虫对腾讯疫情网站世界疫情数据进行爬取,封装成一个函数返回一个    字典数据格式的对象,写另一个方法调用该函数接收返回值,和数据库取得连接后把    数据存储到mysql数据库 ...

  10. 区别对比 Python、Perl、VB、Ruby、C/C++、C# .Net、PHP、Java… 等多编程语言

    1. 编程语言类型:首先,Python.C/C++.Java 都是强类型的编程语言.强类型的编程语言定义如下: 强类型的编程语言是一种强制类型定义的编程语言,即一旦某一个变量被定义类型,如果不经强制转 ...