我这一生如履薄冰，如何才能走到对岸呢? pathfinding路径规划算法可以帮到你

_微言_2023-12-24 10:50

效果图

BestFirstFinder

JumpPointFinder

支持跳跃

写在前面

最近突然有了兴趣研究路径规划算法，在网上找到了pathFinding路径规划算法库，用法也非常简单拿出来分享下，在此基础上改造可以实现简单的船舶避障,贪吃蛇，简单的路径规划等等

git地址 www.npmjs.com/package/pat...

看这个文章前要知道的

svg基础，会使用svg的path标签绘制路径
了解vue3语法

首先会绘制二维数组

js 复制代码

const boxs = ref(Array.from({ length: 10 }, () => new Array(10).fill(0)))

然后渲染，结果就是这样从0-0到9-9，因为PF也是基于二维数组

PF算法的核心要点

需要起点和重点目标
设置障碍物，也就是需要绕过的地方

设置起点坐标，我这块处理的时候按照坐标点显示对应的文案

js 复制代码

const START_COORDINATE = [9, 4] // 起点坐标
const END_COORDINAT = [0, 5] // 终点坐标

onBeforeMount(() => {
  // 设置初始起点终点
  const [x1, y1] = START_COORDINATE
  const [x2, y2] = END_COORDINAT
  boxs.value[x1][y1] = -1
  boxs.value[x2][y2] = -2
})

其中 empty表示空也就表示没有障碍物，block表示有障碍物，success表示对的路径我会在这个类名的样式中添加脚印

绘制路径代码

js 复制代码

const drawPath = async () => {
  clearPath()

  // 利用PF实现坐标路径规划
  const Grid = new PF.Grid(10, 10)
  const finder = new PF[unref(way)]()

  boxs.value.forEach((e, i1) => {
    e.forEach((e, i2) => {
      if (e === 1) {
        Grid.setWalkableAt(i1, i2)
      }
    })
  })

  const path = finder.findPath(
    START_COORDINATE[0],
    START_COORDINATE[1],
    END_COORDINAT[0],
    END_COORDINAT[1],
    Grid
  )
  if (path.length === 0) {
    ElMessage.warning("走不到对岸了")
    return
  }

// 坐标系转换
  const pathString = path
    .map((e) => `${e[1] * 50 + 25},${e[0] * 50 + 25}`)
    .join("L")

  svgPath.value = `M${pathString}`

  ElNotification({
    title: "提示",
    message: `【${way.value}】路径规划完成，共计${path.length}步`,
    duration: 0
  })
  for (let i = 0; i < path.length; i++) {
    await new Promise((resolve) => {
      setTimeout(() => {
        resolve()
      }, 200)
    })
    const [x, y] = path[i]
    boxs.value[x][y] = 2
  }
}

其中注意点就是svg的path绘制路径的时候，path是以屏幕坐标系为起点计算，但是路径给我们的相当于是三角函数坐标系，这里要做转换。