4

Tenho dois objetos circle, que consigo mover com o rato. Queria uma linha entre os dois círculos, que sempre que move se um, a linha esteja sempre colada.

O codigo que tenho para mover os objetos:

var dragged = null; //L'élément en cours de drag

function start_drag(objet,event)
{
  dragged = objet;

  if( event.preventDefault ) event.preventDefault();
}

function drag_onmousemove(event)  //Lorsque la souris se déplace
{
  if( dragged ) 
  {
    x = event.clientX;
    y = event.clientY;
    elementHeight = dragged.clientHeight; //hauteur du obj
    elementWidth = dragged.clientWidth;
    dragged.style.position = 'absolute';
    dragged.style.left = x - elementWidth/2 + 'px'; //divise longueur par 2 pour le milieu
    dragged.style.top = y - elementHeight/2 + 'px';


  }
}

function drag_onmouseup(event)  
{
  dragged = null; 

}

function addEvent(obj,event,fct)
{
  if( obj.attachEvent)
    obj.attachEvent('on' + event,fct);
  else
    obj.addEventListener(event,fct,true);
}

addEvent(document,'mousemove',drag_onmousemove);
addEvent(document,'mouseup',drag_onmouseup);	
<div id="divcircle" onmousedown="start_drag(document.getElementById('divcircle'), event);" style="position:absolute; height:50px; width:50px;"> 
  <svg id="svg">
    <circle cx="50" cy="50" r="5" stroke="black" stroke-width="3" fill="green" />
  </svg>	
</div>
<div id="divcircle2" onmousedown="start_drag(document.getElementById('divcircle2'), event);" style="position:absolute; height:50px; width:50px;"> 
  <svg id="svg">
    <circle cx="40" cy="40" r="5" stroke="black" stroke-width="3" fill="green" />
  </svg>	
</div>

1 Resposta 1

8

Considerando a sintaxe da linha:

<line x1="20" y1="100" x2="200" y2="220" stroke="black" stroke-width="2"/>

O que você precisa fazer é animar a propriedade desejada. No seu caso, vai ter que fazer com que um dos pares, ou x1 e y1, ou x2 e y2 fiquem com o mesmo valor do círculo movido.


Exemplo prático de uso:

Tomei por base a técnica de drag'n'drop encontrada neste link, que é mais estável que a sua, e adaptei acrescentando a parte que liga os elementos:

var selectedElement = 0;
var selectedLine = 0;
var selectedLineX = 0;
var currentX = 0;
var currentY = 0;
var currentMatrix = 0;

function selectElement(evt,lin,linx) {
  selectedElement = evt.target;
  selectedLine = document.getElementById( lin );
  selectedLineX = linx;
  currentX = evt.clientX;
  currentY = evt.clientY;
  currentMatrix = selectedElement.getAttributeNS(null, "transform").slice(7,-1).split(' ');
  for(var i=0; i<currentMatrix.length; i++) {
    currentMatrix[i] = parseFloat(currentMatrix[i]);
  }
  selectedElement.parentNode.setAttributeNS(null, "onmousemove", "moveElement(evt)");
  selectedElement.setAttributeNS(null, "onmouseup", "deselectElement(evt)");
}


function moveElement(evt){
  dx = evt.clientX - currentX;
  dy = evt.clientY - currentY;
  currentMatrix[4] += dx;
  currentMatrix[5] += dy;
  newMatrix = "matrix(" + currentMatrix.join(' ') + ")";
  selectedElement.setAttributeNS(null, "transform", newMatrix);
  currentX = evt.clientX;
  currentY = evt.clientY;
  if ( selectedLineX == 1 ) {
    selectedLine.x1.baseVal.value = selectedElement.cx.baseVal.value + currentMatrix[4];
    selectedLine.y1.baseVal.value = selectedElement.cy.baseVal.value + currentMatrix[5];
  } else {
    selectedLine.x2.baseVal.value = selectedElement.cx.baseVal.value + currentMatrix[4];
    selectedLine.y2.baseVal.value = selectedElement.cy.baseVal.value + currentMatrix[5];
  }
}

function deselectElement(evt){
  if(selectedElement != 0){
    selectedElement.parentNode.removeAttributeNS(null, "onmousemove");
    selectedElement.removeAttributeNS(null, "onmouseup");
    selectedElement = 0;
  }
}
body,html,#dd,#svg1{padding:0;margin:0;width:100%;height:100%}
circle {cursor:move}
<div id="dd">
  <svg id="svg1">
    <line id="l1-2" x1="80" y1="80" x2="40" y2="40" stroke="black" stroke-width="2"/>
    <circle
       cx="80" cy="80" r="5" stroke="black" stroke-width="3" fill="green"
       transform="matrix(1 0 0 1 0 0)" onmousedown="selectElement(evt,'l1-2',1);"
    />
    <circle
       cx="40" cy="40" r="5" stroke="black" stroke-width="3" fill="green"
       transform="matrix(1 0 0 1 0 0)" onmousedown="selectElement(evt,'l1-2',2);"
    />
    <line id="l3-4" x1="80" y1="40" x2="40" y2="80" stroke="black" stroke-width="2"/>
    <circle
       cx="80" cy="40" r="5" stroke="black" stroke-width="3" fill="red"
       transform="matrix(1 0 0 1 0 0)" onmousedown="selectElement(evt,'l3-4',1);"
    />
    <circle
       cx="40" cy="80" r="5" stroke="black" stroke-width="3" fill="red"
       transform="matrix(1 0 0 1 0 0)" onmousedown="selectElement(evt,'l3-4',2);"
    />
  </svg>	
</div>

Os parâmetros da função: selectElement(evt, 'ID DA LINHA', ponta_desejada_1_ou_2 );

12
  • Obrigado, e como posso guardar a posiçao dos dois circulos?
    – akm
    Commented 17/11/2014 às 16:58
  • @akm pode pegar no atributo ELEMENTO.cx.baseVal.value e cy do circulo desejado.
    – Largato
    Commented 17/11/2014 às 17:02
  • utilizei por exemplo circle1.cx.baseVal.value, e da a posição inicial, o que pretendo é a posição sempre que o objecto de muda.
    – akm
    Commented 19/11/2014 às 23:36
  • @akm pegue da ponta da linha em vez de pegar do circle selectedLine.y2.baseVal.value
    – Largato
    Commented 20/11/2014 às 19:43
  • E caso queira adicionar mais elementos, é so adicionar os circulos svg, e selectedLine.x3 assim sucessivamente?
    – akm
    Commented 20/11/2014 às 21:50

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .