Question

我遇到了https://github.com/dzenanr/educ_memory_game中双色图像闪烁的问题。

在Board类视图/ board.dart中，_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));

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

在记忆游戏中闪烁的双胞胎图像

1 个答案: