HTML5画布鼠标

喜欢的东西我有：HTML5画布鼠标

 

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

如何做这样的事情，如果我在画布点击我的矩形得到的东西？类似于如果我点击Rect get alert;

对不起，我的英文。

来源

2011-08-28 vuohu

看看帆布图书馆像[fabric.js]工作（ http://kangax.github.com/fabric.js/demos/kitchensink/） – kangax

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

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，而不是纯粹的位图画布。在SVG中，您可以直接在矩形对象上侦听点击事件，移动矩形，重新堆叠等等。

来源

2011-08-28 22:23:24 bobince

addEventListener很棘手。我会尝试是

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

或使用匿名函数。

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

使用的应用功能，可以帮助确保eventListener被应用到合适的元素。你可以阅读关于它here。

来源

2011-08-28 21:57:18

我想你所说的是，当你点击你在画布上绘制的对象时，你希望事件发生。我已经写了几个tutorials关于如何制作持久形状并用鼠标点击移动它们。这应该给你一个很好的起点。

来源

2011-08-28 22:19:45

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

这是更好的方法来做到这一点！

来源

2012-06-14 05:55:18 zi0408

你也可以尝试一下Concrete.js http://www.concretejs.com这是一个增加交互性的轻量级画布框架。你只需要这样做：

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

如果x，y与您使用给定键绘制的图形相交，则返回该键，并且您知道悬停/点击的是什么。

这是一个更好的解决方案，因为它会在任何你画，包括圆，直线，曲线，多边形，任意斑点等

来源

2016-04-01 20:10:12

HTML5画布鼠标

回答

相关问题