腾讯开源的非常小巧的JS手势库

时间:2022-05-07
本文章向大家介绍腾讯开源的非常小巧的JS手势库,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

腾讯前端团队前几天在Github上发布了一个JS手势库 AlloyFinger

极其小巧,只有几K,但功能很全面,支持缩放、旋转、拖拽、单击、双击、滑动、长按

而且除了Dom对象外,还可以监听Canvas内元素的手势

在腾讯内部的应用已经非常广泛,例如 QQ群、QQ动漫、AlloyTeam 等团队和项目

官方示例

http://alloyteam.github.io/AlloyFinger/

代码示例

实现对一个图片的移动和缩放

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
 <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <!--引入JS库-->
 <script src="asset/transform.js"></script>
 <script src="alloy_finger.js"></script>
 <script src="asset/to.js"></script>
</head>
<body>
    <img id="Img" src='3.jpg' width="160px" />
    <script type="text/javascript">
    var targetImg = document.getElementById("Img");
    Transform(targetImg);
    var initScale = 1;
    new AlloyFinger(targetImg, {
 // 移动
 pressMove: function(evt) {
            targetImg.translateX += evt.deltaX;
            targetImg.translateY += evt.deltaY;
            evt.preventDefault();
        },
   // 多点触摸开始
 multipointStart: function() {
            initScale = targetImg.scaleX;
        },
        // 缩放
 pinch: function(evt) {
            targetImg.scaleX = targetImg.scaleY = initScale * evt.scale;
        }
    });
    </script>
</body>
</html>

项目地址

https://github.com/AlloyTeam/AlloyFinger