Javascript 如何在使用fabricjs进行缩放后定位对象坐标？

目前，我正在尝试在画布上添加的对象之间创建连接器。这与默认缩放的预期效果相同

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

有关详细信息，请参见下面的小提琴吼声：

canvas.setZoom(canvas.getZoom() * 1.1 ) ;

for (var i in objects) {
  objects[i].setCoords();
}

canvas.renderAll();
canvas.calcOffset();

问候,，

---

Alex

我想的第一件事是，你得到的坐标已经被缩放了，但是当你把线添加到画布上时，画布会第二次应用缩放。很难理解这一点，因为Cavas.ZooPotoIt也在中间。

因此，要查看此注释，请使用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的情况下，会将平移添加到坐标中，添加线时也会应用该坐标。我建议将对象保持在固定的空间中，不要使用fabric.js的坐标。让fabric只进行渲染，而不是管理对象。希望这有帮助

稍后编辑：我找到了一个更通用的解决方案。因此，在connect函数中添加以下行（var lineCoordinates用于上下文）：

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

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

这应该适用于两种缩放功能（如果进行设置缩放，则只需在添加对象之前将缩放重置为1，然后在添加对象之后恢复保存的值即可）。

试图用奥运会组委会的名称来画东西通常是错误的

OCORD用于鼠标交互，并使用setCoords（）更新

大多数情况下，在鼠标交互结束时，结构会调用setCoords（）

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

• 要在缩放和平移后为所有对象手动调用setCoords来提取OCORDS，请执行以下操作：
• 将坐标乘以视口变换的倒数

Fabric自1.7.X以来提供了对象的绝对坐标，与缩放级别或平移无关。这些坐标集对于这种操作非常有用

遗憾的是，它们只针对四个主要角（tl、tr、bl、br），但您可以通过添加和划分来计算中间的角：

ml是

x=（tl.x+bl.x）/2和y=（tl.x+bl.y）/2

，或者您可以扩展calccoods将它们添加到计算中

检查更新的小提琴

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