有关微信小程序的canvas开发--事件

  • • 发表于 1年前
  • • 作者 丁小柒
  • • 570 次浏览
  • • 6 条评论
  • • 最后编辑时间 1年前
  • • 来自 [技术]

原创声明:本文为作者原创,未经允许不得转载,经授权转载需注明作者和出处

在之前的小程序canvas开发的回复中,有人问能不能实现滑动,我想应该就是canvas事件的处理,因为手册上没有这一块的案例,我看了一下网上也没有讲这一块的,所以我也没试过,所以就开了这一个话题,带大家看看canvas的事件处理
首先前面布局
<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas" bindtouchstart='alert'></canvas>
这里我是直接用的上次的代码,多绑定了一个触摸开始的事件,这里可以参考文档来根据需求绑定不同事件,然后我们在js文件中来拿到这个事件所对应的函数

alert:function(ev){ var ev=ev||event; console.log(ev); }
通过输出获取的当前事件里的所有内容我们可以看到

获取

一个个点开看,我们会在touches里发现

touches

然后我们会从0:Object里发现我们所要的

我们所需要的就是获取道德X与Y值,这样的话我们就可以

alert:function(ev){ var ev=ev||event; console.log(ev.touches[0].x); }
b
这里我们通过点击屏幕,就获取到了当前不同的X值,Y值的原理相同
如果我们想在canvas上做画线处理,思路就是设置一个定时器,不停将获取到的X,Y值传到page的data里,然后再把参数传入lineTo()来绘制我们想要的图形,别忘了在绘制路径时需要开启路径O beginPath() closePath()最后关闭

完结撒花,如果还有什么问题,可以在下方回复,或者在群里私聊我,我现在不怎么写小程序,因为我现在还在学小程序的UI。。。。。哈哈哈哈,作为学生党,平时课很多,在俱乐部的时间不会很多,所以还是建议从群私聊我问问题~


分享到:
评论区(共6条评论)
6条评论
Ctrl+Enter
作者

丁小柒

丁小柒

APP:0 帖子:24 回复:26 积分:1061

已加入社区[383]天

长剑非是封木鞘,挥手再斩万鬼雄

作者详情》
精品推荐课程更多
扫码入群
Top