CODEWITHSUNDEEP
canvaszoomingfabricjs
Luigi Caradonna
Luigi Caradonna

Reputation: 1064

Zoom in and out with Fabric JS

I'm building a simple image editor using FabricJS. I can do almost anything I need, the problem comes implementing a zoom feature. As far as I've understood, FabricJS hasn't anything built-it, so that I'm trying to do it by myself.

I've put 2 buttons on the page "Zoom in" and "Zoom out", on click they activate a jQuery function, respectively

$("#zoomin").click(function() {   
    $("#canvas").width(
        $("#canvas").width() * 1.25
    );

    $("#canvas").height(
        $("#canvas").height() * 1.25
    );
});

and

$("#zoomout").click(function() {
    $("#canvas").width(
        $("#canvas").width() * 0.8
    );

    $("#canvas").height(
        $("#canvas").height() * 0.8
    );
});

Where #canvas is the id of the div which contains the canvas. This code works properly, it actually zooms in and out, but that causes a problem when I want to grab and move around the objects on the canvas, the snap area is not where the object is visible, when I zoom in, the snap area results to be moved to top-left of the visible object, when I zoom out it results to be moved to the bottom-right.

To explain, this is what happens after a zoom out enter image description here

Is there a way to make the snap area consistent with the position of the shown object?

Is there a better way to implement the zooming function?

Upvotes: 9

Views: 24818

Answers (3)

ximi hoque
ximi hoque

Reputation: 66

fabric.Image.fromURL('http://i.imgur.com/8rmMZI3.jpg', function(oImg) {
  oImg.selectable = false;
  oImg.id = 'image';
  canvas.add(oImg);
});

canvas.on('mouse:wheel', function(opt) {
  var delta = opt.e.deltaY;
  var pointer = canvas.getPointer(opt.e);
  var zoom = canvas.getZoom();
  zoom = zoom + delta/200;
  if (zoom > 20) zoom = 20;
  if (zoom < 0.01) zoom = 0.01;
  canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom);
  opt.e.preventDefault();
  opt.e.stopPropagation();
});

Have a look at the following fiddle :- https://jsfiddle.net/ximihoque/6ys3quL8/

I have demonstrated drawing objects on a image via public url with following features :-
1. Draw Bounding box
2. Toggle Drag and move by a simple keypress 's'
3. Delete the box by 'delete' key
4. Zoom and Pan with mouse wheel/scroll

References :-
1. http://fabricjs.com/fabric-intro-part-5
2. http://fabricjs.com/fabric-intro-part-1

Upvotes: 3

nexttus
nexttus

Reputation: 96

You can try code below.

canvas.renderAll();
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" ;
document.addEventListener(mousewheelevt, function(e){
    if(e.detail<0){
        //canvas.setZoom(canvas.getZoom() * 1.1 );
        canvas.zoomToPoint(new fabric.Point(canvas.width / 2, canvas.height / 2), canvas.getZoom() * 1.1);
    }
    else{
        //canvas.setZoom(canvas.getZoom() / 1.1 );
        canvas.zoomToPoint(new fabric.Point(canvas.width / 2, canvas.height / 2), canvas.getZoom() / 1.1);
    }
}, false);

Hope it will work for you.

Upvotes: 8

AndreaBogazzi
AndreaBogazzi

Reputation: 14741

fabrcjs has its own zooming functions built inside.

I think that in this way you are obtaining a css zoom of the element, but mouse interaction is calculated internally with objects positions.

Try to use fabricjs functions:

canvas.setZoom(val);

Where canvas is the fabric.Canvas object.

To resize the canvas accordingly:

canvas.setWidth(originalWidth * canvas.getZoom());
canvas.setHeight(originalHeight * canvas.getZoom());

Upvotes: 23

Related Questions