运行 使用 pixijs 绘制精灵时出现偏移错误
Running into offset bug when drawing sprites using pixijs
我有一张地图，我需要在上面绘制一些六边形（大约从 50*50 到 150*150 个元素）。
当我使用 PIXI 在 canvas 上绘制它们时，我得到了非常奇怪的行为：虽然元素不多，但地图已正确绘制，所有元素都在它们的位置上。但是当 canvas 大小更改为大约 5000px 宽度和高度时，所有元素都移动到屏幕上方。而且，对元素的点击已经在应该的地方进行了处理。
我创建了一支笔来演示这一点：https://codepen.io/cuddlemeister/pen/OdzMBw
尝试更改 canvas 环境中的 canvas 宽度和 canvas 高度
canvasWidth: 1500, canvasHeight: 1500 到 canvasWidth: 4500, canvasHeight: 7500，你会看到结果。
这是环境对象：
const environment = {
size: 60,
map: {
rows: 30,
cols: 30,
},
canvasWidth: 1500,
canvasHeight: 1500
}
您会发现所有可见内容都已向上移动，这取决于 canvas 的高度。
单击时启用了记录器，请尝试单击元素或它们应在的区域 - 在元素应在的位置正确处理单击
这是因为 WebGL 上下文可以处理的最大大小。您可以通过记录 app.gl 属性 来检查它。
通过"forceCanvas"使用未加速canvas时一切正常。
我认为没有任何方法可以绕过此限制。
为什么需要这么大canvas？
我有一张地图，我需要在上面绘制一些六边形（大约从 50*50 到 150*150 个元素）。
当我使用 PIXI 在 canvas 上绘制它们时，我得到了非常奇怪的行为：虽然元素不多，但地图已正确绘制，所有元素都在它们的位置上。但是当 canvas 大小更改为大约 5000px 宽度和高度时，所有元素都移动到屏幕上方。而且，对元素的点击已经在应该的地方进行了处理。
我创建了一支笔来演示这一点：https://codepen.io/cuddlemeister/pen/OdzMBw
尝试更改 canvas 环境中的 canvas 宽度和 canvas 高度
canvasWidth: 1500, canvasHeight: 1500 到 canvasWidth: 4500, canvasHeight: 7500，你会看到结果。
这是环境对象：
const environment = {
size: 60,
map: {
rows: 30,
cols: 30,
},
canvasWidth: 1500,
canvasHeight: 1500
}
您会发现所有可见内容都已向上移动，这取决于 canvas 的高度。
单击时启用了记录器，请尝试单击元素或它们应在的区域 - 在元素应在的位置正确处理单击
这是因为 WebGL 上下文可以处理的最大大小。您可以通过记录 app.gl 属性 来检查它。
通过"forceCanvas"使用未加速canvas时一切正常。
我认为没有任何方法可以绕过此限制。
为什么需要这么大canvas？