Как определить координаты
Добрый день, есть рисунок:
Как можно для стрелочки obj1 определить начало, чтобы оно было таким: x1;(y2-y1)/2 и конец:x2;(y3-y4)/2 чтобы эти полученные координаты передать уже в svg для рисования линии. Да, прямоугольники задаются не статически, а могут создавать динамически. То есть вся суть стоит именно в определении координат двух динамических блоков |
y1,y2,y3,y4,x1,x2 от края рабочей области в браузере.
|
|
Подвопрос тогда:
прямоугольникам,которые создаются динамически,лучше присваивать абсолютное позиционирование или какое? |
Начинающий-Js-кодер,
на этот вопрос правильного ответа нет. зависит от ситуации и целей использования этих прямоугольников |
Их нужно разместить на некотором пространстве, чтобы они располагались не друг за другом, а свободно. то есть один в левом угле, второй в правом,третий посередине,четвертый еще где-то.
|
Начинающий-Js-кодер,
тогда ,понятное дело, абсолютно позиционировать |
А как лучше поступить:сделать с абсютным позиционированием сначала блоки сами, а потом уже с абсолютным позиционированием стрелочки,задавая им свою длину то есть в HTML это будет так:
<div>Block1</div> <div>Block2</div> <div>Block3</div> <div>Block...</div> <div>BlockN</div> <line/> <line/> <line/> <line/> Или сначала блок,а потом линия за ним сразу,то есть вот так: <div>Block1</div><line/> <div>BlockN</div><line/> Как лучше? |
Начинающий-Js-кодер,
Соединить прямой линией два элемента на javascript или Jquery |
connectionItem соединить блоки линией
Начинающий-Js-кодер,
<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> body{ position: relative; height: 700px; } hr.connection{ position: absolute; width: 500px; height: 1px; background-color: #FF0000; padding: 0; margin: 0; z-index: 2; } .one { background-color: #FFD700; position: absolute; width: 150px; height: 50px; border-radius: 8px; border: 4px solid #8B4513; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> (function($) { $.fn.connectionItem = function(options) { var defaults = { to: $(window) }; var settings = $.extend({}, defaults, options); return this.each(function() { var from = $(this); var x0, y0; var x, y, x1, y1, r; var to = $(settings.to); var hr = $("<hr/>", { "class": "connection", css: { position: "absolute" } }).appendTo("body"); hr.css("transform-origin", 0); hr.css("-moz-transform-origin", 0); hr.css("-webkit-transform-origin", 0); hr.css("-o-transform-origin", 0); function fn() { var pos = from.offset(); x0 = pos.left + from.width() / 2; y0 = pos.top + from.height() / 2; pos = to.offset(); x1 = pos.left + to.width() / 2; y1 = pos.top + to.height() / 2; x = x1 - x0; y = y1 - y0; var w = Math.sqrt(x * x + y * y); r = 360 - 180 / Math.PI * Math.atan2(y, x); hr.css({ left: x0, top: y0, width: w }); hr.css("transform", "rotate(-" + r + "deg)"); hr.css("-moz-transform", "rotate(-" + r + "deg)"); hr.css("-webkit-transform", "rotate(-" + r + "deg)"); hr.css("-o-transform", "rotate(-" + r + "deg)") } $(window).on({ resize: fn, load: fn }) }) } })(jQuery); $(function() { function rand(a) { return 5 + Math.floor(Math.random() * a) } var from; $.each(Array(5), function(indx, element) { var div = $("<div>", { css: { top: rand(80) + "%", left: rand(80) + "%" }, "class": "one" }).appendTo("body"); from && from.connectionItem({ to: div }); from = div }) }); </script> </head> <body> </body> </html> |
Часовой пояс GMT +3, время: 22:15. |