D3JS或SNAPSVG拖放仅限于已加载的svg形状区域

Question

任何人都可以获得使用D3JS或SNAPSVG将拖动对象捕捉到加载的SVG范围内的示例或指针。

因此，例如，如果我想在导入的Adobe Illustrator svg填充形状周围拖动圆，该形状比矩形要复杂得多（例如，德克萨斯州）。

我的估计工作流程是：

• usa.svg的加载图
• 在usa.svg顶部加载texas.svg覆盖
• 用户单击texas.svg中的任意位置，将出现一个冰柱，然后可以拖动它，但只能在texas.svg路径的范围内。

谢谢

d

Answer 1

根据所需的整体解决方案，您可以在一个SVG元素上放置一个处理程序，以便仅触发或检查该处理程序以查看其是否是正确的目标。

因此，您可以在单击状态时选择一个状态，然后将处理程序置于状态而不是圆形上（可以使用指针事件禁用此功能：无）。

因此，您在“拖动”状态，但在移动圆圈。 为此，我们编写了自己的自定义处理程序。

这不是一个完整的解决方案，它需要进行一些进一步的边缘案例测试，例如拖动到新状态或不拖动/单击地图之外。 它只是通过使用事件本身来限制其拖动的一种可能方式。

jsfiddle

Snap.load( "https://upload.wikimedia.org/wikipedia/commons/3/32/Blank_US_Map.svg", onSVGLoaded )

function onSVGLoaded( frag ) {
  s.append( frag );
  s.click( addCircle )
}

function addCircle(ev, x, y) {
  var t = Snap(ev.target)
  if(( t.data('dragEl') == undefined ) && ( dragging == false ) ) { // We only want one circle on a state
    var c = s.circle( x-10, y-10, 10)
             .attr({ style: 'pointer-events: none; opacity: 0.5' });  
    t.drag( dragMove, dragStart, dragStop ).data('dragEl', c)
  }
}

function dragStart( x, y, ev ) {
  this.data('targetState', ev.target.id );
}

function dragMove(dx,dy,x,y,ev) {
  if( ev.target.id != this.data('targetState')) { return }    // Check the event isn't coming from a different state
  this.data('dragEl').attr({ cx: x-10, cy: y-10 })
  dragging = true;
}

function dragStop() {  // prevent dragend causing new click
  setTimeout( function(){ dragging = false; }, 300);
}