在 Fabric.js 中将对象添加到画布时设置对象的位置
Posted
技术标签:
【中文标题】在 Fabric.js 中将对象添加到画布时设置对象的位置【英文标题】:Set position for object while adding it to canvas in Fabric.js 【发布时间】:2021-04-10 02:26:26 【问题描述】:我正在使用 javascript(在 React.JS 项目中)向我的 fabric.js 画布添加一个对象,但我不希望它每次都呈现在左上角。我希望这样当我使用 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() 函数时自动将我的对象添加到指定位置。
【问题讨论】:
【参考方案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 中将对象添加到画布时设置对象的位置的主要内容,如果未能解决你的问题,请参考以下文章
在另一个画布中添加画布:obj.setCoords 不是函数(fabric js)