web-dev-qa-db-ja.com

Fabric.js：幅100％のキャンバスは可能ですか？

'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要素は、スタイルタグと固定の幅/高さを取得しています。初期化に関しては、数値のみを取得する（パーセント値は使用しない）canvas.setWdithのみが見つかりました。

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

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

htmlcanvasfabricjs
19
thomasf1

オブジェクトとウィンドウのinnerWidthとinnerHeightを使用して、ファブリックのキャンバスのサイズを変更します

(function(){
  var canvas = new fabric.Canvas('app');

  window.addEventListener('resize', resizeCanvas, false);

  function resizeCanvas() {
    canvas.setHeight(window.innerHeight);
    canvas.setWidth(window.innerWidth);
    canvas.renderAll();
  }

  // resize on init
  resizeCanvas();
})();
18
ilumin

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

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


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

6
Albert Xing

canvas element の性質のため、 width および height はピクセルで使用する必要があります。そのため、Fabricはキャンバスにパーセント値を使用しません。

attribute unsigned long width;
attribute unsigned long height;
1
rodrigopandini