Question

我使用OpenSeaDragon（OSD）2.3.1和D3v4在图像顶部绘制点。当用户点击图像时会绘制这些点。

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

问题出现在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。我需要知道如何捕获指向被点击的d3元素的this指针。

我找到this exmaple of D3但我不知道如何应用它

Answer 1

我没有尝试做过这样的事情，但我想如果你允许OSD进行事件跟踪并且不尝试使用D3的事件跟踪，它会更好。看看SVG overlay插件的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

中也讨论了这个问题

带有D3 svg覆盖可拖动元素的OpenSeaDragon

1 个答案: