Jak sprawdzić punkt przecięcia elementów Svg

Pracuję nad aplikacją internetową, w której użytkownik może tworzyć wiele elementów svg. wszystkie elementy to "ścieżka" (zamknięta ścieżka kwadratowa lub prostokątna). Użytkownik może przesuwać i obracać dowolny element.Jak sprawdzić punkt przecięcia elementów Svg

Teraz chcę alarmować użytkownika, gdy jeden element dotyka lub przecina dowolny inny element.

każda pomoc byłaby doceniona.

dzięki.

oto linke jsfiddle http://jsfiddle.net/nnYSp/

Code jest: -

<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>

Źródło

2013-09-24 RashFlash

Proponuję użyć Raphaela, a następnie użyć kombinacji http://raphaeljs.com/reference.html#Element.getBBox i http://raphaeljs.com/reference.html#Paper.getElementsByPoint, aby napisać logika ... –

dzięki za odpowiedź, nie używam raphael i nie mogę tego użyć, więc muszę znaleźć rozwiązanie z natywną wersją Javascript i Svg. Również BBOX nie działa poprawnie, jeśli element jest obrócony. – RashFlash

Zobacz http://stackoverflow.com/questions/5396657/event-when-two-svg-elements-touch i zauważ, że możesz zastosować transformacje do wyniku bboxa, aby uzyskać "obrócony boks", patrz np. Http://my.opera.com/MacDev_ed/blog/getting-screen-boundingboxes-in-svg. –

Problemem będzie łatwiejsze, jeśli ścieżki są zamknięte kwadraty lub prostokąty.

można przeczytać interfejs DOM svg checkIntersection

logiczna checkIntersection (w elemencie SVGElement w SVGRect rect);

Źródło

2014-10-18 12:10:20 cuixiping

Jak sprawdzić punkt przecięcia elementów Svg

Odpowiedz

Powiązane problemy