seadragon - Openseadragon 图像坐标

Question

我正在使用 openseadragon 做一个项目，看看下面的例子。 一个示例 openseadragon 图像

在 Onclick 方法中想要找到图像的坐标（px，py）。有什么方法吗？请帮助这是我的第一个 openseadragon 项目。

谢谢

Answer 1

当您单击时，它将位于窗口像素坐标中。然后，您可以将其转换为视口坐标（从左侧的 0.0 到右侧的 1.0）。然后，您可以将它们转换为图像坐标。以下是它的外观：

viewer.addHandler('canvas-click', function(event) {
  var viewportPoint = viewer.viewport.pointFromPixel(event.position);
  var imagePoint = viewer.viewport.viewportToImageCoordinates(viewportPoint.x, viewportPoint.y);
  console.log(imagePoint.x, imagePoint.y);
});

有关坐标系的更多信息，请参阅： http: //openseadragon.github.io/examples/viewport-coordinates/

Answer 2

以下代码改编自@iangilman 的回答，适用于 OpenSeadragon 2.0.0。似乎处理函数的第二个参数在最近的版本中被删除了。我添加了quick === true条件以防止它在拖动开始时触发。切换对象中默认的单击缩放行为也是一个好主意gestureSettingsMouse。

viewer = OpenSeadragon({
    id: "osd1",
    prefixUrl: "/path/to/seadragon/images/",
    tileSources: "/path/to/tif/images/image.tif.dzi",
    showNavigator:  true,
    gestureSettingsMouse: {
        clickToZoom: false,
        dblClickToZoom: true
    }
});
viewer.addHandler('canvas-click', function(target) {
    if(target.quick === true){
        var viewportPoint = viewer.viewport.pointFromPixel(target.position);
        var imagePoint = viewer.viewport.viewportToImageCoordinates(viewportPoint.x, viewportPoint.y);
            console.log(parseInt(imagePoint.x), parseInt(imagePoint.y));
        }
});