在fabric.js中设置画布的宽度和高度

Question

我在HTML5画布中有一个图像背景。

var canvas = new fabric.Canvas('#canvas1');
canvas.setBackgroundImage(
            'http://fabricjs.com/assets/jail_cell_bars.png',
             canvas.renderAll.bind(canvas)
       );

如何将我的画布尺寸（宽度，高度）设置为背景图像的尺寸？

谢谢。

- user2382627

Answer 1

我认为以上回答没有使用fabric.js，而是使用普通的canvas。

当你使用fabric.js及其Fabric.Canvas类时，代码应该是这样的：

image.onLoad = function() {
  var fabric_canvas = new fabric.Canvas('canvas1');
  fabric_canvas.setDimensions({width:image.width, height:image.height});
}; 

就我个人而言，

var canvas = new fabric.Canvas("test_fabric");
canvas.setDimensions({width:800, height:200});

结果为：

<canvas id="test_fabric" width="800" height="200" class="lower-canvas" style="position: absolute; width: 800px; height: 200px; left: 0px; top: 0px; -webkit-user-select: none;"></canvas>

canvas.width和canvas.style.width都被设置了。

- Calvin

---

我正在寻找如何使用Fabric.Canvas类分别设置canvas.width和canvas.style.width的方法。有人可以教我一些技巧吗？ - Calvin

我找到了答案：canvas.setDimensions({width:800, height:200},{backstoreOnly:true}); canvas.setDimensions({width:'800px', height:'200px'},{cssOnly:true}); - Calvin

这是问题的正确答案。确实它使用了 fabric.js 画布，而不是直接使用 HTML5 画布。 - Jacques de Hooge

Answer 2

这些同样有效！

canvas.setWidth(500);
canvas.setHeight(400);

- Tom

---

在新的 beta 版本中，setWidth 和 setHeight 已经被废弃，使用 .width 和 .height 进行替换。但是，虽然您可以获取这些值，但当您设置它们时，它们并没有实际作用。如果您使用 setWidth，将会在 webpack 中出现问题。 - acarlstein

Answer 3

你可以使用CSS或DOM属性来设置画布的尺寸。如果你知道图像的尺寸，你可以在样式表中完成它：

#canvas1 { width: XXXpx; height: YYYpx; }

或者在 DOM 中：

<canvas id="canvas1" width="XXX" height="YYY"></canvas>

如果图像是动态的，并且想要在JS中设置尺寸，可以这样做：

var image = new Image()
image.src = 'http://fabricjs.com/assets/jail_cell_bars.png';

image.onLoad = function () { 
  var canvas = document.getElementById('canvas1');

  canvas.width = image.width;
  canvas.height = image.height;
};

- midu

---

很高兴它能正常工作。但是要小心，如果您不使用onLoad回调函数，您将无法等待浏览器下载图像，这意味着当您尝试获取图像的宽度和高度时，您将得到0。请尝试使用一个您的浏览器尚未缓存的更大的图像，您会看到结果。 - midu

请注意，此回答与 fabric.js 插件无关，就像问题所指定的那样。它仅涉及通用 HTML 画布元素。请参见 Calvin 下面的答案，在 Fabric.Canvas 元素上设置尺寸。 - John Washam