web手势库Alloyfinger

前言

在上一篇文章 前端pdf预览、pdfjs的使用，我们使用pdf.js 来实现了pdf的预览。但是客户车间里的电脑是触摸屏，要求能够手势放大图纸，能够拖动图纸。最终决定使用 Alloyfinger 来解决手势的问题。

官方github

https://github.com/AlloyTeam/AlloyFinger

官方演示demo

需要在手机、平板上：http://alloyteam.github.io/AlloyFinger/

官方原理说明

超小Web手势库 AlloyFinger原理

基本使用

安装

npm install alloyfinger

引入

import AlloyFinger from 'alloyfinger'

官方语法

var af = new AlloyFinger(element, {
    touchStart: function () { },
    touchMove: function () { },
    touchEnd:  function () { },
    touchCancel: function () { },
    multipointStart: function () { },
    multipointEnd: function () { },
    tap: function () { },
    doubleTap: function () { },
    longTap: function () { },
    singleTap: function () { },
    rotate: function (evt) {
        console.log(evt.angle);
    },
    pinch: function (evt) {
        console.log(evt.zoom);
    },
    pressMove: function (evt) {
        console.log(evt.deltaX);
        console.log(evt.deltaY);
    },
    swipe: function (evt) {
        console.log("swipe" + evt.direction);
    }
});

/**
 * this method can also add or remove the event handler
 */
var onTap = function() {};

af.on('tap', onTap);
af.on('touchStart', function() {});

af.off('tap', onTap);

/**
 * this method can destroy the instance
 */
af = af.destroy();

下面只简单演示常用的，其他的暂时不介绍。其他用法可以查看官方示例（将网页保存到本地即可）

平移

<template>
    <div>
      <img src="../../../../public/logo.png" id="img-demo"
      :style="{top:demoTop+'px',left:demoLeft+'px'}" />
    </div>
</template>

<script lang="ts">
import AlloyFinger from 'alloyfinger';
export default {
    data() {
        return {
            demoTop: 0,
            demoLeft: 0
        };
    },
    mounted() {
        const demo = document.getElementById('img-demo');
        const style = window.getComputedStyle(demo);
        // 获取dom元素的top和left
        this.demoLeft = parseInt(style.left);
        this.demoTop = parseInt(style.top);

        new AlloyFinger(demo, {
            touchMove: (evt) => {
                console.log('移动：', evt);
                this.demoLeft += evt.deltaX;
                this.demoTop += evt.deltaY;
                evt.preventDefault();
            }
        });
    }
};
</script>

<style lang="scss" scoped>
#img-demo{
    width: 300px;
    height: 300px;
    border: 1px solid red;
    position: relative;
}
</style>

注意点：

1、元素必须设置position属性，不然拖动不了
2、不要直接el.style.top 这样不能获取到元素真实的top 值，具体见：css中样式类型及属性值的获取

效果
现在控制台里设置为手机模式：

旋转

<template>
    <div>
      <img src="../../../../public/logo.png" id="img-demo"
      :style="{transform:`rotate(${angle}deg) translate(10px)`}" />
    </div>
</template>

<script lang="ts">
import AlloyFinger from 'alloyfinger';
export default {
    data() {
        return {
            angle: 10
        };
    },
    mounted() {
        const demo = document.getElementById('img-demo');
        console.log(demo.style.transform);
        const transform = demo.style.transform.split(' ');
        console.log(transform);
        new AlloyFinger(demo, {
            tourotatechMove: (evt) => {
                console.log('旋转：', evt);
            }
        });
    }
};
</script>

<style lang="scss" scoped>
#img-demo{
    width: 300px;
    height: 300px;
    border: 1px solid red;
}
</style>

注意：
1、Alloyfinger返回的角度是数字，单位deg
2、web端无法实现旋转，旋转需要两个触摸点，这里无法进行演示
3、window.getComputedStyle返回的transform 值是matrix() 格式，关于怎么转换没怎么研究过。要么研究转换，要么像我这样，不要在class类里写关于transform 的样式

缩放

var initScale = 1;
 new AlloyFinger(pinchImg, {
     multipointStart: function () {
         initScale = pinchImg的缩放; 
     },
     pinch: function (evt) {
          // 最终缩放数 initScale * evt.zoom
     }
 });

这个也没法演示，就不写了。缩放值可以使用zoom，获取更加简单，方便操作。另外zoom和scale 是不一样的，可以自行百度