為 object 設置 position，同時將其添加到 Fabric.js 中的 canvas

Question

我正在使用 JavaScript（在 React.JS 項目中）將 object 添加到我的 fabric.js canvas（在 React.JS 項目中），但我不希望它每次都呈現在左上角。 我想要它，這樣當我使用canvas.add() function 時，我可以指定我可以渲染 object 的 x、y 坐標。

可能是這樣的——

const addObject = (canvas) => {
  img = fabric.Image(img);
  canvas.add(img, 20, 15) //(20,15) represent the x,y co-ordinates of where I want to render img

我只是想要它，以便在調用 addObject() function 時自動將我的 object 添加到指定的 position。

Answer 1

您可以嘗試使用 LEFT 和 TOP。 例如，可以通過這種方式進行定位。 這可能是你的一個例子。

var circle = new fabric.Circle({
left: 20,
top: 15,
radius: 25,
fill: randomColor(),
hasRotatingPoint: true
});
canvas.add(circle)

如果您希望它是隨機的，您可以按如下方式使用它。

 var circle = new fabric.Circle({
 left: fabric.util.getRandomInt(25, canvas.width - 25),
 top: fabric.util.getRandomInt(25, canvas.height - 25),
 radius: 25,
 fill: randomColor(),
 hasRotatingPoint: true
 });
 canvas.add(circle);

希望它有利於您的業務。