Сделать так что бы картинка двигалась по кратчайшей линии. С помощью функции прямой y=kx+b. k=(y1-y2)/(x1-x2) ; b=y1-((y1-y2)x1). JavaScript

239

05 мая 2017, 18:56

      var person = document.getElementById('person'); 
      function start() { 
        var string_start_x = person.style.left; 
        var string_start_y = person.style.top; 
        var start_x = Number(string_start_x.slice(0, string_start_x.length - 2)); 
        var start_y = Number(string_start_y.slice(0, string_start_y.length - 2)); 
        var end_x = Number(document.data.x.value); 
        var end_y = Number(document.data.y.value); 
        var inc_x = (start_x < end_x)? 1: -1; 
        var inc_y = (start_y < end_y)? 1: -1; 
        move(start_x, end_x, inc_x, start_y, end_y, inc_y); 
      } 
   
      function move(x, end_x, inc_x, y, end_y, inc_y) { 
        if ((x == end_x) && (y == end_y)) return; 
        if (x != end_x) x += inc_x; 
        if (y != end_y) y += inc_y; 
        person.style.left = x + "px"; 
        person.style.top = y + "px"; 
        setTimeout(move, 10, x, end_x, inc_x, y, end_y, inc_y); 
      }

      <form name="data"> 
        X: 
        <input type="text" name="x"> 
        <br> 
        Y: 
        <input type="text" name="y"> 
          <br> 
          <input type="button" value="Start" onClick="start()"> 
      </form> 
      <img id="person" style="position: absolute; top:100px; left:500px; border:1px solid red;"    width=200; height=200; src="images/person.jpg">

Каким образом изменить код так, что бы изображение двигалось по кратчайшей прямой, а не сначала по х а потом по у

Answer 1

У тебя есть две точки:

(X1,Y1) - координаты левого верхнего угла картинки
(X2,Y2) - координаты точки, куда картинка должна переместиться

Далее по указанным тобой в вопросе формулам можно вывести функцию, которая по заданной координате x вернет координату y, Например так:

function createFunc(x1,y1,x2,y2){
    var k=(y1-y2)/(x1-x2); 
    var b=y1-(k*x1);
    return function (x){
        return k*x+b;
    }
}

Далее по таймауту меняя координаты x от текущей до заданной - получаем соответствующую координату y и перемещаем картинку в полученную точку.

Важно: данный способ не подходит, если картинку нужно двигать вертикально, так как в этом случае x1==x2 и при расчете k будет получен Infinity

function createFunc(x1, y1, x2, y2) { 
  var k = (y1 - y2) / (x1 - x2); 
  var b = y1 - (k * x1); 
  return function(x) { 
    return k * x + b; 
  } 
} 
var person = document.getElementById('person'); 
 
function start() { 
  var rect = person.getBoundingClientRect(); 
  var x1 = rect.left; 
  var y1 = rect.top; 
  var x2 = Number(document.data.x.value); 
  var y2 = Number(document.data.y.value); 
  var stepCount = 100; 
  var step = (x2 - x1) / stepCount; 
  move(x1, step, x2, createFunc(x1, y1, x2, y2)); 
} 
 
function move(x, step, endX, func) { 
  if (Math.floor(x) == endX) return; 
  if (x != endX) x += step; 
  var y = func(x); 
  person.style.left = Math.floor(x) + "px"; 
  person.style.top = Math.floor(y) + "px"; 
  setTimeout(move, 10, x, step, endX, func); 
}

<form name="data"> 
  X: 
  <input type="text" name="x"> 
  <br> Y: 
  <input type="text" name="y"> 
  <br> 
  <input type="button" value="Start" onclick="start()"> 
</form> 
<img id="person" style="position: absolute; top:100px; left:500px; border:1px solid red;" width=200; height=200; src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200%C3%97200&w=200&h=200">

Answer 2

Чтобы картинка ехала под углом, вам нужно задать коэффицент либо для inc_x либо для inc_y, примерно так можно -

var dx = end_x - start_x;
var dy = end_y - start_y;
if(dx > dy) inc_y *= dy/dx;
else  inc_x *= dx/dy;

Answer 3

~function() { 
  var img = document.querySelector('img'); 
  var left = 500, top = 100; 
  var form = document.forms.data; 
  var SPEED = 128; /* px per second */ 
 
  document.getElementById('go').addEventListener('click', function (event) { 
    var x = +form.x.value, y = +form.y.value; 
    var dist = Math.sqrt((left-x)*(left-x) + (top-y)*(top-y)); 
     
    img.style.transform = 'translate('+x+'px,'+y+'px)'; 
    img.style.transitionDuration = dist / SPEED + 's'; 
     
    left = x, top = y; 
  }) 
}()

form { 
  position: relative; 
  z-index: 1; 
} 
 
label { 
  display: block; 
  margin-bottom: .5em; 
} 
 
img { 
  position: absolute; 
  top: 0; 
  left: 0; 
  border: 1px solid red; 
  transform: translate(500px, 100px); 
  transition: transform 1s linear; 
}

<form name="data"> 
  <label>X: <input type="text" name="x"></label> 
  <label>Y: <input type="text" name="y"></label> 
  <input id="go" type="button" value="Start"> <!-- TODO: use submit --> 
</form> 
<img width=200 height=200 src="//www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=200&d=identicon&r=PG">