दिलचस्प पोस्ट
दृश्य स्टूडियो 2012 अंतिम आरसी में इंटेलिसेंस और कोड सुझाव काम नहीं कर रहा है पायथन में मनमाने ढंग से नेस्टेड सूचियों को समतल करने का सबसे तेज़ तरीका क्या है? PHP में हैशिंग पासवर्ड के लिए आप बीक्रीप का उपयोग कैसे करते हैं? गिट 1.6.4 बीटा पर विंडोज (एमएससीजीट) – यूनिक्स या डॉस लाइन समाप्ति टाइटल केस में स्ट्रिंग रूपांतरण सर्वर पर जाने के लिए jqGrid पुनः लोड कैसे करें? आप विज़ुअल स्टूडियो समाधान में कोड की लाइनों को कैसे गिनाते हैं? PHP प्रपत्र कई प्राप्तकर्ताओं को ईमेल भेजें कस्टम एटर्स को परिभाषित करना एंड्रॉइड स्टूडियो 0.8.1 – फेसबुक एसडीके का उपयोग कैसे करें? मेरा regex बहुत अधिक मिलान कर रहा है मैं इसे कैसे रोकूं? मेटाडेटा अपवाद: निर्दिष्ट मेटाडेटा संसाधन लोड करने में असमर्थ सर्वर को पुनरारंभ किए बिना MySQL क्वेरी कैश साफ़ करें सीएसएस में एचटीएमएल colspan आईओएस 7 पर एक इन-ऐप रसीदों और बंडल प्राप्तियों को स्थानीय रूप से मान्य करने का पूरा समाधान

कैनवास में माउस स्थान प्राप्त करना

क्या <canvas> टैग के अंदर स्थान माउस प्राप्त करने का कोई तरीका है? मैं <canvas> के ऊपरी दाएं कोने में सापेक्ष स्थान चाहता हूं, न कि संपूर्ण पृष्ठ

वेब के समाधान से एकत्रित समाधान "कैनवास में माउस स्थान प्राप्त करना"

सबसे आसान तरीका संभवतः कैनवास तत्व पर एक ऑनमोसाइव ईवेंट श्रोता को जोड़ना है, और फिर आप ईवेंट से कैनवास के संबंध में निर्देशांक प्राप्त कर सकते हैं।

यदि आपको केवल विशिष्ट ब्राउज़रों का समर्थन करने की आवश्यकता है, तो यह पूरा करने के लिए तुच्छ है, लेकिन एफ.एक्स के बीच अंतर है। ओपेरा और फ़ायरफ़ॉक्स

ऐसा कुछ उन दोनों के लिए काम करना चाहिए:

 function mouseMove(e) { var mouseX, mouseY; if(e.offsetX) { mouseX = e.offsetX; mouseY = e.offsetY; } else if(e.layerX) { mouseX = e.layerX; mouseY = e.layerY; } /* do something with mouseX/mouseY */ } 

स्वीकार किए जाते हैं उत्तर हर बार काम नहीं करेगा यदि आप सापेक्ष स्थिति का उपयोग नहीं करते हैं तो ऑफ़सेट ऑफसेट और ऑफ़सेट वाई भ्रमित हो सकते हैं।

आपको फ़ंक्शन का उपयोग करना चाहिए: canvas.getBoundingClientRect() कैनवास एपीआई से।

  function getMousePos(canvas, evt) { var rect = canvas.getBoundingClientRect(); return { x: evt.clientX - rect.left, y: evt.clientY - rect.top }; } canvas.addEventListener('mousemove', function(evt) { var mousePos = getMousePos(canvas, evt); console.log('Mouse position: ' + mousePos.x + ',' + mousePos.y); }, false); 

यह भी ध्यान रखें कि आपको सीएसएस की आवश्यकता होगी:

स्थिति: रिश्तेदार;

कैनवास के अंदर सापेक्ष माउस स्थिति प्राप्त करने के लिए, अपने कैनवास टैग पर सेट करें।

और अगर ऑफसेट में बदलाव होता है तो सीमा होती है

मैं सबसे बुलेटप्रूफ माउस कोड साझा करूँगा जो मैंने इस प्रकार अब तक बनाया है। यह सभी ब्राउज़रों पर काम करता है, सभी प्रकार की पैडिंग, मार्जिन, सीमा और ऐड-ऑन (जैसे स्टलम्यूपॉन शीर्ष बार)

 // Creates an object with x and y defined, // set to the mouse position relative to the state's canvas // If you wanna be super-correct this can be tricky, // we have to worry about padding and borders // takes an event and a reference to the canvas function getMouse = function(e, canvas) { var element = canvas, offsetX = 0, offsetY = 0, mx, my; // Compute the total offset. It's possible to cache this if you want if (element.offsetParent !== undefined) { do { offsetX += element.offsetLeft; offsetY += element.offsetTop; } while ((element = element.offsetParent)); } // Add padding and border style widths to offset // Also add the <html> offsets in case there's a position:fixed bar (like the stumbleupon bar) // This part is not strictly necessary, it depends on your styling offsetX += stylePaddingLeft + styleBorderLeft + htmlLeft; offsetY += stylePaddingTop + styleBorderTop + htmlTop; mx = e.pageX - offsetX; my = e.pageY - offsetY; // We return a simple javascript object with x and y defined return {x: mx, y: my}; } 

