将对象添加到 Fabric.js 中的 canvas 时设置对象的位置

Question

我正在使用 JavaScript（在 React.JS 项目中）向我的 fabric.js canvas 添加一个对象，但我不希望它在每次都在左上角。我想要它，这样当我使用 canvas.add() 函数时，我可以指定我可以渲染对象的 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() 函数时自动将我的对象添加到指定位置。

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);

希望它对您的业务有益。

将对象添加到 Fabric.js 中的 canvas 时设置对象的位置

Set position for object while adding it to canvas in Fabric.js

javascript

canvas

image

fabricjs

reactjs