如何檢查Svg元素的交集

我正在開發基於Web的應用程序，用戶可以在其中創建多個svg元素。所有元素都是'路徑'（封閉路徑爲方形或矩形）。用戶可以移動和旋轉任何元素。如何檢查Svg元素的交集

現在我想警告用戶，當一個元素接觸或相交任何其他元素。

任何幫助，將不勝感激。

謝謝。

這裏是的jsfiddle臨客 http://jsfiddle.net/nnYSp/

代碼爲： - 如果你的路徑閉合正方形或長方形

<body> 
     <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="500"> 
       <path id="obj1" d="M 100 50 L 150 50 150 120 100 120 z" stroke="black" stroke-width="2" fill="yellow" move transform="translate(10,0) rotate(45,125,85)"/> 

     <path id="obj2" d="M 150 150 L 200 150 200 200 150 200 z" stroke="red" stroke-width="2" fill="black" move transform="translate(10,0)"/> 

     </svg> 

     <script type="text/javascript"> 
      document.addEventListener('mousedown', mousedown, false); 
      document.addEventListener('mousemove', mousemove, false); 
      document.addEventListener('mouseup', mouseup, false); 

      var obj1_rotate_string="rotate(45,125,85)"; 
      var obj1_translate_values={ 
       x:10, 
       y:0 
      } 

      var obj2_rotate_string=""; 
      var obj2_translate_values={ 
       x:10, 
       y:0 
      } 

      var mousedownFlag=false; 
      var mousedown={ 
       x:0, 
       y:0 
      } 

      var targetObj={ 
       t:null, 
       r:null, 
       obj:null 
      }; 

      function mousedown(event){ 
       if(event.target.hasAttribute('move')){ 
        mousedownFlag=true; 
        mousedown.x=event.pageX; 
        mousedown.y=event.pageY; 
        var Obj=event.target.id;     
        if(Obj==='obj1'){       
         targetObj.obj='obj1' 
        } 
        else{       
         targetObj.obj='obj2' 
        } 


       } 

      } 

      function mousemove(event){ 
       if(mousedownFlag){ 
        var dx=event.pageX-mousedown.x; 
        var dy=event.pageY-mousedown.y; 

        if(targetObj.obj==='obj1'){ 
         obj1_translate_values.x+=dx; 
         obj1_translate_values.y+=dy; 
         var obj=document.getElementById(targetObj.obj); 
         obj.setAttribute('transform', 'translate('+ obj1_translate_values.x+','+ obj1_translate_values.y+')'+ obj1_rotate_string); 

        } 
        else if(targetObj.obj==='obj2'){ 
         obj2_translate_values.x+=dx; 
         obj2_translate_values.y+=dy; 
         var obj=document.getElementById(targetObj.obj); 
         obj.setAttribute('transform', 'translate('+ obj2_translate_values.x+','+ obj2_translate_values.y+')'+ obj2_rotate_string); 

        } 

        mousedown.x=event.pageX; 
        mousedown.y=event.pageY; 
       } 
      } 

      function mouseup(event){ 
       mousedownFlag=false; 

      } 
     </script> 

    </body>

來源

2013-09-24 RashFlash

我建議你使用raphael，然後你可以使用http://raphaeljs.com/reference.html#Element.getBBox和http://raphaeljs.com/reference.html#Paper.getElementsByPoint的組合來編寫你的邏輯... –

感謝您的答覆，我不使用拉斐爾，我不能使用它，所以我需要找到與本機JavaScript和Svg的解決方案。如果元素旋轉，BBOX也無法正常工作。 – RashFlash

請參閱http://stackoverflow.com/questions/5396657/event-when-two-svg-elements-touch，並且請注意，您可以將轉換應用於bbox結果以獲取「旋轉的bbox」，請參閱http：/ /my.opera.com/MacDev_ed/blog/getting-screen-boundingboxes-in-svg。 –

的問題會比較容易。

可以讀取SVG DOM接口checkIntersection

布爾checkIntersection（在SVGElement元件，在SVGRect RECT）;

來源

2014-10-18 12:10:20 cuixiping

如何檢查Svg元素的交集

回答

相關問題