获取画布内每个矩形的点击事件？

Question

我不知道如何在每个矩形上注册点击事件。

这是示例：

http://jsfiddle.net/9WWqG/1/

原文由 twesh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您基本上必须跟踪矩形在画布上的位置，然后在画布本身上设置一个事件侦听器。从那里您可以获取点击事件的坐标并遍历所有矩形以测试“碰撞”。

这是一个这样做的例子：http: //jsfiddle.net/9WWqG/2/

HTML:

 <canvas id="myCanvas" width="300" height="150"></canvas>

javascript:

 // get canvas element.
var elem = document.getElementById('myCanvas');

function collides(rects, x, y) {
    var isCollision = false;
    for (var i = 0, len = rects.length; i < len; i++) {
        var left = rects[i].x, right = rects[i].x+rects[i].w;
        var top = rects[i].y, bottom = rects[i].y+rects[i].h;
        if (right >= x
            && left <= x
            && bottom >= y
            && top <= y) {
            isCollision = rects[i];
        }
    }
    return isCollision;
}

// check if context exist
if (elem && elem.getContext) {
    // list of rectangles to render
    var rects = [{x: 0, y: 0, w: 50, h: 50},
                 {x: 75, y: 0, w: 50, h: 50}];
  // get context
  var context = elem.getContext('2d');
  if (context) {

      for (var i = 0, len = rects.length; i < len; i++) {
        context.fillRect(rects[i].x, rects[i].y, rects[i].w, rects[i].h);
      }

  }

    // listener, using W3C style for example
    elem.addEventListener('click', function(e) {
        console.log('click: ' + e.offsetX + '/' + e.offsetY);
        var rect = collides(rects, e.offsetX, e.offsetY);
        if (rect) {
            console.log('collision: ' + rect.x + '/' + rect.y);
        } else {
            console.log('no collision');
        }
    }, false);
}

原文由 Matt King 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这是一个古老的问题，但是在发布时曾经很难做到的事情现在变得容易多了。

有许多库可以跟踪在画布上绘制的对象的位置，并处理处理鼠标交互的所有复杂性。有关更多信息，请参阅 EaselJS 、 KineticJS 、 Paper.js 或 Fabric.js 以及 画布库 的比较。

您还可以采用不同的方法并使用 Raphaël 和 gRaphaël 来获得一个使用 SVG 和 VML 而不是画布的解决方案，甚至可以在 IE6 上运行。

您的示例更改为使用 Raphaël 将如下所示：

 var r = Raphael(0, 0, 300, 150);

r.rect(0, 0, 50, 50)
    .attr({fill: "#000"})
    .click(function () {
        alert('first rectangle clicked');
     });

r.rect(75, 0, 50, 50)
    .attr({fill: "#000"})
    .click(function () {
        alert('second rectangle clicked');
     });

见 演示。

2015 年更新

您也可以使用 ART ，这是一种用于 HTML5 画布的保留模式矢量绘图 API - 请参阅 此答案 以获取更多信息。

原文由 rsp 发布，翻译遵循 CC BY-SA 4.0 许可协议