فجأة ، هناك فكرة ، إذا كان بإمكانك وضع بعض نقاط المعرفة المختلفة على نفس الواجهة ووضعها في مربع ، لذلك إذا كنت أرغب في النظر إلى أي شيء ، فيمكن عرضه مباشرة ، ويجب أن يكون هذا المربع قادرًا على فتحه. جوهر لقد استخدمت HT لإدراك فكرتي ، مع أكثر من مائة سطر من التعليمات البرمجية ، لذلك يمكن أن يحقق القليل من التعليمات البرمجية هذا التأثير.
دعونا نلقي نظرة على العروض:
أبسط من هذا المثال هو المربع الخارجي ، لذلك دعونا نلقي نظرة على كيفية تحقيقه:
var box = new ht.csgbox () ؛
يمكن أن يتم تنفيذ هذا المربع بسهولة في HT.
الخريطة الأساسية المغلفة المستخدمة في هذا المثال هي HT.CSGBOX ، نموذج مربع ، يمكنك الرجوع إلى دليل نمذجة الويب. Ht.Style (HT لدليل نمط الويب).
إذا كنت ترغب في إضافة ملصق على جانب واحد من المربع ، فإن ما يمكنني التفكير فيه هو ht.default.setimage وظيفة مغلفة.
الطريقة التي قمت بتطبيقها هنا هي الإشارة إلى محرر HT لتشغيل مكون GraphView ونموذج بيانات Datamodel ، ثم اتصل بـ JSON من خلال ht.default.xhrload. المحتوى في JSON كواجهة مرئية ، ثم يقوم بتعيين الرسوم المتحركة ، ثم يقوم بتحديث واجهة JSON على الفور.
ht.default.xhrload ('شاشات/demo/pump.json' ، الدالة (نص) {const json = ht.default.parse (text) ؛ pumpdm.deserialize (json) Date () .getTime () ؛ (CurrentRotation) ؛في هذا الوقت ، لا يمكنني إضافة DumpGV و G3D إلى القاع السفلي ، ونيتي هي إضافة PumpGV إلى جانب CSGBOX في G3D. غير مكتمل. إذا كنت ترغب في رؤية تأثير هذا الارتفاع الواسع على الشاشة ، فيمكنك تغييره بنفسك.
pumpgv.getwidth = function () {return 600 ؛} pumpgv.getheight = function () {return 600 ؛} dumpgv.getcanvas ().عرض مخطط Echarts أساسي أيضًا.
في النهاية ، تحتاج فقط إلى تمرير هذين اللوحة القماشية التي تم إرجاعها إلى ht.default.setimage ::
ht.default.setImage ('echart' ، المخططات (الخيار)) ؛تقوم وظيفة ht.default.drawimage بإنشاء رسم بياني جديد يرسم بالفعل صورًا على قماش ، لذلك نحتاج فقط إلى تمرير اللوحة التي رسمناها إلى ht.default.setimage لإنشاء الصور.
يجب تحسين شيء ما. عندما تكون هناك شفافية ، نحتاج إلى ضبط الكل.
يمكننا ضبط الشفافية: صحيح أنه يجب عرضه. انظر إلى العروض بعد الانتهاء:
لخصما سبق هو تطبيق WebGL الذي يعتمد على HTML5 من JSON و Echarts التي تم تقديمها للجميع. شكرا جزيلا لدعمكم لموقع VEVB Wulin!