Question

我目前正在尝试同时检测两个网格框上的鼠标点击。一个网格很简单，我只是在使用：

var gridPosX = Math.floor(mouseClickX/BoxWidth);
var gridPosY = Math.floor(mouseClickY/BoxHeight);

现在我还想检测位于第一个网格框角落的辅助网格框上的鼠标点击。这可以通过与第一个网格类似的方式实现。问题出现了，因为我想同时检测第一个网格或第二个网格上的点击。区分第一个网格上的点击与第二个网格上的点击的最佳方法是什么？我试图删除Math.floor并使用大于和小于运算符（＆gt;＆lt;）来查看点击是否比另一个更接近一个网格点，但我没有到目前为止好运。

This is an image example of the grid. The black being the main one, the red being the second one

＆＃13;

var WIDTH = 1280, HEIGHT = 1280;
var canvas, context;
var grid = [];
var grid2 = [];

var gridWidth = 10, gridHeight = 10;
var boxWidth = WIDTH/gridWidth, boxHeight = HEIGHT/gridHeight;

function main(){
  canvas = document.createElement("canvas");
  canvas.width = WIDTH;
  canvas.height = HEIGHT;
  context = canvas.getContext("2d");
  document.body.appendChild(canvas);
  
canvas.onmousedown = function(e){
  if(e.which == 1){
    var gridPosX = Math.floor(e.offsetX/boxWidth);
    var gridPosY = Math.floor(e.offsetY/boxHeight);

    grid[gridPosX][gridPosY] = 0;
  }
}
  
  init();
  setInterval(draw, 30);
}

function init(){
   for(var x = 0; x < gridWidth; x++){
    grid[x] = [];
    grid2[x] = [];
    for(var y = 0; y < gridHeight; y++){
        grid[x][y] = 1;
        grid2[x][y] = 1;
    }
  }
}

function draw(){
  for(var x = 0; x < gridWidth; x++){
    for(var y = 0; y < gridHeight; y++){
      if(grid[x][y] == 1){
		context.fillStyle = 'gray';
        context.fillRect(x*boxWidth, y*boxHeight, boxWidth, boxHeight);
        context.strokeRect(x*boxWidth, y*boxHeight, boxWidth, boxHeight);
      }
    }
  }
  for(var x = 0; x < gridWidth; x++){
    for(var y = 0; y < gridHeight; y++){
      if(grid2[x][y] == 1){
		context.fillStyle = 'red';
        context.fillRect((x*boxWidth)+(boxWidth)-(boxWidth/4), (y*boxHeight)+(boxHeight)-(boxHeight/4), boxWidth/2, boxHeight/2);
         context.strokeRect((x*boxWidth)+(boxWidth)-(boxWidth/4), (y*boxHeight)+(boxHeight)-(boxHeight/4), boxWidth/2, boxHeight/2);
      }
    }
  }
}

main();

＆＃13;

Answer 1

由于红色网格显示在灰色网格之上，我认为您可以先判断鼠标事件是否在红色网格上。如果没有，那么它必须是灰色网格。

根据以下计算检查是否点击了红色网格：

didDisconnectWithUser

基本上，你首先从offsetX / Y中减去第一列/行中的初始灰色区域，然后查看offsetX / Y的其余部分是否包含奇数或偶数的boxSize / 2（红色网格的边长））。偶数表示点击在红色网格上，否则它落在未覆盖的灰色区域上。

工作小提琴：https://jsfiddle.net/mwxzgth6/1/

检测鼠标单击重叠的框网格 - JavaScript Canvas

1 个答案: