你如何在 dart 中缓存稍后在 canvas2d 中绘制的图像？答案

【问题标题】：How do you cache images to be drawn later in canvas2d in dart?你如何在 dart 中缓存稍后在 canvas2d 中绘制的图像？
【发布时间】：2013-09-30 17:32:45
【问题描述】：

所以，我学会了如何使用 dart 在画布中绘制图像，如下所示：

    ///create the image element with given source
    ImageElement myImage = new ImageElement(src:"myImage.png");

    ///load the image
    myImage.onLoad.listen((event){
         ///when the image is loaded, draw it
         myContext.drawImage(myImage, 0, 0);
    });

但是，您如何在以后绘制图像？

例如，假设我有一个图像列表：

    List<ImageElement> myImageList;

然后我想根据它们的来源一一加载我的所有图像元素。完成后，只要我想，我就可以去：

    myContext.drawImage(myImageList[i], x, y);

此代码不在 onLoad.listen 方法中。

【问题讨论】：

标签： image caching canvas dart 2d-context-api

【解决方案1】：

您可以使用Future.wait 在每张图片上等待onLoad：

Future.wait(myImageList.map((e) => e.onLoad.single)).then((_){
  myContext.drawImage(myImageList[i], x, y);
  // or call function that assumes that images are loaded
});

【讨论】：

非常感谢。期货真棒。在旁注中，我想补充一点（在研究期货之后），window.animationFrame 未来非常棒。基本上，我所做的就是将我的代码封装到一个 void draw(double dt) 中，然后调用 window.animationFrame.then(draw)。这让我可以灵活地清除每一帧之间的画布并让期货处理所有事情。作为优化，我扩展了 ImageElement 以添加一个 isLoaded 标志，这样，如果我在未加载图像时调用 draw on draw，就不会尝试绘制。
不客气。不要忘记验证答案。
完成 :) 抱歉，stackoverflow 的新手。