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

Question

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

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

有关详细信息，请参阅下面的 fiddle：

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 时，canvas 第二次应用缩放。很难弄清楚这一点，因为 canvas.zoomToPoint 也位于中间。

因此，要看到此评论，请在带有 canvas.zoomToPoint 的行中留下 canvas.setZoom。您应该仍会看到 canvas 缩放。现在在连接函数中你必须在添加线之前反转缩放，所以你可以像这样修改函数：

  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 的情况下，会向坐标添加翻译，添加直线时也会应用该翻译。我建议的是让你的对象保持固定 space 并且不要使用 fabric.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 绘制东西通常是错误的。

oCoords 用于鼠标交互并使用 setCoords() 更新。

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

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

在缩放和平移后为所有对象手动更新 oCoords 调用 setCoords
将坐标乘以 viewportTransform 的倒数

Fabric 自 1.7.X 起提供 aCoords，它是对象的绝对坐标，与缩放级别或平移无关。这些坐标组对于这种操作非常有用。

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

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

检查更新后的 fiddle.

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

How to target object coordinates after zoom using fabricjs?

javascript

fabricjs