Vaadin 中点击的相对坐标

【问题标题】：Relative coordinates of a click in VaadinVaadin 中点击的相对坐标
【发布时间】：2023-03-27 02:08:01
【问题描述】：

我正在使用 Vaadin 14 构建一个应用程序，用户需要单击图像，然后进一步处理来自该单击的坐标。 Vaadin 似乎只提供相对于用户屏幕或浏览器的点击坐标。我的应用程序需要相对于组件的坐标。有没有办法做到这一点？

【问题讨论】：

这能回答你的问题吗？ Get position/offset of element relative to a parent container?
@SimonMartinelli 不幸的是，我根本不熟悉 javascript。如何使用 javascript 访问图像并执行获取点击位置所需的功能？谢谢。

【解决方案1】：

答案是通过 Element API 并使用 image.getElement().addEventListener("click", ...).addEventData(...)，从而将必要的信息从浏览器传递到服务器。

就我而言：

Image image = ...
image.getElement().addEventListener("click", this::handleClick)
                .addEventData("event.offsetX")
                .addEventData("event.offsetY");

private void handleClick(DomEvent event) {
        JsonObject eventData = event.getEventData();
        double x = eventData.getNumber("event.offsetX");
        double y = eventData.getNumber("event.offsetY");

        String text = "X: " + x + ", Y: " + y;
        System.out.println(text);
    }

【讨论】：