处理 canvas 等距网格内的鼠标悬停图像

Question

我在 html canvas 中得到了一个等距网格。

我正在尝试处理鼠标 hover 的建筑物。

有些建筑物会有不同的高度。

正如您在下图中看到的，我将鼠标悬停在一个图块上，鼠标指针位于蓝色图块内。

问题是当鼠标指针离开地面瓷砖或在建筑物图像的中间时，突出显示的瓷砖会消失。

需要一种方法来点击每个单独的建筑物，如何解决这个问题？

主要基本功能：

  let applied_map = ref([]); // tileMap
  let tile_images = ref([]); // this will contain loaded IMAGES for canvas to consume from
  let tile_height = ref(50);
  let tile_width = ref(100);



  const renderTiles = (x, y) => {
  let tileWidth = tile_width.value;
  let tileHeight = tile_height.value;
  let tile_half_width = tileWidth / 2;
  let tile_half_height = tileHeight / 2;
 
  for (let tileX = 0; tileX < gridSize.value; ++tileX) {
    for (let tileY = 0; tileY < gridSize.value; ++tileY) {
      let renderX = x + (tileX - tileY) * tile_half_width;
      let renderY = y + (tileX + tileY) * tile_half_height;
      let tile = applied_map.value[tileY * gridSize.value + tileX];
      renderTileBackground(renderX, renderY + 50, tileWidth, tileHeight);
      if (tile !== -1) {
        if (tile_images.value.length) {
          renderTexturedTile(
            tile_images.value[tile].img,
            renderX,
            renderY + 40,
            tileHeight
          );
        }
      }
    }
  }

  if (
    hoverTileX.value >= 0 &&
    hoverTileY.value >= 0 &&
    hoverTileX.value < gridSize.value &&
    hoverTileY.value < gridSize.value
  ) {
    let renderX = x + (hoverTileX.value - hoverTileY.value) * tile_half_width;
    let renderY = y + (hoverTileX.value + hoverTileY.value) * tile_half_height;

    renderTileHover(renderX, renderY + 50, tileWidth, tileHeight);
  }
};

const renderTileBackground = (x, y, width, height) => {
  ctx.value.beginPath();
  ctx.value.setLineDash([5, 5]);
  ctx.value.strokeStyle = "black";
  ctx.value.fillStyle = "rgba(25,34, 44,0.2)";
  ctx.value.lineWidth = 1;
  ctx.value.moveTo(x, y);
  ctx.value.lineTo(x + width / 2, y - height / 2);
  ctx.value.lineTo(x + width, y);
  ctx.value.lineTo(x + width / 2, y + height / 2);
  ctx.value.lineTo(x, y);
  ctx.value.stroke();
  ctx.value.fill();
};

const renderTexturedTile = (imgSrc, x, y, tileHeight) => {
  let offsetY = tileHeight - imgSrc.height;

  ctx.value.drawImage(imgSrc, x, y + offsetY);
};

const renderTileHover = (x, y, width, height) => {
  ctx.value.beginPath();
  ctx.value.setLineDash([]);
  ctx.value.strokeStyle = "rgba(161, 153, 255, 0.8)";
  ctx.value.fillStyle = "rgba(161, 153, 255, 0.4)";
  ctx.value.lineWidth = 2;
  ctx.value.moveTo(x, y);
  ctx.value.lineTo(x + width / 2, y - height / 2);
  ctx.value.lineTo(x + width, y);
  ctx.value.lineTo(x + width / 2, y + height / 2);
  ctx.value.lineTo(x, y);
  ctx.value.stroke();
  ctx.value.fill();
};

在下面回答后更新

基于Helder Sepulveda的回答，我创建了一个 function drawCube。

并添加到我的点击 function 和 renderTiles。 因此，在单击和帧更新时，它创建了一个具有 3 个面的立方体，并将其放置在与建筑物相同的 position 上并将路径存储在全局变量中，立方体遵循等距 position。在 drawCube 中，有一个条件我需要隐藏立方体的右脸。 如果下一个瓷砖上有建筑物，则隐藏。 因此，如果您输入 hover 建筑物，它不会触发最后一座建筑物。

      //...some code click function
      //...
      if (tile_images.value[tileIndex] !== undefined) {
        drawCube(
          hoverTileX.value + tile_height.value,
          hoverTileY.value +
            Number(tile_images.value[tileIndex].img.height / 2) -
            10,
          tile_height.value, // grow X pos to left
          tile_height.value, // grow X pos to right,
          Number(tile_images.value[tileIndex].img.height / 2), // height,
          ctx.value,
          {
            tile_index: tileIndex - 1 < 0 ? 0 : tileIndex - 1,
          }
        );
      }

