क्या मूसोम घटना को तेज करने का कोई तरीका है?

Question

मैं इस वेबसाइट के लिए एक छोटे से ड्राइंग लिपि (कैनवास) ने लिखा: http://scri.ch/

आप दस्तावेज़ पर क्लिक करते हैं, हर mousemove घटना मूल रूप से निम्नलिखित निष्पादित करता है:
- निर्देशांक प्राप्त करें।
- context.lineTo() इस बिंदु और पिछले एक
के बीच - context.stroke() लाइन

आप देख सकते हैं, अगर आप कर्सर बहुत तेजी से ले जाते हैं, घटना पर्याप्त ट्रिगर नहीं कर रहा (अपने CPU/ब्राउज़र पर निर्भर करता है/आदि ।), और एक सीधी रेखा का पता लगाया गया है।

स्यूडोकोड में:

window.addEventListener('mousemove', function(e){ 
    myContext.lineTo(e.pageX, e.pageY); 
    myContext.stroke(); 
}, false); 

यह एक ज्ञात समस्या है, और समाधान ठीक है, लेकिन मुझे लगता है कि अनुकूलन करने के लिए करना चाहते हैं।

तो stroke() की बजाय प्रत्येक बार एक मूसमॉव घटना ट्रिगर होती है, मैंने नए समन्वय को सरणी कतार के अंदर रखा है, और नियमित रूप से इसे टाइमर के साथ खींच/खाली कर दिया है।

स्यूडोकोड में:

var coordsQueue = []; 

window.addEventListener('mousemove', function(e){ 
    coordsQueue.push([e.pageX, e.pageY]); 
}, false); 

function drawLoop(){ 
    window.setTimeout(function(){ 
    var coords; 
    while (coords = coordsQueue.shift()) { 
     myContext.lineTo(coords[0], coords[1]); 
    } 
    myContext.stroke(); 
    drawLoop(); 
    }, 1000); // For testing purposes 
} 

लेकिन यह लाइन में सुधार नहीं किया। तो मैंने केवल mousemove पर एक बिंदु बनाने की कोशिश की। वही परिणाम: अंक के बीच बहुत अधिक जगह।

यह मुझे एहसास हुआ कि पहला कोड ब्लॉक पर्याप्त कुशल है, यह केवल mousemove ईवेंट है जो बहुत धीरे-धीरे ट्रिगर कर रहा है।

तो, बेकार ऑप्टिमाइज़ेशन को लागू करने के लिए कुछ समय बिताए जाने के बाद, यह आपकी बारी है: क्या mousemove डीओएम स्क्रिप्टिंग में गति को गति देने के लिए कोई तरीका है?

क्या किसी भी समय माउस स्थिति "अनुरोध" करना संभव है?

आपकी सलाह के लिए धन्यवाद!

Answer 1

यदि आप रिपोर्टिंग आवृत्ति को बढ़ाना चाहते हैं, तो मुझे डर है कि आप भाग्य से बाहर हैं। चूहे केवल प्रति सेकंड n बार ऑपरेटिंग सिस्टम के लिए अपने स्थान की रिपोर्ट दे और मुझे लगता है कि n आमतौर पर 100 से कम है (किसी वास्तविक चश्मा के साथ इस बात की पुष्टि, उन्हें जोड़ने के लिए स्वतंत्र महसूस कर सकते हैं!)

तो एक चिकनी रेखा प्राप्त करने के लिए, आपको कुछ प्रकार की इंटरपोलेशन योजना के साथ आना होगा। इस विषय पर बहुत सारे साहित्य हैं; मैं monotone cubic interpolation की सलाह देता हूं क्योंकि यह स्थानीय, लागू करने में आसान है, और बहुत स्थिर (कोई ओवरहूट नहीं)।

फिर, जब आप स्पलीन की गणना कर लेंगे, तो आप इसे लाइन सेगमेंट के साथ पर्याप्त रूप से कम कर सकते हैं ताकि यह चिकनी लग सके, या आप सभी बाहर जा सकते हैं और इसे खींचने के लिए अपना खुद का Bresenham एल्गोरिदम लिख सकते हैं।

यदि यह सब एक साधारण ड्राइंग एप्लिकेशन के लिए लायक है ... यह निश्चित रूप से आपके लिए तय करना है।

Answer 2

कूल साइट, दुर्भाग्यवश जावास्क्रिप्ट के साथ माउस की वर्तमान स्थिति का अनुरोध करने का कोई तरीका नहीं है, आपके पास केवल एक ही हुक है जो आप पहले से ही उपयोग कर रहे हैं।यदि आपके पास अधिक नियंत्रण होना चाहिए तो मैं फ्लैश का उपयोग करना चाहूंगा जहां आप फ्रेम दर बदल सकते हैं और माउस की स्थिति का अनुरोध कर सकते हैं।

trace("Mouse X: " + _xmouse); 
trace("Mouse Y: " + _ymouse);