openseadragon svg 覆盖 - 可点击区域太大答案

【问题标题】：openseadragon svg overlay - clickable area is too largeopenseadragon svg 覆盖 - 可点击区域太大
【发布时间】：2016-08-19 08:07:07
【问题描述】：

我正在处理一个带有覆盖（覆盖数组？）的 OpenSeaDragon 图像，该图像具有大约 500 个可点击的 svg 矩形元素，使用 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');
    });
}

【问题讨论】：

你有没有在你可以链接的地方运行它？这将有助于调试它。
是的，请参阅hebegb.homeunix.net/t2/view-isp-tool.html - 不幸的是，我不能将它永久留在这个位置，但它会持续一个月左右。一旦我们解决了问题，它最终将在thespaceplan.com 上提供。这当然是修改过的 html、修改过的 css 和修改过的 js。我已经远离这方面的事情很长时间了，我从各种各样的例子开始。 :P
它实际上对我来说看起来很不错……有些黄色矩形有点偏离，但这可能只是数据问题。这是否意味着你已经解决了？
很遗憾没有。正如您所指出的，可见的矩形（大部分）是正确的。但是，如果您单击任何矩形，它可能会或可能不会起作用。例如，如果您单击 Robotic Exploration 下的第一个元素“Near Earth Asteroid Rendezvous”，它将在另一个窗口/选项卡中正确打开一个页面，其中显示有关该主题的数据。但是如果你点击下一个框，“月球勘探者”，你会放大——你不会得到相关的页面。如果您在“近地小行星会合点”上“检查元素”，则蓝色可点击区域会覆盖这些框和其他框的一部分。
我明白了！是的，这绝对看起来像是一个四舍五入的问题。如果我更改 SVG 对象的坐标，圆角矩形会移动，但元素的单击框不会移动。您应该按照我在下面的建议进行操作，并将所有内容乘以 1000 左右；这应该会照顾好它。

标签： d3.js svg openseadragon

【解决方案1】：

我不能 100% 确定，但看起来您正在创建 1 个未知大小的叠加元素，然后在其中添加所有矩形，然后将点击事件绑定到顶部叠加层而不是单个矩形。

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

【讨论】：

@user2757511 正在使用github.com/openseadragon/svg-overlay 并且overlay.onClick 是绑定到各个矩形的正确方法......不过可以检查一下！至于使用常规 HTML 覆盖而不是 svg-overlay 插件，如果 SVG 覆盖不能正常运行，那绝对值得尝试。我唯一担心的是 500 个 HTML 叠加层可能比 SVG 慢。
SVG 覆盖相当快 - 我最近为侧面的元素添加了另一组，我想这是我第一次注意到任何实际延迟的时候。大部分的启动时间当然是引入所有的磁贴。我希望在鼠标悬停时以某种形式突出显示每个框，作为“标题”方法的补充或替代，显示框的实际位置。但就目前而言，这是一个未来的练习。 :) 可能是 svg-overlay 中的一个附加方法，比如 onClick()？
我要补充一点，我曾考虑过另一种方法，即在整个事物上覆盖一个覆盖层，并创建一个在鼠标下方出现的单个框，只要它位于适当的位置，而不是提前定义所有的框。如果这行得通，我不知道足够多的 javascript，更不用说如何去做或者这是否是一个好主意。
如果您想要的只是悬停突出显示，只需将单个叠加层移动到悬停位置即可；这就是我对iangilman.com/osd/test/demo/m2 所做的事情……您可以在此处查看该演示的代码：github.com/openseadragon/openseadragon/blob/master/test/demo/m2/… 另一方面，如果您甚至不想这样做，但只需要处理所有不同位置的点击，您甚至不需要覆盖。只需处理画布上的点击，然后自己计算一下点击的位置。
悬停覆盖和计算出的点击位置可能是解决方案，如果我能弄清楚如何使其工作。它与您的示例不完全相同，但我会检查一下。我的输入数据具有 X 和 Y 范围以及宽度和高度，并且我的原始数据中有原始像素坐标。因此，如果我能弄清楚的话，我确实有必要的数据（并且没有出现针对所述问题的简单解决方案）。奖励 - 当你进入时，我们最终会真正放大，其他数据消失，更详细的框进入视图>_>！不过，这完全是另一个项目。

【解决方案2】：

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

【讨论】：

我也是这么想的。我相信默认情况仍然如此 - 宽度为 1，长度更多 - 1.4 左右（纵横比为 30x48）。在控制台中，我正在记录鼠标位置，它似乎与绘制的框完全一致。框（圆角等）被传递到视口坐标中的叠加层（x in {0, 1} BTW - 我使框轮廓显示为黄色以提高可见度。
您有机会尝试建议的修复方法吗？运气好吗？
我分叉了 svgoverlay 并使用图像坐标而不是视口坐标。看看有没有帮助：github.com/leesei/openseadragon-svg/blob/master/openseadragon/….
我回到了马鞍上 - 我度过了比预期更长的假期。我可以缩放源 svg 中的数字，但我不知道如何将宽度设置为 1 以外的值。（顺便说一句 - 图像是 3000x4800。）我正在搜索代码和文档，但认为它会是值得在此期间发布。
重新分叉版本。我必须将 onClick 函数添加到您的分叉代码中，并且 viewport.dimension.x 和 y 为空，所以我替换了图像尺寸 - 1200 和 1920。通过这两个更改，我得到了一些小框，但它们的位置和大小似乎在两个方向上的比例都小于 1/2。整个 svg 层的大小是正确的。再一次，仍然环顾四周，看看我是否能解决这个问题。