多边形布尔运算实战：从原理到PixiJS实现-CSDN博客

1. 多边形布尔运算：不只是Photoshop里的魔法

如果你用过Photoshop或者Sketch这类设计软件，肯定对里面的图形“相加”、“相减”、“相交”这些操作不陌生。比如你想画一个月牙，最直接的办法可能就是画两个圆，然后让一个圆“减去”另一个圆重叠的部分。这个“相加”、“相减”的过程，在计算机图形学里，就叫做多边形的布尔运算。

听起来很高大上，但其实它的核心思想和我们小学学的集合概念很像。假设有两个图形，图形A和图形B。

交集（Intersection）：就是只保留两个图形重叠的那部分区域，好比是数学里的“A ∩ B”。
并集（Union）：就是把两个图形合并成一个，覆盖的所有区域都要，也就是“A ∪ B”。
差集（Difference）：用一个图形“减去”另一个图形。比如 A - B，就是保留A中不与B重叠的部分。这里顺序很重要，B - A 的结果会完全不同。
异或（XOR）：这个比较有意思，它保留的是两个图形“独占”的部分。即，只属于A的加上只属于B的，但不要它们共有的部分。可以理解为 (A ∪ B) - (A ∩ B)。

在前端开发里，这个技术能玩出很多花样。比如在地图应用中，高亮显示某个行政区划与河流的交集区域；在数据可视化图表里，制作复杂的自定义形状；甚至在游戏开发中，用于碰撞检测后生成新的破碎地形。我之前做一个数据大屏项目，需要动态生成几个区域重叠的阴影效果，用CSS hack了半天都不理想，最后就是靠多边形布尔运算实时计算轮廓，再用Canvas渲染，效果一下子就出来了。

所以，掌握这个技术，相当于你手里多了一把处理复杂图形的“瑞士军刀”。今天，我就带你从最基础的原理开始，一步步用PixiJS这个强大的2D渲染库，把布尔运算在前端里跑起来。不用担心，我们会绕过那些艰深的数学公式，用最直白的方式和可运行的代码来搞定它。

2. 核心原理：把图形计算，变成“剪窗花”

布尔运算的底层算法其实非常复杂，涉及到计算几何中的多边形裁剪、扫描线算法、韦恩图等概念。简单来说，计算机需要精确地找出两个多边形所有边的交点，然后根据你想要的运算类型（交、并、差、异或），像拼图一样，重新组装这些交点、线段，最终形成一个新的、正确的多边形边界。

这个过程，有点像我们小时候做手工“剪窗花”。你把两张彩纸（两个多边形）叠在一起，根据不同的要求（运算类型），沿着特定的线条裁剪，最后得到一张新的窗花（结果多边形）。算法要解决的，就是如何精确、高效地找到这些“裁剪线”并完成拼接。

不过，作为应用开发者，我们不必自己从头去实现这套复杂的算法。这就像我们不需要为了做网页而去自己写一个浏览器引擎一样。社区里已经有非常成熟且高效的库来帮我们完成最核心的计算部分。在JavaScript生态里，martinez-polygon-clipping 这个库就是其中的佼佼者。它实现了一个名为“Martinez-Rueda”的算法，专门用于处理多边形（哪怕是带“洞”的复杂多边形）的布尔运算，速度快，结果也可靠。

我们的实现思路因此变得清晰：数据转换 -> 核心计算 -> 数据解析 -> 渲染绘制。

准备数据：我们手头通常是一系列多边形的顶点坐标（比如 [{x:0, y:0}, {x:100, y:0}...]）。
格式转换：把这些顶点数据转换成计算库（martinez）能理解的格式，也就是 GeoJSON。GeoJSON是一种用于表示地理空间数据的标准格式，用它来表示多边形非常合适。
调用计算：把两个多边形（GeoJSON格式）和运算类型（intersection, union, diff, xor）丢给martinez库。
解析结果：martinez库会返回一个运算后的、新的GeoJSON数据。我们需要把这个GeoJSON再解析回顶点坐标数组。
绘制图形：最后，用PixiJS的Graphics API，根据解析出来的顶点数组，把最终的多边形画出来。

整个流程，我们扮演的是“调度员”和“翻译官”的角色，把数据在不同格式间转换，并调用合适的工具。接下来，我们就一步步拆解这个流程。

2.1 为什么是GeoJSON和Martinez库？

你可能想问，为什么非要转成GeoJSON？我直接用顶点数组不行吗？这是因为martinez库的输入输出约定就是GeoJSON的“坐标环”格式。一个简单的、没有洞的多边形在GeoJSON里是这样表示的：

{
  "type": "Polygon",
  "coordinates": [
    [
      [0, 0], // 第一个点
      [100, 0], // 第二个点
      [100, 100], // 第三个点
      [0, 100], // 第四个点
      [0, 0]  // 闭合多边形，最后一个点与第一个点相同
    ]
  ]
}

注意coordinates是一个三维数组。最外层数组的第一个元素代表多边形的外边界环，后续元素可以表示多边形内部的“洞”。[0, 0]就是一个坐标对。闭合是关键，即点数组的首尾坐标必须相同。

martinez库非常轻量且专注，它的API极其简洁，就是四个函数：.intersection(), .union(), .diff(), .xor()。每个函数接受两个多边形坐标（就是上面GeoJSON里的coordinates部分），然后返回运算后新多边形的坐标。它不关心渲染，只负责纯粹的计算，这正是我们需要的。

2.2 实战中的关键点与“坑”

在实际编码前，有几个细节必须心里有数，这是我踩过坑后才明白的。

第一，坐标系的统一。 你的原始顶点坐标、martinez计算、PixiJS绘制，这三者必须在同一个坐标系下。通常我们使用屏幕坐标系，原点在左上角，x轴向右，y轴向下。确保你的数据从头到尾都遵守这个规则，否则算出来的图形可能跑到屏幕外去。

第二，多边形的方向（缠绕顺序）。 多边形顶点是顺时针排列还是逆时针排列？这个问题在布尔运算和渲染中有时很重要。有些算法对方向敏感，可能会把顺时针的多边形视为“实心”，逆时针的视为“洞”。martinez库本身比较健壮，但为了保险起见，最好在生成GeoJSON时，统一采用一种顺序（比如逆时针）。Pixi