HTML5画布鼠标

Question

类似于我已经有以下代码：

    function mouseClick(event) {
        ...
    }
    canvas.addEventListener("mousedown", mouseClick, false);
    function drawRect(x, y) {
        context.fillRect(x, y, 16, 16);
    };
    drawRect(10, 10);

如何实现当我在 Canvas 上点击矩形时获取某些内容？ 类似于如果我点击矩形，则弹出提示框。

抱歉我的英语不好。

- vuohu

---

看看像 fabric.js 这样的画布库。 - kangax

Answer 1

画布(canvas)实际上就是一张位图(bitmap)，没有记录矩形在画布上的绘制，因此如果您想检测单击是否在矩形绘制区域内，需要记录您绘制的区域并对其进行测试。例如：

var rects= [];

function mouseClick(event) {
    // Get position of click relative to canvas. This is not reliable! Requires
    // standards mode, and the canvas not being nested in other offsetParents.
    // Getting page-relative co-ordinates reliably in all cases is outside the
    // scope of this question...
    //
    var x= event.clientX-document.documentElement.scrollLeft-canvas.offsetLeft;
    var y= event.clientY-document.documentElement.scrollTop-canvas.offsetTop;

    // Hit-test each rectangle in the list of those drawn
    //
    for (var i= rects.length; i-->0;) {
        var x0= rects[i][0], y0= rects[i][1], x1= rects[i][2], y1= rects[i][3];
        if (x0<=x && x<x1 && y0<=y && y<y1) {
            alert('you clicked on a rectangle!');
        }
    }
}
function drawRect(x, y) {
    rects.push([x, y, x+16, y+16])
    context.fillRect(x, y, 16, 16);
};
drawRect(10, 10);

如果您需要大量进行此类操作，建议使用保留模式绘图系统（如SVG）而不是纯位图Canvas。在SVG中，您可以直接监听矩形对象上的点击事件，移动矩形，重新堆叠等操作。

- bobince

Answer 2

$(canvas).mousedown(function myDown(e) 
{
  var position = $(canvas).position();
  var x = e.pageX-position.left;
  var y = e.pageY-position.top;
  ...
});

这是更好的做法！

- Munkhtsogt

Answer 3

我认为你想要的是在画布上绘制的对象被点击时触发事件。我已经写了一些教程，介绍如何制作持久的形状并通过鼠标点击移动它们。这应该为你提供一个很好的起点。

- Simon Sarris

Answer 4

你也可以尝试使用Concrete.js http://www.concretejs.com，这是一个轻量级的画布框架，可添加交互性。只需像这样操作：

var key = canvas.getIntersection(x,y);

如果x、y与您绘制的某个关键字相交，则返回该关键字，您就知道悬停/单击的是什么。

这是一种更好的解决方案，因为它可以在任何您绘制的东西上工作，包括圆形、线条、曲线、多边形、任意斑点等。

- Eric Rowell

Answer 5

addEventListener 是有点棘手的。我会尝试以下方法：

canvas.addEventListener.apply(canvas, ["mousedown", mouseClick, false]);

或者使用匿名函数。

canvas.addEventListener.apply(canvas, ["mousedown", function(){ mouseClick(); }, false]);

使用 apply 函数可以确保 eventListener 应用在正确的元素上。你可以在这里阅读更多相关信息 here。

- Artur Sapek