بدءًا من اليوم، سنقوم بتحليل كيفية إنشاء تطبيق رسم بياني لطوبولوجيا HTML5 من المستوى الأساسي. يقوم HT بتغليف مكون الرسم البياني للطوبولوجيا داخليًا ht.graph.GraphView (المشار إليه فيما بعد باسم GraphView)، وهو المكون الذي يحتوي على أغنى الوظائف ثنائية الأبعاد. في إطار عمل HT، ومكتبات الفئات المرتبطة به كلها ضمن حزمة ht.graph. يحتوي GraphView على وظائف عرض وتحرير الرسومات الأساسية، واتصال العقدة الطوبولوجية ووظائف التخطيط التلقائي، وكائنات محددة مسبقًا في صناعات مثل الطاقة والاتصالات، وتأثيرات خاصة مثل عرض الرسوم المتحركة، لذلك فهو يحتوي على مجموعة واسعة من التطبيقات ويمكن استخدامه كملف أداة رسم والموارد البشرية في مجال المراقبة، وهي تحتوي على واجهة آلية ويمكن استخدامها كأداة تحرير رسومية عامة ويمكن توسيعها لتشمل تطبيقات المؤسسات مثل سير العمل والمخططات التنظيمية. بكل بساطة: مخطط طوبولوجيا هو مصطلح عام مخطط طوبولوجيا الشبكة لإدارة شبكات الاتصالات، ومخطط طوبولوجيا شبكة الطاقة، ومخطط مراقبة التحكم الصناعي، ومخطط تدفق العمل، وخريطة الدماغ التفكيرية، وما إلى ذلك. ببساطة، يتكون من اتصالات العقدة. هذه هي المخططات الطوبولوجية المشار إليها هنا.
من السهل جدًا تطوير مخطط طوبولوجيا الشبكة باستخدام HT، ولا يستغرق الأمر سوى بضعة أسطر من التعليمات البرمجية لإكمال مخطط طوبولوجيا الخادم والعميل البسيط:
هذا المثال أساسي للغاية ويكمل تقريبًا جميع الوظائف الطوبولوجية للخادم والعميل. دون مزيد من اللغط، خمن كم عدد أسطر التعليمات البرمجية التي استغرقها هذا المثال إجماليًا بما في ذلك جميع أجزاء علامات HTML؟ باستثناء الأسطر الفارغة، هناك 50 سطرًا فقط، كما أنني قمت بالكثير من تصميم الأنماط، فالمثال الذي أريد أن أوضحه لك لا يمكن أن يكون قبيحًا للغاية
يمكنك تنزيل الكود بنفسك على tuputu_jb51.rar. يرجى ملاحظة أنه نظرًا لوجود ملفات json، ستكون هناك مشكلات عبر النطاقات مع الصور، وستحتاج إلى استخدام Firefox أو خادم محلي لتشغيله.
دعنا نوضح في البداية أن HT هو حل شامل للواجهات الرسومية لتطبيقات المؤسسات استنادًا إلى معيار HTML5، ويحتوي على مكتبات تطوير واجهة رسومية غنية مثل المكونات العامة ومكونات الطوبولوجيا ومحركات العرض ثلاثية الأبعاد، ويحتاج المستخدمون فقط إلى تقديم ht .js، ولا يتعارض مع أي شيء آخر على الإطلاق، لأن HT يعلن فقط عن متغير عام ht، لا أكثر.
بعد ذلك، قم بتحليل جزء التعليمات البرمجية أولاً، قم ببناء مشهد خريطة الطوبولوجيا:
dm = new ht.DataModel();// حاوية البيانات gv = new ht.graph.GraphView(dm);// معلمة مكون الطوبولوجيا هي نموذج البيانات المرتبط بـ dm gv.addToDOM();// أضف الرسم البياني للطوبولوجيا في الجسم
جذر جميع مكونات HT هو div، والذي يتم الحصول عليه من خلال طريقة getView(). نستخدم هذه الطريقة في طريقة addToDOM:
addToDOM = function(){ var self = this, view = self.getView(), // احصل على القسم الأساسي للمكون style = view.style; document.body.appendChild(view); the body style.left = '0'; // HT يضبط بشكل عام المكونات على الموضع المطلق style.right = '0'; window.addEventListener('resize', function () { self.iv(); }, false); // يتغير حجم نافذة الاستماع للحدث، iv هو مكون تحديث مؤجل}ثم قم بإضافة عقد الخادم والعميل إلى مشهد الطوبولوجيا:
var server = new ht.Node();server.setName('server');// قم بتعيين اسم العقدة وعرضه أسفل العقدة server.setImage('serverImage');// تعيين صورة العقدة server.setSize( 20, 60 );// اضبط حجم العقدة dm.add(server);// أضف العقدة إلى حاوية البيانات dm server.setPosition(100, 100);// تعيين إحداثيات العقدة (x, y) var group = new ht.Group();// المجموعة، يمكن أن يكون هناك عقد متعددة في المجموعة group.setImage('groupImage');// تعيين الصورة dm .add (مجموعة)؛ عميل var = جديد ht.Node();// تمت إضافة هذه العقدة إلى المجموعةclient.setName('client');client.setImage('clientImage');dm.add(client);group.addChild(client);// إضافة الأطفال في المجموعة group.setExpanded(true);// اضبط المجموعة على الوضع الموسع client.setPosition(200, 100);// قم بتعيين موضع العقدة إذا كانت هناك عقدة واحدة فقط في المجموعة، فيمكن أن يكون موضع هذه العقدة هو موضع المجموعة.الاتصال بين الخادم والعميل؟ تم الانتهاء من سطرين من التعليمات البرمجية! في الواقع، طريقة إضافة العقد في HT بسيطة جدًا وعادةً ما تستغرق سطرين فقط من التعليمات البرمجية: قم بتعريف متغير المثيل أولاً، ثم قم بإضافة متغير المثيل إلى حاوية البيانات.
var edge = new ht.Edge(server, Client);dm.add(edge);
نحن فضوليون كيف يتم عمل الخط المنقط؟ يتم تشكيل الخط المنقط على خط الاتصال، وهناك ثلاث خطوات:
أليس الأمر بسيطًا جدًا! التالي دعونا نرى كيفية إعداده:
edge.s({// سمة نمط إعداد العقدة'edge.dash': صحيح،//عرض الخط المنقط'edge.dash.flow': صحيح،//تمكين تدفق الخط المنقط'edge.dash.color': 'أصفر '، // لون خط الشرطة 'edge.dash.pattern': [8، 8]، // نمط خط الشرطة 'label': 'flow'، // التعليق التوضيحي للعقدة 'label.background': 'pink'،// لون خلفية التعليق التوضيحي للعقدة });بهذه الطريقة، تم تقديم جميع أجزاء العرض~انتظر، هل يبدو أن هناك شيئًا مفقودًا؟ بالمناسبة، لقد نسيت تقديم فئة ht.Group في HT، كما يوحي الاسم، فهذا يعني أن المجموعة يمكن أن تحتوي على العديد من العقد لعرض أو إخفاء جميع العقد في المجموعة ، لكنني ما زلت قمت بخطوة صغيرة، أي أن جزء العرض الموجود في الزاوية اليمنى العليا من المجموعة هو في الواقع علامة تستخدم لتوجيه التعليمات:
group.s({ 'group.background': 'rgba(255, 255, 0, 0.1)',// اضبط لون خلفية المجموعة'ملاحظة': انقر نقرًا مزدوجًا فوقي!,// قم بتعليق المحتوى المعروض'ملاحظة' .position ': 13,// موضع التعليق التوضيحي 'note.offset.y': 10,// إزاحة المحور Y لموضع التعليق التوضيحي});يمكننا تغيير موضع التعليق التوضيحي من خلال note.position (للحصول على معلومات موضعية محددة، يرجى الرجوع إلى HT لدليل موضع الويب)، أو يمكننا استخدام note.offset.x وnote.offset.y لتغيير موضع التعليق التوضيحي. شرح.
تم الانتهاء من كل تحليل التعليمات البرمجية! سوف أقوم بالتحديث في أقرب وقت ممكن. إذا كنت تشعر أن التقدم بطيء، فيمكنك الانتقال إلى موقعنا الرسمي (HT للويب) للتعلم بنفسك قم بتحويل محتوى هذه المقالة إلى اجعلها معرفتك الخاصة!
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.