event.layerX और event.layerY

Question

के उपयोग को बदलने के लिए क्रॉस-ब्राउज़र समाधान मैं एक सरल ऐप से कुछ कोड अनुकूलित करने की कोशिश कर रहा हूं जो रैफेल का उपयोग करता है ताकि उपयोगकर्ताओं को कैनवास पर मंडल और आयत खींचने की अनुमति मिल सके। (https://gist.github.com/673186 पर मूल कोड)

मूल कोड jQuery के पुराने संस्करण का उपयोग करता था और ठीक काम करता था। http://jsfiddle.net/GHZSd/

jQuery के एक अद्यतन संस्करण का उपयोग करके, उदाहरण को तोड़ता है। http://jsfiddle.net/GHZSd/1/

इसका कारण यह है कि event.layerX और event.layerY को jQuery के नए संस्करण में परिभाषित नहीं किया गया है। मेरा सवाल है - मैं उन मूल्यों को बदलने के लिए किस कोड का उपयोग कर सकता हूं? मैंने कुछ गणित करके कुछ चीजों की कोशिश की है (event.originalEvent.layerX/layerX अभी भी अभी मौजूद है इसलिए मैं कुछ सामान जोड़ने/घटाने की कोशिश कर रहा हूं जिसके परिणामस्वरूप वे मान होंगे) लेकिन अब तक क्या काम करता है ब्राउज़र उन सभी पर काम नहीं करता है।

क्षमा करें अगर इससे पहले पूछा गया है लेकिन मुझे SO या कहीं और पर ठोस जवाब नहीं मिला।

Answer 1

तो, मैंने इस समस्या के बारे में थोड़ा सोचा, क्योंकि क्रोम टीम अजीब कारणों से layerX और layerY को हटाना चाहता है।

सबसे पहले, हम अपने कंटेनर की स्थिति की जरूरत है:

var position = $paper.offset(); 

यह हमारे दो देता है (खोला बेला के बिना पढ़ने वालों के लिए, $ कागज div जहां svg तैयार हो जाएगा) कॉर्ड, position.top और position.left, इसलिए हम जानते हैं कि पृष्ठ में कंटेनर कहां है।

फिर, क्लिक पर, हम e.pageX और e.pageY का उपयोग करते हैं, जो पृष्ठ के तार हैं। layerX और layerY का अनुकरण करने के लिए, हम (e.pageX - position.left) और (e.pageY - position.top)

का उपयोग एट देखा: http://jsfiddle.net/GHZSd/30/ पर क्रोम, सफारी, एफएफ और ओपेरा

काम करता है।