Fabric.js: płótno o 100% szerokości możliwe?

Question

W przypadku stosowania „płótno = nowych fabric.Canvas (” foo „)”, tkanina przekształca element płócienny, który ma klasę css o szerokości = 100% z nim związane w coś podobnego:

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

owijania div oraz oba elementy canvas otrzymują znaczniki stylu i stałą szerokość/wysokość. Jeśli chodzi o inicjalizację, znalazłem tylko canvas.setWdith, który przyjmuje tylko wartości liczbowe (bez wartości procentowych).

Czy istnieje sposób na zainicjowanie tkaniny w celu jej przestrzegania/użycia danej szerokości 100%?

Aktualizacja: Przykład: http://jsfiddle.net/thomasf1/kb2Hp/

Answer 1

Nie jestem pewien, czy można jednoznacznie powiedzieć Fabric używać szerokość 100%, ale może dostać szerokość canvas-container przez $('.canvas-container').width() lub document.getElementById('canvas-container').clientWidth, a następnie za pomocą canvas.setWidth na tej wartości ? Np .:

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

protip: również pamiętać, aby ustawić to na zmiany rozmiaru okna, aby uniknąć przepełnienia treści.

Answer 2

Ponieważ natura canvas element, width i musi być użyta w pikselach. Tak więc Fabric nie użyje wartości procentowej do płótna.

attribute unsigned long width;

attribute unsigned long height;

płótno

Answer 3

Resize tkaniny, używając swojego przedmiotu oraz okno innerWidth i 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(); 
})();