FabricJS对象坐标相对于图像而不是整个画布

Question

我正在尝试使用FabricJS库创建一个小网站，该库为Web画布元素添加了其他功能。

我的问题是，我想调整画布（红色）的大小，使其填满整个网页。在这个画布上，有一个背景图像（绿色），我将在上面创建一些绘画（橙色，这可以是线条、正方形等）。

现在，我想导出所有绘画到相对于图像而不是整个画布的坐标系中，因为应该可以自由移动和缩放图像以获得更好的绘画体验。

我的解决方法是计算相对于画布的图像位置并将其从绘画中减去，但这包括很多计算...也许有更聪明的方法使用FabricJS？

此外，如何确保我的绘画随着图像一起移动和缩放，以便我的绘画始终与图像保持一致？

我已经思考了几天，并意识到我需要专业人士的建议。

- Advena

---

计算图像相对于画布的位置，并从绘图中减去它们 - 但这包括很多计算...听起来对我来说是正确的方式，而且减法并不是"很多计算"，你只需写一次，计算机会迅速为您完成。 - undefined

@HelderSepulveda 嗯，我只是在探索是否有比我重新发明轮子更“自然、fabricjs” 的方法。那么，如果同时将绘图与图像一起移动，同时保持纵横比和/或尺寸与图像相符，又该怎么办呢？ - undefined

Answer 1

我认为 toLocalPoint() 可能会有帮助。给定一个对象 imageObj 和你的绘图的绝对坐标 left 和 top，你可以像这样找到相对坐标：

const abs = new fabric.Point(left, top)
const rel = imageObj.toLocalPoint(point, 'left', 'top')
console.log(rel.x, rel.y)

关于您的第二个问题：除了将它们分组（我假设您不想这样做）外，没有简单的方法可以“绑定”两个对象。因此，您需要监听一个对象发出的所有适当事件，并在它们的处理程序中对另一个对象进行调整。要找出在您的情况下听取哪些事件是有意义的，请参见事件演示。

- shkaper