使用pixijs绘制精灵时遇到偏移错误

Question

我在地图上需要绘制一些六边形（大约从50 * 50到150 * 150元素）。

当我使用PIXI在画布上绘制它们时，我得到了一种非常奇怪的行为：虽然元素很多，但地图已正确绘制，所有元素都放置在它们的位置。但是，当画布大小更改为大约5000px的宽度和高度时，所有元素都移到屏幕上方。此外，对元素的单击已在应有的位置进行了处理。

我已经创建了一支钢笔来证明这一点：https://codepen.io/cuddlemeister/pen/OdzMBw

尝试从以下环境更改环境中的canvasWidth和canvasHeight canvasWidth: 1500, canvasHeight: 1500至canvasWidth: 4500, canvasHeight: 7500，您将看到结果。

这里是环境对象：

const environment = {
    size: 60,
    map: {
        rows: 30,
        cols: 30,
    },
  canvasWidth: 1500,
  canvasHeight: 1500
}

您将看到所有可见内容均已沿顶部方向移动，这取决于画布的高度。

点击时启用了记录器，请尝试单击元素或元素应存在的区域-在元素应存在的地方正确处理了单击

Answer 1

这是因为WebGL上下文可以处理的最大大小。您可以通过记录app.gl属性来检查它。

通过“ forceCanvas”使用未加速的画布时，一切正常。

我认为没有任何方法可以绕过此限制。

为什么需要这么大的画布？