在鼠標事件上更新畫布

Question

我已經使用此JS庫創建了一個六邊形網格。 網格確實正確地繪制到了畫布上。 我的問題是試圖介紹有關鼠標事件的事件。 例如，當我將鼠標懸停在某個六邊形上時，我希望它的背景色發生變化。

目前，無論mouseover在哪個六角形上，只有最后創建的六角形在mouseover都會改變。 如何使事件偵聽器更新光標所在的特定六邊形？

如果由於繪制的對象被“柵格化”到畫布中而無法實現此操作，將建議使用哪種替代方法？

代碼如下：

<canvas id="stage"></canvas>
<script>
  var element        = document.getElementById("stage");
      element.height = window.innerHeight;
      element.width  = window.innerWidth;

  var stage   = new createjs.Stage("stage");
      stage.x = window.innerWidth/2;
      stage.y = window.innerHeight/2;
      stage.enableMouseOver();

  var grid             = new Grid();
      grid.tileSize    = 55;

  var stageTransformer = new StageTransformer().initialize({ element: element, stage: stage });
  stageTransformer.addEventListeners();

  var tick = function (event) { stage.update(); };
  var colorHexagon = function(hexagon, fill) {
    hexagon.graphics
      .beginFill(fill)
      .beginStroke("rgba(50,50,50,1)")
      .drawPolyStar(0, 0, grid.tileSize, 6, 0, 0);
  };

  var coordinates = grid.hexagon(0, 0, 3, true)
  for (var i = 0; i < coordinates.length; i++) {
    var q = coordinates[i].q,
        r = coordinates[i].r,
        center = grid.getCenterXY(q, r),
        hexagon = new createjs.Shape();
        hexagon.cursor = "pointer";

    hexagon.addEventListener("mouseover", function() {
      colorHexagon(hexagon, "rgba(50,150,0,1)")
    });

    hexagon.addEventListener("mouseout", function() {
      colorHexagon(hexagon, "rgba(150,150,150,1)")
    });

    hexagon.q = q;
    hexagon.r = r;
    hexagon.x = center.x;
    hexagon.y = center.y;

    colorHexagon(hexagon, "rgba(150,150,150,1)");

    stage.addChild(hexagon);
    stage.update();
  }

  tick();
  createjs.Ticker.setFPS(30);
  createjs.Ticker.addEventListener("tick", tick);
</script>

Answer 1

這應該工作。

stage.addEventListener("mouseover", function(evt) {
  colorHexagon(evt.target, "rgba(50,150,0,1)")
});

stage.addEventListener("mouseout", function(evt) {
  colorHexagon(evt.target, "rgba(150,150,150,1)")
});

您可以將它們放在腳本的最底部。 他們不必陷入困境。

Answer 2

將事件處理程序綁定到六邊形的容器上，而不是分別綁定到每個六邊形上，並使用鼠標的坐標找到懸停的六邊形。 並檢查庫的文檔，也許他們有一個包含的方法。