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

ボードのセルをクリックすると、画像が 1 秒間表示されます。同じ 2 つの画像が検出されると、それらの双子の画像は表示されたままになりますが、1 秒ごとにちらつきます (タイマーの更新間隔)。

ちらつきの問題を解決するために、Board クラスのコンストラクターでこれらの画像を作成します。

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

次に、マップから画像を取得します。ただし、次の 2 つの機能はどちらも機能しません。

  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 に答える