Phân chia hai Canvas 'lên trên mỗi sự kiện + sự kiện nhấp khác

Question

Tôi muốn xếp hai phần tử Canvas lên trên nhau. Chúng được sử dụng cho trò chơi, nơi Canvas thấp hơn sẽ hiển thị hình lục giác trong khi Canvas phía trên có nghĩa là hiển thị các vấn đề/đơn đặt hàng (mũi tên cơ bản hoặc làm nổi bật hex - tôi không muốn vẽ lại hình lục giác khổng lồ một tỷ lần) người chơi.

Canvas được xếp lớp theo zIndex 1/2.

Tuy nhiên, sự cố là: Các đơn đặt hàng được hiển thị trên Canvas đầu tiên được cho là được vẽ để phản hồi các sự kiện "nhấp chuột" và "di chuột" đến Canvas phía dưới. Rõ ràng, bằng cách sắp xếp các "đơn đặt hàng" Canvas lên trên canvas "lục giác", mọi sự kiện chuột và nhấp chuột sẽ không được kích hoạt bởi canvas "hexgrid" nữa vì nó không nhận được sự kiện nữa.

Có cách nào để "chuyển tiếp", tức là tuyên truyền các sự kiện từ một yếu tố này sang yếu tố khác hay cách nào khác để giải quyết vấn đề của tôi?

Answer 1

Có thể bạn chỉ cần kích hoạt các sự kiện canvas khác với ví dụ document.getElementById ('otherCanvas').

Answer 2

Có thể bạn cần nghe sự kiện trên phần tử gốc của canvas không? Và sau sự kiện, bạn sẽ thu thập dữ liệu từ cả hai và xử lý dữ liệu?

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

Có kinh nghiệm với các tình huống như vậy, canvases chiếm hết không gian gốc và tọa độ bên trong div giống nhau cho canvas.

Answer 3

Tôi đã tuyên truyền sự kiện cho canvas tiếp theo, nếu canvas được chồng lên nhau thì tọa độ sẽ giống nhau. Có thể tạo trình kích hoạt cho các đối tượng được xác định bên trong canvas được bao phủ.

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>