[英]set width and height of canvas in fabric.js
我的 HTML5 畫布中有一個圖像背景。
var canvas = new fabric.Canvas('#canvas1');
canvas.setBackgroundImage(
'http://fabricjs.com/assets/jail_cell_bars.png',
canvas.renderAll.bind(canvas)
);
如何將畫布的尺寸(寬度、高度)設置為背景圖像的尺寸?
謝謝。
我認為上面的答案不使用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 都已設置。
這些也有效!
canvas.setWidth(500);
canvas.setHeight(400);
您可以使用 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;
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.