Fabric.js: tela con larghezza 100% possibile?

Question

Quando si utilizza 'tela = nuovi fabric.Canvas (' foo ')', tessuto converte l'elemento tela che ha una classe css con width = 100% collegato ad esso in qualcosa di simile:

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

L'imballaggio div così come entrambi gli elementi canvas ottengono tag di stile e larghezza/altezza fissa. In termini di inizializzazione, ho trovato solo canvas.setWdith che accetta solo valori numerici (nessun valore percentuale).

C'è un modo per inizializzare Fabric per rispettare/utilizzare la larghezza del 100% data?

Aggiornamento: Esempio: http://jsfiddle.net/thomasf1/kb2Hp/

Answer 1

io non sono sicuro se si può dire in modo esplicito del tessuto per utilizzare il 100% di larghezza, ma forse ottenere la larghezza di canvas-container attraverso $('.canvas-container').width() o document.getElementById('canvas-container').clientWidth, e quindi utilizzando canvas.setWidth su quel valore ? Es .:

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

Protip: anche ricordarsi di impostare questo sulla finestra di ridimensionamento per impedire qualsiasi fuoriuscita di contenuti.

Answer 2

Poiché la natura di canvas element, width e height deve essere utilizzata in pixel. Quindi, Fabric non utilizzerà un valore percentuale su tela.

attribute unsigned long width;

attribute unsigned long height;

tela

Answer 3

del tessuto

ridimensionamento utilizzando il suo oggetto e la finestra innerWidth e 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(); 
})();