अनियमित .png आकार के साथ जावास्क्रिप्ट "आरा पहेली"

Question

Soooo, जो मैं करने की कोशिश कर रहा हूं वह अनिवार्य रूप से एक जिग्स पहेली है। बाईं तरफ एक दर्जन या इतनी ओवरलैपिंग .png फ़ाइलों को "फट" पेपर टुकड़ों (अल्फा के साथ सभी अलग अनियमित आकार) के ढेर वाले क्षेत्र के साथ एक क्षेत्र है, जो सही तरफ के क्रम में, एक साथ रखकर कागज की शीट बनाते हैं इसके साथ नोट्स के साथ। एक दृश्य (घुमावदार टुकड़ों की उपेक्षा):

कुछ भी नया मुझे नहीं पता, लेकिन इसके विकास में मेरी दो मुख्य चेतावनी यह है कि इसे यानी 8 + और स्पर्श उपकरणों पर काम करना है। तो इसका मतलब कोई फ़्लैश नहीं है (जहां यह बहुत आसान होगा) और कोई कैनवास नहीं (मूर्ख यानी); जो मुझे जेएस और शायद svg के साथ छोड़ देता है?

जेएस में ड्रैग और ड्रॉप भाग काफी आसान है, लेकिन मेरे पास जो मुद्दा है, वह यह है कि, मुझे यकीन है कि आपको पता है कि अल्फा चैनल को अनदेखा किया गया है और अनियमित फट टुकड़ा वास्तव में एक आयताकार है। जो इस अनुपयोगी बनाता है कि टुकड़े एक दूसरे के ऊपर ओवरलैपिंग टुकड़ों के साथ एक ढेर हैं।

मैं छवि मानचित्र का उपयोग करके ड्रॉप रोल पर ग्रेन्युलर हिट डिटेक्शन कर सकता हूं और रोलओवर पर एक चर सेट कर सकता हूं।

मैंने बहुत कुछ देखा है (यहां + google) और कुछ विचारों की कोशिश की लेकिन मैं अनियमित आकार चयन/ड्रैग समस्या को हल करने में असमर्थ हूं। कोई विचार?

आपके समय के लिए धन्यवाद।

Answer 1

ExplorerCanvas आपके लिए कोई विकल्प नहीं है? मुझे लगता है कि इससे आपको कैनवास-आधारित समाधान तैयार करने की अनुमति मिल जाएगी। यही कारण है कि जावास्क्रिप्ट के माध्यम से सादे HTML तत्व हेरफेर के साथ किया कुछ भी की तुलना में बेहतर हो जाएगा

Answer 2

कम तकनीक समाधान

निरपेक्ष स्थिति

यदि आप थोड़ा अतिरिक्त खर्च करना चाहते हैं के साथ नेस्टेड तत्वों समय, फ़्लैश, कैनवास, एसवीजी, या यहां तक ​​कि छवि मानचित्रों का उपयोग किए बिना, इसे काफी करीब से हासिल करने का एक तरीका है। और एक छवि मानचित्र के विपरीत, यदि आवश्यक हो तो यह आपको प्रत्येक हॉटस्पॉट के अंदर संबंधित सामग्री को घोंसला करने की अनुमति देता है (उदा। पॉप-अप)।

सबसे सरल मामले में, आप पहेली के प्रत्येक टुकड़े के लिए एक आयताकार हाइपरलिंक हॉटस्पॉट का उपयोग कर सकते हैं। जाहिर है कि आकारों की सीमा को बहुत सीमित करता है जो आप समर्थन कर सकते हैं (बिना ओवरलैपिंग तत्वों में हस्तक्षेप किए)।

लेकिन, यदि आप उस हाइपरलिंक टैग को लेते हैं और इसे कई स्पैन टैग बच्चों को देते हैं, और प्रत्येक एक पूर्ण स्थिति (हाइपरलिंक के सापेक्ष) देते हैं, और पृष्ठभूमि के लिए छवि के उचित भाग को लागू करते हैं, तो आप कर सकते हैं "अनियमित छवि आकार" का निर्माण करें जो एक अनियमित हॉटस्पॉट पर कब्जा करते हैं, ओवरलैपिंग तत्वों के अपेक्षाकृत कम हस्तक्षेप के साथ।

