如何用一次單擊縮放畫布上的所有元素？

Question

我在我的一個項目中使用了fabric.js。 我使用縮放功能。我想知道是否有一個簡單的方法來縮放所有畫布（包括所有元素）。

Answer 1

試試這個jsfiddle演示按鈕的縮放onclick：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

如果在不修改所有對象的情況下對fabricjs使用縮放，請使用：https://github.com/wojtek-krysiak/fabricjs-viewport。

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