micro-touch
v0.2.0
Published
Super basic mobile gesture support tool.
Downloads
18
Maintainers
Readme
micro-touch
Super basic mobile gesture support tool.
NPM page: https://www.npmjs.com/package/micro-touch
Installation
npm install micro-touch --save
User Guide
import {TouchGesture} from "micro-touch";
tou = new TouchGesture(DOM);
let t2d = new Transform2D(tou.el)
// tou.on("tap", tap);
// tou.on("longTap", longTap);
// tou.on("doubleTap", doubleTap);
// tou.on("pressMove", function (e) {
// let {moveDistance, startDistance} = e;
// console.log(moveDistance, startDistance);
// });
tou.on("pinch", function (e) {
let {pointAngle,startAngle,pointSpace,startSpace,scale,rotate} = e;
t2d.setRotate(rotate);
})
结合mmicro-transform2d实现拖拽阻力
let pullN = 0.2;
let tg = new TouchGesture(divDom.current);
let t2d = new Transform2D(divDom.current);
t2d.setTranslate(50, 0);
tg.on("tapDown", function () {
divDom.current.style.removeProperty("transition");
t2d.setTranslate(50, 0);
});
tg.on("pressMove", function (e) {
let {moveDistance: {x, y, d}} = e;
let [nowX, nowY] = t2d.getTranslate();
if (nowY > 50) {
y *= pullN;
}
t2d.setTranslate(50, nowY + y);
});
tg.on("tapUp", function () {
divDom.current.style.transition = "500ms";
t2d.setTranslate(50, 0);
});
Note
传入一个DOM对象,对其进行方法监听
new TouchGesture(DOM)
on(gesture,callback) : 注册事件监听回调函数
- 'tap' : 元素被单击
- 'doubleTap' : 元素被双击
- 'longTap' : 长按元素一秒
- 'pressMove' : 移动元素
- 'pinch' : 双指缩放或者旋转时触发
- "tapDown" | "tapMove" | "tapUp" : 等同于touchstart,touchmove,touchend,但是拓展了事件属性
off() : 取消注册的回调函数
destroy() : 销毁注册实例
interval(lastTime: number, duration: number = 500) : Promise对象判定给定时间是否和当前时间满足间隔
getMove(p1: point, p2: point) : 获取两个点之间的距离对象
getAngle(move: move) : 解析move对象,返回角度值(弧度制)
getMiddlePoint(p1: point, p2: point) : 获取两个点之间的中点坐标
radian2angle() : 弧度转角度
angle2radian() : 角度转弧度
Resources
You can read micro-touch Documentation online for more information.
License
micro-touch uses the MIT license, see LICENSE file for the details.