如何使用fabricjs缩放后定位对象坐标?

Question

目前我正在尝试在画布上添加的对象之间创建连接器。这适用于默认缩放。

默认缩放更改后，我无法定位对象的正确坐标。我尝试在每次缩放操作后使用 setCoords()，但没有成功。

详见小提琴波纹管：

canvas.setZoom(canvas.getZoom() * 1.1 ) ;
for (var i in objects) {
objects[i].setCoords();
}
canvas.renderAll();
canvas.calcOffset();

https://jsfiddle.net/sgeax159/

问候 亚历克斯

Answer 1

我想到的第一件事是你得到了已经缩放的坐标，但是当你将线添加到画布时，画布第二次应用缩放。很难弄清楚这一点，因为canvas.zoomToPoint也处于中间位置。

因此，要查看此注释，请使用canvas.zoomToPoint的行，但离开canvas.setZoom。您应该仍会看到画布缩放。现在在连接函数中，您必须在添加线条之前反转缩放，因此您可以像这样修改函数：

var lineCoordinates = [
source.oCoords.mr.x / canvas.getZoom(),
source.oCoords.mr.y / canvas.getZoom(),
target.oCoords.ml.x / canvas.getZoom(),
target.oCoords.ml.y / canvas.getZoom()
];

你会看到，在没有canvas.zoomToPoint干扰的情况下，它可以按预期工作。

我认为在 canvas.zoomToPoint 的情况下，翻译被添加到坐标中，当您添加线条时也会应用该坐标。我建议将对象保存在固定空间中，不要使用织物.js的坐标。让 fabric 只做渲染，不做对象的管理。希望这有帮助！

后来编辑：我找到了一个更通用的解决方案。因此，在连接函数中，您可以添加以下行(var lineCoordinates 用于上下文)：

savedZoom = canvas.getZoom();
canvas.zoomToPoint(new fabric.Point(canvas.width / 2, canvas.height / 2), 1.0);
var lineCoordinates = [

在添加对象后，在函数结束时，恢复缩放：

canvas.add(line);
canvas.add(line.triangle);
canvas.zoomToPoint(new fabric.Point(canvas.width / 2, canvas.height / 2), savedZoom);

这应该适用于两个缩放函数(如果您执行 setZoom，您只需在添加对象之前将缩放重置为 1，然后在添加对象后恢复保存的值)。

Answer 2

https://jsfiddle.net/sgeax159/3/

尝试使用 oCoords 绘制事物通常是错误的。

o坐标用于鼠标交互，并使用 setCoords() 进行更新。

setCoords() 大部分时间由 fabric 在鼠标交互结束时调用。

当有缩放和平移时，尝试从 oCoords 猜测画布绝对坐标是可能的，但需要：

• 在缩放和平移后手动调用所有对象的 setCoords
• 将坐标乘以视口的倒数变换

从 1.7.X 开始的 Fabric 提供的坐标是对象的绝对坐标，与缩放级别或平移无关。这些坐标集对于此类操作非常有用。

可悲的是，它们只针对四个主要角(tl，tr，bl，br)，但是您可以通过添加和除法来找出中间的角：

ml 是x = (tl.x + bl.x) / 2 and y = (tl.x + bl.y) / 2，或者您可以扩展计算坐标以将它们添加到计算中。

检查更新的小提琴。