CODEWITHSUNDEEP
javascriptcanvasmeteorhtml5-canvasfabricjs
zimt28
zimt28

Reputation: 705

Scale fabric.js canvas objects

I have a fabric.js canvas on my page, that I'd like to be responsive. My code works for scaling the canvas itself, but not the objects I've drawn on it. Any idea? I've searched SO but couldn't find a solution that worked for me.

var resizeCanvas;

resizeCanvas = function() {
  var height, ratio, width;
  ratio = 800 / 1177;
  width = tmpl.$('.canvas-wrapper').width();
  height = width / ratio;

  canvas.setDimensions({
    width: width,
    height: height
  });
};

Meteor.setTimeout(function() {
  return resizeCanvas();
}, 100);

$(window).resize(resizeCanvas);

Upvotes: 16

Views: 26370

Answers (2)

Caleb Waldner
Caleb Waldner

Reputation: 1149

For those looking for a fabric build-in method for scaling (aka zooming) a canvas, check out setZoom.

Upvotes: 1

Jason Maggard
Jason Maggard

Reputation: 1672

Here's my zoom function - We zoom the canvas, and then loop over all objects and scale them as well.

Call like zoomIt(2.2)

function zoomIt(factor) {
canvas.setHeight(canvas.getHeight() * factor);
canvas.setWidth(canvas.getWidth() * factor);
if (canvas.backgroundImage) {
    // Need to scale background images as well
    var bi = canvas.backgroundImage;
    bi.width = bi.width * factor; bi.height = bi.height * factor;
}
var objects = canvas.getObjects();
for (var i in objects) {
    var scaleX = objects[i].scaleX;
    var scaleY = objects[i].scaleY;
    var left = objects[i].left;
    var top = objects[i].top;

    var tempScaleX = scaleX * factor;
    var tempScaleY = scaleY * factor;
    var tempLeft = left * factor;
    var tempTop = top * factor;

    objects[i].scaleX = tempScaleX;
    objects[i].scaleY = tempScaleY;
    objects[i].left = tempLeft;
    objects[i].top = tempTop;

    objects[i].setCoords();
}
canvas.renderAll();
canvas.calcOffset();
}

Upvotes: 41

Related Questions