纯前端网格路径规划：PathFinding.js的使用方法

点赞 + 关注 + 收藏 = 学会了

本文简介

在 Web 应用和游戏中，路径规划是一个核心功能，无论是在地图导航、策略游戏的单位移动，还是虚拟现实中的导航辅助，都离不开高效的路径查找算法。

在一个 Web 项目中，路径规划通常是放在后端做的。但其实前端也可以实现这个功能。在前端实现还可以降低服务器压力。

PathFinding.js作为一个基于网格的纯前端路径规划工具，其轻量级、易于集成和强大的功能，是「纯前端」实现路径规划的一个不错选择。

本文将探讨PathFinding.js的基础使用方法。

在学习PathFinding.js之前，可以先体验一下它的能力。

• 体验地址：https://qiao.github.io/PathFinding.js/visual/

• PathFinding.js仓库：https://github.com/qiao/PathFinding.js

安装

使用 npm 的方式将PathFinding.js安装到项目中

npminstallpathfinding

基础用法

我用React+PathFinding.js举例说明。

使用PathFinding.js实现路径规划，需要做以下几步：

1. 引入PathFinding.js。
2. 创建网格地图（有地图才有路嘛）。
3. 设置路障（哪里不可以走）。
4. 设置起点和终点，调用路径规划算法，将可行路径规划出来。

一步步来，先看看这些功能要调哪些API。

1、引入 PathFinding.js

在使用PathFinding.js之前需要将其引入。

importPFfrom'pathfinding'

2、创建网格 (Grid)

PF.Grid是PathFinding.js库中的一个核心组件，它用于创建和表示一个二维网格，这个网格是路径查找算法的基础。

constgrid=newPF.Grid(width,height)

• width 和 height 是网格的宽和高。
• 每个网格点初始化为通行 (0)。

举个例子。

// 创建一个 10x10 的网格constgrid=newPF.Grid(10,10)console.log(grid)

在控制台可以看到这个地图其实就是一个二维数组，长和宽都是10个元素。

3、设置路障

通过grid.setWalkableAt()方法可以设置指定节点的状态。

通过grid.isWalkableAt()可以检查指定节点是否可通行。

grid.setWalkableAt(x,y,walkable)grid.isWalkableAt(x,y)

• setWalkableAt(x, y, walkable)：设置某点是否可通行。
• isWalkableAt(x, y)：检查某点是否可通行。

举个例子。

// 设置 (5, 5) 为不可通行grid.setWalkableAt(5,5,false)// 检查 (5, 5) 是否可通行console.log(grid.isWalkableAt(5,5))// false

4、查找路径

PathFinding.js提供了很多种查找路径的算法，我们先试试PF.AStarFinder算法。

查找路径具体用法如下：

constfinder=newPF.AStarFinder(options);constpath=finder.findPath(startX,startY,endX,endY,grid);

• options：配置寻路算法的选项，如是否允许对角移动。
• findPath(startX, startY, endX, endY, grid)：寻找从起点到终点的路径。
  • startX和startY：起点坐标。
  • endX和endY：终点坐标。
  • grid：网格地图。
• 返回值是路径点数组[ [x1, y1], [x2, y2], ... ]。

举个例子。

constfinder=newPF.AStarFinder();constpath=finder.findPath(0,0,9,9,grid.clone());console.log(path);

除了AStarFinder，PathFinding.js提供了多种算法：

• BreadthFirstFinder
• DijkstraFinder
• BiAStarFinder
• BiBreadthFirstFinder
• BiDijkstraFinder
• IDAStarFinder
• JumpPointFinder

用法类似，只需替换AStarFinder即可。

在React里使用

// 导入 React 和 useState 钩子importReact,{useState}from'react';// 导入路径寻找库importPFfrom'pathfinding';// 定义路径寻找应用组件constPathFindingApp=()=>{// 初始化状态：网格、路径、起点和终点const[grid,setGrid]=useState(newPF.Grid(10,10));// 创建 10x10 的网格console.log(grid)const[path,setPath]=useState([]);// 存储找到的路径const[start,setStart]=useState([0,0]);// 起点坐标const[end,setEnd]=useState([9,9]);// 终点坐标// 切换网格单元的可行走状态consttoggleWalkable=(x,y)=>{constnewGrid=grid.clone();// 克隆当前网格newGrid.setWalkableAt(x,y,!newGrid.isWalkableAt(x,y));// 切换可行走状态setGrid(newGrid);// 更新网格状态};// 寻找路径的函数constfindPath=()=>{constfinder=newPF.AStarFinder();// 创建 A* 寻路算法实例constnewGrid=grid.clone();// 克隆当前网格constnewPath=finder.findPath(start[0],start[1],end[0],end[1],newGrid);// 寻找路径setPath(newPath);// 更新路径状态};return(<div>{/* <h1>PathFinding.js in React</h1> */}<div style={{display:'grid',gridTemplateColumns:'repeat(10, 30px)'}}>{/* 渲染网格 */}{[...Array(10)].map((_,y)=>[...Array(10)].map((_,x)=>{constisWalkable=grid.isWalkableAt(x,y);// 判断当前单元是否可行走constisPath=path.some(([px,py])=>px===x&&py===y);// 判断当前单元是否在路径上constisStart=x===start[0]&&y===start[1];// 判断当前单元是否为起点constisEnd=x===end[0]&&y===end[1];// 判断当前单元是否为终点return(<div key={`${x}-${y}`}onClick={()=>toggleWalkable(x,y)}// 点击切换可行走状态style={{width:30,height:30,backgroundColor:isStart?'green'// 起点为绿色:isEnd?'red'// 终点为红色:isPath?'yellow'// 路径为黄色:isWalkable?'white'// 可行走单元为白色:'black',// 不可行走单元为黑色border:'1px solid gray',cursor:'pointer',}}/>);}))}</div><button onClick={findPath}>Find Path</button>{/* 寻找路径按钮 */}</div>);};// 导出组件exportdefaultPathFindingApp;

