Question

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，为什么？

Answer 1

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

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

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

canvas.renderAll();

对我来说很好..

Answer 2

初始化canvas时，Fabric会在canvas元素上读取width / height属性，或者在选项中传递宽度/高度。

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

或：

<canvas width="900" height="600"></canvas>
...
var myCanvas = new fabric.Canvas('myCanvas');

Answer 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中，这可能会导致意外。

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

3 个答案: