Рисование вектора а браузере
Ребята, всем привет! Сразу скажу, что знаю html и css, js и svg знаю на низком уровне.
Ищу способы или библиотечку для реализации возможности отрисовки стрелки(вектора) прямо в браузере. То есть, у меня есть два div'а, например, я хочу от одного провести стрелку к другому в режиме реального времени. Нашла много библиотек по векторной графике (рафаэль) и много чего по графам, но там только возможности указания нод и связей в коде, который сразу отрисует всю картину при загрузке страницы (то есть не в интерактивном режиме). Очень прошу помощи у людей, кто в этом разбирается |
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>
|
Мне нужно, чтобы вектор следовал за мышкой, пока я его тащу до соседнего объекта. Это немножко не то)
|
marina_chazova,
будет практически тоже самое |
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>
|
| Часовой пояс GMT +3, время: 09:28. |