Question

我在我的一个项目中使用了fabric.js。我使用缩放功能。我想知道是否有一种简单的方法可以在点击时缩放所有画布（包含所有元素）。

Answer 1

尝试使用此jsfiddle演示缩放按钮：http://jsfiddle.net/cmontgomery/H7Utw/1/。从本质上讲，您可以获得画布上的所有对象，并按相同因子缩放/移动它们，从而提供缩放的视觉外观。

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 * SCALE_FACTOR;
    var tempScaleY = scaleY * SCALE_FACTOR;
    var tempLeft = left * SCALE_FACTOR;
    var tempTop = top * SCALE_FACTOR;

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

    objects[i].setCoords();
}

canvas.renderAll();

Answer 2

如果使用zoom with fabricjs而不修改所有对象，请使用：https://github.com/wojtek-krysiak/fabricjs-viewport。

示例：http://wojtek-krysiak.github.io/fabricjs-viewport/

如何通过一次单击缩放所有元素pof？

2 个答案: