Layering two Canvas 'uno sopra l'altro + clic sull'evento

Question

Voglio sovrapporre due elementi Canvas' uno sopra l'altro. Sono usati per un gioco, in cui il Canvas inferiore mostrerà un hexgrid mentre il Canvas superiore ha lo scopo di visualizzare problemi/ordini (in pratica frecce o evidenziare esadecimali - non voglio ridisegnare una massiccia hexgrid a zillion volte) dato dal giocatore.

Le tele sono sovrapposte da zIndex 1/2.

Tuttavia, il problema è: gli ordini visualizzati nella parte superiore della Tela devono essere disegnati in risposta agli eventi "clic" e "mousemove" nella parte inferiore della tela.

Ovviamente, sovrapponendo la tela "orders" sulla parte superiore della tela "hexgrid", qualsiasi evento di mousemove e click non verrà più attivato dalla tela "hexgrid" poiché non riceve più gli eventi.

C'è un modo per "inoltrare", ovvero propagare gli eventi da un elemento a un altro elemento o quale sarebbe un altro modo intelligente per risolvere il mio problema?

Answer 1

Forse potresti semplicemente attivare gli eventi dell'altro quadro con ad esempio document.getElementById ('otherCanvas'). Click()?

Answer 2

Potrebbe essere necessario ascoltare l'evento sull'elemento principale delle tele? E dopo l'evento raccoglierai i dati da entrambi e li elaborerai?

<div onclick="..."> 
    <canvas> 
    <canvas> 
</div> 

ha esperienza con tali situazioni, tele ha preso tutto lo spazio della radice e coordina all'interno div sono uguali per tela.

Answer 3

I wold propagare l'evento alla tela successiva, se le tele sono sovrapposte le coordinate saranno le stesse. È possibile creare un trigger per oggetti definiti all'interno di un'area coperta.

var Game = {canvas1: undefined, canvas2: undefined}; 
 

 
Game.canvas1 = document.getElementById('canvas1'); 
 
Game.canvas1.addEventListener('click', on_canvas_click1, false); 
 

 
Game.canvas2 = document.getElementById('canvas2'); 
 
Game.canvas2.addEventListener('click', on_canvas_click2, false); 
 

 
function on_canvas_click1(ev) { 
 
    //do your stuff 
 
    on_canvas_click2(ev); 
 
} 
 

 
function on_canvas_click2(ev) { 
 
    
 
\t var mousePos = getMousePos(Game.canvas2, ev); 
 
    
 
     var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y + " target: " + mousePos.target + " Id: " + mousePos.target.getAttribute("id");; 
 
     writeMessage(Game.canvas2, message); 
 
} 
 

 

 
function writeMessage(canvas, message) { 
 
     var context = canvas.getContext('2d'); 
 
     context.clearRect(0, 0, canvas.width, canvas.height); 
 
     context.font = '8pt Calibri'; 
 
     context.fillStyle = 'black'; 
 
     context.fillText(message, 10, 25); 
 
     } 
 
function getMousePos(canvas, evt) { 
 
     var rect = canvas.getBoundingClientRect(); 
 
     return { 
 
      x: evt.clientX - rect.left, 
 
      y: evt.clientY - rect.top, 
 
      target: evt.target 
 
     }; 
 
     }

<canvas id="canvas1" width="400" height="400" style="border: 1px solid black"></canvas> 
 

 
<canvas id="canvas2" width="400" height="400" style="border: 1px solid black"></canvas>