キャンバスをマウスイベントで更新する

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

と六角はマウスの座標を用いてホバー見つける：

コード

は以下の通りです。そして、図書館のドキュメントをチェックしてください。おそらくそれらにはその方法があります。