小程序canvas画画板签字版,touchmove时卡顿的问题(根本原因是因为vue语法中page.data导致视图层和逻辑层的频繁通讯导致)

这篇具有很好参考价值的文章主要介绍了小程序canvas画画板签字版,touchmove时卡顿的问题(根本原因是因为vue语法中page.data导致视图层和逻辑层的频繁通讯导致)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

起因

因为要做一个画画板的功能,所以使用了canvas组件,一开始好多人说小程序canvas性能特别差,也没太注意,做出来之后确实有点卡,而且每一笔touchmove时间越长越卡,最终导致页面卡到无法使用,起初我也以为是canvas卡。

开始找原因

canvas优化

第一步肯定是先找一下canvas的问题,网上搜到一些材料优化canvas的思路,无非就是以下几种,详细的可以参考我的另一个文章

  1. 绘制的图形的数量和大小会影响canvas的性能, 减少绘制物,减少绘制指令
  2. 图形数量过多,但是只刷新部分 可以使用局部渲染
  3. 逻辑层和背景图层分离 可以使用分层渲染
  4. 某些长时间的逻辑影响主线程的, 可以使用离屏渲染 和webworker 来解决问题

这里做了两个优化:

  1. 禁用滚动,一开始一直卡的不行,后来查资料发现滚动跟touchmove事件有冲突,禁用之后好了许多
  2. 将ctx.stroke()指令放到定时器中执行,每50ms执行一次,这样就是一个固定频率执行,不会因为频繁触发touchmove导致ctx.stroke()一秒钟执行几百几千次

经过处理,这些已经好了很多,但是当绘画事件变长时还是会变得越来越卡,直到最后卡的,动不了,延迟十几秒那种,所以继续找问题文章来源地址https://www.toymoban.com/news/detail-498528.html

<

到了这里,关于小程序canvas画画板签字版,touchmove时卡顿的问题(根本原因是因为vue语法中page.data导致视图层和逻辑层的频繁通讯导致)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【VRTK】【Unity】【PICO】PICO项目打包后闪退的根本原因

    一开始打包运行好好的PICO项目,中途用Preview模式开发了一阵后,再次打包就闪退了。 项目设置没有动过,那么可能是Preview开发过程中引入的包导致的问题。 千万不要在PICO项目中导入Oculus包。我原本想用一些Oculus包内的Assets资源,所以导入了Oculus,现在叫Meta的开发SDK包,经

    2024年01月22日
    浏览(116)
  • IDEA编译报错:Error:java: 无效的源发行版: 17的根本原因

    1.本机默认使用(编译)的jdk与该项目所使用的jdk版本不同。(造成这个原因就是因为在创建项目的时候,idea默认是使用的最新版本进行快速构建的) 2.jdk版本不适用于这个Idea,很典型的一个例子就是使用的Idea是2020的,而你用到的jdk是17,jdk17是2021年推出的,所以你只能去安装

    2024年02月07日
    浏览(42)
  • 微信小程序安卓视频播放卡顿问题

    在微信小程序开发中遇到在video组件的两个问题 刚开始以为是网络问题,或者是视频文件问题。排查了一下发现都没问题 最后加了个属性就OK了 uniapp和原生小程序方法 video组件兼容iOS手机 custom-cache加了这个属性会让 因此我加了当前手机型号的判断 获取当前设备api 当为iPho

    2023年04月16日
    浏览(41)
  • 微信小程序优化多次跳转后卡顿问题

    一、微信小程序多次跳转会产生卡顿的原理 通过wx.navigateTo 跳转,都会出现保留当前页面,打开新的页面机制。 wx.navigateTo不会将旧页面出栈,会将新页面入栈(栈内元素个数增加,栈内元素5个时,不能再跳转)。手机性能好点,可能10次左右才会导致小程序跳转卡顿崩溃。 二

    2024年02月11日
    浏览(132)
  • 微信小程序手写签字版

    在这里插入图片描述 请在下面的白框中签名 重置 提交 # 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 = dat

    2024年02月12日
    浏览(35)
  • 微信小程序实现左右滑动进行切换数据页面(touchmove)

    手指触摸左右滑动进行切换数据 需要实现的是有一个tab栏,点选某一个tab的时候切换页面,手势滑动,左滑右滑效果和点击tab一样切换页面数据。 这里我们要先了解几个微信的事件属性 touchstart : 手指触摸动作开始 touchmove:手指触摸后移动 touchcancel:手指触摸动作被打断,

    2024年02月11日
    浏览(63)
  • 自己架设的传奇会卡顿、掉线是什么原因?传奇卡顿怎么解决?

    因为平时接触传奇的用户比较多,所以也会遇到架设的传奇出现卡顿、掉线的情况,这究竟是为什么呢?飞飞总结了以下原因和解决方案希望可以帮助到你~ 首先我们结合情况来,刚架设好的服,测试时就遇到了卡顿、掉线的情况,大概率是和游戏设置有关系的,我们可以先

    2024年02月15日
    浏览(148)
  • 直播卡顿原因详解及优化

    随着视频直播的发展,很多直播团队可能会遇到视频直播卡顿,频繁出现缓冲标志或者直播画面一卡一卡等情况。究竟是哪些原因造成了视频直播观看的卡顿情况呢? 又拍直播云结合实践经验,从设备、视频流、网络这三方面进行解剖分析造成直播卡顿的问题及其解决方法。

    2024年02月03日
    浏览(30)
  • 服务器卡顿怎么查找原因?

    虽然服务器出现卡顿的现象比较少见,但也不排除出现的可能,而服务器一旦出现卡顿,造成的后果会严重的多。这里分享点笔记,希望有所帮助 1. 性能评估: 首先,对服务器的性能进行全面评估。检查 CPU 使用率、内存占用、磁盘读写速度等关键性能指标,确认是否存在明

    2024年02月11日
    浏览(48)
  • 蓝牙模块传输音频出现卡顿原因分析

    蓝牙模块传输音频出现卡顿原因分析 作为一个在无线蓝牙技术行业工作10年+的硬件工程师,整理一些蓝牙模块传输音频出现卡顿原因的分析仅供大家参考: 一、天线方面 天线性能直接影响到蓝牙型号的发射强度,一般来说蓝牙音频传输有效的使用范围是10-15米,实际使用一

    2024年02月01日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包