Fabric.js: Leinwand mit 100% Breite möglich?

Question

Bei der Verwendung von ‚Leinwand = new fabric.Canvas (‘ foo ‚)‘, Stoff wandelt das Leinen-Element, das eine CSS-Klasse mit Breite = 100% zu ihm angebracht in so etwas wie die:

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

Das Umhüllungs div sowie beide Canvas-Elemente erhalten Style-Tags und feste Breite/Höhe. In Bezug auf die Initialisierung habe ich nur canvas.setWdith gefunden, das nur numerische Werte akzeptiert (keine Prozentwerte).

Gibt es eine Möglichkeit, Fabric zu initialisieren, um die angegebene 100% Breite zu berücksichtigen?

Update: Beispiel: http://jsfiddle.net/thomasf1/kb2Hp/

Answer 1

Ich bin nicht sicher, wenn Sie ausdrücklich Stoff kann sagen, 100% Breite zu verwenden, aber vielleicht die Breite canvas-container durch $('.canvas-container').width() oder document.getElementById('canvas-container').clientWidth, und dann canvas.setWidth mit auf diesem Wert ? Z.B .:

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

Protip: auch daran denken, diese Resize auf Fenster setzen jeden Überlauf von Inhalten zu verhindern.

Answer 2

Da die Art canvas element, width und height in Pixel verwendet werden müssen. Daher verwendet Fabric keinen Prozentwert für den Canvas-Bereich.

attribute unsigned long width;

attribute unsigned long height;

Answer 3

Resize Gewebe Leinwand durch seinen Gegenstand mit und Fenster innerwidth und 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(); 
})();