缩放 fabric.js canvas 个对象

Question

我的页面上有一个 fabric.js canvas，我想回复一下。我的代码适用于缩放 canvas 本身，但不适用于我在其上绘制的对象。任何想法？我搜索过 SO 但找不到适合我的解决方案。

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

Answer 1

这是我的缩放功能 - 我们缩放 canvas，然后遍历所有对象并缩放它们。

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

Answer 2

对于那些正在寻找用于缩放（也称为缩放）canvas 的结构 build-in 方法的人，请查看 setZoom。

缩放 fabric.js canvas 个对象

Scale fabric.js canvas objects

javascript

canvas

meteor

html5-canvas

fabricjs