https://github.com/spritejs/sprite-extend-gesture
https://github.com/spritejs/sprite-extend-gesture
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/spritejs/sprite-extend-gesture
- Owner: spritejs
- Created: 2019-07-09T08:57:44.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-07-09T11:25:45.000Z (over 6 years ago)
- Last Synced: 2025-01-01T22:28:58.111Z (about 1 year ago)
- Language: JavaScript
- Size: 8.79 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Sprite Gesture
SpriteJS Gesture extension based on [winter-gestures](https://github.com/wintercn/gesture).
## Usage
From CDN
```html
```
## Example
```html
Document
html, body {
width:100%;height:100%;margin:0;
}
html,body {
margin: 0 0 0 0;
padding: 0 0 0 0;
width:100%;
height:100%;
overflow:hidden;
}
body {
-webkit-user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
-webkit-text-size-adjust: none;
}
// 关闭选择
document.addEventListener('selectstart', (e) => { e.preventDefault() });
// 避免鼠标变成文本选择形状
document.addEventListener('mousedown', (e) => { e.preventDefault() });
// 避免上下滚屏
document.addEventListener('touchmove', (e) => { e.preventDefault() }, {passive: false});
// 避免双击缩放
document.addEventListener('touchstart', (e) => { e.preventDefault() }, {passive: false});
const imgUrl = 'https://s5.ssl.qhres.com/static/ec9f373a383d7664.svg';
const {Scene, Sprite, Gesture} = spritejs;
const paper = new Scene('#container', {viewport: [400, 400]});
const sprite = new Sprite(imgUrl);
sprite.attr({
bgcolor: '#fff',
pos: [0, 0],
size: [400, 400],
borderRadius: '200',
});
paper.layer().appendChild(sprite);
Gesture.subscribe(sprite);
sprite.on('dual', (event) => {
if(event.type === 'dual') {
console.log(sprite.attr('transform'));
sprite.attr('transform', [event.transform[0][0], event.transform[1][0],
event.transform[0][1], event.transform[1][1],
event.transform[0][2], event.transform[1][2]]);
//sprite.attr("transform", {rotate: event.rotate / Math.PI * 180});
}
});
```