Mulai hari ini, kita akan menganalisis cara membangun aplikasi grafik topologi Canvas HTML5 dari tingkat paling dasar. HT secara internal merangkum komponen grafik topologi ht.graph.GraphView (selanjutnya disebut GraphView), yang merupakan komponen dengan fungsi 2D terkaya. dalam kerangka HT, dan perpustakaan kelas terkait semuanya berada di bawah paket ht.graph. GraphView memiliki fungsi presentasi dan pengeditan grafis dasar, koneksi node topologi dan fungsi tata letak otomatis, objek yang telah ditentukan sebelumnya dalam industri seperti listrik dan telekomunikasi, dan efek khusus seperti rendering animasi alat menggambar dan sumber daya manusia di bidang pemantauan. Ini memiliki antarmuka mesin dan dapat digunakan sebagai alat pengeditan grafis umum dan dapat diperluas ke aplikasi perusahaan seperti alur kerja dan bagan organisasi. Sederhananya: diagram topologi adalah istilah umum. Diagram topologi jaringan manajemen jaringan telekomunikasi, diagram topologi jaringan listrik, diagram pemantauan kontrol industri, diagram alur kerja, peta otak berpikir, dll. Sederhananya, ini terdiri dari koneksi node. Ini adalah diagram topologi yang dimaksud di sini.
Sangat mudah untuk mengembangkan diagram topologi jaringan dengan HT. Hanya diperlukan beberapa baris kode untuk menyelesaikan diagram topologi server dan klien sederhana:
Contoh ini sangat mendasar dan melengkapi hampir semua fungsi topologi server dan klien. Tanpa basa-basi lagi, coba tebak berapa baris kode yang diperlukan untuk contoh ini, termasuk seluruh bagian tag HTML? Tanpa garis kosong, hanya ada 50 baris. Saya juga melakukan banyak desain gaya. Lagi pula, contoh yang ingin saya tunjukkan kepada Anda tidak boleh terlalu jelek~
Anda dapat mengunduh kodenya sendiri di tuputu_jb51.rar. Harap dicatat bahwa karena ada file json, akan ada masalah lintas domain dengan gambar. Anda perlu menggunakan Firefox atau server lokal untuk menjalankannya.
Mari kita jelaskan di awal bahwa HT adalah solusi terpadu untuk antarmuka grafis aplikasi perusahaan berdasarkan standar HTML5. Ini berisi perpustakaan pengembangan antarmuka grafis yang kaya seperti komponen umum, komponen topologi, dan mesin rendering 3D .js, dan tidak bertentangan sama sekali, karena HT hanya mendeklarasikan variabel global ht, tidak lebih.
Selanjutnya, analisis bagian kodenya. Pertama, buat adegan peta topologi:
dm = new ht.DataModel();//Data container gv = new ht.graph.GraphView(dm);//Parameter komponen topologi adalah model data yang diikat oleh dm gv.addToDOM();//Tambahkan grafik topologi ke dalam tubuh
Akar dari semua komponen HT adalah div, yang diperoleh melalui metode getView(). Kami menggunakan metode ini dalam metode addToDOM:
addToDOM = function(){ var self = this, view = self.getView(), //Dapatkan div dasar dari komponen style = view.style; body style.left = '0'; //HT umumnya menyetel komponen ke posisi absolut style.right = '0'; style.top = '0'; window.addEventListener('resize', function () { self.iv(); }, false); //Perubahan ukuran jendela mendengarkan peristiwa, iv adalah komponen penyegaran yang tertunda}Kemudian tambahkan node server dan klien ke adegan topologi:
var server = new ht.Node();server.setName('server');//Atur nama node dan tampilkan di bawah node server.setImage('serverImage');//Atur gambar node server.setSize( 20, 60 );//Atur ukuran node dm.add(server);//Tambahkan node ke dalam wadah data dm server.setPosition(100, 100);//Atur koordinat node (x, y) var group = new ht.Group();//Group, bisa ada beberapa node dalam grup group.setImage('groupImage');//Atur gambar dm .add (grup);var klien = baru ht.Node();//Node ini ditambahkan ke grup client.setName('client');client.setImage('clientImage');dm.add(client);group.addChild(client);// Tambahkan turunan ke grup group.setExpanded(true);//Setel grup ke mode diperluas client.setPosition(200, 100);//Menetapkan posisi node. Jika hanya ada satu node dalam grup, maka posisi node tersebut dapat menjadi posisi grup.Koneksi antara server dan klien? 2 baris kode selesai! Sebenarnya cara menambahkan node di HT sangat sederhana. Biasanya hanya membutuhkan 2 baris kode: deklarasikan variabel instance terlebih dahulu, lalu tambahkan variabel instance ke container data.
var edge = ht.Edge baru(server, klien);dm.add(edge);
Kita penasaran bagaimana garis putus-putus itu dibuat? Pembentukan garis putus-putus dibangun pada garis penghubung, dan ada tiga langkah:
Bukankah ini sangat sederhana! Selanjutnya mari kita lihat cara mengaturnya:
edge.s({//Atribut gaya pengaturan simpul'edge.dash': true,//Menampilkan garis putus-putus'edge.dash.flow': true,//Aktifkan garis putus-putus flow'edge.dash.color': 'kuning ', //Warna garis putus-putus'edge.dash.pattern': [8, 8],//Gaya garis putus-putus 'label': 'flow',//Anotasi simpul 'label.background': 'pink',// Warna latar belakang anotasi simpul });Dengan cara ini, semua bagian tampilan telah diperkenalkan~Tunggu, sepertinya ada yang kurang? Ngomong-ngomong, saya lupa memperkenalkan kelas ht.Group di HT. Sesuai dengan namanya, artinya grup. Satu grup bisa berisi banyak node. Klik dua kali untuk menampilkan atau menyembunyikan semua node dalam grup , tapi saya tetap membuat sedikit gerakan, yaitu bagian tampilan di pojok kanan atas grup sebenarnya adalah sebuah tanda, digunakan untuk instruksi prompt:
group.s({ 'group.background': 'rgba(255, 255, 0, 0.1)',//Mengatur warna latar belakang catatan grup': Klik dua kali saya!,//Beri anotasi pada konten yang ditampilkan'catatan .position ': 13,//Posisi anotasi 'note.offset.y': 10,//offset sumbu Y dari posisi anotasi});Kita dapat mengubah posisi anotasi melalui note.position (untuk informasi posisi tertentu, silakan merujuk ke HT untuk Web Position Manual), atau kita dapat menggunakan note.offset.x dan note.offset.y untuk mengubah posisi anotasi.
Semua analisis kode selesai! Saya akan memperbarui sesegera mungkin. Jika Anda merasa kemajuannya lambat, Anda dapat mengunjungi situs web resmi kami (HT untuk Web) untuk belajar sendiri ubah konten artikel ini menjadi pengetahuan Anda sendiri!
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.