当使用’canvas = new fabric.Canvas(‘foo’)’时,Fabric将具有width = 100％的CSS类的canvas元素转换成如下所示：
<div class="canvas-container" style="position: relative" width="293px"> <canvas class="upper-canvas"></canvas> <canvas class="lower-canvas" id="c"></canvas> </div>
包装div以及canvas元素都正在获取样式标签和固定的宽度/高度.在初始化方面,我只找到了canvas.setWdith,它只接受数值(没有百分比值).
有没有办法初始化Fabric来尊重/使用给定的100％宽度？
解决方法
通过使用其对象和窗口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();
})();
