HTML5画布鼠标

Question

像我这样的东西：

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

如果我点击我在画布中的Rect得到的东西怎么做？ 如果我点击Rect获取警报;

抱歉我的英语。

Answer 1

画布只不过是一个位图。 没有记录在画布上绘制了一个矩形，所以如果你想检测到点击是在你绘制一个矩形的区域内，你必须记录你绘制的区域并测试反对他们。 例如：

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中，您可以直接在矩形对象上侦听单击事件，移动矩形，重新堆叠矩形等等。

Answer 2

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

这是更好的方法！

Answer 3

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

Answer 4

您还可以尝试使用Concrete.js http://www.concretejs.com这是一个增加交互性的轻量级画布框架。 你会做这样的事情：

var key = canvas.getIntersection（x，y）;

如果x，y与您使用给定键绘制的图形相交，则返回键，并且您知道悬停/单击的内容。

这是一个更好的解决方案，因为它可以处理您绘制的任何内容，包括圆形，直线，曲线，多边形，任意斑点等。

Answer 5

addEventListener很棘手。 我会尝试的是

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

或使用匿名功能。

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

使用apply函数可以帮助确保将eventListener应用于正确的元素。 你可以在这里阅读它。