守望者--AIR技术交流

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

搜索
热搜: ANE FlasCC 炼金术
查看: 399|回复: 0

[开源分享] 超级小的web手势库AlloyFinger发布

[复制链接]
  • TA的每日心情
    擦汗
    2018-4-10 15:18
  • 签到天数: 447 天

    [LV.9]以坛为家II

    1742

    主题

    2094

    帖子

    13万

    积分

    超级版主

    Rank: 18Rank: 18Rank: 18Rank: 18Rank: 18

    威望
    562
    贡献
    29
    金币
    51756
    钢镚
    1422

    开源英雄守望者

    发表于 2016-8-3 11:36:38 | 显示全部楼层 |阅读模式

    来源:http://div.io/topic/1734

    简介

    针对多点触控设备编程的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 (
            <AlloyFinger
                onTap={this.onTap.bind(this)}
                onMultipointStart={this.onMultipointStart.bind(this)}
                onLongTap={this.onLongTap.bind(this)}
                onSwipe={this.onSwipe.bind(this)}
                onPinch={this.onPinch.bind(this)}
                onRotate={this.onRotate.bind(this)}
                onPressMove={this.onPressMove.bind(this)}
                onMultipointEnd={this.onMultipointEnd.bind(this)}
                onDoubleTap={this.onDoubleTap.bind(this)}>
                <div className="test">你要监听手势的Dom!</div>
            </AlloyFinger>
        );
    }

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

    守望者AIR技术交流社区(www.airmyth.com)
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    
    关闭

    站长推荐上一条 /4 下一条

    QQ|手机版|Archiver|网站地图|小黑屋|守望者 ( 京ICP备14061876号

    GMT+8, 2019-10-23 00:20 , Processed in 0.051236 second(s), 31 queries .

    守望者AIR

    守望者AIR技术交流社区

    本站成立于 2014年12月31日

    快速回复 返回顶部 返回列表