画布中的事件

Question

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

要检测鼠标输入，我使用'canvas.LineTo（）'函数。 我想使用这个特定的对象作为一个可用的链接，当用户将鼠标悬停在对象上时，它会做出反应（例如改变颜色），就像常规链接一样。 我将不胜感激任何意见或建议。 感谢您的关注。

Answer 1

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

这意味着您可以维护一个响应mousemove事件的Path2D对象列表。 我在这里放了一个小提琴 ，演示了如何让路径响应这个事件。 以下代码片段仅存储画布，其2D上下文和您关注的Path2D平行四边形列表。 在此之后，使用简单的drawParallelogram函数创建平行四边形，该函数创建Path2D对象，使用moveTo和lineTo方法形成平行四边形的形状，然后在结束时返回它。 然后，此对象由上下文填充并存储在paths数组中，以便稍后可以由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.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坐标，然后清除当前画布，以便在再次在对象顶部绘制时删除任何消除锯齿的工件。 在此之后，您可以遍历paths数组中的每个path ，并检查当前x和y坐标是否在path 。 在这种情况下，您知道您已经在项目上盘旋并可以更改其填充颜色，否则将其还原为默认设置。

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