それは比率ですリセット後のキャンバスに画像を再スケール

Question

私はこのようになります私のページで簡単なキャンバスがあります。

をキャンバスが応答するサイズは、画面によって増減することができますので、あなたはあります見つめている。同じままののは、結果の解決です。これは常にデフォルトの1000x1000pxにスケーリングされます。

これはスケーリング比で機能します。

例：キャンバスが画面上に500x500ピクセルであることを示します。これは、画面が1000x1000キャンバスに収まる大きさであれば、スケーリング比が0.5であることを意味します。比率は1.0となります。

キャンバスには画像を追加するオプションもあります。これらの画像は、画面サイズに合わせてサイズを変更する必要があります。また、完全なキャンバスと同じように、保存する前に適切なサイズにリサイズされます（1000x1000）。今、画像の大きさは完全にキャンバスに表示するには大きすぎると、この時点で、それはだ

：あなたは、それは通常、そうのようなキャンバス上にかなり大きいです画像をアップロード

キャンバスの縮尺率は0.5のままで、個々の縮尺率は1.0です。

私は画像のサイズを変更したい場合は、キャンバスの中にうまく収まるように、私は、次を得る：

画像の大きさが似1.0のそれのデフォルトのスケールに返却されていないことを確認するにはアップロードしたときに次のコードを追加しました：

canvas.on('object:modified', function (options) { 

    options.target.set({ 
     width: options.target.getWidth(), 
     height: options.target.getHeight(), 
     scaleX: 1, scaleY: 1, 
    }); 

}); 

これは、サイズ変更/変更後にXとYスケールを1に設定します。この方法でサイズを変更するたびに、そのポイントは新しい1.0スケールになります。

私のすべてのオブジェクトをスケールするために、私は次の関数を書いた：

function scaleObjects() 
{ 
    // page has been resized therefore we recalculate the aspect ratio for the canvas. 
    $windowWidth = $(window).width(); 
    $windowHeight = $(window).height(); 

    //currentCanvasWidth = $windowWidth; 

    var PrevHeightRatio = canvas.getHeight()/canvasHeightDefault; 
    var PrevWidthRatio = canvas.getWidth()/canvasWidthDefault; 

    resizeCanvas(); 

    var HeightRatio = canvas.getHeight()/canvasHeightDefault; 
    var WidthRatio = canvas.getWidth()/canvasWidthDefault; 
    var objects = canvas.getObjects(); 


    for (var i = 0; i < objects.length; i++) { 
     objects[i].scaleX = WidthRatio; 
     objects[i].scaleY = HeightRatio; 

     var multiplierW = 1/PrevWidthRatio; 
     var multiplierH = 1/PrevHeightRatio; 

     var originalStartX = objects[i].left * multiplierW; 
     var originalStartY = objects[i].top * multiplierH; 

     objects[i].left = originalStartX * WidthRatio; 
     objects[i].top = originalStartY * HeightRatio; 
     objects[i].setCoords(); 
    } 

    canvas.renderAll(); 
} 

この保存のサイズ変更やキャンバスが発生するたびに実行されます。

キャンバスを保存またはサイズ変更するたびに、キャンバスの現在の縮尺がイメージ/オブジェクトに適用されるという問題があります。この場合、私の画像は1.0のスケールで、キャンバスは0.5で保存またはサイズ変更すると、0.5スケールがオブジェクトに適用され、そのサイズが縮小されます。私はしかし、私のキャンバスの残りの部分とまったく同じように拡大することが好きです。

これをどのように達成できますか？ここで

は、キャンバスの画像は、一度ページをリサイズ「後」である：ここでは

はjsfiddleです：https://jsfiddle.net/L6hob1e4/2/

Answer 1

いくつかの研究と私は、次の解決策を見つけ、いくつかのテストの後。 私はこれにオブジェクトをスケーリングforループを変更：

for (var i = 0; i < objects.length; i++) { 
     var previousH = (((objects[i].getHeight()/canvas.getHeight()) * canvasHeightDefault) * PrevHeightRatio); 
     var previousW = (((objects[i].getWidth()/canvas.getWidth()) * canvasWidthDefault) * PrevWidthRatio); 

     console.log(previousH + " - " + previousW); 

     var multiplierSizeH = 1/PrevHeightRatio; 
     var multiplierSizeW = 1/PrevWidthRatio; 

     var onMaxH = objects[i].getHeight() * multiplierSizeH; 
     var onMaxW = objects[i].getWidth() * multiplierSizeW; 

     objects[i].height = onMaxH * HeightRatio; 
     objects[i].width = onMaxW * WidthRatio; 

     var multiplierW = 1/PrevWidthRatio; 
     var multiplierH = 1/PrevHeightRatio; 

     var originalStartX = objects[i].left * multiplierW; 
     var originalStartY = objects[i].top * multiplierH; 

     objects[i].left = originalStartX * WidthRatio; 
     objects[i].top = originalStartY * HeightRatio; 
     objects[i].setCoords(); 
    } 

これは、問題を修正し、スケーリング前と後のサイズを追跡します。