Scale fabric.js leinwand objekte

Question

Ich habe eine fabric.js Leinwand auf meiner Seite, die ich gerne reagieren würde. Mein Code funktioniert, um die Leinwand selbst zu skalieren, aber nicht die Objekte, die ich gezeichnet habe. Irgendeine Idee? Ich habe SO gesucht, konnte aber keine Lösung finden, die für mich funktioniert hat.

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

Hier ist meine Zoom-Funktion - Wir zoomen die Leinwand und dann über alle Objekte und skalieren sie auch.

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