एचटीएमएल 5 कैनवास माउसओवर इवेंट

Question

मैं उस मामले के लिए कैनवास पर खींची गई वस्तु के लिए माउसओवर या किसी भी घटना को कैसे बांधूं?

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 का उपयोग कर: उदाहरण के लिए, मैं इस कोशिश की। यदि यह एकमात्र तरीका है, तो मैं इसका उपयोग करूंगा, मुझे लगता है कि अतिरिक्त प्लग-इन के बिना खींचे गए तत्वों को ईवेंट बाध्य करने का एक तरीका है। क्षमा करें कैनवास नोब। अपने आप पर http://jsfiddle.net/jyBSZ/2/

Answer 1

(मैं एक पोस्ट की गई टिप्पणी के रूप में इस शुरू कर दिया है, तो एहसास हुआ कि यह एक वास्तविक जवाब है।)

दुर्भाग्य से, जावास्क्रिप्ट में, आप नहीं कर सकते: मैं अपने कोड यहाँ के साथ एक बेला बना दिया। कोई कैनवास ऑब्जेक्ट्स नहीं हैं, केवल पूरे कैनवास हैं, और जो भी आपने इसके संदर्भ में खींचा है। गतिशील जैसे प्लगइन्स आपके लिए ऑब्जेक्ट बना सकते हैं, लेकिन कैनवास का पूरा बिंदु यह है कि ब्राउज़र इसे एक स्थिर छवि के रूप में सोच सकता है।

आप, आप, कैनवास को MouseMove घटनाओं बाध्य कर सकते हैं अपनी स्थिति और स्थान है जहाँ आप सामान आकर्षित ट्रैक करते हैं और अपने दम पर मतलब है कि यह खत्म हो गया "उस वस्तु" है चाहते हैं (प्रभावी रूप से क्या प्लगइन्स करते हैं), लेकिन यह घटकों पर माउसओवर घटनाओं की बजाय एक एकल कैनवास पर सभी mousemove घटनाओं है। (आप "ऑब्जेक्ट्स" के लिए माउसओवर इवेंट को अनुकरण भी कर सकते हैं, लेकिन नीचे, यह अभी भी आंदोलन की जांच करने और अपने ऑब्जेक्ट सेटअप की जांच करने पर आधारित है।)

Answer 2

कैनवास तत्व के भीतर खींची गई वस्तुएं HTML तत्व नहीं हैं , बस पिक्सेल, और इसलिए डीओएम घटनाओं को एचटीएमएल तत्वों के तरीके से फेंक नहीं देगा।

आपको अपने ऑब्जेक्ट्स के स्थानों को ट्रैक करने और कैनवास 'onmousemove ईवेंट को संभालने की आवश्यकता होगी ताकि यह निर्धारित किया जा सके कि माउस आपकी खींची गई वस्तुओं में से एक से अधिक हो।

Answer 3

आप jCanvas उपयोग कर सकते हैं, एक नज़र here

मैं आपकी समस्या के लिए एक jsfiddle उदाहरण बना ले।

सिर्फ वांछित परिणाम

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

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