https://github.com/xd-tayde/mtouch
移动端手势库
https://github.com/xd-tayde/mtouch
drag finger gesture hammer mtouch pinch rotate singlepinch singlerotate sticker touch
Last synced: 4 months ago
JSON representation
移动端手势库
- Host: GitHub
- URL: https://github.com/xd-tayde/mtouch
- Owner: xd-tayde
- Created: 2017-07-20T10:12:25.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2019-03-19T01:12:47.000Z (over 6 years ago)
- Last Synced: 2025-02-10T08:19:22.587Z (4 months ago)
- Topics: drag, finger, gesture, hammer, mtouch, pinch, rotate, singlepinch, singlerotate, sticker, touch
- Language: JavaScript
- Homepage: http://f2er.meitu.com/gxd/mtouch/example/index.html
- Size: 181 KB
- Stars: 61
- Watchers: 6
- Forks: 12
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MTouch.js
> [demo](http://f2er.meitu.com/gxd/mtouch/example/index.html)
> [github](https://github.com/xd-tayde/mtouch)
### Introduction
**[中文版](./README_ZH.md)**
MTouch is a modern JavaScript mobile touch gesture library. It's simple, convenient and only 9k.
The library support 5 kinds of gesture.
- drag
- pinch
- rotate
- **singlePinch**
- **singleRotate**
> Tips:Single finger operation is so useful as practice confirms.
### event
all the event you can bind:
```js
EVENT = [
'touchstart',
'touchmove',
'touchend',
'drag',
'dragstart',
'dragend',
'pinch',
'pinchstart',
'pinchend',
'rotate',
'rotatestart',
'rotatend',
'singlePinch',
'singlePinchstart',
'singlePinchend',
'singleRotate',·
'singleRotatestart',
'singleRotatend'
];
```
### Installation
- You can download the latest version from the [GitHub](https://github.com/xd-tayde/mtouch/blob/master/dist/mtouch.min.js);
- use a npm [CDN](https://unpkg.com/[email protected]/dist/mtouch.min.js).
- or install via npm:
```js
npm install mtouch --save
```
### Basic usage
```js
let mt = new MTouch(selector);
// bind the drag event；
mt.on('drag',e => {
});
// bind the singlePinch. but there must be a operator that is the element which you want to operate;
mt.on('singlePinch', e =>{
} , operator);
```
### Example
You can operate the element via the `ev.delta`(incremental motion) in callback's params;
```js
// the global transform to store the state of ele;
let transform = {
x:0,
y:0,
scale:1,
rotate:0
}
MTouch('selector', ev => {
transform.x += ev.deltaX;
transform.y += ev.deltaY;
$(el).css('transform',
`translate3d(${transform.x}px,${transform.y}px,0px) scale(${transform.scale}) rotate(${transform.rotate}deg)`);
});
```
### API
#### 1.`switch`
`mtouch.switch(el,addButton)`;
Switch the operator to change the basepoint that will be used in singlePinch or singleRotate's calculation.
params:
// the element want to operate;
el: type: string or HTMLElement,
optional;
default: the el on create the instance;
// whether you want to add a button when use single gesture.
addButton: type: boolean,
optional,
default:true;
#### 2.`on/off`
`mtouch.on(evName,handle,operator) / mtouch.off(evName,handler)`;
bind the event callback;
```js
mtouch.on('drag',(ev)=>{
console.log(ev);
})
```
the ev of callback is:
```js
ev = {
origin:TouchEvent,
eventType:'drag',
delta:{
deltaX : 1,
deltaY : 1,
}
}
```
#### 3.`destroy`
`mtouch.destroy()`;
unbind all the event that has band on el;
### License
[MIT](https://opensource.org/licenses/MIT)