将多边形转换为倒多边形，即从视口矩形中切出负多边形
Convert polygon to inverted polygon, i.e. carve out the negative polygon from viewport rectangle
我正在使用这个 Line of sight library which works similar to the demo。当你移动玩家角色时，它会为可见区域构建一个多边形，请参见下面屏幕截图中的黄色多边形。
但是，我想得到倒多边形或“负”多边形，所以示例屏幕截图中的蓝色区域。倒置多边形可用于通过填充纯黑色来阻挡任何精灵和元素。
黄色可见性多边形是一个 x,y 位置数组，例如：
// viewport 640 x 640 px
// example of visibility polygon
var visibilityPolygon = [ [640, 334], [502, 248], [402, 248], [406, 246], [406, 202], [246, 170], [353, 170], [353, 100], [278, 0], [548, 0], [480, 128], [480, 200], [549, 200], [640, 195], [640, 334] ];
在示例截图中，蓝色区域是一个连续的形状，问题是有时可见性多边形会将游戏区域分成 2 个或更多不可见部分。我认为理论上可以通过使用视口的边缘连接任何单独的部分来始终将蓝色多边形绘制为一个多边形。所以这会导致沿视口边缘出现无限细线，但这不是问题。另一个考虑是它必须重绘每一帧，因此它需要足够高效以在 60fps 时 运行。
我不知道如何创建这样的算法来获得倒多边形。顺便说一句，起点可能会有所不同，有时它在该区域的边缘，但有时在中间的某个地方。在示例屏幕截图中，它从白色矩形的左下角开始。
所以我的问题是，这样的算法会是什么样子？是否有仅使用 JavaScript 的已知示例？
你所说的负多边形本质上是原始多边形，你从中删除正方形轮廓上的边，这会产生一条或多条开放多段线，并向其添加绘制在正方形轮廓上的闭合线段，在反向遍历顺序。
在你的第二种情况下，放下边 6-7-8-9，然后用 13-X-9 关闭 9-10-11-12-13，用 1- 关闭 14-15-16-4 14 并用 6-Y-2 关闭 2-3-4-5-6（X 和 Y 是角）。
这是重新排列顶点链的问题。
我正在使用这个 Line of sight library which works similar to the demo。当你移动玩家角色时，它会为可见区域构建一个多边形，请参见下面屏幕截图中的黄色多边形。
但是，我想得到倒多边形或“负”多边形，所以示例屏幕截图中的蓝色区域。倒置多边形可用于通过填充纯黑色来阻挡任何精灵和元素。
黄色可见性多边形是一个 x,y 位置数组，例如：
// viewport 640 x 640 px
// example of visibility polygon
var visibilityPolygon = [ [640, 334], [502, 248], [402, 248], [406, 246], [406, 202], [246, 170], [353, 170], [353, 100], [278, 0], [548, 0], [480, 128], [480, 200], [549, 200], [640, 195], [640, 334] ];
在示例截图中，蓝色区域是一个连续的形状，问题是有时可见性多边形会将游戏区域分成 2 个或更多不可见部分。我认为理论上可以通过使用视口的边缘连接任何单独的部分来始终将蓝色多边形绘制为一个多边形。所以这会导致沿视口边缘出现无限细线，但这不是问题。另一个考虑是它必须重绘每一帧，因此它需要足够高效以在 60fps 时 运行。
我不知道如何创建这样的算法来获得倒多边形。顺便说一句，起点可能会有所不同，有时它在该区域的边缘，但有时在中间的某个地方。在示例屏幕截图中，它从白色矩形的左下角开始。
所以我的问题是，这样的算法会是什么样子？是否有仅使用 JavaScript 的已知示例？
你所说的负多边形本质上是原始多边形，你从中删除正方形轮廓上的边，这会产生一条或多条开放多段线，并向其添加绘制在正方形轮廓上的闭合线段，在反向遍历顺序。
在你的第二种情况下，放下边 6-7-8-9，然后用 13-X-9 关闭 9-10-11-12-13，用 1- 关闭 14-15-16-4 14 并用 6-Y-2 关闭 2-3-4-5-6（X 和 Y 是角）。
这是重新排列顶点链的问题。