openseadragon svg overlay - 可点击区域太大

Question

我正在使用带有覆盖（覆盖数组？）的OpenSeaDragon图像，该覆盖有大约500个可点击的svg rect元素，使用Overlay.onclick（）函数实现

可点击区域的边界矩形会有所不同，但总是比可见矩形大得多，并且通常也会覆盖相邻的矩形。我试过弄乱边缘，边框和填充无济于事。此图显示了一个示例，显示了差异。实际显示的矩形与可见文本框的尺寸相同，而可点击区域是整个突出显示的矩形。

似乎没有很多可预测性 - 可点击区域以明显随机的方式变化，但总是大于正确的大小，在两个方向上最多大约两次。如图所示，它并不总是居中 - 我不确定它是不是。当图像放大和缩小时，比例保持不变。

我是JS的新手，这涉及到很多组件，包括D3和OSD套件，我不知道从哪里开始。任何建议将不胜感激！

作为参考，这里是从数组生成框的代码。这是从单个矩形示例改编而来的，我不知道这是否是一个很好的方法。 （我本来希望盒子内部完全透明，除非将鼠标放在上面，但那是另一个问题...）

var overlay = this.viewer.svgOverlay();
len = nodes.length;
var d3Rect = [];
var url    = [];
for (var i = 0; i < len; i++) {

    var mynode = nodes[i];
    d3Rect[i] = d3.select(overlay.node()).append("rect")
        .style('fill', '#ffffff')
        .style('fill-opacity', '0.05')
        .style('stroke', '#000066')
        .style('stroke-width', '0.0005')
        .style('stroke-opacity', '0.5')
        .attr("x",      mynode.x1)
        .attr("width",  mynode.width)
        .attr("y",      mynode.y1)
        .attr("height", mynode.height)
        .attr("title",  mynode.title)
        .attr("href",  mynode.link);

    overlay.onClick(d3Rect[i].node(), function() {
        window.open(this.element.getAttribute("href"), '_blank');
    });
}

Answer 1

我不是百分百确定，但看起来你正在创建1个未知大小的叠加元素，然后在其中添加所有rects，然后将click事件绑定到顶部叠加而不是单个rects。

在任何情况下，如果您需要的形状是简单的形状，您应该尝试使用   viewer.addOverlay( element, location, placement, onDraw ) link to docs

Answer 2

一种可能性是您遇到了精确问题。视口坐标中图像的尺寸是多少？默认情况下，宽度为1，但这可能会在放大这些SVG元素时导致舍入问题。尝试将图像放宽1000并将所有叠加坐标乘以1000，看看是否有帮助。