FabricJS Scale/Zoomキャンバスをコンテナに合わせる

Question

高さと幅を固定したコンテナの中に私のFabricJSキャンバスを置いています。側面には、キャンバスのサイズをさまざまなプリセットに変更するためのドロップダウンがあります。私がやりたいことは、コンテナよりも大きいかより広いサイズを選択すると自動的にズームアウトすることです。たとえば、コンテナdivが800x600でキャンバスのサイズを1024x768に設定した場合、キャンバス全体が引き続き表示されるように縮小したいと考えています。逆に小さいサイズ（200x200など）を選択すると、100％まで拡大したいと考えています。

拡大表示の例はthisですが、ズームアウトしてもキャンバスのサイズは変わらないようです。スクリーンショットを参照してください。

私はこれを実現するにはどうすればよいですか？

あなたがここに見ることができるように、薄い赤のボーダーとの面積は、キャンバスのコンテナです。白いボックスはキャンバスです。

Answer 1

canvas.setDimensions関数を使用してこれを行うことができます。 2つの引数を渡します。最初はキャンバスを変更するための高さと幅を指定するオブジェクトで、2番目はcss、キャンバスの実際のサイズ、またはその両方を変更するかどうかを示します。

たとえば、canvas.setDimensions({width: 750, height: 750}, {backstoreOnly: true}は、表示に関係なくキャンバスの実際のサイズを750x750に設定します。

canvas.setDimensions({width: '750px', height: '750px'}, {cssOnly: true})は、実際のサイズに関係なく、キャンバスの表示サイズを750x750に設定します。

CSSまたはバックストアの後ろに幅または高さの後にpxが必要かどうかを100％確信していませんが、確認するのは非常に簡単です。また、引数が2番目のパラメータに渡されない場合、両方が変更されます。