कैनवस पर मास्को मेट्रो का नक्शा

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




कैनवस एसवीजी में उपलब्ध सभी सुविधाओं का समर्थन नहीं करता है। उदाहरण के लिए, जैसा कि यह निकला, यह आंशिक रूप से बिंदीदार रेखाओं को खींचने का समर्थन करता है: सेटडैलाइन विधि केवल क्रोम का समर्थन करती है, और फ़ायरफ़ॉक्स अपनी mozDash संपत्ति का उपयोग करता है। लेकिन कैनवस चिकनी झुकता प्रदान करने के लिए बेजियर कर्व का समर्थन करता है।
मैंने dbCartajs में bezierCurveTo पद्धति का उपयोग करने की संभावना को जोड़ा, यदि 'Q' वर्ण तीसरे समन्वय पैरामीटर में है, उदाहरण के लिए, निर्देशांक [[1,1, 'Q'], [2,2, 'Q'], [3] के साथ एक वस्तु के लिए , 3, 'Q'], [4,4, 'Q'], [5,5, 'Q'], [6,6, 'Q']] bezierCurveTo विधि को 2 बार कहा जाएगा। डैश लाइन को सपोर्ट करने के लिए एक चेक भी जोड़ा, जिसे mopt में डैश प्रॉपर्टी के रूप में सेट किया जा सकता है।

लाइनों, स्टेशनों, चैनलों, नदियों, रेलवे पटरियों के पिक्सेल निर्देशांक देशांतर और अक्षांश के साथ डिग्री में परिवर्तित हो जाते हैं। ऑब्जेक्ट के नए निर्देशांक mistoryro.js फ़ाइल में सहेजे जाते हैं।

स्टेशनों से ड्रॉप-डाउन सूची बनाई जाती है। इसमें एक स्टेशन का चयन करना इसे मानचित्र पर केंद्रित करता है।

सामान्य तौर पर, यह पता चलता है कि कैनवस की तुलना में कैनवस में नक्शा बहुत तेजी से खींचा जाता है। यह विशेष रूप से टैबलेट पर ध्यान देने योग्य है।