前言

在上一篇文章 前端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();

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

平移

注意点：

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

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

旋转

注意：
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 是不一样的，可以自行百度