image - 在内存游戏中闪烁双图像

Question

我有一个在https://github.com/dzenanr/educ_memory_game中闪烁双图像的问题。

在view / board.dart的Board类中，_imageBox方法中的以下代码创建并加载图像:

  var imagePath = 'images/${cell.image}';
  ImageElement image = new Element.tag('img');
  image.src = imagePath;
  image.onLoad.listen((event) {
    context.drawImageToRect(image, new Rect(x, y, boxSize, boxSize));
  });

单击板单元会显示一秒钟的图像。当发现相同的2张图像时，这些双张图像保持显示状态，但是每秒闪烁一次(计时器刷新间隔)。

为了解决闪烁问题，我在Board类的构造函数中创建了这些图像:

for (var cell in memory.cells) {
  ImageElement image = new Element.tag('img');
  image.src = 'images/${cell.image}';
  imageMap[cell.image] = image;
}

然后，我从 map 上得到一个图像。但是，以下两项均无效:

  ImageElement image = imageMap[cell.image];
  image.onLoad.listen((event) {
    context.drawImageToRect(image, new Rect(x, y, boxSize, boxSize)); 
  });

要么

  ImageElement image = imageMap[cell.image];
  context.drawImageToRect(image, new Rect(x, y, boxSize, boxSize));

Answer 1

更改镜像的src属性意味着可以进行网络访问，因此不好，您必须使用缓存的镜像。

要正确显示图像，只需稍微更改_imageBox函数。

 void _imageBox(Cell cell) {
  var x = cell.column * boxSize;
  var y = cell.row * boxSize;
  context.beginPath();
  // Moved at the beginning otherwise it is drawn above the image.
  context.rect(x, y, boxSize, boxSize);
  context.fill();
  context.stroke();
  context.closePath();
  if (cell.hidden ) {
    context.fillStyle = HIDDEN_CELL_COLOR_CODE;
    var centerX = cell.column * boxSize + boxSize / 2;
    var centerY = cell.row * boxSize + boxSize / 2;
    var radius = 4;
    context.arc(centerX, centerY, radius, 0, 2 * PI, false);
  } else {
    ImageElement image = imageMap[cell.image]; // if decomment, comment the above 3 lines
    context.drawImageToRect(image, new Rect(x, y, boxSize, boxSize));
  }
 }