我正在尝试使用FabricJS库创建一个小网站,该库为Web画布元素添加了其他功能。我的问题是,我想调整画布(红色)的大小,使其填满整个网页。在这个画布上,有一个背景图像(绿色),我将在上面创建一些绘画(橙色,这可以是线条、正方形等)。现在,我想导出所有绘画到相对于图像而不是整个画布的坐标系中,因为应该可以自由移动和缩放图像以获得更好的绘画体验。我的解决方法是计算相对于画布的图像位置并将其从绘画中减去,但这包括很多计算...也许有更聪明的方法使用FabricJS?此外,如何确保我的绘画随着图像一起移动和缩放,以便我的绘画始终与图像保持一致?我已经思考了几天,并意识到我需要专业人士的建议。
我认为 toLocalPoint() 可能会有帮助。给定一个对象 imageObj 和你的绘图的绝对坐标 left 和 top,你可以像这样找到相对坐标: const abs = new fabric.Point(left, top) const rel = imageObj.toLocalPoint(point, 'left', 'top') console.log(rel.x, rel.y) 关于您的第二个问题:除了将它们分组(我假设您不想这样做)外,没有简单的方法可以“绑定”两个对象。因此,您需要监听一个对象发出的所有适当事件,并在它们的处理程序中对另一个对象进行调整。要找出在您的情况下听取哪些事件是有意义的,请参见事件演示。