Openseadragon 图像坐标答案

【问题标题】：Openseadragon image cordinatesOpenseadragon 图像坐标
【发布时间】：2013-08-24 09:59:38
【问题描述】：

我正在使用 openseadragon 做一个项目，看看下面的例子。 a samle openseadragon image

在onclick方法中想找到图片的坐标(px,py)。有什么方法吗？？请帮助这是我的第一个 openseadragon 项目。

谢谢

【问题讨论】：

【解决方案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/

【讨论】：

我意识到这是一个相当古老的线程，但我现在也有类似的问题。您上面的代码在 OpenSeadragon 2.0.0 中给我留下了“信息未定义”类型错误。你能更新你的答案吗，请？
感谢您的提醒！更新了 OpenSeadragon 2.1.0 的代码，并更新了坐标系信息链接。

【解决方案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));
        }
});

【讨论】：