缩放fabric.js画布对象 [英] Scale fabric.js canvas objects

问题描述

我在我的页面上有一个fabric.js画布，我想响应。我的代码适用于缩放画布本身，但不是我绘制的对象。任何想法？我搜索了，但找不到一个解决方案，为我工作。

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

推荐答案

这里是我的缩放功能 -

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

调用 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();
}

这篇关于缩放fabric.js画布对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！