缩放 fabric.js 画布对象

Posted 2023-03-24

【中文标题】缩放 fabric.js 画布对象

【英文标题】：Scale fabric.js canvas objects

【发布时间】：2015-04-02 18:56:06

【问题描述】：

我的页面上有一个 fabric.js 画布，我希望它具有响应性。我的代码适用于缩放画布本身，但不适用于我在上面绘制的对象。任何想法？我搜索了 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);

【参考方案1】：

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

打电话给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();

【讨论】：

这个缩放系数是比例还是别的什么？

百分比。在示例中，2.2 将是原始的 220%。

@zimt28 你能发布你如何结合resize事件使用这个功能吗？这个函数需要一个比例因子 - 你是如何从 resize 事件中得到它的？

@MichaelBates 旧代码，但可能足以了解：gist.github.com/zimt28/b33229fdb9559b01803c

Piyush，现在 Fabric.js 直接支持。您可以使用内置 API 缩放画布。如果我是你，我不会使用它。

【参考方案2】：

对于那些寻找用于缩放（也称为缩放）画布的织物内置方法的人，请查看setZoom。