将多边形转换为倒置多边形，即从视口矩形中切出负多边形

问题描述

我正在使用与此Line of sight library类似的the demo。当您围绕角色移动玩家角色时，会为可见区域构造一个多边形，请参见下面的屏幕截图中的黄色多边形。

但是，我想获得倒置多边形或“负”多边形，因此示例屏幕截图中的蓝色区域。倒置的多边形可以用黑色填充，以阻止任何精灵和元素。

黄色可见性多边形是x，y位置的数组，例如：

// viewport 640 x 640 px
// example of visibility polygon
var visibilityPolygon = [ [640,334],[502,248],[402,[406,246],202],[246,170],[353,100],[278,0],[548,[480,128],200],[549,[640,195],334] ];

在示例屏幕截图中，蓝色区域是一个连续的形状，问题在于有时可见性多边形会将游戏区域分解为2个或更多的不可见部分。我认为，通过使用视口的边缘连接任何单独的零件，从理论上总是可以将蓝色多边形绘制为一个单一多边形。因此，这会导致沿视口边缘无限细的线，但这不是问题。另一个考虑因素是它必须重新绘制每一帧，因此它必须足够高效才能以60fps的速度运行。

我不知道如何创建这样的算法来获取倒置多边形。顺便说一下，起点可能会有所不同，有时在该区域的边缘，但有时在中间。在示例屏幕截图中，它从白色矩形的左下角开始。

所以我的问题是，这样的算法是什么样的？是否有仅使用JavaScript的已知示例？

解决方法

所谓的负多边形本质上是原始多边形，您可以从中删除正方形轮廓上的边，从而形成一条或多条开放折线，并向其添加在正方形轮廓上绘制的闭合线段（反之）遍历顺序。

在第二种情况下，将边缘放下6-7-8-9，然后用13-X-9关闭9-10-11-12-13，用1-14关闭14-15-16-4，然后用6-Y-2闭合2-3-4-5-6（X和Y是角）。

这是重新排列顶点链的问题。