आप देखेंगे कि मैं फ़ंक्शन में अपरिभाषित कुछ (वैकल्पिक) वेरिएबल्स का उपयोग करता हूं। वो हैं:

  stylePaddingLeft = parseInt(document.defaultView.getComputedStyle(canvas, null)['paddingLeft'], 10) || 0; stylePaddingTop = parseInt(document.defaultView.getComputedStyle(canvas, null)['paddingTop'], 10) || 0; styleBorderLeft = parseInt(document.defaultView.getComputedStyle(canvas, null)['borderLeftWidth'], 10) || 0; styleBorderTop = parseInt(document.defaultView.getComputedStyle(canvas, null)['borderTopWidth'], 10) || 0; // Some pages have fixed-position bars (like the stumbleupon bar) at the top or left of the page // They will mess up mouse coordinates and this fixes that var html = document.body.parentNode; htmlTop = html.offsetTop; htmlLeft = html.offsetLeft; 

मैं उन लोगों को केवल एक बार कंप्यूटिंग की सिफारिश करता था, यही वजह है कि वे getMouse समारोह में नहीं हैं

माउस की स्थिति के लिए, मैं आमतौर पर jQuery का उपयोग करता हूं क्योंकि यह कुछ घटना विशेषताओं को सामान्य बनाता है।

 function getPosition(e) { //this section is from http://www.quirksmode.org/js/events_properties.html var targ; if (!e) e = window.event; if (e.target) targ = e.target; else if (e.srcElement) targ = e.srcElement; if (targ.nodeType == 3) // defeat Safari bug targ = targ.parentNode; // jQuery normalizes the pageX and pageY // pageX,Y are the mouse positions relative to the document // offset() returns the position of the element relative to the document var x = e.pageX - $(targ).offset().left; var y = e.pageY - $(targ).offset().top; return {"x": x, "y": y}; }; // now just make sure you use this with jQuery // obviously you can use other events other than click $(elm).click(function(event) { // jQuery would normalize the event position = getPosition(event); //now you can use the x and y positions alert("X: " + position.x + " Y: " + position.y); }); 

यह मेरे लिए सभी ब्राउज़रों में काम करता है

संपादित करें:

मैंने अपनी कक्षाओं में से एक का उपयोग करके कोड को कॉपी किया था, इसलिए इस. this.canvas को jQuery कॉल गलत था। अपडेट किए गए फ़ंक्शन बताता है कि किस प्रकार DOM तत्व ( targ ) ने घटना का कारण बना और फिर उस स्थिति का सही स्थान निकालने के लिए ऑफसेट का उपयोग करता है।

माउस स्थान सहित कैनवास के साथ परेशानियों को दूर करने के लिए जीईई अंतहीन उपयोगी पुस्तकालय है।

माउस इवेंट और कैनवास गुणों का उपयोग करते हुए साधारण दृष्टिकोण:

कार्यक्षमता का JSFiddle डेमो http://jsfiddle.net/Dwqy7/5/
(नोट: बॉर्डर्स का हिसाब नहीं किया जाता है, जिसके परिणामस्वरूप ऑफ-बाय-एक होता है):

  1. अपने कैनवास पर एक माउस ईवेंट जोड़ें
    canvas.addEventListener("mousemove", mouseMoved);

  2. event.clientX और event.clientY को निम्न पर आधारित समायोजित करें:
    canvas.offsetLeft
    window.pageXOffset
    window.pageYOffset
    canvas.offsetTop
    इस प्रकार:

    canvasMouseX = event.clientX - (canvas.offsetLeft - window.pageXOffset); canvasMouseY = event.clientY - (canvas.offsetTop - window.pageYOffset);

मूल प्रश्न ऊपरी दाएं (दूसरे फ़ंक्शन) से निर्देशांक के लिए पूछा गया। इन कार्यों को एक क्षेत्र के भीतर होना चाहिए जहां वे कैनवास तत्व का उपयोग कर सकते हैं।

0,0 ऊपरी बाएं पर:

 function mouseMoved(event){ var canvasMouseX = event.clientX - (canvas.offsetLeft - window.pageXOffset); var canvasMouseY = event.clientY - (canvas.offsetTop - window.pageYOffset); } 

0,0 ऊपरी दाएं पर:

 function mouseMoved(event){ var canvasMouseX = canvas.width - (event.clientX - canvas.offsetLeft)- window.pageXOffset; var canvasMouseY = event.clientY - (canvas.offsetTop - window.pageYOffset); } 

मैं jQuery का उपयोग करता हूँ

 $(document).ready(function() { $("#canvas_id").bind( "mousedown", function(e){ canvasClick(e); } ); } function canvasClick( e ){ var x = e.offsetX; var y = e.offsetY; } 

इस तरह आपका कैनवास आपके पृष्ठ, रिश्तेदार या पूर्ण पर कहीं भी हो सकता है।

कैनवास में स्थानीय स्थिति प्राप्त करने के लिए माउस की स्थिति से कैनवास DOM तत्व के एक्स और वाई ऑफ़सेट घटाएं।