Update Leinwand auf Maus Ereignisse

Question

Ich habe ein sechseckiges Raster mit this JS library erstellt. Das Raster wird ordnungsgemäß auf die Leinwand gemalt. Mein Problem besteht darin, Ereignisse bei Mausereignissen einzuführen. Wenn ich zum Beispiel über ein bestimmtes Sechseck schwebe, möchte ich, dass sich die Hintergrundfarbe ändert.

Im Moment ändert sich nur das zuletzt erzeugte Sechseck auf mouseover, unabhängig davon, über welches Sechseck der Cursor schwebt. Wie kann ich den Ereignis-Listener das bestimmte Sechseck, über das der Cursor existiert, aktualisieren?

Wenn dies nicht möglich ist, weil gemalte Objekte in die Leinwand "gerastert" werden, was wäre dann ein alternativer Ansatz?

Der Code ist unten:

<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

Dies sollte funktionieren.

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

Sie können sie ganz unten in Ihrem Skript setzen. Sie müssen nicht in einer Schleife sein.

Answer 2

Bind Ihre Event-Handler in den Behälter der Hexagone statt zu jedem Sechseck getrennt und finden Sie das Sechseck, indem die Koordinaten der Maus schwebte über. Und überprüfen Sie die Dokumente der Bibliothek, vielleicht haben sie eine Methode dafür enthalten.