Question

使用openseadragon进行项目检查下面的示例。 a samle openseadragon image

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

Openseadragon图像坐标

2 个答案: