HTML5画布鼠标悬停事件

如何将鼠标悬停或任何事件与该事件绑定到画布上的绘制对象？例如，我试过这个：HTML5画布鼠标悬停事件

var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
ctx.beginPath(); 

//STEP ONE 
var stepOneRec = ctx.rect(20, 60, 266, 50); 
ctx.stroke(); 
stepOneRec.addEventListener("mouseover", function() { alert('it works!'); });

在一个站点上，我看着它显示了一个使用Kinetic.js的方法。如果这是唯一的方法，我会使用它，我只是假设有一种方法可以将事件绑定到绘制元素而无需额外的插件。对不起Canvas noob。我做了一个拨弄我的代码在这里：http://jsfiddle.net/jyBSZ/2/

来源

2013-09-27 user2287474

（我开始这是一个发表的评论，然后意识到这是一个真正的答案。）

不幸的是，在JavaScript中它自己的，你不能。没有画布对象，只是画布整体，以及你绘制的任何内容。像kinetic这样的插件可以为你制作对象，但整个画布的重点在于浏览器可以将它看作一个静态图像。

如果您愿意，您可以将mousemove事件绑定到画布上，跟踪它的位置和绘制东西的位置，并且暗示您自己已经完成了“该对象”（实际上是插件的功能），但它是一个画布上的所有mousemove事件，而不是其组件上的鼠标悬停事件。（你甚至可以让你的事件绑定模拟一个“对象”的鼠标悬停事件，但在下面，它仍然基于检查移动并检查你自己的对象设置。）

来源

2013-09-27 16:09:47

喔！我在这个网站上（http://hakim.se/experiments/html5/blob/03/），我试图看看他是如何处理他的鼠标事件的，我想这只是通过corrdinartes。 – user2287474

@ user2287474他最小化了他的主代码，这使得很难说。在js/blob.min.js里面，我可以看到他处理事件的大部分功能都是第一位的，但很难理解。（我看到键盘按下和触摸事件的东西）。他创建了一些对象来保存渲染信息，但在某处，他渲染了每个动画中的所有对象。 –

我认为他的意思是mousemove事件。使用mousemove事件跟踪位置，然后使用条件语句在到达对象区域时“执行某些操作”。 –

画布元素内绘制的对象不是HTML元素，只是像素，因此不会像HTML元素那样抛出DOM事件。

您需要自己跟踪对象的位置，并处理画布'onmousemove事件以确定鼠标何时位于您的绘制对象之一。

来源

2013-09-27 16:10:22

可以使用jCanvas，看看here

我犯了一个jsfiddle例如，对于您的问题。

只需修改下一个回调期望的结果

function mouseOut(layer){ 
$("#mouse-over-text").html('none options selected'); 
} 

function mouseIn(layer){ 
$("#mouse-over-text").html(getTextForId(layer.name)); 
}

来源

2013-09-27 18:36:55

HTML5画布鼠标悬停事件

回答

相关问题