Skip to content

SoftwareBrothers/fabricjs-viewport

Folders and files

NameName
Last commit message
Last commit date

Latest commit

aa17712 · Mar 29, 2020

History

21 Commits
Feb 10, 2015
Jul 3, 2014
Feb 10, 2015
Jul 3, 2014
Jul 3, 2014
Nov 21, 2018
Mar 29, 2020

Repository files navigation

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

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):

<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%

OpenSource SoftwareBrothers community

License

fabricjs-viewport is Copyright © 2018 SoftwareBrothers.co. It is free software, and may be redistributed under the terms specified in the LICENSE 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.
  • If you want to work for us - checkout the career page.