Обновление холста на событиях мыши

Question

Я создал гексагональную сетку, используя this JS library. Сетка правильно нарисована на холсте. Моя проблема заключается в попытке представить события на событиях мыши. Например, когда я нависаю над определенным шестиугольником, я хочу, чтобы цвет фона изменился.

На данный момент только последний созданный шестиугольник изменится на 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

Bind обработчиков событий в контейнер шестиугольников вместо каждого шестиугольника и отдельно найти шестиугольник парил над, используя координату мыши. И проверьте документы библиотеки, возможно, у них есть метод для этого.