1

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

在 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}'（因此，准确地说是'拖动舞台'）然后再次单击图像中的相同位置，我得到另一个位置。这可能很明显，因为它给了我点击在舞台上的位置，而不是点击在图像上的位置。

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

所以，问题仍然存在：

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

4

1 回答 1

1

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

您可以通过代码获得位于可拖动阶段中的图层中的图像上的位置：

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});

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

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

谢谢，

伯特

于 2019-08-21T13:05:52.977 回答