Straight Skeleton Polygon Offsetting
From: http://stackoverflow.com/a/11970006/796832
by Andrew Gerst
HTML
<canvas id="Canvas" width="500" height="500"></canvas>
<script src="global/services/authInterceptor.js"></script>
JavaScript
function Vector2(x, y)
{
this.x = x;
this.y = y;
}
var canvas = document.getElementById("Canvas");
var ctx = canvas.getContext("2d");
var poly = [
new Vector2(150, 170),
new Vector2(400, 120),
new Vector2(200, 270),
new Vector2(350, 400),
new Vector2(210, 470)
];
/* */
// Regular rectangle
var poly_rect = [
new Vector2(50, 50),
new Vector2(125, 50),
new Vector2(125, 100),
new Vector2(50, 100)
];
/* */
/* */
// Rotated rectangle
var rotated_poly_rect = [
new Vector2(250, 20),
new Vector2(300, 70),
new Vector2(250, 120),
new Vector2(200, 70)
];
/* */
function straight_skeleton(poly, spacing)
{
// http://stackoverflow.com/a/11970006/796832
// Accompanying Fiddle: http://jsfiddle.net/vqKvM/35/
var resulting_path = [];
var N = poly.length;
var mi, mi1, li, li1, ri, ri1, si, si1, Xi1, Yi1;
for(var i = 0; i < N; i++)
{
mi = (poly[(i+1) % N].y - poly[i].y)/(poly[(i+1) % N].x - poly[i].x);
mi1 = (poly[(i+2) % N].y - poly[(i+1) % N].y)/(poly[(i+2) % N].x - poly[(i+1) % N].x);
li = Math.sqrt((poly[(i+1) % N].x - poly[i].x)*(poly[(i+1) % N].x - poly[i].x)+(poly[(i+1) % N].y - poly[i].y)*(poly[(i+1) % N].y - poly[i].y));
li1 = Math.sqrt((poly[(i+2) % N].x - poly[(i+1) % N].x)*(poly[(i+2) % N].x - poly[(i+1) % N].x)+(poly[(i+2) % N].y - poly[(i+1) % N].y)*(poly[(i+2) % N].y - poly[(i+1) % N].y));
ri = poly[i].x+spacing*(poly[(i+1) % N].y - poly[i].y)/li;
ri1 = poly[(i+1) % N].x+spacing*(poly[(i+2) % N].y - poly[(i+1) % N].y)/li1;
si = poly[i].y-spacing*(poly[(i+1) % N].x - poly[i].x)/li;
si1 = poly[(i+1) % N].y-spacing*(poly[(i+2) % N].x - poly[(i+1) % N].x)/li1;
Xi1 = (mi1*ri1-mi*ri+si-si1)/(mi1-mi);
Yi1 = (mi*mi1*(ri1-ri)+mi1*si-mi*si1)/(mi1-mi);
// Correction for vertical lines
if(poly[(i+1) % N].x - poly[i % N].x==0)
{
Xi1 = poly[(i+1) % N].x + spacing*(poly[(i+1) % N].y - poly[i %...