Fabric.js：可能有100％寬度的畫布？

Question

當使用「畫布=新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/

Answer 1

我不知道，如果你能明確告訴面料使用100％的寬度，但是可能通過$('.canvas-container').width()或document.getElementById('canvas-container').clientWidth得到canvas-container的寬度，然後該值使用canvas.setWidth ？例如： -

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

普羅蒂普：還要記得設置這個窗口上調整大小，以防止任何內容溢出。

Answer 2

因爲canvas element,width和height的性質需要在像素中使用。所以，Fabric不會在畫布上使用百分比值。

attribute unsigned long width;

attribute unsigned long height;

Answer 3

大小調整結構的畫布使用其對象和窗口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(); 
})();