Skip to content

Instantly share code, notes, and snippets.

@riuzzang

riuzzang/.block

Last active November 6, 2017 07:42
Show Gist options
  • Save riuzzang/20068a4b1057ae1c49f6bbb5db5cab2d to your computer and use it in GitHub Desktop.
Save riuzzang/20068a4b1057ae1c49f6bbb5db5cab2d to your computer and use it in GitHub Desktop.
Download ZIP
Rect Polygon Intersection
Raw
.block
license: gpl-3.0
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="network.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<input type="hidden" class="objectPolygon" objectno="6" polygonno="7" x="-50" y="-50" objecttype="02" points="493,39_491.9999809265137,58.0078125_547.9999771118164,59.0078125_546.9999771118164,40.007816314697266">
<input type="hidden" class="objectPolygon" objectno="3" polygonno="4" x="-50" y="-50" objecttype="01" points="1367.2499389648438,668.7578125_1502.375,667.7578125_1501.2499389648438,4.2578125">
<input type="hidden" class="objectPolygon" objectno="11" polygonno="12" x="-50" y="-50" objecttype="01" points="333.00000762939453,421.00781375_320.00000762939453,421.00781375_320.00000762939453,479.00781375_436,363.00781375_433,330.00781375_333.00000762939453,330.00781375">
<input type="hidden" class="objectPolygon" objectno="11" polygonno="12" x="-50" y="-50" objecttype="01" points="522.9999847412109,290.00781756469723_524.9999847412109,344.00781374999997_552.9999847412109,366.00781374999997_651.9999847412109,391.00781374999997_650.9999847412109,236.00781661102295_640.9999847412109,224.00781756469726">
<input type="hidden" class="objectPolygon" objectno="11" polygonno="12" x="-50" y="-50" objecttype="01" points="566,398.7578061206055_509.99999237060547,399.7578061206055_555,478.75779849121096_582,478.75779849121096_637,439.75779849121096_631,418.7578061206055">
<input type="hidden" class="objectPolygon" objectno="12" polygonno="13" x="-50" y="-50" objecttype="01" points="473.5,149.50000585144045_473.5,239.50000012939455_484.5,249.50000012939455_535.5,249.50000012939455_623.5,198.50000775878908_624.5,188.50000775878908_528.5,148.50000585144045">
<input type="hidden" class="objectPolygon" objectno="12" polygonno="13" x="-50" y="-50" objecttype="01" points="682.0000114440918,209.00780375_682.0000114440918,329.00780375_840.0000152587891,329.00780375_868.0000152587891,265.00780375_866.0000152587891,220.00780375_801.0000152587891,199.00780375_705.0000076293945,200.00780375">
<input type="hidden" class="objectPolygon" objectno="12" polygonno="13" x="-55.0" y="-50" objecttype="01" points="347,187.99999892060546_407,248.00000655_440,248.00000655_445,240.00000655_423,161.00000273530273_414,149.00000273530273_348,148.00000273530273">
<div id="grid"></div>
<script>
var networkWidth = 900;
var networkHeight = 500;
var cellWidth = 10;
var cellHeight = 10;
var nt = new Network("grid", networkWidth+2, networkHeight+2, cellWidth, cellHeight);
//nt.loadImage(networkWidth, networkHeight, "b1.png");
nt.drawNetwork(networkWidth, networkHeight, cellWidth, cellHeight);
// 장애물
$(".objectPolygon[objectType=01]").each(function(){
var objectNo = $(this).attr("objectNo");
var polygonNo = $(this).attr("polygonNo");
var points = $(this).attr("points").replace(/_/g, ' ');
var x = $(this).attr("x");
var y = $(this).attr("y");
nt.drawObject(objectNo, polygonNo, points, x, y);
nt.intersectObject();
});
</script>
</body>
Raw
network.js
var Network = function(networkDivId, networkWidth, networkHeight, cellWidth, cellHeight){
this.networkWidth = networkWidth - 2;
this.networkHeight = networkHeight - 2;
this.cellWidth = cellWidth;
this.cellHeight = cellHeight;
this.walkPathList = [];
d3.select("#" + networkDivId)
.append("svg")
.attr("id", "network")
.attr("width",networkWidth)
.attr("height",networkHeight);
};
Network.prototype.loadImage = function(width, height, imagePath){
d3.select("#network").append("image")
.attr("xlink:href", imagePath);
};
Network.prototype.getNetwork = function(networkWidth, networkHeight, cellWidth, cellHeight){
var data = new Array();
var xpos = 1; //starting xpos and ypos at 1 so the stroke will show when we make the grid below
var ypos = 1;
var click = 0;
// iterate for rows
for (var row = 0; row < networkHeight / cellHeight; row++) {
data.push( new Array() );
// iterate for cells/columns inside rows
for (var column = 0; column < networkWidth / cellWidth; column++) {
data[row].push({
x: xpos,
y: ypos,
width: cellWidth,
height: cellHeight,
row : row,
column : column
})
// increment the x position. I.e. move it over by 50 (width variable)
xpos += cellWidth;
}
// reset the x position after a row is complete
xpos = 1;
// increment the y position for the next row. Move it down 50 (height variable)
ypos += cellHeight;
}
return data;
};
Network.prototype.drawNetwork = function(networkWidth, networkHeight, cellWidth, cellHeight){
var gridData = this.getNetwork(networkWidth, networkHeight, cellWidth, cellHeight);
var row = d3.select("#network").selectAll(".row")
.data(gridData)
.enter().append("g")
.attr("class", "row");
var column = row.selectAll(".square")
.data(function(d) { return d; })
.enter().append("rect")
.attr("class","square")
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; })
.attr("width", function(d) { return d.width; })
.attr("height", function(d) { return d.height; })
.attr("row", function(d) { return d.row; })
.attr("column", function(d) { return d.column; })
.style("fill", "white")
.style("opacity", 1)
.style("stroke", "#222");
};
Network.prototype.drawObject = function(objectNo, polygonNo, points, x, y) {
var polygon = d3.select("#network").append('polygon')
.attr('class', 'objects')
.attr('points', points)
.attr('objectNo', objectNo)
.attr('polygonNo', polygonNo)
.attr('objectType', '01')
.attr('x', x)
.attr('y', y)
.attr("transform", function(){
return "translate(" + x + "," + y + ")";
})
.attr("walkerable", "false")
.style("fill", "black")
.style("opacity", "0.3");
};
Network.prototype.intersectObject = function(){
d3.select("#network").selectAll(".objects").each(function(){
var object = d3.select(this);
var points = object.attr("points").split(" ");
var x = object.attr("x");
var y = object.attr("y");
var polygon = [];
for(var i=0; i<points.length; i++){
var p = points[i].split(",");
polygon.push([Number(p[0]), Number(p[1])]);
}
d3.select("#network").selectAll(".square").each(function(){
var square = d3.select(this).node();
var self = d3.select(this);
var column = d3.select(this).attr("column");
var row = d3.select(this).attr("row");
var left = square.getBoundingClientRect().left + 50;
var right = square.getBoundingClientRect().right + 50;
var top = square.getBoundingClientRect().top + 50;
var bottom = square.getBoundingClientRect().bottom + 50;
var vertexList = [];
vertexList.push([left, top]);
vertexList.push([right, top]);
vertexList.push([right, bottom]);
vertexList.push([left, bottom]);
for(var i=0; i<vertexList.length; i++){
var vertex = vertexList[i];
var contain = d3.polygonContains(polygon, [vertex[0], vertex[1]]);
if(contain){
self.style("fill","red")
.style("opacity", .3)
.attr("walkerable", "true");
break;
}
}
});
});
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment