एचटीएमएल कैनवास ट्रेसिंग

Question

मैं एक छवि पर ट्रेसिंग की अनुमति देने के लिए एचटीएमएल 5/कैनवास में कुछ बनाने की कोशिश कर रहा हूं और पूर्वनिर्धारित पथ से विचलित होने पर चेतावनी देता हूं।

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

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

मैं सिर्फ माउस स्थिति के साथ यह कर सकता है, लेकिन यह है कि हर छवि रूपरेखा के रास्तों को परिभाषित करने की आवश्यकता होगी (और एक उचित संख्या इसलिए आदर्श अंतर्निहित चित्र का विश्लेषण करके यह करना चाहते, देखते हैं) ..

मुझे बताया गया है कि फ्लैश के साथ यह संभव है, लेकिन अगर संभव हो तो इससे बचना चाहेंगे ताकि गैर-फ्लैश प्लेटफार्मों (अर्थात् आईपैड) के साथ संगतता को बनाए रखा जा सके क्योंकि वे पृष्ठ के लिए प्राथमिक लक्ष्य हैं।

कोई अंतर्दृष्टि या सहायता की सराहना की जाएगी!

Answer 1

मुझे लगता है कि आप इसे हल करने के लिए सबसे सीधे आगे के दृष्टिकोण पर पहले ही छू चुके हैं।

कैनवास पर एक काले और सफेद छवि को देखते हुए, आप कर्सर कहां ट्रैक करने के लिए तत्व को mousemove ईवेंट हैंडलर संलग्न कर सकते हैं। यदि उपयोगकर्ता left-mouse नीचे रख रहा है, तो आप यह निर्धारित करना चाहते हैं कि वे वर्तमान में पूर्व परिभाषित पथ का पता लगा रहे हैं या नहीं। उपयोगकर्ता के लिए चीजों को कम परेशान करने के लिए, मैं पिक्सल की एक छोटी विंडो को नमूना करके समस्या के इस हिस्से से संपर्क करूंगा। 9x9 pixels के आसपास कुछ शायद एक अच्छा आकार होगा। ध्यान दें कि आप चाहते हैं कि आपकी विंडो का आकार दोनों आयामों में odd हो ताकि आपके दोनों दिशाओं में एक सममित नमूना हो।

कर्सर के स्थान का उपयोग करके, कैनवास पर getImageData() पर कॉल करें। आपका फ़ंक्शन कॉल इस तरह कुछ दिखाई देगा: getImageData(center_x - Math.floor(window_size/2), center_y - Math.floor(window_size/2), window_size, window_size) ताकि आपको कर्सर पर केंद्र के साथ पिक्सेल की नमूना विंडो मिल सके। वहां से, आप यह देखने के लिए एक सरल जांच कर सकते हैं कि क्या कोई गैर-सफेद पिक्सल खिड़की के भीतर हैं, या आप अधिक सख्त हो सकते हैं और पथ पर उपयोगकर्ता घोषित करने के लिए कुछ निश्चित गैर-सफेद पिक्सेल की आवश्यकता होती है।

इस काम को अच्छी तरह से बनाने की कुंजी, मुझे लगता है कि, यह सुनिश्चित कर रहा है कि उपयोगकर्ता को नकारात्मक प्रतिक्रिया प्राप्त नहीं होती है जब वे पथ से सबसे छोटी बिट को विचलित करते हैं (जब तक कि आप यही चाहते हैं)। उस बिंदु पर आप उपयोगकर्ता को परेशान और निराश करने का जोखिम चलाते हैं।

आखिरकार यह दो दृष्टिकोणों में से एक के नीचे आता है। या तो आप उपयोगकर्ता के कर्सर की तुलना करने के लिए एप्लिकेशन के लिए वास्तविक वेक्टर पथ लोड करते हैं (यानी point-in-path चेक करें), या आप छवि से पिक्सेल डेटा नमूना करते हैं। यदि आपको point-in-path की सही सटीकता की आवश्यकता नहीं है, तो मुझे लगता है कि पिक्सेल नमूनाकरण ठीक काम करना चाहिए।

---

संपादित करें: मैं सिर्फ अपने प्रश्न को फिर से पढ़ सकते हैं और कि, getPixel() करने के लिए अपने संदर्भ के आधार पर महसूस किया, तो आप इस के लिए WebGL का उपयोग करने जा सकता है। वेबजीएल के लिए दृष्टिकोण वही होगा, सिवाय इसके कि आप निश्चित रूप से विभिन्न कार्यों का उपयोग करेंगे। मुझे नहीं लगता कि आपको वेबजीएल की आवश्यकता है, हालांकि, 2 डी संदर्भ के रूप में आपको पर्याप्त लचीलापन देना चाहिए (जब तक कि ऐप ऐसा लगता है उससे अधिक शामिल न हो)।