2015-02-03 18 views
14

Sayfamda bir fabric.js kanvas var, yanıt vermek isterim. Kodum tuvalin kendisini ölçeklemek için çalışıyor, ancak üzerinde çizdiğim nesneleri değil. Herhangi bir fikir? SO aradım ama benim için çalışan bir çözüm bulamadı.Scale fabric.js tuval nesneleri

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

cevap

30

İşte benim yakınlaştırma işlevi var - Hepimiz nesneler üzerinde tuval ve sonra döngü yakınlaştırma ve onları da ölçek.

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

büyük İşleri

Çağrı zoomIt(2.2) gibi, teşekkür ederim! Bu zoom faktöründe – zimt28

+0

oranı ya da başka bir şey mi? – mjdevloper

+0

Yüzde. Örnekte, 2.2 orijinalin% 220'si olacaktır. –