html5 – Fabric.js:可以有100%宽度的画布吗?

前端之家收集整理的这篇文章主要介绍了html5 – Fabric.js:可以有100%宽度的画布吗?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
当使用’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%宽度?

更新:
示例:http://jsfiddle.net/thomasf1/kb2Hp/

@H_404_12@解决方法
通过使用其对象和窗口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();
})();
原文链接:https://www.f2er.com/html5/168744.html

猜你在找的HTML5相关文章