Форум

Начинающий-Js-кодер · #1 (**permalink**) 24.07.2018, 14:36

Добрый день, есть рисунок:

Как можно для стрелочки obj1 определить начало, чтобы оно было таким:
x1;(y2-y1)/2 и конец:x2;(y3-y4)/2 чтобы эти полученные координаты передать уже в svg для рисования линии.
Да, прямоугольники задаются не статически, а могут создавать динамически.
То есть вся суть стоит именно в определении координат двух динамических блоков

Начинающий-Js-кодер · #2 (**permalink**) 24.07.2018, 14:37

y1,y2,y3,y4,x1,x2 от края рабочей области в браузере.

j0hnik · #3 (**permalink**) 24.07.2018, 14:46

https://learn.javascript.ru/coordinates

Начинающий-Js-кодер · #4 (**permalink**) 24.07.2018, 14:55

Подвопрос тогда:
прямоугольникам,которые создаются динамически,лучше присваивать абсолютное позиционирование или какое?

j0hnik · #5 (**permalink**) 24.07.2018, 15:01

Начинающий-Js-кодер,
на этот вопрос правильного ответа нет. зависит от ситуации и целей использования этих прямоугольников

Начинающий-Js-кодер · #6 (**permalink**) 24.07.2018, 15:11

Их нужно разместить на некотором пространстве, чтобы они располагались не друг за другом, а свободно. то есть один в левом угле, второй в правом,третий посередине,четвертый еще где-то.

Alexandroppolus · #7 (**permalink**) 24.07.2018, 15:12

Начинающий-Js-кодер,
тогда ,понятное дело, абсолютно позиционировать

Начинающий-Js-кодер · #8 (**permalink**) 24.07.2018, 15:26

А как лучше поступить:сделать с абсютным позиционированием сначала блоки сами, а потом уже с абсолютным позиционированием стрелочки,задавая им свою длину то есть в 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/>

Как лучше?

рони · #9 (**permalink**) 24.07.2018, 15:39

Начинающий-Js-кодер,
Соединить прямой линией два элемента на javascript или Jquery

рони · #10 (**permalink**) 24.07.2018, 15:51

Начинающий-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>

Форум

Справочник

Discord чат

Курсы javascript