すべてのオブジェクトでスケーリングファブリックjsキャンバス

Question

ファンクションを使用してfabric.jsキャンバス全体を拡大/縮小します。この関数はzoomCanvas（2.2）のようにパーセンテージで値をとります。ここで2.2は220％を意味しますが、パーセンテージの代わりに、カンバスをコンテナに収めるためにキャンバスをピクセル単位でスケーリングする必要があります。たとえば、キャンバスがjsonデータのページに読み込まれたときの初期サイズは1200px x 700px、コンテナサイズは500pxです。今私は、キャンバス全体とすべてのオブジェクトが500ピクセルに収まるように、この500ピクセルをパーセント値に変換する方法を見つける必要があります。

要因は、あなたは、いくつかの寸法で、元のキャンバスを持っている必要があり

function zoomCanvas(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(); 



var tcounter = 0; 

for (var i in objects) { 

    tcounter++; 


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

Answer 1

%値にあるこのスケーリングされる機能。そのキャンバスから、あなたはfactorXとfactorYの値を見つけるだけです。たとえば、元のキャンバスは1280x1020ピクセルで、ディメンション500x500pxに変換する必要があります。

var factorX = 500/1280; 
var factorY = 500/1020; 

よりは、幅の値について

function zoomCanvas(factorX, factorY) {...} 

使用factorXに

​​

からあなたの関数を変更し、工場出荷時の高さの値のため。

Answer 2

必要なスケールファクタは次のとおりです。

scaleRatio = Math.min(containerWidth/canvasWidth, containerHeight/canvasHeight); 

あなたが本当にちょうど使用する必要がありますあなたのキャンバスを拡大するには：その後、

canvas.setDimensions({ width: canvas.getWidth() * scaleRatio, height: canvas.getHeight() * scaleRatio }); 

canvas.setZoom(scaleRatio) 

カスタムズーム機能はすべきではありません必要がありますか？