https://github.com/valen-h/canvascontrols
A web module that adds controls to the canvas object
https://github.com/valen-h/canvascontrols
2d babel canvas controls drag es5 game js mobile polyfill scale typescript web webpack
Last synced: 6 months ago
JSON representation
A web module that adds controls to the canvas object
- Host: GitHub
- URL: https://github.com/valen-h/canvascontrols
- Owner: Valen-H
- Created: 2019-01-01T16:40:04.000Z (almost 7 years ago)
- Default Branch: staging
- Last Pushed: 2019-06-02T20:18:07.000Z (over 6 years ago)
- Last Synced: 2025-03-23T11:33:12.432Z (7 months ago)
- Topics: 2d, babel, canvas, controls, drag, es5, game, js, mobile, polyfill, scale, typescript, web, webpack
- Language: TypeScript
- Homepage: https://valen-h.github.io/CanvasControls/test/sample.html
- Size: 3.53 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CanvasControls
A web module that adds controls to the canvas object
## Usage
```javascript
var cc = new CanvasControls.CanvasControls.ControllableCanvas({ //Lib.Namespace.Class
dragEnabled: true,
target: canvas //grabs first occurence if not passed
});
cc.handle(); //attach handles, can only be called once, to attach handles afterwards, use: cc._pcAdapt() or cc.mobileAdapt() after enabling them.
/**
* Voila! Try dragging the canvas!! You can add drag bounds by setting the transBounds[x, y, X, Y] array
*/
```
> Note: In your projects you should use the heavy but minified `dist/CanvasControls.bundle.js` which is packed with polyfills of the raw but not minified `dist/babel/CanvasControls.js`
## Features
* Scrolling - click 'n' drag
* Zooming - mouse wheel, 2-finger pinch
* Clickable buttons/widgets