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畫布鼠標懸停事件

回答

相關問題