scroll - FabricJS Canvas，滚动父容器移动子点击区域

Question

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

因此，如果我有一个 1200x600 的 Canvas 和一个 600x600 的容器 div，并且我在 400、120 处向该 Canvas 添加一个矩形；当我滚动 200px 时，我无法单击矩形来选择它。相反，我必须将鼠标移动到 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 };
}

其中“container”是 Canvas 的包装 div。这不太好，因为您必须输入准确的 id，但它可以工作。

希望这有帮助。