前言
在上一篇文章 前端pdf预览、pdfjs的使用，我们使用pdf.js 来实现了pdf的预览。但是客户车间里的电脑是触摸屏，要求能够手势放大图纸，能够拖动图纸。最终决定使用 Alloyfinger 来解决手势的问题。
官方github
https://github.com/AlloyTeam/AlloyFinger
官方演示demo
需要在手机、平板上：http://alloyteam.github.io/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 是不一样的，可以自行百度