在 React-Konva 中，如何在可拖动的舞台中获取单击图像形状的位置

Question

在 Konva（准确地说是 React-Konva）上，有一个 Stage 和一个 Layer 和一个 Image。 单击该图像会给出单击该图像的位置。 但拖动后（舞台或图像），位置不同。

在 React-Konva 代码中，这看起来基本上是这样的：

<Stage width={2000} height={2000} draggable={true}>
    <Layer>
        <MyImage url="_some_url_pointing_to_a_png_" />
    </Layer>
</Stage>

MyImage 组件：

const MyImage = (props) => {
    const url = props.url;
    const [image, status, width, height] = useImage(url);

    return (
        <Image
            image={image}
            width={width}
            height={height}
            onClick={clickHandler}
        />
    );
};

（是的，我修改了useImage React-Hook 也返回了宽度和高度）

clickHandler 很简单：

const clickHandler = (e) => {
    const stage = e.target.getStage();
    const stageLocation = stage.getPointerPosition();
    console.table(stageLocation);
};

问题是单击该图像确实给了我一个位置，这看起来不错。 但是当我拖动图像时，由于舞台上的“draggable={true}”（因此，准确地说是“拖动舞台”），然后再次单击图像中的相同位置，我得到另一个位置。 这可能很明显，因为它给了我点击在舞台上的位置，而不是点击在图像上的位置。

当舞台不可拖动和图像可拖动时，同样的问题也适用。

所以，问题仍然存在：

当图像（或其舞台）可拖动时，如何获取点击在图像上的位置？

Answer 1

我想我找到了解决方案。 Image 的 attrs 包含该 Image 在 Stage 中的偏移量。 （或在图层中？）

获取可拖动阶段中图层中图像位置的代码：

const clickHandler = (e) => {
    const stage = e.target.getStage();
    const pointerPosition = stage.getPointerPosition();
    const offset = {x: e.target.attrs.x, y: e.target.attrs.y};

    const imageClickX = pointerPosition.x - offset.x;
    const imageClickY = pointerPosition.y - offset.y;

    console.table({x: imageClickX, y: imageClickY});
};

但是，这段代码仅在图像也可拖动的情况下才有效。实际上，您可能正在拖动图像。 如果你有一个可拖动的Stage和一个不可拖动的Image，那么在Stage中找到偏移量：

const stage = e.target.getStage();
console.table({offsetX: stage.attrs.x, offsetY: stage.attrs.y});

（如果我在最终解决方案中遇到新线索，我会再次更新这个答案:-)，这真是一个传奇......）

如果有人发现此解决方案存在任何缺陷，我非常感兴趣。

谢谢，

伯特