结合代码注释和前面的 API 讲解，应该看得懂我上面写的这份代码。

用了 100 个 div 创建了一个网格地图，绿色点是起点，红色点是终点，黑点是不可走的地方，黄线是最终规划出来的录像。

但在实际项目中，我们不可能用那么多个 div 元素来规划地图，性能是很差的。通常会在canvas里绘制地图。

下面是canvas版本的代码，

importReact,{useState,useRef,useEffect}from'react';importPFfrom'pathfinding';// PathFindingApp 组件constPathFindingApp=()=>{// 使用状态钩子管理网格、路径、起点和终点const[grid,setGrid]=useState(newPF.Grid(10,10));// 创建一个 10x10 的网格const[path,setPath]=useState([]);// 存储找到的路径const[start,setStart]=useState([0,0]);// 起点坐标const[end,setEnd]=useState([9,9]);// 终点坐标constcanvasRef=useRef(null);// 引用画布元素// 切换网格单元的可行走状态consttoggleWalkable=(x,y)=>{constnewGrid=grid.clone();// 克隆当前网格newGrid.setWalkableAt(x,y,!newGrid.isWalkableAt(x,y));// 切换可行走状态setGrid(newGrid);// 更新网格状态};// 寻找路径constfindPath=()=>{constfinder=newPF.AStarFinder();// 创建 A* 寻路算法实例constnewGrid=grid.clone();// 克隆当前网格constnewPath=finder.findPath(start[0],start[1],end[0],end[1],newGrid);// 寻找路径setPath(newPath);// 更新路径状态};// 绘制网格constdrawGrid=()=>{constcanvas=canvasRef.current;// 获取画布引用constcontext=canvas.getContext('2d');// 获取绘图上下文constcellSize=30;// 单元格大小// 清空画布context.clearRect(0,0,canvas.width,canvas.height);// 绘制网格for(lety=0;y<10;y++){for(letx=0;x<10;x++){constisWalkable=grid.isWalkableAt(x,y);// 判断单元格是否可行走constisPath=path.some(([px,py])=>px===x&&py===y);// 判断单元格是否在路径上constisStart=x===start[0]&&y===start[1];// 判断单元格是否为起点constisEnd=x===end[0]&&y===end[1];// 判断单元格是否为终点// 设置单元格颜色context.fillStyle=isStart?'green':isEnd?'red':isPath?'yellow':isWalkable?'white':'black';context.fillRect(x*cellSize,y*cellSize,cellSize,cellSize);// 绘制单元格context.strokeStyle='gray';// 设置边框颜色context.strokeRect(x*cellSize,y*cellSize,cellSize,cellSize);// 绘制单元格边框}}};// 使用 effect 钩子在网格或路径变化时重新绘制网格useEffect(()=>{drawGrid();},[grid,path]);// 处理画布点击事件consthandleCanvasClick=(e)=>{constrect=canvasRef.current.getBoundingClientRect();// 获取画布位置constx=Math.floor((e.clientX-rect.left)/30);// 计算点击的网格 x 坐标consty=Math.floor((e.clientY-rect.top)/30);// 计算点击的网格 y 坐标toggleWalkable(x,y);// 切换网格的可行走状态};// 组件返回的 JSXreturn(<div><canvas ref={canvasRef}width={300}height={300}onClick={handleCanvasClick}/><button onClick={findPath}>Find Path</button>{/* 寻找路径按钮 */}</div>);};exportdefaultPathFindingApp;// 导出组件

PathFinding.js 可实现纯前端网格路径规划，降低服务器压力，还支持多种算法适配不同场景。落地时要考虑性能优化与快速集成问题，不妨看看RollCode 低代码平台的私有化部署、自定义组件、静态页面发布（SSG + SEO）能力。

以上就是本文的全部内容啦，如果本文对你有帮助的话，记得点赞 + 关注 + 收藏～