Fabric.js 在初始化后将我的画布大小更改为 300x150

Posted 2023-03-24

【中文标题】Fabric.js 在初始化后将我的画布大小更改为 300x150

【英文标题】：Fabric.js changes my canvas size to 300x150 after initialization

【发布时间】：2012-05-21 19:50:54

【问题描述】：

html：

  <div class="canvas-wrapper">
    <canvas id="myCanvas"></canvas>
  </div>

CSS

.canvas-wrapper 
    width: 900px;
    min-height: 600px;
 

 #myCanvas
     border:1px solid red;
     position: absolute;
     top:22px;
     left:0px;
     height: 100%;
     width: 99%;
 

JS

var myCanvas = new fabric.Canvas('myCanvas');

我的画布在初始化后被调整为 300x150，为什么？

【问题讨论】：

我在这里添加了失败的测试jsfiddle.net/QcZ54

【参考方案1】：

在最新版本中，您必须执行以下操作：

var canvas = new fabric.Canvas('myCanvas');
canvas.setHeight(500);
canvas.setWidth(800);

....你的代码....

canvas.renderAll();

对我来说很好用..

对于动态改变大小，这也适用

【讨论】：

这是迄今为止我发现的最简单的方法。

你应该在最后添加这个来重新计算所有对象的位置：canvas.calcOffset();

如何将画布设置为父组件宽度和高度的 100%？我不明白为什么这比任何其他尊重 100% css 属性的组件要困难得多，那里的每个答案都只是展示了如何设置为固定的宽度/高度。

【参考方案2】：

在初始化画布时，Fabric 读取画布元素上的宽度/高度属性或获取传入选项的宽度/高度。

var myCanvas = new fabric.Canvas('myCanvas',  width: 900, height: 600 );

或：

<canvas  ></canvas>
...
var myCanvas = new fabric.Canvas('myCanvas');

【讨论】：

看来我们必须这样做。

@kangax ，我的页面上有多个画布元素，所有这些元素都通过一些 js 计算定位在运行时。用户还可以添加更多画布元素。创建 fabric.canvas("canvas1") 会使它们失去位置。正如你所建议的，我试过了： $jArtB = $("#"+artB); c = new fabric.Canvas(''+artB, width: $jArtB.width(), height: $jArtB.height(), left:parseInt($jArtB.css("left")), top:parseInt( $jArtB.css("top")) ); ` .但这也不起作用。

有没有一种有效的方法来调整画布大小以适应使用 fabric.Image.fromURL 加载的图像尺寸？谢谢

【参考方案3】：

这个问题的真正答案——不涉及新的静态大小，但实际上允许 CSS 有效——是以下选项之一：

在 CSS 中，您可以覆盖单个属性并使用 !important; 跟随它们。这样做的缺点是任何进一步的定义也必须使用 !important 否则它们将被忽略：

[width], [height], [style]

  width:      100vw!important;
  min-height: 100vh!important;

使用 JQuery，您可以将内联属性值设置为空字符串。你大概可以在没有 JQuery 的情况下实现这一点，但我将把它作为练习留给你。

javascript (JQuery)：

$('[style]').attr(  'style',  function(index, style)  return ''; );
$('[height]').attr( 'height', function(index, height) return ''; );
$('[width]').attr(  'width',  function(index, height) return ''; );

CSS：

*, *:before, *:after

  box-sizing: border-box;


body

  width:      100vw; 
  min-height: 100vh;
  padding:    0;
  margin:     0;


.canvas-container,
canvas

  width:      inherit; 
  min-height: inherit;


canvas.lower-canvas

  position: absolute;
  top:      0;

之后，CSS 将按预期应用。

显然也有必要将变化告诉 Fabric：

function sizeCanvas()

  var width  = Math.max(document.documentElement.clientWidth,  window.innerWidth  || 0);
  var height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
  canvas.setHeight( height )
  canvas.setWidth( width )


window.addEventListener('resize', draw, false);

function initDraw()

  // setup


function draw()
  
  canvas.renderAll();  


sizeCanvas();
initDraw();

这会将 Fabric 配置为视口大小，并在调整大小时保持相应大小。

值得注意的是，出现这个问题有两个原因：

有人认为使用内联样式是个好主意，应该受到严厉的谴责，因为在任何情况下这都不合适。

Fabric 更改了 DOM 排列并将原始画布嵌套在具有第二个嵌套画布的新 div 中，这可能会导致意外。

【讨论】：

虽然这个答案很有用，而且我认为很多人都同意静态定义画布尺寸不太理想，但也许可以将措辞更改为不那么粗糙。