Scala canvas.js canvas objects

Question

Ho una tela fabric.js sulla mia pagina, che mi piacerebbe essere reattivo. Il mio codice funziona per ridimensionare la tela stessa, ma non gli oggetti che ho disegnato su di essa. Qualche idea? Ho cercato SO ma non ho trovato una soluzione che funzionasse per me.

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

Ecco la mia funzione di zoom - ingrandiamo la tela, e poi un ciclo su tutti gli oggetti e li scalare pure.

chiamata come 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(); 
}