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(); 
})();