How to move element in a straight line towards the coordinate?

Question

How to move element in a straight line towards the coordinate?

Navigation

#1 by (2 votes)

2

I can move an element in the direction of the coordinate successfully. However, for what I need, it needs to move in a straight line (which is the shortest possible distance between two points).

In the example I gave below (which represents the current functionality of my code with fidelity), it moves all the difference in one coordinate, then the other. Although it works, it's still not what I need.

How can I adjust my algorithm so that the #viajante div moves in a straight line towards coordenadasAlvo ?

var viajante = {};
var parametros = {
  coordenadasAlvo : { x : 50, y : 200 },
  tempoSetInterval : 100,
  velocidadeViajante : 1 // pixels por tempoSetInterval (milissec)
};

$(document).ready(function (){
  inicializaDrawer();
  setInterval(moveViajante, parametros.tempoSetInterval);
});


function inicializaDrawer(){
  viajante = $('<div id="viajante"></div>');
  $('#drawer-wrapper').append(viajante);
}

function getDeslocamentoViajante(startCoord, targetCoord, speed){
  var diff = startCoord - targetCoord;		
  return diff > 0 ? -speed : speed;
}

function getPosicaoViajante(){	
  var left = viajante.position().left;
  var top = viajante.position().top;
  return { x : left, y : top };
}

function moveViajante(){
    var entityPos = getPosicaoViajante();
    var diffX = getDeslocamentoViajante(entityPos.x, parametros.coordenadasAlvo.x, parametros.velocidadeViajante);
    var diffY = getDeslocamentoViajante(entityPos.y, parametros.coordenadasAlvo.y, parametros.velocidadeViajante);
    var newX = entityPos.x + diffX;
    var newY = entityPos.y + diffY;
    viajante.css({top: newY, left: newX, position:'absolute'});
}

#drawer-wrapper{
  height: 300px;
  width: 300px;
  overflow: auto;
  border: 1px solid black;
  position: relative;
}

#drawer{
  height: 300px;
  width: 300px;
  background-color: green;
}

#viajante{
  width: 20px;
  height: 20px;
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="drawer-wrapper">
	<div id="drawer">
	</div>
</div>

javascript html jquery

asked by anonymous 10.07.2018 / 20:04

1 answer

Show hide content when clicked on a specific id way to give echo type laravel

score 2 · Accepted Answer

Thinking of the formula of speed velocidade = distância x tempo we can conclude that the increment of X must be: incrX = dY / dX.

That is: vX = distX x tempoX and vY = distY x tempoY . Since both coordinates should take the same time we have: vX/distX = vY/distY . If we give the value of 1 to one of them we can calculate the other from this formula.

In practice it would be:

var viajante = {};
var coordenadasAlvo = {
  x: 50,
  y: 200
};

$(document).ready(function() {
  inicializaDrawer();
  setInterval(moveViajante, 10);
});


function inicializaDrawer() {
  viajante = $('<div id="viajante"></div>');
  $('#drawer-wrapper').append(viajante);
}

function getPosicaoViajante() {
  var left = viajante.position().left;
  var top = viajante.position().top;
  return {
    x: left,
    y: top
  };
}

function moveViajante() {
  var entityPos = getPosicaoViajante();
  var diffX = coordenadasAlvo.x - entityPos.x;
  var diffY = (coordenadasAlvo.y - entityPos.y) / (coordenadasAlvo.x - entityPos.x);
  var newX = entityPos.x + Math.sign(diffX);
  var newY = entityPos.y + diffY * Math.sign(diffX);
  viajante.css({
    top: newY,
    left: newX,
    position: 'absolute'
  });
}

#drawer-wrapper {
  height: 300px;
  width: 300px;
  overflow: auto;
  border: 1px solid black;
  position: relative;
}

#drawer {
  height: 300px;
  width: 300px;
  background-color: green;
}

#viajante {
  width: 20px;
  height: 20px;
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="drawer-wrapper">
  <div id="drawer">
  </div>
</div>