javascript - Canvas 中的事件

Question

我正在寻找一种在 Canvas 上使用鼠标输入来制作对象的方法。这些对象的形状应该像平行四边形，例如:

为了检测鼠标输入，我使用了“canvas.LineTo()”函数。我想将此特定对象用作可悬停链接，当用户将鼠标悬停在该对象上时，它会使用react(例如改变颜色)，就像常规链接一样。 我将不胜感激任何输入或替代想法。 感谢您的关注。

Answer 1

您可以使用 isPointInPath Canvas 上下文上的方法，用于检查特定的 x 和 y 坐标是否在 Path2D 对象的范围内。

这意味着您可以维护一个响应 mousemove 事件的 Path2D 对象列表。我放了一个 fiddle这里演示了如何使路径响应此事件。以下代码片段仅存储 Canvas 、其 2D 上下文和您关注的 Path2D 平行四边形列表。在此之后，使用一个简单的 drawParallelogram 函数创建平行四边形，该函数创建 Path2D 对象，使用 moveTo 和 lineTo 形成平行四边形的形状方法，然后在最后返回它。然后该对象由上下文填充并存储在路径数组中，以便稍后可以由 Canvas mousemove 事件使用。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var paths = [];

function drawParallelogram(x, y, width, height, offset) {
    var path = new Path2D();
    path.moveTo(x, y + offset);
    path.lineTo(x, y + height);
    path.lineTo(x + width, y + height - offset);
    path.lineTo(x + width, y);
    return path;
}

var parallelogram = drawParallelogram(50, 50, 150, 100, 30);
ctx.fill(parallelogram);
paths.push(parallelogram);

接下来，您要将 mousemove 事件监听器添加到 Canvas ，以便您可以开始检测何时将鼠标悬停在平行四边形上。

canvas.addEventListener('mousemove', function (event) {
  var canvas = event.target;
  var ctx = canvas.getContext('2d');

  var rect = canvas.getBoundingClientRect();
  var x = event.clientX - rect.left;
  var y = event.clientY - rect.top;

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  paths.forEach(function (path) {
    if (ctx.isPointInPath(path, x, y)) {
        // Hovered.
        ctx.fillStyle = '#f00';
        ctx.fill(path);
    } else {
        // Go back to default state.
        ctx.fillStyle = '#000';
        ctx.fill(path);
    }
  });

});

在 mousemove 事件监听器中，我们获取鼠标指针当前的 x 和 y 坐标，然后清除当前 Canvas ，以便再次在对象顶部绘制时，任何抗锯齿瑕疵都会被移除。在此之后，您可以遍历 paths 数组中的每个 path 并检查当前 x 和 y 坐标是否在 path 内。在这种情况下，您知道您已将鼠标悬停在该项目上并且可以更改其填充颜色，否则将其恢复为默认设置。

您可以改进这里发生的事情的一种方法是为每种类型的可悬停项目创建 JavaScript 类，并触发一些自定义 hover 和 leave 事件，而不是手动调整填充颜色。此实现将使您能够更轻松地处理其他类型的对象。