当使用’canvas = new fabric.Canvas(‘foo’)’时,Fabric将具有width = 100%的CSS类的canvas元素转换成如下所示:
@H_404_12@解决方法
<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(); })();