Simple implementation of viewport and zoom in fabricjs.
- Doesn't change data model, so none of the objects on your canvas is changed after zooming/grabbing
- Supports touch devices
- Supports free drawing mode
First see an example
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):
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<script src="fabricjs_viewport.js"></script>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:
c.isGrabMode = true;With this you can change the viewport with drag and drop on the canvas.
You also can zoom in and out:
c.setZoom(c.viewport.zoom*1.1); // zoom in by 10%- Join the community to get help and be inspired.
- subscribe to our newsletter
fabricjs-viewport is Copyright © 2018 SoftwareBrothers.co. It is free software, and may be redistributed under the terms specified in the LICENSE file.
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.
- If you want to work for us - checkout the career page.