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

【问题标题】：set width and height of canvas in fabric.js在 fabric.js 中设置画布的宽度和高度
【发布时间】：2014-06-15 21:50:08
【问题描述】：

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

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

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

谢谢。

【问题讨论】：

标签： javascript fabricjs

【解决方案1】：

您可以使用 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;
};

【讨论】：

很高兴它有效。不过要小心，如果你不使用 onLoad 回调，你不会等待浏览器下载图像，这意味着当你尝试获取 image.width 和 image.height 时，你会得到0.尝试使用浏览器尚未缓存的更大图像，您会看到。
请注意，此答案与 fabric.js 插件无关，就像指定的问题一样。它仅适用于通用 HTML 画布元素。请参阅 Calvin 下面的答案以在 Fabric.Canvas 元素上设置尺寸。

【解决方案2】：

我认为上面的答案没有使用fabric.js，它使用普通的画布。

当你使用 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 都设置好了。

【讨论】：

我正在搜索如何使用 Fabric.Canvas 类分别设置 canvas.width 和 canvas.style.width。有人可以教我技巧吗？
我找到了答案：canvas.setDimensions({width:800, height:200},{backstoreOnly:true}); canvas.setDimensions({width:'800px', height:'200px'},{cssOnly:true});
这是问题的正确答案。事实上，它使用的是 fabric.js 画布，而不是直接使用 HTML5 画布。

【解决方案3】：

这些也可以！

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

【讨论】：