कैनवास का उपयोग करके ब्लॉक तत्वों के लिए जंक्शन तीर बनाना

आपका स्वागत है!

हाल ही में, एक वेब पेज (संगठन संरचना) के लिए एक सरल पदानुक्रमित पेड़ बनाना आवश्यक हो गया। ब्लॉक काफी अच्छे निकले, लेकिन जब सब कुछ तीरों से जोड़ने का समय आया, तो सवाल खड़ा हुआ - कैसे? दो समाधान थे: .png में तीर खींचें या विशेष वर्णों का उपयोग करें।

लेकिन मैं कुछ तेज, अधिक सुविधाजनक, आधुनिक चाहता था - अर्थात बस इंगित करें: ब्लॉक ए से ब्लॉक बी तक का तीर शाम तक, एक छोटा पुस्तकालय लिखा गया था जो आपको अपनी योजना को लागू करने की अनुमति देता है ...

कार्यान्वयन

योजना के अनुसार कार्यान्वयन सरल और सुविधाजनक है; तकनीकी रूप से यह दो चरणों में होता है:

• arrow_initialize( divid, newcanvasid); 

  पृष्ठभूमि में (मूल ब्लॉक में) तीर खींचने के लिए एक नया कैनवास बनाता है;

•  arrow(canvasid, div1, div1side, div2, div2side, color, lineWidth, shadowColor, shadowBlur); 

  हम दिए गए ब्लॉकों की आईडी के आधार पर तीर की शुरुआत और अंत के निर्देशांक की गणना करते हैं और अग्रिम में बनाए गए कैनवास पर तीर को प्रदर्शित करते हैं;

नुकसान:

फिलहाल मुझे कई समस्याएं मिलीं:

• उदाहरण के लिए, बनाया गया कैनवास ब्लॉकों में रखे गए पाठ को ओवरलैप करता है (यह ओपेरा को छोड़कर हर जगह अप्राप्य हो जाता है) - जेड-इंडेक्स के साथ लड़े - मदद नहीं की;
• फ़ायरफ़ॉक्स में एक मामूली कैनवास ऑफसेट भी है।

स्वाभाविक रूप से, जब पृष्ठभूमि के सापेक्ष ब्लॉक (या एनिमेटिंग) चलते हैं, तो तीर जगह पर रहेंगे।

निष्कर्ष में:

सब कुछ अभी भी बहुत नम है, इसलिए यह बीटा स्थिति में है, अगर आपके पास कोई सुझाव है, तो यह मुथुब पर "अनुरोध को खींचने" के लिए एक खुशी है।

उपयोग के उदाहरण और अधिक विवरण यहां देखे जा सकते हैं ।



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

आपका ध्यान के लिए धन्यवाद!