How to grid a polyline points? Pathfinding.js library

Question

I have a shape like this:

Is it possible to grid them using their points and store it in an array?

<polyline class="st8" points="2022.5,409.3 1996.1,409.3 1996.1,296.8 1970.4,296.8 1970.4,324.4 1920.2,324.4 1920.2,429.3 
    1667.7,429.3 1667.7,360.5 1631.4,360.5 1631.4,408.5 1445,408.5 1445,362.3 1357.4,362.3 1357.4,408.5 962.3,408.5 962.3,362.3 
    874.8,362.3 874.8,408.5 721.1,408.5 721.1,362.3 633.6,362.3 633.6,408.5 480,408.5 225.4,408.5 225.4,370 168.9,370 168.9,408.6 
    113.3,408.6 113.3,512.4 110,512.4 170.4,512.4 170.4,564.9 170.4,595.1 170.4,633.5 191.2,633.5 225.2,633.5 225.2,590.2 
    225.2,500.5 479.9,500.5 589,500.5 589,546.5 721.4,546.5 721.4,500.5 914.4,500.5 914.7,546.5 986.9,546.5 987,500.5 
    1398.2,500.5 1398.3,546.5 1470.6,546.5 1470.6,500.5 1660.6,500.5 1660.6,544.9 1723,544.9 1723,500.5 1919.1,500.5 1919.1,511.3 
    2022.5,511.3 2022.5,409.3   "/>

Edit: Is it possible to use Pathfinding.js to the grid and how will I set the setWalkableAt function in the library?

You could get the value of the `points` attribute of the element and split the resulting string at the spaces. P.S. a [``](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon) is intended for closed shapes. — Andrew Morton, Aug 14 '19 at 17:11
I was intending that you would extend the idea of splitting at spaces to splitting at commas, whereupon you have two strings which you can then call [parseFloat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat) on (if you need to). — Andrew Morton, Aug 14 '19 at 17:21
Could you please give an example as how would you do it? I could not follow what you said. I'm very sorry. — Cutie, Aug 14 '19 at 17:33

score 0 · Answer 1 · answered Aug 14 '19 at 18:00

Inspired by the mention of the SVG DOM in How do I add coordinates to an SVG polyline?, I came up with...

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

<script>
window.onload = function() {
    var polyline= document.getElementById("myPolyline");
    var pts = [];
    for (var i=0; i < polyline.points.length; i++) {
        pts.push([polyline.points[i].x, polyline.points[i].y]);
    }

    console.log(pts);

}

</script>
</head>
<body>
<svg width="1920" height="340">
<polyline id="myPolyline" class="st8" points="2022.5,409.3 1996.1,409.3 1996.1,296.8 1970.4,296.8 1970.4,324.4 1920.2,324.4 1920.2,429.3 
    1667.7,429.3 1667.7,360.5 1631.4,360.5 1631.4,408.5 1445,408.5 1445,362.3 1357.4,362.3 1357.4,408.5 962.3,408.5 962.3,362.3 
    874.8,362.3 874.8,408.5 721.1,408.5 721.1,362.3 633.6,362.3 633.6,408.5 480,408.5 225.4,408.5 225.4,370 168.9,370 168.9,408.6 
    113.3,408.6 113.3,512.4 110,512.4 170.4,512.4 170.4,564.9 170.4,595.1 170.4,633.5 191.2,633.5 225.2,633.5 225.2,590.2 
    225.2,500.5 479.9,500.5 589,500.5 589,546.5 721.4,546.5 721.4,500.5 914.4,500.5 914.7,546.5 986.9,546.5 987,500.5 
    1398.2,500.5 1398.3,546.5 1470.6,546.5 1470.6,500.5 1660.6,500.5 1660.6,544.9 1723,544.9 1723,500.5 1919.1,500.5 1919.1,511.3 
    2022.5,511.3 2022.5,409.3   "/>
</svg>
</body>
</html>

Note that I gave the polyline an id attribute to make it easy to get a reference to it with document.getElementById().

Look in the console of your browser's developer tools to see the array of arrays.

How to grid a polyline points? Pathfinding.js library

1 Answers1