2010-11-13 12 views
6

मेरे पास एक नक्शा है जिसे मैंने विभिन्न रंगीन क्षेत्रों को पथों में परिवर्तित करके एक रास्टर ग्राफिक से एक एसवीजी फ़ाइल में परिवर्तित किया है।पॉलीगॉन में प्वाइंट एसवीजी और जावास्क्रिप्ट के साथ चेक?

मैं किनारों की एक सरणी दिया एक बुनियादी प्वाइंट-इन-बहुभुज की जांच करने के लिए कैसे पता है, लेकिन svg:path तत्वों एकाधिक बहुभुज के साथ-साथ मास्क (समुद्र आदि के लिए खाते में करने के लिए) और d विशेषता पार्स करने से है कि जानकारी निकालने का प्रतिनिधित्व बल्कि भारी हाथ लगता है।

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

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

संपादित करें: बात थोड़ा जटिल है, मैं, का उल्लेख करना चाहिए कि svg:path तत्वों लाइनों के बजाय वक्र के आधार पर हो रहे हैं तो बस किनारों की एक सरणी बनाने के लिए एक विकल्प हो प्रतीत नहीं होता है d विशेषता को पार्स।

चूंकि तत्व fill विशेषता ले सकते हैं, एक कैनवास पर एसवीजी को प्रस्तुत करने का एक यहूदी दृष्टिकोण और फिर दिए गए बिंदु पर पिक्सेल का रंग मान ढूंढना काम कर सकता है, लेकिन यह वास्तव में, वास्तव में एक भयानक तरीका जैसा लगता है कर दो।

+0

एसवीजी स्पेक के माध्यम से काम करने के बाद और क्रोम के जावास्क्रिप्ट कंसोल के साथ एक घंटे बिताए ऐसा लगता है कि सबसे बड़ी समस्या यह है कि मेरे पास नियमित आकार तत्व के बजाय 'svg: path' तत्व है। अन्यथा 1x1 'svg: rect' के साथ' svg.checkIntersection' का उपयोग करना संभव हो सकता है (माना जाता है कि यह रूपरेखा के बजाय क्षेत्रों के लिए काम करता है)। यदि आप किसी भी प्रकार के अमूर्तता की तलाश में हैं तो एसवीजी एपीआई थोड़ी मदद की प्रतीत होती है। –

उत्तर

3

Hit-testing SVG shapes? पर उत्तर इस खोज में आपकी मदद कर सकते हैं। लापता ब्राउज़र समर्थन के साथ समस्याएं हैं, लेकिन आप शायद अपने बहुभुज आकार के भीतर एक छोटे से परीक्षण (शायद 0 चौड़ाई/ऊंचाई काम करेंगे) आयत परीक्षण करने के लिए svgroot.checkIntersection का उपयोग कर सकते हैं।

1

अंतिम उपाय के रूप में सुझाए गए दृष्टिकोण को इस समस्या का सबसे आसान समाधान माना जाता है।

मुझे a nice JS library मिला जो कैनवास पर एसवीजी प्रस्तुत करना आसान बनाता है। एसवीजी प्रस्तुत किए जाने के साथ, जो भी आप जांचना चाहते हैं उस पर 1x1 क्षेत्र के लिए 2 डी संदर्भ की getImageData विधि को कॉल करना है। मुझे लगता है कि यह एसवीजी की एक प्रतिलिपि बनाने के लिए रंग कोडिंग के साथ प्रतिलिपि बनाने में मदद करता है यदि आपका एसवीजी उपयोग करने वाले व्यक्ति की तुलना में अधिक जटिल है (आपको आरजीबीए मूल्य बाइट-बाय-बाइट देखना होगा)।

यह वास्तव में हैकिश लगता है क्योंकि आप वास्तव में रास्टर छवि के पिक्सल का निरीक्षण कर रहे हैं, लेकिन प्रदर्शन पर्याप्त सभ्य प्रतीत होता है और रंगीन जांच को ऐसे तरीके से लिखा जा सकता है जो अशुद्धता (जैसे किनारों के पास) की अनुमति देता है।

मुझे लगता है कि यदि आप सापेक्ष निर्देशांक चाहते हैं तो आप 1-से-1 आकार के कैनवास बनाने का प्रयास कर सकते हैं और फिर कैनवास आयामों द्वारा पिक्सेल निर्देशांक विभाजित कर सकते हैं।

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

+0

यदि आप किसी उपयोगकर्ता के क्लिक को स्थानांतरित करने का प्रयास कर रहे हैं, तो svg pathnodes उस ईवेंट को आग लगाते हैं। साथ ही, ImageData icanvas द्वारा अनुकरण नहीं किया गया है, मैं उस समस्या में भाग गया। –

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