Web里的人机交互之鼠标版

不知道为何计算机用户大部分喜欢鼠标点击,最近想掰弄一下可视化,放大平移选中拖动一下子交杂在一起,就晕了。

网上竟然还找不到比较好用的库,那就自己动手丰衣足食吧。


实现的目标是:

支持鼠标长按键(比如按住一个圆一秒表示选中);

支持鼠标手势,再加一下模式识别的库都可以自己弄手写板了;

支持手机上加载页面时将手指事件转化为鼠标时事件;

支持手机上几个指头抓起或撑开的动作(比如缩小或放大一个区域);

支持单击,双击乃至多次点击;

支持鼠标拖拽后事件;


先上repo吧:https://github.com/dna2github/petalJS/tree/master/visualization


modules.js就是自己写了个动态加载javascript文件的脚本,这样以后有ACL控制好加载不同js。原理是:用jQuery创建一个<script>元素插入页面里,然后运行里面自带的init函数。

interactions.js看代码就好,index.html是一个小例子,有些小点在这里记录一下:

1 互交会注册一些事件到各种基本鼠标事件上,比如click, mousemove, mousedown等,然后所有的新事件在此上层封装。也就是interactions.js暴露出来的单击双击都是和浏览器原带的事件层不在同一个次元了。

2 互交代码中,会使用定时器判断是否触发一个事件,比如长按一个元素2s以后触发hold事件。当然,hold时间长短可以使用时通过interaction.config().hold.last动态调整。

3 gesture有两种模式,relative模式是判断鼠标和上一次位置的差距,大于阀值就记录一个新的座标;absolute模式是将元素划分为方形小格,鼠标从一格到另一格会被记录为新座标。

4 手机多个手指抓去实现苹果的pad功能还是蛮有意思的,就是要注意浏览器里放x个手指在屏幕上抓是可以触发事件的,加一个手指也会触发事件,但是奇怪的是提起一个手指再抓就不触发事件了。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章