Skip to content

Instantly share code, notes, and snippets.

@ajaytlabs

ajaytlabs/DrawLineByCSS.html

Created January 13, 2017 07:40
Show Gist options
  • Save ajaytlabs/fcb472b9e17926c939c56b71f4a5184b to your computer and use it in GitHub Desktop.
Save ajaytlabs/fcb472b9e17926c939c56b71f4a5184b to your computer and use it in GitHub Desktop.
Download ZIP
Lines Draw between two or multiple elments of DOM by canvas or css
Raw
DrawLineByCanvas.html
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
#canvas {
position: absolute;
margin-top: -8px;
}
.draggable {
font-size: x-small;
}
.right-box .streams {
margin-left: 150px;
}
.right-box .desc {
line-height: 50px;
}
.left {
margin-top: 100px;
}
.display-flex {
display: flex;
}
.streams {
padding: 2px;
}
.hub-link-con img {
height: 50px;
}
</style>
</head>
<body>
<canvas id="canvas" width="400px" height="400px"></canvas>
<div class="display-flex hub-link-con" style="padding:50px;">
<div class="display-flex left">
<div class="streams">
<div id="0" class="draggable">0</div>
<div id="1" class="draggable">1</div>
<div id="2" class="draggable">2</div>
<div id="3" class="draggable">3</div>
</div>
</div>
<div>
<div id="wrap0" class="display-flex right-box">
<div class="streams">
<div id="0r" class="draggable">0</div>
<div id="1r" class="draggable">1</div>
<div id="2r" class="draggable">2</div>
<div id="3r" class="draggable">3</div>
</div>
</div>
<br>
<div id="wrap1" class="display-flex right-box">
<div class="streams">
<div id="0r" class="draggable">0</div>
<div id="1r" class="draggable">1</div>
<div id="2r" class="draggable">2</div>
<div id="3r" class="draggable">3</div>
</div>
</div>
<br>
<div id="wrap2" class="display-flex right-box">
<div class="streams ">
<div id="0r" class="draggable">0</div>
<div id="1r" class="draggable">1</div>
<div id="2r" class="draggable">2</div>
<div id="3r" class="draggable">3</div>
</div>
</div>
<br>
<div id="wrap3" class="display-flex right-box">
<div class="streams">
<div id="0r" class="draggable">0</div>
<div id="1r" class="draggable">1</div>
<div id="2r" class="draggable">2</div>
<div id="3r" class="draggable">3</div>
</div>
</div>
</div>
</div>
<script>
var stream_length = 4,
remote_length = 4,
hubStream = {},
remote = [],
canvas = $("#canvas")[0],
ctx = canvas.getContext("2d");
ctx.lineWidth = 1;
for (var i = 0; i < stream_length; i++) {
var s = "#" + i;
hubStream[i] = $(s);
}
for (var i = 0; i < remote_length; i++) {
remote.push({
stream: {}
});
for (var k = 0; k < stream_length; k++) {
var s = "#wrap" + i + " #" + k + "r";
remote[i]["stream"][k] = $(s);
}
}
function connect(connectors) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < connectors.length; i++) {
var c = connectors[i],
eFrom = c.from,
eTo = c.to,
pos1 = eFrom.offset(),
pos2 = eTo.offset();
ctx.beginPath();
ctx.moveTo(pos1.left + eFrom.width() - 5, pos1.top + eFrom.height() / 2);
ctx.lineTo(pos2.left - 9, pos2.top + eTo.height() / 2);
ctx.stroke();
}
}
var connectors = [{
from: hubStream["0"],
to: remote["0"]["stream"]["1"]
}, {
from: hubStream["1"],
to: remote["3"]["stream"]["0"]
}, {
from: hubStream["2"],
to: remote["1"]["stream"]["3"]
}, {
from: hubStream["3"],
to: remote["2"]["stream"]["2"]
}];
connect(connectors);
</script>
</body>
</html>
Raw
DrawLineByCSS.html
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
.draggable {
font-size: x-small;
}
.right-box .streams {
margin-left: 150px;
}
.right-box .desc {
line-height: 50px;
}
.display-flex {
display: flex;
}
.streams {
padding: 10px;
}
</style>
</head>
<body>
<div class="display-flex hub-link-con" style="padding:50px;">
<div class="display-flex left">
<div class="streams">
<div id="left1" class="draggable">1</div>
<div id="left2" class="draggable">2</div>
<div id="left3" class="draggable">3</div>
<div id="left4" class="draggable">4</div>
</div>
</div>
<div>
<div id="wrap0" class="display-flex right-box">
<div class="streams">
<div id="right1" class="draggable">1</div>
<div id="right2" class="draggable">2</div>
<div id="right3" class="draggable">3</div>
<div id="right4" class="draggable">4</div>
<div id="right5" class="draggable">5</div>
<div id="right6" class="draggable">6</div>
</div>
</div>
<br>
</div>
</div>
<script>
var connector = {
connect: function(div1, div2, color, thickness) {
var off1 = this.getOffset(div1),
off2 = this.getOffset(div2),
x1 = off1.left + off1.width / 2;
var y1 = off1.top + off1.height / 2,
x2 = off2.left + off2.width / 2,
y2 = off2.top + off1.height / 2;
// distance
var length = Math.sqrt(((x2 - x1) * (x2 - x1)) + ((y2 - y1) * (y2 - y1)));
// center
var cx = ((x1 + x2) / 2) - (length / 2);
var cy = ((y1 + y2) / 2) - (thickness / 2);
// angle
var angle = Math.atan2((y1 - y2), (x1 - x2)) * (180 / Math.PI);
// make hr
var htmlLine = "<div class='hub-remote-lines' style='padding:0px; margin:0px; height:" + thickness + "px; background-color:" + color + "; line-height:1px; position:absolute; left:" + cx + "px; top:" + cy + "px; width:" + length + "px; -moz-transform:rotate(" + angle + "deg); -webkit-transform:rotate(" + angle + "deg); -o-transform:rotate(" + angle + "deg); -ms-transform:rotate(" + angle + "deg); transform:rotate(" + angle + "deg);' />";
document.body.innerHTML += htmlLine;
},
getOffset: function(el) {
var rect = el.getBoundingClientRect();
return {
left: rect.left + window.pageXOffset,
top: rect.top + window.pageYOffset,
width: rect.width || el.offsetWidth,
height: rect.height || el.offsetHeight
};
},
drawLines: function(lineArr) {
var self = this;
$('.hub-remote-lines').remove();
setTimeout(function() {
for (var c = 0; c < lineArr.length; c++) {
var from = document.getElementById(lineArr[c].from);
var to = document.getElementById(lineArr[c].to);
self.connect(from, to, "#000", 1);
}
}, 200);
}
};
var lines = [{
from: "left1",
to: "right2"
}, {
from: "left2",
to: "right4"
}, {
from: "left3",
to: "right1"
}, {
from: "left4",
to: "right5"
}, {
from: "left4",
to: "right1"
}, {
from: "left4",
to: "right6"
}];
connector.drawLines(lines);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment