Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Соединить прямой линией два элемента на javascript или Jquery (https://javascript.ru/forum/misc/61023-soedinit-pryamojj-liniejj-dva-ehlementa-na-javascript-ili-jquery.html)

shureg 01.02.2016 08:56

Соединить прямой линией два элемента на javascript или Jquery
 
Доброго времени суток, требуется помощь, подскажите в какую сторону мне смотреть?
Необходимо соединить прямой линией два элемента, причем положение двух элементов всегда при загрузке выбирается случайным, но больше не меняется.
желательно, чтобы все работало на чистом javascript или jquery, без всяких svg, canvas и тд

Ниже пример, как это должно выглядеть

рони 01.02.2016 09:31

shureg,
вычислить угол и расcтояние и нарисовать линию с этими параметрами
<style type="text/css">
   div{
     position: absolute;
       width: 100px;
       height: 100px;
       border: 2px solid #0000FF;
   }
  div:nth-child(2) {
   top: 150px;
   left: 100px;
}
   hr{
      width: 1px;
      height: 180px;
      position: absolute;
      top: 30px;
      left: 110px;
      background-color: #228B22;
      transform: rotate(148deg);
   }

  </style>
<div class="item">1</div>
<div class="item">2</div>
<hr>

shureg 01.02.2016 11:00

не совсем, то что мне нужно, тут голый стиль, а мне бы функцию, которая рисует линии, чтото вроде указываешь X,Y откуда начать рисовать и X,Y - где закончить

рони 01.02.2016 11:20

Цитата:

Сообщение от shureg
не совсем, то что мне нужно,

как раз то что нужно
Цитата:

Сообщение от рони
вычислить угол и расcтояние и нарисовать линию с этими параметрами

вам осталось написать эту функцию или воспользоваться D3.js

shureg 01.02.2016 18:03

Цитата:

Сообщение от рони (Сообщение 405855)
Вам осталось написать эту функцию

ну да сказать легко всего лишь написать функцию....
Но если подумать, там же капец какая тригонометрия получается :(
Можно как то проще? d3.js не подходит, так как там canvas

laimas 01.02.2016 18:08

Цитата:

Сообщение от shureg
Но если подумать, там же капец какая тригонометрия получается

Да куда уж там )

http://matematikalegko.ru/formuli/te...-pifagora.html

shureg 01.02.2016 19:34

Цитата:

Сообщение от laimas (Сообщение 405935)

Дружище :) спасибо конечно, только я в школе этого нечего не понимал, а ты мне это преподносишь еще 15 лет спустя, как я отучился? :lol:
Математика, геометрия, синусы - хуинусы не для меня
:help:

laimas 01.02.2016 20:52

Ничего не поделаешь, придется вспомнить про Пифагоровы штаны.
Расстояние между центрами прямоугольников, а судя по просьбе оно задается, это катеты, а по ним даже без тригонометрии можно узнать гипотенузу, длину линии соединения. Известны три стороны прямоугольника, остается найти угол, формулы перед вами, рисунок поясняющий тоже. Вся тригонометрия в JS, это Math.

shureg 01.02.2016 21:01

Цитата:

Сообщение от laimas (Сообщение 405958)
Ничего не поделаешь, придется вспомнить про Пифагоровы штаны.
Расстояние между центрами прямоугольников, а судя по просьбе оно задается, это катеты, а по ним даже без тригонометрии можно узнать гипотенузу, длину линии соединения. Известны три стороны прямоугольника, остается найти угол, формулы перед вами, рисунок поясняющий тоже. Вся тригонометрия в JS, это Math.

Так мне известны только 2 точки, а не три! как я треугольник найду?

destus 01.02.2016 21:04

Цитата:

Сообщение от shureg (Сообщение 405960)
Так мне известны только 2 точки, а не три! как я треугольник найду?

http://ru.onlinemschool.com/math/lib..._point_length/


Часовой пояс GMT +3, время: 08:39.