Fabric.js: Canvas со 100% шириной?

При использовании 'canvas = new fabric.Canvas(' foo ')', Fabric преобразует элемент canvas, который имеет класс css с шириной = 100%, прикрепленный к нему, примерно так:

<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, который принимает только числовые значения (без процентов).

Есть ли способ инициализировать Fabric для уважения/использования данной 100% -ной ширины?

Обновление: Пример: http://jsfiddle.net/thomasf1/kb2Hp/

Ответ 1

изменить размер холста ткани, используя его объект и окно 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();
})();

Ответ 2

Я не уверен, могу ли я явно указать Fabric использовать ширину 100%, но, возможно, получить ширину canvas-container через $('.canvas-container').width() или document.getElementById('canvas-container').clientWidth, а затем используя canvas.setWidth для этого значения? Например:.

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

Protip: также не забудьте установить это на размер окна, чтобы предотвратить переполнение содержимого.

Ответ 3

Поскольку природа элемент холста, width и height необходимо использовать в пикселях. Таким образом, Fabric не будет использовать процентное значение для холста.

attribute unsigned long width;

attribute unsigned long height;