1

我在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;
}

然后，我从地图中获取图像。但是，以下两个都不起作用：

  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));
4

1 回答 1

2
  • 更改图片的 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));
  }
 }
于 2013-05-30T18:15:08.973 回答