0

我使用 OpenSeaDragon (OSD) 2.3.1 和 D3v4 在图像上绘制点。当用户单击图像时会绘制这些点。

问题是如何使那些 d3 对象在 OSD 中可拖动。

问题在于 OSD 必须处理所有鼠标活动才能与图像查看器交互。

目前我用于捕获事件的鼠标处理程序是

var click_handler= function(event) {        
    if(event.quick){
        drawMarker(...); //this works fine     
    }else{            
        ...
    }
};

然后我使用 OSD MouseTracker 设置处理程序

var fixed_mouse_tracker = new OpenSeadragon.MouseTracker({
    element: OSDviewer.canvas,
    clickHandler: click_handler
}).setTracking(true);

如果我不需要拖动元素，这可以正常工作。因为现在所有的点击都将由 OSD 处理，而 D3 对象不知道它们正在被点击。我尝试使用

d3.select("elementclass").on('mouseup', function(){console.log(d3.mouse(this)[0], d3.mouse(this)[1])});

但它不起作用。

另一种可能性是使用 OSD 的 event.originalEvent。而且我需要知道如何捕获this指向被点击的 d3 元素的指针。

我找到了这个 D3 的例子，但我不知道如何应用它

4

1 回答 1

2

我没有尝试做这样的事情，但我想如果您允许 OSD 进行事件跟踪而不尝试使用 D3 的事件跟踪，它会更好地工作。看看 SVG 覆盖插件onClick，它看起来只是 MouseTracker 的一个薄包装，所以你可以像这样绕过它：

function addTracking(node) {
  new $.MouseTracker({
    element: node,
    dragHandler: function(event) {
      var viewportDelta = viewer.viewport.deltaPointsFromPixels(event.delta);
      // Move node by viewportDelta
    }
  }).setTracking(true);
}

d3.selectAll(".aClass").each(function() {
  addTracking(this); 
});

这个问题也在https://github.com/openseadragon/openseadragon/issues/1425中讨论

于 2018-03-23T16:30:48.743 回答