Saya menemukan bahwa ada banyak grafik yang digunakan dalam SCADA industri atau manajemen jaringan telekomunikasi. Meskipun kebanyakan orang menggunakan grafik untuk produksi grafik, namun sangat mudah digunakan. Namun, terkadang kita tidak dapat memanggil plug-in lain harus menulis sendiri Ini adalah bagan yang indah, namun bagan tidak dapat dibuat indah dengan mudah. . . Saya melihat grafik untuk dijual di situs web dan menurut saya tampilannya cukup bagus, jadi saya menggunakan HT untuk Web 3D untuk membuat contoh kecil. Itu cukup sederhana dan cantik, haha~
Render dinamisnya adalah sebagai berikut:
Contoh ini sangat mudah diimplementasikan dengan HT. Pertama buat model data dm dasar di HT, lalu tambahkan model data ke komponen g3d 3d, lalu atur perspektif dalam 3d dan tambahkan komponen 3d ke elemen body:
dm = ht.DataModel();g3d = ht.graph3d.Graph3dView(dm);g3d.setEye(0, 185, 300);g3d.addToDOM();g3d.getView().style.background = '# baru 000';
Langkah selanjutnya adalah membuat lima batang grafik ini. Ide saya adalah ini: ada sebuah node di lapisan dalam, sebuah node transparan di lapisan luar, dan teks 3D di bagian bawah untuk menampilkan persentase saat ini.
Node bagian dalam sangat mudah. Saya langsung menggunakan ht.Node yang dienkapsulasi oleh HT untuk membuat objek node baru, dan kemudian mengatur gaya node melalui metode node.s:
var node = new ht.Node();node.s({ 'shape3d': silinderModel, 'shape3d.color': warna, '3d.movable': false});node.a({ 'myHeight': s3[ 1],});node.p3([p3[0], s3[1]/2, p3[2]]);node.s3(s3);dm.add(node);Yang perlu dijelaskan adalah pengaturan gaya 'shape3d':cylinderModel. Pertama, atribut shape3d menentukan efek ikon yang ditampilkan sebagai model 3D. CylinderModel adalah model 3D yang disesuaikan dengan HT :
silinderModel = ht.Default.createCylinderModel(1000, 0, 1000, salah, salah, benar, benar);
Kemudian atribut myHeight yang berubah secara dinamis diatur. Di HT, metode node.a dicadangkan bagi pengguna untuk menyimpan data bisnis.
Selanjutnya kita perlu membuat node transparan eksternal. Node ini pada dasarnya dibangun dengan cara yang sama seperti node internal, hanya saja ia memiliki pengaturan gaya yang sedikit lebih transparan:
var cNode = new ht.Node();cNode.s({ 'shape3d': silinderModel, 'shape3d.transparent': true, 'shape3d.opacity': 0.2, 'label.color': '#fff', '3d .movable': false});cNode.p3([p3[0], 50, p3[2]]);cNode.s3(20, 100, 20);dm.add(cNode);Untuk menyetel 'shape3d.transparent' ke true terlebih dahulu, lalu setel transparansi 'shape3d.opacity'.
Terakhir, ada teks 3D. Untuk merender teks 3D, Anda memerlukan font jenis huruf dalam format json, lalu gunakan ht.Default.loadFontFace untuk memuat font format json ke dalam memori panduan:
ht.Default.loadFontFace('./wenquanyi.json', function(){ //...... var text = new ht.Node(); text.s3([5, 5, 5]); text .p3(cNode.p3()[0]-5, -10, 0); 'shape3d.text': node.a('myHeight')+'%', 'shape3d.text.curveSegments': 1, '3d.movable': false });});Karena font jenis huruf yang kami gunakan digambar sedemikian rupa sehingga satu kata terdiri dari segitiga yang tak terhitung jumlahnya, yang memakan banyak memori, jadi saya menyesuaikan kehalusan kurva grafis ke tingkat yang lebih rendah, tetapi masih sangat jelas Anda dapat menemukan kinerja yang lebih baik Font yang bagus dapat digunakan dan beri tahu saya. Kami belum menemukan font apa pun yang menggunakan memori kecil.
Terakhir, untuk mengubah grafik batang pada grafik secara dinamis, kita harus mengatur animasi dan memperbarui nilai font 3D secara sinkron:
setInterval(function(){ if(node.a('myHeight') < 100){ node.a('myHeight', (node.getAttr('myHeight')+1)); node.s3(20, node. a('Tinggiku'), 20); simpul.p3(p3[0], simpul.a('Tinggiku')/2, p3[2]); node.a('myHeight', 0); node.s3([20, 0, 20]); node.p3([p3[0], 0, p3[2]] } jika (teks) teks. s('shape3d.text', node.a('myHeight')+'%');}, 100);Di sini, atribut khusus saya myHeight memainkan peran yang menentukan. Saya menggunakan atribut ini untuk menyimpan variabel, dan nilai variabel dapat diubah secara sewenang-wenang, sehingga efek pengikatan dinamis dapat dicapai.
Jika Anda masih belum mengerti, Anda dapat meninggalkan pesan, atau langsung mengunjungi situs web resmi kami untuk melihat manual HT untuk Web. Masih banyak lagi efek yang tidak dapat Anda bayangkan yang dapat dicapai dengan cepat~
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.