在鼠标事件上更新画布

Update canvas on mouse events

本文关键字：更新 鼠标 事件      更新时间：2024-03-20

我已经使用这个JS库创建了一个六边形网格。栅格确实正确地绘制在画布上。我的问题是尝试在鼠标事件上引入事件。例如，当我将鼠标悬停在某个六边形上时，我希望它的背景颜色发生变化。

目前，无论光标悬停在哪个六边形上，只有最后创建的六边形才会在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>

这应该可以工作。

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

你可以把它们放在剧本的最底部。它们不必处于循环中。

将事件处理程序绑定到六边形的容器，而不是单独绑定到每个六边形，并使用鼠标坐标找到悬停的六边形。检查库的文档，也许他们有一个方法。

相关文章：