क्या सेट माउस के आधार पर एचटीएमएल 5 कैनवास में सभी माउस ड्रैगजेबल ऑब्जेक्ट्स हैं?

Question

मैं एचटीएमएल 5 कैनवास में एक ज्यामितीय ऑप्टिक्स डेमो बना रहा हूं, माउस प्रकाश स्रोत को इंगित करता है, आप कुछ बाधाओं को तैयार कर सकते हैं, जावास्क्रिप्ट गणना कार्य करता है और उन बाधाओं के पीछे एक रेखा पर प्रकाश और छाया प्रदर्शित करता है।

उन कैनवास ड्रैग एंड ड्रॉप ट्यूटोरियल मैं ऑनलाइन पाया से

, उन सभी कोsetInterval() उपयोग कर रहे हैं माउस बातचीत हो, पूरे कैनवास अद्यतन किया जाता है और हर समय फिर से चित्रित जिसका मतलब है कि बनाने के लिए। इससे मुझे लगता है कि पूरे कैनवास व्यवसाय एक बदसूरत हैक है।

मेरा प्रश्न है: क्या canvas में setInterval() तरीके से माउस इंटरैक्शन बनाने का कोई और तरीका है? मैं पृष्ठभूमि को एक बार पेंट करना चाहता हूं और जब माउस वास्तव में आगे बढ़ रहा है तो onmousemove जबकि चलती हिस्से को फिर से खींचना है।

किसी भी विचार की सराहना की जाती है। धन्यवाद :)

Answer 1

मैं इस सवाल खत्म करने के लिए है, इस सवाल का जवाब होना चाहिए requestAnimationFramepimvdb

Answer 2

आप कैनवास को बिना ड्रैग किए जा रहे तत्व को फिर से चला सकते हैं, फिर आधार के शीर्ष पर तत्व को नए कैन में खींचें। फिर आप पूर्ण स्थिति का उपयोग कर सकते हैं ताकि को बिना किसी रेड्रॉइंग खींचा जा सके।

Answer 3

कैनवास तत्व पर एक मूसोम उपलब्ध है। मैं हर समय इसका इस्तेमाल करता हूं और मुझे विश्वास है कि यह आपकी स्थिति में बहुत उपयोगी है।

आप इसे सेटइंटरवा के साथ भी कर सकते हैं लेकिन यह इस मामले में मेरे लिए गंदा लगता है। आपको वैसे भी माउस एक्स और वाई प्राप्त करने की ज़रूरत है, मूसोम घटना में ऐसा करने के लिए क्या शर्त है! उस लेख में

Answer 4

देखो: http://www.splashnology.com/article/fifteen-puzzle-in-libcanvas/1632/

वहाँ कैनवास ड्राइंग अनुकूलित करने के कुछ तरीके हैं। सबसे पहले - पूर्ण कैनवास को दोबारा नहीं हटाएं, केवल भागों को बदल दें। और कुछ बदल गया अगर केवल redraw।

काम पर मैं LibCanvas पर आधारित गेम बना देता हूं और पृष्ठभूमि मैं एक और परत पर खींचता हूं। ऐसा ही कुछ:

var libcanvas = new LibCanvas('canvas').start(); 
var background = libcanvas.createLayer('bg', 0); 
drawBackgroundAt (background); 
startApplicationAt(libcanvas); 

Answer 5

मुझे लगता है कि आप अनुभव कर रहे है कि आप setInterval जरूरत कैनवास हर आप mouseinteraction कर अद्यतन करने के लिए है। और यह आपको थोड़ा बदसूरत लगता है क्योंकि ऐसा लगता है कि आपको "हैकिंग" पसंद है।

आपको इसके बारे में बुरा महसूस करने की ज़रूरत नहीं है, क्योंकि आपको एनिमेटेड होने वाली किसी भी चीज़ के लिए उस तंत्र की आवश्यकता होगी।

लेकिन आप सेटइंटरवाल के माध्यम से कॉल करने के तरीके में "क्लिपिंग" कर सकते हैं, आप तय कर सकते हैं कि आपके कैनवास का कौन सा हिस्सा अपडेट किया जाना चाहिए और केवल उस भाग को दोबारा हटा देना चाहिए।

यदि आपको लगातार अपनी सामग्री को अपडेट करने की आवश्यकता नहीं है, क्योंकि यह एनिमेटेड नहीं है, मैं एल्मर से सहमत हूं।

लेकिन सेट इंटरवल के माध्यम से कैनवास को अपडेट करना न तो बदसूरत और न ही गंदा है ;-) अगर आप कुछ एनिमेट करना चाहते हैं तो कैनवास अपडेट किया जाता है।

Answer 6

पहले पृष्ठभूमि खींचें, फिर canvas.save() के साथ कैनवास को सहेजें।

माउस परस्पर क्रिया: canvas.restore() और अपने चित्र खींचें।