通过凸包算法简化svg碰撞检测

获取svg坐标点

方案一 path-to-polygon（推荐）

https://betravis.github.io/shape-tools/path-to-polygon/

方案二 wilderness-dom-node

https://github.com/colinmeinke/wilderness-dom-node?tab=readme-ov-file#readme

import { frameShape } from 'wilderness-dom-node'
console.log(frameShape(document.getElementById('OBJECTS')))

凸包算法计算顶点

https://www.npmjs.com/package/d3-polygon

<script type="module">
import {polygonHull} from "https://cdn.skypack.dev/d3-polygon@3";
const hull = polygonHull(points);
</script>

顶点连线生成简单svg

通过点连接成新多边形svg（polygon）

碰撞检测

对比多边形，如果有相交则表示碰撞
https://www.npmjs.com/package/polygon-clipping
计算碰撞面积
https://www.npmjs.com/package/d3-polygon

相关资料

什么是Convex Hull？

Path转多边形（点结构清晰）

PathToPoints（丢失点过多）

SVGPoints

SVGPath