在記憶遊戲中閃爍雙胞胎圖像

Question

我在https://github.com/dzenanr/educ_memory_game閃爍雙胞胎圖像的問題。

在板類視圖/ 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)); 
    }); 

在板上小區A點擊顯示的圖像一秒鐘。當發現相同的兩幅圖像時，這些雙幅圖像將保持顯示，但是它們每秒閃爍一次（定時器刷新間隔）。

爲了解決閃爍問題，我在董事會類的構造函數創建這些圖像：

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