scroll - FabricJS Canvas，滚动父容器移动子命中区域

Question

我正在使用 FabricJS 创建应用程序。我发现滚动父 div/容器会使对象的可选区域向右偏移，与滚动量直接相关。

因此，如果我有一个 1200x600 的画布和一个 600x600 的容器 div，并且我在 400、120 处向该画布添加一个矩形；当我滚动 200 像素时，我无法单击矩形来选择它。相反，我必须将鼠标移动到 600、120（空白区域）以获取横杆并选择矩形。

不确定这是否已知，或者是否有解决方法 - 但我将不胜感激任何可能的帮助。

Answer 1

您必须修改 FabricJs 代码才能使其正常工作。问题出在 getPointer 函数中，如果您在 all.js 中搜索它，您会注意到来自 kangax 的注释“此方法需要修复”。

一种解决方法可以用

function getPointer(event) {
    // TODO (kangax): this method needs fixing
    return { x: pointerX(event) + document.getElementById("container").scrollLeft, y: pointerY(event) + document.getElementById("container").scrollTop };
}

其中“容器”是画布的包装 div。这不好，因为您必须输入确切的 ID，但它可以工作。

希望这可以帮助。