这是 drawCube

const drawCube = (x, y, wx, wy, h, the_ctx, options = {}) => {
  // https://codepen.io/AshKyd/pen/JYXEpL
  let path = new Path2D();
  let hide_options = {
    left_face: false,
    right_face: false,
    top_face: false,
  };
  if (options.hasOwnProperty("hide")) {
    hide_options = Object.assign(hide_options, options.hide);
  }
  // left face
  if (!hide_options.left_face) {
    path.moveTo(x, y);
    path.lineTo(x - wx, y - wx * 0.5);
    path.lineTo(x - wx, y - h - wx * 0.5);
    path.lineTo(x, y - h * 1);
  }

  // right;
  if (
    !hide_options.right_face &&
    !coliders.value[options.tile_index].hide_right_face
  ) {
    path.moveTo(x, y);
    path.lineTo(x + wy, y - wy * 0.5);
    path.lineTo(x + wy, y - h - wy * 0.5);
    path.lineTo(x, y - h * 1);
  }
  //top
  if (!hide_options.right_face) {
    path.moveTo(x, y - h);
    path.lineTo(x - wx, y - h - wx * 0.5);
    path.lineTo(x - wx + wy, y - h - (wx * 0.5 + wy * 0.5));
    path.lineTo(x + wy, y - h - wy * 0.5);
  }
  // the_ctx.beginPath();
  let isONHover = the_ctx.isPointInPath(
    path,
    mousePosition.x - 10,
    mousePosition.y - 10
  );
  the_ctx.fillStyle = null;
  if (isONHover) {
    // let indx = options.tile_pos.y * gridSize.value + options.tile_pos.x;
    //this is the click on object event
    if (isMouseDown.value) {
      //Trigger
      if (buildozer.value === true) {
        coliders.value[options.tile_index] = -1;
        applied_map.value[options.tile_index] = -1;
      }
      isMouseDown.value = false;
    }
    the_ctx.fillStyle = "green";
  }

  the_ctx.fill(path);
  if (
    coliders.value[options.tile_index] == -1 &&
    applied_map.value[options.tile_index]
  ) {
    coliders.value[options.tile_index] = path;
  }
};

Answer 1

简而言之，您需要能够检测到鼠标悬停在更复杂的形状上......

我推荐你使用 Path2d：
https://developer.mozilla.org/zh-CN/docs/Web/API/Path2D
这样你就可以构建任何你喜欢的形状，然后我们可以访问isPointInPath来检测鼠标是否在我们的形状上。
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/isPointInPath

这是一个小例子：

 class Shape { constructor(x, y, width, height) { this.path = new Path2D() this.path.arc(x, y, 12, 0, 2 * Math.PI) this.path.arc(x, y - 9, 8, 0, 1.5 * Math.PI) this.path.lineTo(x + width / 2, y) this.path.lineTo(x, y + height / 2) this.path.lineTo(x - width / 2, y) this.path.lineTo(x, y - height / 2) this.path.lineTo(x + width / 2, y) } draw(ctx, pos) { ctx.beginPath() ctx.fillStyle = ctx.isPointInPath(this.path, pos.x, pos.y)? "red": "green" ctx.fill(this.path) } } function getMousePos(canvas, evt) { var rect = canvas.getBoundingClientRect() return { x: evt.clientX - rect.left, y: evt.clientY - rect.top } } var canvas = document.getElementById("canvas") var ctx = canvas.getContext("2d") shapes = [] for (var i = 0; i < 4; i++) { for (var j = 0; j < 4; j++) { shapes.push(new Shape(50 + i * 40, 40 + j * 40, 40, 20)) } } canvas.addEventListener("mousemove", function(evt) { ctx.clearRect(0, 0, canvas.width, canvas.height) var mousePos = getMousePos(canvas, evt) shapes.forEach((s) => {s.draw(ctx, mousePos)}) }, false ) shapes.forEach((s) => { s.draw(ctx, {x: 0, y: 0}) })

 <canvas id="canvas" width="200" height="200"></canvas>

此示例绘制了一个“复杂”形状（两条弧线和几条线），当鼠标悬停在该形状上时，该形状的颜色变为红色