https://github.com/xd-tayde/touchkit
基于mtouch封装的，更便于业务使用的贴纸手势库
https://github.com/xd-tayde/touchkit
finger gesture hammer image-composer sticker tie-zhi touch
Last synced: 9 months ago
JSON representation
基于mtouch封装的，更便于业务使用的贴纸手势库
- Host: GitHub
- URL: https://github.com/xd-tayde/touchkit
- Owner: xd-tayde
- Created: 2017-08-02T10:44:23.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2018-07-24T02:22:46.000Z (almost 8 years ago)
- Last Synced: 2024-04-24T18:55:37.174Z (about 2 years ago)
- Topics: finger, gesture, hammer, image-composer, sticker, tie-zhi, touch
- Language: JavaScript
- Homepage: http://f2er.meitu.com/gxd/touchkit/example/index.html
- Size: 1.1 MB
- Stars: 49
- Watchers: 5
- Forks: 6
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Touchkit.js
[Example](http://f2er.meitu.com/gxd/touchkit/example/index.html)
[Git](https://github.com/xd-tayde/touchkit)
[Download](https://github.com/xd-tayde/touchkit/blob/master/dist/touchkit.min.js)
## Introduction
This toolkit is built on `mtouch.js` and `mcanvas.js`. Use it, you can build a gesture project quickly and get a image automatically. concerned less and do more!
## Installation
- You can download the latest version from the [GitHub](https://github.com/xd-tayde/touchkit/blob/master/dist/touchkit.min.js)
- use a npm [CDN](https://unpkg.com/touchkit/dist/mcanvas.min.js).
- Or you can install via npm:
```js
npm install touchkit --save
```
## Basic Usage
The idea of touchkit is that init create a touch box firstly, and then use `tk.background()` add the background and use `tk.add()` add the touch-element into the touch box, finally, export a composite image by `tk.exportImage()`. The image is what you see in touch box.
the simple example, see the document for more details.
```js
// init create touch box
new Touchkit('.js-par')
// add background image
// type: contain/crop
// the background-image will place at the bottom of touch-box
.background({
image:'./images/p2.jpg',
type:'contain',
})
// add operable element to touch box
.add({
image:`images/ear.png`,
width:'100px',
use:{
drag:true,
pinch:true,
rotate:true,
singlePinch:true,
singleRotate:true,
},
pos:{
x:116,
y:45,
scale:1.25,
rotate:2.63,
},
}).add({
image:`images/neck.png`,
width:100,
limit:true,
close:true,
use:'all',
pos:{
x:0,
y:0,
scale:1,
rotate:0,
},
})
// export a image contain all elements what you see in touch box
.exportImage(b64=>{
console.log(b64);
})
```
## document
[Engligh](https://github.com/xd-tayde/touchkit/blob/master/README_EN.md) | [中文版](https://github.com/xd-tayde/touchkit/blob/master/README_ZH.md)
## License
[MIT](https://opensource.org/licenses/MIT)