如何对折线点进行网格化？ Pathfinding.js 库答案

【问题标题】：How to grid a polyline points? Pathfinding.js library如何对折线点进行网格化？ Pathfinding.js 库
【发布时间】：2019-08-14 17:07:09
【问题描述】：

我的形状是这样的：

是否可以使用它们的点对它们进行网格化并将其存储在一个数组中？

<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   "/>

编辑：是否可以在网格中使用Pathfinding.js？如何在库中设置 setWalkableAt 函数？

【问题讨论】：

您可以获取元素的points 属性的值，并在空格处拆分结果字符串。附言<polygon> 用于封闭形状。
[2022.5,409.3] 所以结果应该是这样的？
你能举个例子吗？你会怎么做？我听不懂你说的话。非常抱歉。

标签： javascript arrays path-finding

【解决方案1】：

受How do I add coordinates to an SVG polyline? 中提到的 SVG DOM 的启发，我想出了...

<!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>

请注意，我给折线添加了id 属性，以便使用document.getElementById() 轻松获取对它的引用。

在浏览器开发者工具的控制台中查看数组数组。

【讨论】：