touch-move-scale
v1.0.1
Published
touch-move-scale 是原生写的移动端画布移动缩放库, 你可以给元素添加单指移动和双指缩放的功能 ### Demo [touch-move-scale](http://htmlpreview.github.io/?https://github.com/WindStormrage/touchMoveScale/blob/master/index.html) 请在移动端打开 ### Install ``` npm i touch-move-scale -S ``` ### Quick Start
Downloads
7
Readme
touch-move-scale 移动端画布移动缩放库
touch-move-scale 是原生写的移动端画布移动缩放库, 你可以给元素添加单指移动和双指缩放的功能
Demo
touch-move-scale 请在移动端打开
Install
npm i touch-move-scale -SQuick Start
<div id="touchBox">
<img id="transformDom" />
</div>
import TouchMoveScale from './index.js'
const touchMoveScale = new TouchMoveScale({
touchDom: document.getElementById('touchBox'),
transformDom: document.getElementById('transformDom')
})Options
参数 | 默认值 | 含义 ---|---|--- touchDom | - |[必填]手指操作的区域元素 transformDom | - | [必填]缩放应用的元素 transformData | - | 位移缩放初始值 transformData.x | 0 | 初始x轴偏移 transformData.y | 0 | 初始y轴偏移 transformData.scale | 1 | 初始缩放 maxScale | Infinity | 最大缩放值 minScale | 0 | 最小缩放值 damping | false | 感觉像是有阻尼感,可以开启试试 perspective | false | 是否有透视效果
Function
方法名 | 参数 | 含义 ---|---|--- enlargeScale | size: 放大倍数 | 进行放大操作 narrowScale | size: 缩小倍数 | 进行缩小操作 getTransformData | - | 获得当前的位移和缩放, 其中的位移没有被缩放, 是先缩放然后再位移 setPerspective | value: Boolean | 设置perspective setDamping | value: Boolean | 设置damping distory | - | 销毁监听