https://github.com/SoftwareBrothers/fabricjs-viewport
allows zooming and viewport manipulation in fabricjs
https://github.com/SoftwareBrothers/fabricjs-viewport
Last synced: about 1 year ago
JSON representation
allows zooming and viewport manipulation in fabricjs
- Host: GitHub
- URL: https://github.com/SoftwareBrothers/fabricjs-viewport
- Owner: SoftwareBrothers
- License: mit
- Created: 2014-06-29T11:42:35.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2020-03-29T16:02:59.000Z (about 6 years ago)
- Last Synced: 2024-11-05T10:44:54.555Z (over 1 year ago)
- Language: CoffeeScript
- Homepage:
- Size: 23.4 KB
- Stars: 129
- Watchers: 8
- Forks: 28
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# fabricjs-viewport
Simple implementation of viewport and zoom in fabricjs.
1. Doesn't change data model, so none of the objects on your canvas is changed after zooming/grabbing
2. Supports touch devices
3. Supports free drawing mode
First [see an example](http://softwarebrothers.github.io/fabricjs-viewport/)
### How to use it
Currently it depends on jquery, however I plan to fix it soon.
In the HEAD of your HTML file include jQuery, fabricjs and fabricjs-viewport. You can find fabricjs-viewport.js in this repo in the /dist/ directory.
You can invclude those libraries from CDNs (order matters):
```javascript
```
Next if you need to use zooming or changing viewport in your project just use fabric.CanvasWithViewport insteed of fabric.Canvas
var c = new fabric.CanvasWithViewport("id-of-your-canvas");
Now you are be able to:
Turn on grabbing mode:
```javascript
c.isGrabMode = true;
```
With this you can change the viewport with drag and drop on the canvas.
You also can zoom in and out:
```javascript
c.setZoom(c.viewport.zoom*1.1); // zoom in by 10%
```
## OpenSource SoftwareBrothers community
- [Join the community](https://join.slack.com/t/adminbro/shared_invite/zt-czfb79t1-0U7pn_KCqd5Ts~lbJK0_RA) to get help and be inspired.
- subscribe to our [newsletter](https://www.getrevue.co/profile/adminbro)
## License
fabricjs-viewport is Copyright © 2018 SoftwareBrothers.co. It is free software, and may be redistributed under the terms specified in the [LICENSE](LICENSE.md) file.
## About SoftwareBrothers.co
We are a software company who provides web and mobile development and UX/UI services, friendly team that helps clients from all over the world to transform their businesses and create astonishing products.
* We are available for [hire](https://softwarebrothers.co/contact).
* If you want to work for us - checkout the [career page](https://softwarebrothers.co/career).