如何解决将多边形转换为倒置多边形,即从视口矩形中切出负多边形
我正在使用与此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是角)。
这是重新排列顶点链的问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。