fabricjs-viewport

KO | EN

gitlite — search

#docker #javascript #hacktoberfest #golang #css #react #typescript #android #python #react-native #php #html

fabricjs-viewport

★ 130 Open GitHub ↗

allows zooming and viewport manipulation in fabricjs

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

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

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

## 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).

fabricjs-viewport

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README