超级小的web手势库AlloyFinger发布
简介
针对多点触控设备编程的Web手势组件,快速帮助你的web程序增加手势支持,也不用再担心click 300ms的延迟了。拥有两个版本,无依赖的独立版和react版本。除了Dom对象,也可监听Canvas内元素的手势(需要Canvas引擎内置对象支持addEventListener绑定touch相关事件)。
据不完全统计,目前AlloyFinger服务于:兴趣部落、QQ群、QQ动漫、腾讯学院、TEDxTencent、 AlloyTeam、腾讯CDC等多个部门、团队和项目。
功能清单
极小的文件大小
简洁的API设计
优秀的性能
丰富的手势支持
双版本(react和独立版)
事件
支持pinch缩放
支持rotate旋转
支持pressMove拖拽
支持doubleTap双击
支持swipe滑动
支持longTap长按
支持tap按
支持singleTap单击
快速上手
独立版使用方式:
react版使用方式:
官网DEMO
http://alloyteam.github.io/AlloyFinger/
Q&A
1.必须跟transformjs一起用吗?
不必须。也可以在事件回调里根据evt携带的信息使用js去操作CSS3。但是一起用,会让代码更简洁。
2.pinch、rotate事件怎么在chrome浏览器调试的?
一般用真机调试,但是也可以使用chrome浏览器,传送门 http://www.html5rocks.com/en/mobile/touch/#toc-touchdev
3.缩放的origin点设置,这里是想手在图片哪个区域操作就设置哪里为origin进行缩放?
自己去计算就是两个手指的连线的中点的坐标,
比如中点X:
然后根据这个坐标和图片的坐标计算图片缩放的origin
4.拖拽位置、缩放大小是否可以限制(始终在屏幕内显示,避免出现缩到很小看不到的情况)
这个不应该有 AlloyFinger 控制。而应该由你的逻辑去控制
Github
https://github.com/AlloyTeam/AlloyFinger
建议继续学习:
- Javascript触屏手势库-jTouch (阅读:3576)
- 移动设备手势设计初探 (阅读:2102)
- 探索滑动手势 (阅读:1865)
- 取代点击操作 (阅读:1744)
- 如何设计好用的触控手势 (阅读:934)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:TAT.dnt 来源: 腾讯AlloyTeam
- 标签: alloyfinger 手势
- 发布时间:2016-06-06 23:34:30
- [11] 解决 ubuntu 的 /etc/hosts
- [10] 文言文白话文互转:文言文转白话文(现代文),
- [9] Http/2知识图谱
- [9] 一个 VLA (可变长度数组)的实现
- [9] 用邻接表实现无向图
- [8] 领导需要比下属更懂技术吗?
- [7] 近场通信 vs. 低功耗蓝牙:如何抉择
- [7] 新手产品经理都混哪里
- [7] arduino-蓝牙各种版本类型及费用对比
- [7] JVM内存结构