5

我正在使用画布为我的游戏实现菜单系统（出于某些性能原因，我不能使用 HTML/CSS 来制作菜单）。我使用 JSON 配置了菜单，并且 menuComponent 对象是使用它们各自的属性（x、y、宽度、高度、imagePath 等）创建的。我有一个菜单加载器，然后它遍历组件对象并调用组件对象的绘制方法（当然，所有图像都等待它们的 onload 事件首先触发）。

无论如何，我希望我的图像按照调用它们的绘制方法的顺序绘制，以便它们以正确的顺序重叠。大多数情况下，这种行为是正确的，但有时它们会以错误的顺序绘制。

我的问题是 - 我可以相信 Canvas 按照为这些图像调用 drawMethod 的顺序绘制图像吗？假设我有图像 A，例如 10MB，图像 B 是 10kb。如果我调用绘制图像 A然后绘制图像 B 那么图像 B 是否有可能首先加载，因为它是一个较小的图像？

我试图让我的代码变得聪明（在我的组件对象中嵌套组件并递归调用绘图方法）所以我的代码中可能存在一些竞争条件，我只想确认上述行为是正确的。如果我添加逻辑以强制我的对象等到设置就绪标志，那么它似乎可以工作。但不幸的是，这会减慢我的菜单加载时间。

4

2 回答 2

2

要正式回答这篇文章 -

最后，我简化了我的解决方案，使用一个 menuLoader 对象，该对象为每个要绘制的图像（包含 x、y、imagePath、就绪标志）提供一组哈希值。我调用了一个创建组件方法，该方法在默认情况下将就绪标志设置为 false 来构建这些散列。我为每个图像设置了一个onload事件，以将其各自的就绪标志设置为 true。

创建组件完成执行后，我使用 setInterval 进行旋转，直到所有标志都设置为 true。一旦满足这个条件，我就会再次遍历我的哈希数组并为每个图像调用 draw 方法。

于 2013-10-13T22:13:07.410 回答
0

伙计，我遇到了同样的问题，并且已经坚持了大约三天。我想到了一件有趣的事情。请查看此代码片段并向我提供您的想法。

final ResourceManager rm = new ResourceManager(1000, 1000);
rm.loadImgResource(LandCardResources.INSTANCE.getMeadow(), "meadow", 0, 0);
rm.loadImgResource(LandCardResources.INSTANCE.getHellHorseKnight(), "knight", 150, 150);

资源管理器是一个代表 BackBufferCanvas 的对象，它在其上下文中保存所有图像（如简单的图像精灵）。构造函数还负责将此 Backbuffer 添加到 RootPanel，因此我们可以确定一切都像我们预期的那样工作。之后，我将我的主画布添加到 root 尝试使用完美工作的 ResourceManager 实例从 backBufferCanvas 上绘制它。

canvas.setWidth(500 + "px");
canvas.setHeight(500 + "px");
canvas.setCoordinateSpaceWidth(500);
canvas.setCoordinateSpaceHeight(500);
RootPanel.get().add(canvas);
rm.drawImageFromMetaDb(ctx, 0, 0, 100, 100, 0, 0, 100, 100);
rm.drawImageFromMetaDb(ctx, 150, 150, 100, 100, 50, 50, 100, 100);

它永远不会奏效。但是，例如，如果我使用负责 rm.drawImage 的处理程序将 Button 添加到 rootPanel .....单击此按钮时它将完美工作。无法真正理解为什么会发生这种情况，因为 backBufferCanvas 是在 mainCanvas 之前附加的，所以逻辑必须已经延迟。

于 2015-08-27T09:08:45.510 回答