图层二Canvas'在彼此的顶部+单击事件

Layering two Canvas' on top of each other + click event

本文关键字：顶部 事件 单击 Canvas 图层      更新时间：2023-09-26

我想把两个Canvas元素叠在一起。它们用于游戏，其中较低的画布将显示一个六边形，而较高的画布意味着显示问题/命令(基本上是箭头或六边形高亮-我不想重画一个巨大的六边形无数次)给玩家。

画布按zIndex 1/2分层。

然而，问题是:显示在顶部画布上的订单应该是在响应"点击"answers"鼠标移动"事件时绘制到底部画布的。

显然，通过在"hexgrid"画布上分层"orders"画布，任何鼠标移动和点击事件将不再由"hexgrid"画布触发，因为它不再接收事件。

是否有一种方法来"转发"，即传播事件从一个元素到另一个元素或将是另一个聪明的方法来解决我的问题?

也许你需要在画布的根元素上监听事件?之后你会从他们两个收集数据并进行处理吗?

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

有过这种情况的经验，画布占用了根的所有空间，div内的坐标对于画布是相同的。

我会将事件传播到下一个画布，如果画布重叠，坐标将是相同的。可以为被覆盖画布内定义的对象创建一个触发器。

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) {
   
	 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>

也许你可以触发其他画布事件，例如document.getElementById('otherCanvas').click()?

相关文章：