Skala fabric.js obiekty na płótnie

Question

Mam na mojej stronie canvas.js, że chciałbym być responsywny. Mój kod służy do skalowania samego płótna, ale nie obiektów, które na nim rysowałem. Dowolny pomysł? Szukałem SO, ale nie mogłem znaleźć rozwiązania, które by dla mnie działało.

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

Oto moja funkcja powiększania - powiększamy płótno, a następnie pętlę nad wszystkimi obiektami i skalujemy je również.

połączeń jak 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(); 
}