स्केल fabric.js कैनवास ऑब्जेक्ट्स

Question

मेरे पास मेरे पृष्ठ पर एक fabric.js कैनवास है, जो मैं उत्तरदायी होना चाहता हूं। मेरा कोड कैनवास को स्केल करने के लिए काम करता है, लेकिन उन वस्तुओं को नहीं जिन्हें मैंने खींचा है। कोई उपाय? मैंने एसओ खोजा है लेकिन मेरे लिए काम करने वाला कोई समाधान नहीं मिला।

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

यहाँ मेरी ज़ूम समारोह है - हम कैनवास, और फिर पाश सभी वस्तुओं से अधिक ज़ूम और उन्हें साथ ही बड़े पैमाने।

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