Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.02.2017, 15:45
Новичок на форуме
Отправить личное сообщение для marina_chazova Посмотреть профиль Найти все сообщения от marina_chazova
 
Регистрация: 19.02.2017
Сообщений: 2

Рисование вектора а браузере
Ребята, всем привет! Сразу скажу, что знаю html и css, js и svg знаю на низком уровне.
Ищу способы или библиотечку для реализации возможности отрисовки стрелки(вектора) прямо в браузере. То есть, у меня есть два div'а, например, я хочу от одного провести стрелку к другому в режиме реального времени. Нашла много библиотек по векторной графике (рафаэль) и много чего по графам, но там только возможности указания нод и связей в коде, который сразу отрисует всю картину при загрузке страницы (то есть не в интерактивном режиме). Очень прошу помощи у людей, кто в этом разбирается
Ответить с цитированием
  #2 (permalink)  
Старый 19.02.2017, 16:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

marina_chazova,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

  hr.connection{
    position: absolute;
    width: 0px;
    height: 1px;
    background-color: #FF0000;
    padding: 0;
    margin: 0;
    z-index: 2;
    transition: width 3.2s linear;
  }


  hr.connection:after {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border: 40px solid transparent;
    border-right: 0;

    top: -12px;
    right: -4px;
    border-left-color: gold;
    border-width: 12px 0 12px 60px;
    }




  .one {
    background-color: #FFD700;
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 8px;
    border: 4px solid #8B4513;
  }

  .two{
    border-radius: 8px;
    border: 6px solid #006400;
    position: absolute;
    top: 30%;
    left: 50%;
    background-color:  #228B22;
    z-index: 1;
    width: 128px;
    height: 128px;
  }

  </style>
  <script src="http://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)
    }

$.each(Array(12),function(indx, element){
$('<div>',{css : {top : rand(80)+"%",left : rand(80)+"%"} , "class" : "one"})
.appendTo('body')

      });
$(".one").connectionItem({to : $(".two")});//
});


  </script>
</head>

<body>
<div class="one"></div>
<div class="two"></div>
</body>

</html>
Ответить с цитированием
  #3 (permalink)  
Старый 19.02.2017, 17:02
Новичок на форуме
Отправить личное сообщение для marina_chazova Посмотреть профиль Найти все сообщения от marina_chazova
 
Регистрация: 19.02.2017
Сообщений: 2

Мне нужно, чтобы вектор следовал за мышкой, пока я его тащу до соседнего объекта. Это немножко не то)
Ответить с цитированием
  #4 (permalink)  
Старый 19.02.2017, 17:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

marina_chazova,
будет практически тоже самое
Ответить с цитированием
  #5 (permalink)  
Старый 19.02.2017, 19:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

connectionItem вслед за курсором
marina_chazova,
нажать на блок и тянуть стрелку до нужного места ...
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body{
    position: relative;
    height: 500px;
  }

  hr.connection{
    position: absolute;
    width: 0px;
    height: 1px;
    background-color: #FFFF00;
    padding: 0;
    margin: 0;
    z-index: 2;

  }


  hr.connection:after {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border: 40px solid transparent;
    border-right: 0;

    top: -12px;
    right: -4px;
    border-left-color:  #0000FF;
    border-width: 12px 0 12px 60px;
    }




  .one {
    background-color: #FFD700;
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 8px;
    border: 4px solid #8B4513;
  }

  .two{
    border-radius: 8px;
    border: 6px solid #006400;
    position: absolute;
    top: 30%;
    left: 50%;
    background-color:  #228B22;
    z-index: 1;
    width: 128px;
    height: 128px;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
(function($) {
    $.fn.connectionItem = function(options) {
        var defaults = {};
        var settings = $.extend({}, defaults, options);
        return this.each(function(i, el) {
            var from = $(el);

            function cl(event) {
                event.preventDefault();
                var x0, y0;
                var x, y, x1, y1, r;
                var pos = from.offset();
                    x0 = pos.left + from.width() / 2;
                    y0 = pos.top + from.height() /
                        2;

                var hr = $("<hr/>", {
                    "class": "connection",
                    css: {
                        position: "absolute",
                        left: x0,
                        top: y0,
                    }
                }).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(event) {
                    event.preventDefault();
                    x1 = event.pageX;
                    y1 = event.pageY;
                    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({
                        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({
                    mousemove: fn,
                    mouseup: function() {
                        $(window).off("mousemove", fn)
                    }
                })
            }
            from.on({
                mousedown: cl
            })
        })
    }
})(jQuery);

$(function(){
function rand(a) {
        return 5 + Math.floor(Math.random() * a)
    }

$.each(Array(12),function(indx, element){
$('<div>',{css : {top : rand(80)+"%",left : rand(80)+"%"} , "class" : "one"})
.appendTo('body')

      });
$(".one").connectionItem();//
});


  </script>
</head>

<body >

</body>

</html>

Последний раз редактировалось рони, 19.02.2017 в 20:07.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получить произвольную страницу в браузере и обработать через JavaScript xintrea AJAX и COMET 3 09.07.2015 05:32
Заставить js-файл работать в браузере и в node.js vasa_c AJAX и COMET 1 13.11.2014 00:34
Как прочитать параметры файла JPEG ещё в браузере, до загрузки на сервер? Webnode Общие вопросы Javascript 6 13.01.2014 20:44
рисование прямоугольника по движению мыши prizrak39 Events/DOM/Window 4 14.03.2013 15:36
Открытие сайта в новом браузере Няшка Общие вопросы Javascript 3 30.04.2012 13:47