25

'canvas = new fabric.Canvas('foo')' を使用すると、Fabric は width=100% の css クラスを持つ canvas 要素を次のようなものに変換します。

<div class="canvas-container" style="position: relative" width="293px">
  <canvas class="upper-canvas"></canvas>
  <canvas class="lower-canvas" id="c"></canvas>
</div>

ラッピング div と両方のキャンバス要素は、スタイル タグと固定幅/高さを取得しています。初期化に関しては、数値のみを取る canvas.setWdith しか見つかりませんでした (パーセント値はありません)。

指定された 100% 幅を尊重/使用するように Fabric を初期化する方法はありますか?

更新: 例: http://jsfiddle.net/thomasf1/kb2Hp/

4

3 に答える 3

12

100％の幅を使用するようにFabricに明示的に指示できるかどうかはわかりませんが、おそらく canvas-containerthrough$('.canvas-container').width()またはの幅を取得してからその値document.getElementById('canvas-container').clientWidthを使用canvas.setWidthしますか？例えば：

canvas.setWidth($('.canvas-container').width());


ヒント：コンテンツのオーバーフローを防ぐために、ウィンドウのサイズ変更にもこれを設定することを忘れないでください。

于 2013-03-05T04:16:25.357 に答える
2

canvas 要素の性質上、幅と高さはピクセル単位で使用する必要があります。したがって、Fabric はキャンバスにパーセント値を使用しません。

attribute unsigned long width;
attribute unsigned long height;
于 2013-03-05T11:38:36.923 に答える