Układanie dwóch obrazów Canvas "jedna nad drugą + kliknięcie zdarzenia

Question

Chcę ułożyć dwa elementy" Canvas "jeden na drugim. Są one używane w grze, w której dolne płótno wyświetli szesnastkową ramkę, podczas gdy górne płótno ma wyświetlać problemy/rozkazy (podstawowe strzałki lub szesnastkowe podkreślenie - nie chcę przerysowywać masywnego sześciokąta razy) podanego przez gracz.

Płótna są warstwowane przez zIndex 1/2.

Jednak problem polega na tym, że zamówienia wyświetlane na górnym płótnie mają być rysowane w odpowiedzi na zdarzenia "kliknięcia" i "przesunięcia myszy" w dolnym kanale Canvas.

Oczywiście, poprzez nałożenie warstw na płótno "Zamówienia" na płótnie "hexgrid", zdarzenia myszy i kliknięć nie będą już wyzwalane przez płótno "hexgrid", ponieważ nie będą już odbierać zdarzeń.

Czy istnieje sposób na "przekazywanie", tj. Propagowanie zdarzeń z jednego elementu na inny element lub inny inteligentny sposób rozwiązania mojego problemu?

Answer 1

Może po prostu wyzwolisz inne zdarzenia płótna, np. Document.getElementById ("otherCanvas"). Click()?

Answer 2

Może chcesz słuchać wydarzenia na głównym elemencie płócien? A po tym wydarzeniu zbierzesz dane od nich obu i przetworzysz je?

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

Masz doświadczenie w takich sytuacjach, płótna zajmują całe miejsce w katalogu głównym, a współrzędne w div są takie same dla obszaru roboczego.

Answer 3

I wold propagować wydarzenie do następnego płótna, jeśli płótna są zachodziły, współrzędne będą takie same. Można utworzyć wyzwalacz dla obiektów zdefiniowanych wewnątrz zadaszonego płótna.

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>