超级小的web手势库AlloyFinger发布

ymyang 发布于2019-08-19 18:24 / 3582人阅读

摘要：拥有两个版本，无依赖的独立版和版本。除了对象，也可监听内元素的手势需要引擎内置对象支持绑定相关事件。据不完全统计，目前服务于兴趣部落群动漫腾讯学院腾讯等多个部门团队和项目。也可以在事件回调里根据携带的信息使用去操作。

简介

针对多点触控设备编程的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单击

快速上手

独立版使用方式:

//element为需要监听手势的dom对象
new AlloyFinger(element, {
    pointStart: function () {
        //手指触摸屏幕触发
    },
    multipointStart: function () {
        //一个手指以上触摸屏幕触发
    },
    rotate: function (evt) {
        //evt.angle代表两个手指旋转的角度
        console.log(evt.angle);
    },
    pinch: function (evt) {
        //evt.scale代表两个手指缩放的比例
        console.log(evt.scale);
    },
    multipointEnd: function () {
        //当手指离开，屏幕只剩一个手指或零个手指触发
    },
    pressMove: function (evt) {
        //evt.deltaX和evt.deltaY代表在屏幕上移动的距离
        console.log(evt.deltaX);
        console.log(evt.deltaY);
    },
    tap: function (evt) {
        //点按触发
    },
    doubleTap: function (evt) {
        //双击屏幕触发
    },
    longTap: function (evt) {
        //长按屏幕750ms触发
    },
    swipe: function (evt) {
        //evt.direction代表滑动的方向
        console.log("swipe" + evt.direction);
    },
    singleTap: function (evt) {
        //单击
    }
});

react版使用方式:

render() {
    return (
        
            你要监听手势的Dom!
        
    );
}

官网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：

   pinch: function (evt) { 
        console.log((evt.touch[0].pageX+evt.touch[1].pageX)/2);
    },

然后根据这个坐标和图片的坐标计算图片缩放的origin
4.拖拽位置、缩放大小是否可以限制（始终在屏幕内显示，避免出现缩到很小看不到的情况）
这个不应该有 AlloyFinger 控制。而应该由你的逻辑去控制

Github

https://github.com/AlloyTeam/AlloyFinger

GPU云服务器云服务器 web 手势控制库 webrtc AlloyFinger 发布web项目怎么发布web服务

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79557.html

AlloyFinger web 手势学习

摘要：从长按开始学习手势在项目开发过程中遇到有虚拟键盘开发的需求如下图，其中删除键需要实现长按删除输入框全部内容，由此展开今天要讨论的手势开发内容。所以长按手势实际上是由三者共同模拟的效果。从 [长按] 开始学习 web 手势在项目开发过程中遇到有虚拟键盘开发的需求（如下图），其中删除键需要实现长按删除输入框全部内容，由此展开今天要讨论的 web 手势开发内容。 showImg(h...

seanlook 2019-08-22 14:51 评论0 收藏0
超小Web手势库AlloyFinger原理

摘要：目前作为腾讯手机手势解决方案，在各大项目中都发挥着作用。因此也入选了腾讯平台的精品组件除了国内外的项目团队都在使用，国内外的各大网站也进行了转载报道，作为超级小的手势库，腾讯的项目为什么不选择而选择下面从各个角度架构原理上进行一下分析。目前AlloyFinger作为腾讯手机QQ web手势解决方案，在各大项目中都发挥着作用。感兴趣的同学可以去Github看看： https://git...

Karuru 2019-08-20 12:12 评论0 收藏0
基础触屏手势学习

摘要：最近接到一个小的项目，需要实现触屏滑动，图片缩放旋转移动，故而花了三天时间学习并实现了一下，在此记录一下学习过程关键就是触屏手势用到的技术过渡转换我就不说了，与是属于轻量级的触屏手势封装库，其中水平移动用的是别的功能用的是。最近接到一个小的项目，需要实现触屏滑动，图片缩放旋转移动，故而花了三天时间学习并实现了一下，在此记录一下学习过程：关键就是css、触屏手势用到的技术：css过...

leo108 2019-08-26 10:21 评论0 收藏0
基础触屏手势学习

摘要：最近接到一个小的项目，需要实现触屏滑动，图片缩放旋转移动，故而花了三天时间学习并实现了一下，在此记录一下学习过程关键就是触屏手势用到的技术过渡转换我就不说了，与是属于轻量级的触屏手势封装库，其中水平移动用的是别的功能用的是。最近接到一个小的项目，需要实现触屏滑动，图片缩放旋转移动，故而花了三天时间学习并实现了一下，在此记录一下学习过程：关键就是css、触屏手势用到的技术：css过...

leanxi 2019-08-30 15:44 评论0 收藏0