Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/systemlight/micro-touch
:point_left: Super basic mobile gesture support tool. 【微型移动端手势支持工具】
https://github.com/systemlight/micro-touch
es6 javascript js mobile rotate scale touch touchgesture
Last synced: 2 days ago
JSON representation
:point_left: Super basic mobile gesture support tool. 【微型移动端手势支持工具】
- Host: GitHub
- URL: https://github.com/systemlight/micro-touch
- Owner: SystemLight
- License: mit
- Created: 2020-05-19T06:13:09.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-08-03T06:15:48.000Z (over 1 year ago)
- Last Synced: 2024-10-13T07:53:56.939Z (about 1 month ago)
- Topics: es6, javascript, js, mobile, rotate, scale, touch, touchgesture
- Language: JavaScript
- Homepage:
- Size: 839 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# micro-touch
[](https://www.npmjs.com/package/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](https://github.com/SystemLight/micro-touch) online for more information.
# License
micro-touch uses the MIT license, see LICENSE file for the details.