2011-08-28 15 views
8

मैं एक वेब ऐप बना रहा हूं जो ड्रॉ करने के लिए कैनवास का उपयोग करता है। मैं एक बेहद बड़ी ड्राइंग स्पेस लेना चाहता हूं (जब तक आप किसी भी दिशा में स्क्रॉल कर सकते हैं) और डेटा/छवियों को डेटाबेस में सहेज लें।असीमित बड़े कैनवास कैसे प्राप्त करें?

कुछ ऐसा ही किया गया है: http://wordsquared.com/, जहां इसे चलाने वाले अधिक लोग, जितना बड़ा हो जाता है।

मुझे पता है कि किसी भी तरह की छवियों को टाइल करने की आवश्यकता होगी, उन्हें एक डीबी में सहेजना होगा, फिर केवल व्यूपोर्ट में ही रहना होगा। यह और अनंत स्क्रॉलिंग कैसे पूरा की जाएगी/मुझे कहां से शुरू करना चाहिए?

+2

आप इसे अनंत, नहीं ठीक से हो नहीं हो सकता है, और तुम सिर्फ एक दिशा में अगले हिस्सा लोड करने के लिए, के रूप में आप अपने समन्वय प्रणाली की सीमा से टकराने पहुंच जाएंगे नहीं करना चाहती। आप जो करना चाहते हैं वह कैनवास को लगातार हाल ही में रखता है और उस पर नज़र रखता है, जब लोड किए गए क्षेत्र के किनारे तक पहुंचता है तो नए हिस्से लोड हो जाते हैं। – ssube

+0

मेरा मतलब है कि जितना अधिक आप स्क्रॉल करते हैं, जितना बड़ा हो जाता है। निस्संदेह मुझे अनिवार्य रूप से एक सीमा निर्धारित करने की आवश्यकता होगी, लेकिन मुझे ऐसा कुछ चाहिए जो इसे सेट करने के लिए जितना बड़ा हो सके उतना बड़ा हो। – sdfadfaasd

+0

[एक कैनवास अनंत बनाएं] का संभावित डुप्लिकेट (http://stackoverflow.com/questions/38589304/make-a-canvas-infinite) – bummi

उत्तर

4

यह एक अपरंपरागत विधि है, लेकिन मुझे संभावित रूप से (सिद्धांत में, अनबाउंड स्टोरेज स्पेस के साथ) अनंत के रूप में मारा।

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

  • दक्षिण
  • पूर्व की आईडी आईडी उत्तर में

    • हिस्सा आईडी
    • हिस्सा डाटा
    • हिस्सा के ID: मात्रा और अपने डेटा निम्नलिखित कॉलम के साथ एक तालिका में होने की जरूरत है
    • पश्चिम

    की आईडी आप कैनवास खींचने योग्य बनाने के लिए, शायद jQuery ओ का उपयोग करके की जरूरत है आर समान (this question उस पर कुछ जानकारी है)।

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

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

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

    इसे कैसे कार्यान्वित करें, मुझे पूरा यकीन नहीं है, लेकिन आपको केवल यह ट्रैक करने की आवश्यकता है कि कैनवास कितना दूर चला गया है। Google मानचित्र कुछ ऐसा ही करता है, इसलिए मैं देखता हूं कि वे इसे कैसे संभालते हैं (मैं जल्द ही ऐसा करूंगा और देख सकता हूं कि मैं इस उत्तर में कुछ कार्यान्वयन विवरण जोड़ सकता हूं)।

    यह सबसे व्यावहारिक या सरल तरीका नहीं हो सकता है, लेकिन यह आना मजेदार था।

    संपादित करें: मेरा मानना ​​है कि यह बुनियादी कार्यक्षमता की तर्ज पर है: http://candrews.net/blog/2010/10/introducing-sprymap/ यह एक हल्के वजन खींचने योग्य जावास्क्रिप्ट नक्शे है। आपको बस कितनी दूर ट्रैक करने की जरूरत है।

  • +0

    हम्म .. यह निश्चित रूप से पारंपरिक नहीं है, लेकिन शायद यह सबसे व्यावहारिक और सरल तरीका है I अभी तक सुना है। मैं सोच रहा हूं कि प्रत्येक टाइल एक संपूर्ण बड़े एचटीएमएल कैनवास (1000px x 1000px) होने के लिए सबसे अच्छा होगा, ताकि सभी डेटा को सहेजना और लोड करना आसान हो – sdfadfaasd

    0

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

    यह आपको निर्देशांक के आधार पर गतिशील रूप से हिस्सों को लोड करने देता है, तो आप इसे एक ऐसा फ़ंक्शन देते हैं जो एक एक्स, वाई और कॉलबैक के रूप में पैरामीटर के रूप में मिलता है और आप इसे केवल कुछ ऐसा वापस देते हैं जिसे कैनवास पर खींचा जा सकता है।

    https://github.com/Squarific/TiledCanvas

    संबंधित मुद्दे