得到画布内每个矩形的点击事件？

Question

我不知道如何在每个矩形上注册click事件.

这是样本:

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

Answer 1

你基本上必须跟踪画布上矩形的位置,然后在画布上设置一个事件监听器.从那里你可以获取click事件的坐标并遍历所有的矩形来测试'碰撞'.

这是一个这样做的例子: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);
}

Answer 2

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

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

您也可以采用不同的方法并使用 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');
     });

见DEMO.

2015年更新

您也可以使用ART,一种用于HTML5画布的保留模式矢量绘图API - 有关详细信息,请参阅此答案.