Come controllare l'intersezione degli elementi Svg

Sto lavorando a un'applicazione basata sul Web in cui l'utente può creare più elementi svg. tutti gli elementi sono 'percorso' (percorso chiuso o quadrato o rettangolo). L'utente può spostare e ruotare qualsiasi elemento.Come controllare l'intersezione degli elementi Svg

Ora voglio allarmare l'utente quando un elemento tocca o interseca qualsiasi altro elemento.

qualsiasi aiuto sarebbe apprezzato.

grazie.

Ecco l'linke jsfiddle http://jsfiddle.net/nnYSp/

Codice è: -

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

fonte

2013-09-24 RashFlash

Ti suggerisco di usare raphael e quindi puoi utilizzare una combinazione di http://raphaeljs.com/reference.html#Element.getBBox e http://raphaeljs.com/reference.html#Paper.getElementsByPoint per scrivere il tuo logica ... –

grazie per la risposta, io non sto usando raphael e non posso usarlo, quindi ho bisogno di trovare una soluzione con Javascript nativo e Svg. Anche BBOX non funziona correttamente se l'elemento viene ruotato. – RashFlash

Vedere http://stackoverflow.com/questions/5396657/event-when-two-svg-elements-touch e notare che è possibile applicare le trasformazioni al risultato bbox per ottenere il "bbox ruotato", vedere ad esempio http://my.opera.com/MacDev_ed/blog/getting-screen-boundingboxes-in-svg. –

Il problema sarà più facile se i percorsi sono chiusi quadrati o rettangoli.

si può leggere la svg interfaccia dom checkIntersection

booleano checkIntersection (in elemento SVGElement, in SVGRect rect);

fonte

2014-10-18 12:10:20 cuixiping

Come controllare l'intersezione degli elementi Svg

risposta

Problemi correlati