Unire due elementi con una linea

**Licina94** · 09-03-2017, 13:47

Buongiorno a tutti .. sono nuova del forum e avrei bisogno del vostro aiuto.
Vorrei unire due forme.
Mi spiego meglio: ho diverse forme che ho fatto con Snap.svg (a-b-c-d-e-f-g e cosi via...) vorrei che al click di a e b apparisse una linea tra i due e successivamente, cliccando c dovrebbe generarsi una linea tra b e c, ma non riesco proprio a farlo.
Purtroppo non sono ancora molto brava e questa cosa mi serve per un esame universitario, perciò devo farla per forza.
Ho provato ad usare le coordinate delle varie forme per creare delle linee ma masticando poco Javascript e Jquery, i risultati non sono stati soddisfacenti.

P.S. siccome non sono molto brava, qualsiasi suggerimento siate così gentili da darmi, dovrebbe essere il più semplice possibile, così da permettermi anche di capirlo bene.

Grazie in anticipo a tutti.

**U235** · 09-03-2017, 15:56

Ciao Licina94,
utilizzando un canvas per far apparire una linea in realtà ti basta una cosa del genere:

codice:

<!DOCTYPE HTML>
<html>
<head>
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var ultimoPunto = { x: null, y: null };
      canvas.onclick = function (evt) {
          //si recupera la distanza dall'angolo in alto a sinistra (0) del canvas
          var rect = canvas.getBoundingClientRect();
          //si imposta un punto ottenuto dalla differenza tra il click sul client (tutta l'area che vedi) e la posizione del canvas
          //in pratica il click avviene in un punto x-y relativo a tutto il client (a tutta la pagina diciamo),
          //quindi per "trasportare" le coordinate relative solo al canvas (e non a tutta la pagina) devi considerare la posizione di quest'ultimo
          //se ad esempio il click avviene a x=20 e y=20, questo parte dal margine in alto a sinistra della pagina e si sposterà di 20 verso destra e di 20 dall'alto
          //ma se il canvas a sua volta parte da x=10 e y=10, allora viene da se che la tua linea deve partire da x=10 e y=10 (relativo al canvas) e non da zero come da coordinate
          //ricvate dal click (che sarebbero da x=0;y=0 a x=20;y=20, quando invece a te interessa che sia da x=10;y=10, ovvero dall'inizio del canvas)
          var punto = {
              x: evt.clientX - rect.left,
              y: evt.clientY - rect.top
          };
          //disegno una linea tra l'ultimo punto rilevato (ultimo click) e il nuovo punto
          if (ultimoPunto.x && ultimoPunto.y) {
              context.beginPath();
              context.moveTo(ultimoPunto.x, ultimoPunto.y);
              context.lineTo(punto.x, punto.y);
              context.stroke();              
          }
          //imposto questo punto come ultimo
          ultimoPunto = punto;
      };
    </script>
</body>

**Licina94** · 10-03-2017, 15:38

Grazie dell'aiuto.
Siccome mi serviva in svg, ho provato ad adattare il codice:

codice:

<!DOCTYPE html>
<html>
  <head>
     <title></title>
     <meta name="viewport" content="width=device-width">
     <meta charset="UTF-8">
  </head>
  <body>
    <div id="container">
    

      <div id="gioco">
        <svg id='unisci' width='430' height='800'></svg>
      </div>
    
        
    </div>
    
    
    
    <script src="jquery-3.1.1.min.js"></script>
    <script src="snap.svg-min.js"></script>
    <script>

    var s = Snap('#unisci');
    
    var c1 = s.circle(150, 150, 10),
        c2 = s.circle(50, 10, 10),
        c3 = s.circle(10, 60, 10),
        c4 = s.circle(100, 30, 10),
        
        g = s.paper.g(c1, c2, c3, c4);

    
    var ultimoPunto = { x: null, y: null };
      s.mousedown(function(e){
         
          var rect = s.getBBox();
         
         
          var punto = {
              x: e.clientX - rect.x,
              y: e.clientY - rect.y
          }; 
          
          if (ultimoPunto.x && ultimoPunto.y) {
              var line = s.paper.line(ultimoPunto.x, ultimoPunto.y, punto.x, punto.y);
              line.attr({
 stroke:"#ff0000",
 strokeWidth:6 
});
          }

          ultimoPunto = punto;
      }); 
    
    
    </script>
  </body>
</html>

Adesso il problema è che le linee non vengono esattamente dove clicco, credo che il problema sia la variabile "rect".
Inoltre avrei bisogno che al click, prima di un cerchio e poi dell'altro, in successione, apparissero le linee a collegarli.
Ho provato a sostituire al mousedown l'intero spazio svg con i cerchi ma non sono riuscita ad ottenere quello che volevo, sicuramente perchè ho sbagliato qualche passaggio.

C'è un modo per farlo?

Grazie in anticipo

Discussione: Unire due elementi con una linea

Strumenti discussione

Ricerca discussione

Visualizza

Unire due elementi con una linea

Permessi di invio