Skip to content

Instantly share code, notes, and snippets.

@arunkumar413
Last active October 14, 2017 08:00
Show Gist options
  • Save arunkumar413/fd88baf8c2fd6bbd972364960284efed to your computer and use it in GitHub Desktop.
Save arunkumar413/fd88baf8c2fd6bbd972364960284efed to your computer and use it in GitHub Desktop.
convert easystar path to SVG path's d attribute
//small snippted to convert the path generated by easy star to SVG's native path's d attribute.
//This snippet will convert the below p variable to this format: "M5,10V20V30V40H10H20H30H40H50" which is SVG path's d attribute
var p=[
{x:5,y:10},
{x:5,y:20},
{x:5,y:30},
{x:5,y:40},
{x:10,y:40},
{x:20,y:40},
{x:30,y:40},
{x:40,y:40},
{x:50,y:40},
]; // variable to simulate the path returned by the easystar
function path_to_svg_path(q){
svgpath= "M"+q[0].x+","+q[0].y; //set SVG path move attribute
for (i=1;i<q.length;i++){
if (q[i].x==p[i-1].x && q[i].y!=q[i-1].y){
svgpath = svgpath+"V"+q[i].y; // append V attribute to the svgpath
}
else if ((q[i].x!=q[i-1].x && q[i].y==q[i-1].y) ){
svgpath = svgpath+"H"+q[i].x; //apped H attribute to the svgpath
}
}
return svgpath;
}
var k = path_to_svg_path(p);
console.log(k);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment