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

【问题标题】：Running into offset bug when drawing sprites using pixijs使用 pixijs 绘制精灵时遇到偏移错误
【发布时间】：2019-02-10 20:36:34
【问题描述】：

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

当我使用 PIXI 在画布上绘制它们时，我得到了非常奇怪的行为：虽然元素不多，但地图已正确绘制，所有元素都在其位置。但是当画布大小更改为大约 5000 像素的宽度和高度时，所有元素都移动到屏幕上方。而且，对元素的点击已经在它应该在的地方进行了处理。

我已经创建了一支笔来演示这一点：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
}

您会发现所有可见内容都已向上移动，这取决于画布的高度。

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

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：