असल में, छवि (पारदर्शिता के क्षेत्रों के साथ) को स्प्राइट फ़ाइल के रूप में माना जाता है, हाइपरलिंक टैग और बच्चे स्पैन टैग प्रत्येक "स्प्राइट फ़ाइल" के एक हिस्से पर कब्जा करते हैं। छवि के अधिकांश पारदर्शी हिस्सों को हाइपरलिंक टैग या अवधि टैग द्वारा कब्जा नहीं किया जाएगा।

अधिकांश आकार शायद हाइपरलिंक टैग और 4 - 10 स्पैन का उपयोग करके बनाया जा सकता है। माना जाता है कि आकार जितना अधिक अनियमित होता है, उतना ही अधिक स्पैन की आवश्यकता होती है।

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

पर

पकड़

गोलाई त्रुटि यहाँ पकड़ है, और यह एक doozy है। जब मोबाइल डिवाइस पर एक वेब पेज स्केल किया जाता है (और एक नियमित पृष्ठ लगभग हमेशा छोटे उपकरणों पर स्केल किया जाता है), जो एक गोलाकार त्रुटि पेश करता है जो हाइपरलिंक टैग के पीएक्स प्लेसमेंट का कारण बनता है और स्पैन टैग संभवतः कम से कम 1 पिक्सेल क्षैतिज रूप से भिन्न होता है और/या लंबवत। यह तब होता है जब डेस्कटॉप ब्राउज़र स्केल किए जाते हैं; यह सिर्फ डेस्कटॉप ब्राउज़र अक्सर स्केल नहीं किया जाता है।

क्या होगा कि आप प्रत्येक आकार के विभिन्न हिस्सों के बीच 1 पिक्सेल या अलग होने (या ओवरलैप) के साथ हवा में उतरेंगे। कई मामलों में, यह बहुत स्पष्ट और स्वीकार्य रूप से स्वीकार्य नहीं होगा। और कार्यान्वयन के आधार पर, स्थान 2px या 3px के अनुसार भिन्न हो सकते हैं। जब ऐसा होता है तो इसे हल करना मुश्किल होता है, और इसकी सीमाएं हैं कि इसका कितना हल किया जा सकता है।

पिछली बार मैंने जांच की, फ़ायरफ़ॉक्स एकमात्र ब्राउज़र है जो इस समस्या से बचने के लिए स्केल किए गए पृष्ठों पर पीएक्स मूल्यों को गोल करने के बारे में पर्याप्त स्मार्ट है। उम्मीद है कि अन्य ब्राउज़र अंततः इसे बेहतर तरीके से समर्थन देंगे, क्योंकि सरल पृष्ठ अक्सर गोल करने वाली त्रुटियों से पीड़ित होते हैं।

समाधान

अलग हॉटस्पॉट

गोलाई त्रुटि से छवियों हॉटस्पॉट (जहां परिशुद्धता महत्वपूर्ण नहीं है) के साथ एक समस्या की बहुत नहीं है। जहां यह वास्तव में समस्याओं का कारण बनता है छवियों के साथ होता है (जब आप एक छवि को देखते हैं जहां इसे अस्तर नहीं करना चाहिए)।

यह निम्न कार्य करके त्रुटियों गोलाई छवि का सबसे बुरा से बचने के लिए संभव हो सकता है: जैसा कि ऊपर वर्णित

• है एक हॉटस्पॉट के लिए HTML कोड का सेट, एक ही है, सिवाय इसके किसी भी हिस्से से प्रदर्शित न करें हॉटस्पॉट में छवियों का। उन्हें सभी पारदर्शी पृष्ठभूमि दें।
• छवियों के लिए HTML कोड का एक और सेट है। प्रत्येक एक एकल आयताकार तत्व होगा जो सभी छवियों को प्रदर्शित करता है।
• प्रत्येक छवि को संबंधित हॉटस्पॉट के समान स्थिति में रखें।
• सुनिश्चित करें कि हॉटस्पॉट का सेट और छवियों के सेट दोनों में एक ही जेड-इंडेक्स ऑर्डर है। सभी हॉटस्पॉट सभी छवियों के शीर्ष पर होंगे, लेकिन हॉटस्पॉट के भीतर और छवियों के भीतर ऑर्डर को सुसंगत होना चाहिए।
• जब किसी टुकड़े के लिए हॉटस्पॉट खींच लिया जाता है, तो संबंधित छवि की स्थिति को उसी स्थान पर रखने के लिए अपडेट करें। असल में, जब छवि खींची जा रही है, तो छवि हॉटस्पॉट को छाया देती है।