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

时间:2014-04-29 19:19:38

标签: javascript fabricjs

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

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

如何将画布的尺寸(宽度,高度)设置为背景图像的尺寸?

感谢。

3 个答案:

答案 0 :(得分:17)

我认为上面的答案不使用fabric.js,它使用普通画布。

当您使用fabric.js及其Fabric.Canvas类时,代码应为:

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>

结果是:

Route::get('/post/view/{id}', 'PostController@getView');

设置canvas.width和canvas.style.width。

答案 1 :(得分:3)

这些也有效!

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

答案 2 :(得分: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;
};