Contoh kode untuk membuat diagram topologi jaringan telekomunikasi HTML5 Canvas dengan cepat

Daftar atribut pasti familiar bagi semua orang. Biasanya, daftar atribut yang dibuat menggunakan HTML5 mungkin berupa menu drop-down. Saya mencoba menggunakan HT untuk Web untuk menyadari fungsi mengklik tombol di bilah properti untuk memunculkan kotak pilihan multi-fungsi dan memilih data yang masuk. Saya merasa bahwa praktik keseluruhannya relatif sederhana dan nyaman, jadi saya akan berbagi itu bersamamu di sini.

http://www.hightopo.com/demo/propertyEditor/index.html

Dari rendering di atas terlihat bahwa keseluruhan halaman terbagi menjadi 3 bagian, bagian topologi graphView di sebelah kiri, bagian tabel tableView di pojok kanan bawah, dan bagian atribut propertyView di pojok kanan atas. Kami pertama-tama membagi seluruh adegan, lalu menambahkan konten spesifik ke setiap bagian:

 gv = new ht.graph.GraphView();var tablePane = new ht.widget.TablePane(gv.dm());//Komponen panel tabel propertyView = new ht.widget.PropertyView(gv.dm());/ /formPane ada di propertyView, jadi Anda harus mendefinisikan terlebih dahulu var rightView = new ht.widget.SplitView(propertyView, tablePane, 'v', 0.4);//Pisahkan komponen, v dibagi menjadi lapisan atas dan bawah, rasionya adalah 0.4:0.6rightView.getView().style.borderLeft = '1px solid #000';var borderPane = new ht .widget.BorderPane( );//Komponen panel perbatasan borderPane.setRightView(rightView, 400);//Set borderPane Komponen yang tepat adalah rightView dengan lebar 400borderPane.setCenterView(gv);//Mengatur komponen tengah borderPane menjadi gv borderPane.addToDOM();//Menambahkan komponen borderPane ke dalam body

Bagian-bagian baru pada kode di atas semuanya merupakan komponen enkapsulasi HT yang setara dengan kelas. Berikut penjelasan tentang komponen splitView. Komponen split digunakan untuk memisahkan dua sub komponen kiri dan kanan atau atas dan bawah -Komponen dapat berupa komponen yang disediakan oleh framework HT, atau dapat juga merupakan komponen asli HTML. Sub-komponen diposisikan secara absolut dengan posisi sebagai absolut. Parameter dalam komponen ini adalah (komponen kiri atau komponen atas, komponen kanan atau komponen bawah, h berarti pembagian kiri dan kanan v Menunjukkan pembagian atas dan bawah. Nilai default posisi pembagian adalah 0,5. Jika nilai pengaturannya adalah 0~1, maka akan dibagi berdasarkan persentase. Lebih besar dari 1 mewakili lebar atau tinggi absolut komponen kiri atau komponen atas. Kurang dari 1 mewakili lebar atau tinggi absolut komponen kanan atau komponen bawah. ); dan komponen panel BorderPane adalah wadah tata letak, yang dapat menempatkan sub-komponen di lima area: atas, bawah, kiri, kanan, dan tengah. . Sub-komponen dapat berupa komponen yang disediakan oleh kerangka HT, atau dapat berupa komponen asli HTML Lakukan pemosisian absolut untuk mode absolut. Disini saya menggabungkan SplitView dan BorderPane untuk membagi adegan menjadi tiga bagian. Terakhir, ingatlah untuk menambahkan wadah tata letak akhir ke badan atau tag HTML apa pun agar dapat ditampilkan di antarmuka. Definisi addToDOM adalah sebagai berikut:

 addToDOM = function(){ var self = this, view = self.getView(), //Dapatkan div yang mendasari komponen ini style = view.style //Dapatkan atribut style dari div yang mendasarinya document.body.appendChild( view) ; //Tambahkan div yang mendasarinya ke dalam body style.left = '0'; //HT secara default mendefinisikan komponen untuk menentukan posisi absolut, sehingga posisinya perlu diatur style.right = '0'; atas = '0'; style.bottom = '0'; window.addEventListener('mengubah ukuran', fungsi () { self.iv(); }, false }

Komponen HT umumnya tertanam dalam wadah seperti BorderPane, SplitView dan TabView. Komponen HT terluar mengharuskan pengguna untuk secara manual menambahkan elemen div dasar yang dikembalikan oleh getView() ke elemen DOM halaman , Ketika ukuran penampung induk berubah, jika penampung induk adalah komponen penampung HT yang telah ditentukan sebelumnya seperti BorderPane dan SplitView, penampung HT akan secara otomatis memanggil fungsi tidak valid dari komponen anak secara rekursif untuk memberi tahu pembaruan. Tetapi jika wadah induk adalah elemen html asli, komponen HT tidak dapat mengetahui bahwa ia perlu diperbarui. Oleh karena itu, komponen HT terluar umumnya perlu mendengarkan peristiwa perubahan ukuran jendela dan memanggil fungsi tidak valid dari jendela terluar. komponen yang akan diperbarui.

Adegan tercipta. Untuk menunjukkan perbedaan atribut yang terkait dengan node yang berbeda, kami menambahkan tujuh node ke peta topologi:

 fungsi initModel(){ var nama = perangkat; var count = 0; var root = createNode(nama + hitungan++, nama + (++hitungan));//Parameter 1 adalah nama, parameter 2 adalah tag root.setImage('. /simbol/ruang komputer/server.json'); root.setName('server'); gv.sm().ss(root);//Node root dipilih secara default untuk (var i = 0; i < 2; i++) { var iNode = createNode(name + count++, name + (++count) );/ /Parameter 1 adalah nama, parameter 2 adalah tag createEdge(root, iNode); for (var j = 0; j < 2; j++) { var jNode = createNode(nama + hitungan++, nama + (++hitungan)); createEdge(iNode, jNode);

Deklarasi fungsi createNode adalah sebagai berikut:

 fungsi createNode(nama, tag){//Buat node node flag++; var node = new ht.Node(); node.setName(name); / XX subsistem.json'); node.a('tersembunyi', false);//Atribut khusus, Anda dapat mengontrol node.a('hidden') untuk mengontrol visibilitas node node.a('Jenis antarmuka', 'SATA'); ') ; if(bendera % 2 === 0){ node.a('tipe antarmuka', 'IDE'); node.a('kartu grafis', 'ATI'); posisi', 11); gv.dm().add(node);//Tambahkan node ke wadah data DataModel node.tablePane1 = createTableView(serviceType, dataModel1);//Buat panel tabel node.tablePane2 = createTableView(serviceSize, dataModel2); tablePane3 = createTableView(versi, dataModel3); node.formPane1 = createFormPane(node.tablePane1);//Membuat panel formulir node.formPane1.title = 'Type';//Untuk mempersiapkan judul kotak dialog berikutnya node.formPane2 = createFormPane(node.tablePane2); title = 'Memori'; node.formPane3 = createFormPane(node.tablePane3); if(bendera % 3 === 0){ node.formPane3.v('tag', 'Lenovo Server X3650M5 8871'); } node.a('model', node.formPane3.v('tag')); simpul kembali;}

Kami mengontrol visibilitas node dengan mengontrol atribut tersembunyi dari node ini dan menggunakan fungsi filter visual setVisibleFunc di graphView:

 gv.setVisibleFunc(fungsi(data){ if(data.a('hidden')){ return false; } return true;});

Dengan node, wajar untuk menampilkan atribut. Bersama dengan nilai pada panel tabel tablePane di bawah, total tujuh atribut ditambahkan:

 function createProperty(){//Buat properti propertyView.addProperties([ { name: 'name',//Dapatkan atribut name, dikombinasikan dengan atribut accessType untuk akhirnya mendapatkan akses ke atribut node. Nilai default accessType adalah null, misalnya karena nama adalah usia, Gunakan metode get/set atau is/set dari getAge() dan setAge(98) untuk mengakses (nama di sini adalah nama, jadi dapatkan melalui getName()) displayName: 'Nama'//Setel nilai teks tampilan dari nama atribut}, { nama: 'tersembunyi',//Dapatkan atribut tersembunyi namatampilan: 'Sembunyikan simpul ini', accessType: 'attr',//Jika nama disembunyikan, gunakan getAttr( 'hidden') dan setAttr('hidden', false) untuk mengakses ikon: 'images/alert.gif', //Setel ikon valueType yang ditampilkan di sisi kiri nama atribut: 'boolean', //Digunakan untuk meminta komponen menyediakan renderer yang cocok untuk merender tipe Boolean, ditampilkan sebagai kotak centang yang dapat diedit: true //Atur apakah properti dapat diedit}, { name: 'grade', displayName: 'Type' , accessType : 'attr', drawPropertyValue: function(g, property, value, rowIndex, x, y, w, h, data, view){//Perenderan nilai atribut khusus function var cb = function(v) { data.a('kelas', v); } kembalikan fillFormPane(data.formPane1, w, h, data.tablePane1, serviceType, cb); 'attr', drawPropertyValue: fungsi(g, properti, nilai, indeks baris, x, y, w, h, data, tampilan){ var cb = fungsi(v) { data.a('angka', v); } kembalikan fillFormPane(data.formPane2, w, h, data.tablePane2, serviceSize, cb); : 'Jenis antarmuka' }, { nama: 'Kartu grafis', accessType: 'attr', displayName: 'Kartu grafis' }, { nama: 'Model', accessType: 'attr', Namatampilan: 'Model', } ]);}

Nilai kembalian atribut drawPropertyValue pada atribut ketiga dan keempat adalah fungsi fillFormPane. Parameter fungsi ini adalah (komponen formulir formP, lebar komponen formulir w, tinggi komponen formulir h, klik tombol di komponen formulir untuk menghasilkan tabel komponen tableP di kotak pop-up, konten array arr di komponen tabel, fungsi cb memberikan nilai yang dikembalikan dengan mengklik dua kali baris dalam komponen tabel ke kotak teks ht.widget.TextField di formulir).

Parameter pertama formP adalah pembuatan komponen form. Pembuatan komponen form adalah dengan membuat komponen form dan menambahkan kotak teks dan tombol ke komponen form.

 function createFormPane(tPane) {//Membuat panel formulir var formPane = new ht.widget.FormPane(); formPane.setPadding(0);//Mengatur jarak di sekitar formulir dan konten komponen var tField = new ht.widget.TextField();//Buat kotak teks tField.setText('');//Isi kotak teks kosong tField.setDisabled(true);//Kotak teks tidak dapat dioperasikan formPane.addRow( [// Tambahkan baris ke form { id: 'tag', //Atribut identifikasi unik dapat diperoleh melalui formPane.getItemById(id) dan ditambahkan ke elemen objek item yang sesuai: tField//Nilai atribut dapat berupa elemen asli HTML, informasi teks yang digambar sendiri di dalam FormPane, dan komponen bawaan HT seperti Button, CheckBox dan ComboBox, dll.}, { button:{//Setelah menyetel atribut ini, HT akan dibuat secara otomatis berdasarkan nilai atribut objek ht.widget.Button dan disimpan dalam label atribut elemen:'...',//Konten teks pada tombol onClicked: function(){//Event klik tombol for(var saya = 0; saya < tPane.dm().size(); i++){//Setel tablePane untuk memilih nilai yang sesuai dengan formPane secara default var data = tPane.dm().getDatas().get(i); 'nilai' ) === formPane.v('tag')){ tPane.sm().ss(data); formPane);//Yang dikembalikan adalah membuat kotak dialog yang isinya adalah panel tabel} } }], [0.5, 0.1]);//Mengatur rasio tampilan elemen pertama dan elemen kedua di komponen tabel. Komponen tabel ini hanya memiliki dua elemen secara total, kotak teks dan tombol, dengan proporsi masing-masing 0,5 dan 0,1 return formPane;}

Proses pembuatan fungsi createDialog juga sederhana dan jelas. Judul, ukuran, konten, dll. dari kotak dialog dikonfigurasi melalui metode setConfig(config). konten yang ditampilkan di kotak dialog:

 function createDialog(tPane){//Membuat kotak pop-up dialog.setConfig({ title: gv.sm().ld().getName()++formPane.title,//Judul isi kotak dialog: tPane, // Langsung atur konten kotak pop-up ke lebar panel tabel: 400, //Tentukan lebar kotak dialog tinggi: 200, dapat diseret: true, //Menentukan apakah kotak dialog dapat diseret dan disesuaikan. closesable: true, //Menunjukkan apakah akan menampilkan tombol tutup. maximizable: true, //Menunjukkan apakah kotak dialog dapat dimaksimalkan. Gerakkan mouse ke sebelah kanan kotak dialog. Ukuran kotak dialog dapat diubah di pojok bawah, artinya lebar dan tinggi dapat disesuaikan tombol: [//Tambahkan dua tombol { label: 'Batal', tindakan: fungsi(){ dialog.hide() } }, { label: 'OK', } ] }); dialog.show();//Tampilkan kotak dialog}

Parameter keempat komponen tabel tableP tidak istimewa, hanya membuat komponen formulir lalu menambahkan kolom ke komponen formulir.

 function createTableView(arr, dm){//Membuat komponen tabel var tableView = new ht.widget.TableView(dm); tableView.addColumns([//Tambahkan informasi kolom dalam batch menggunakan parameter array json{ displayName: 'ID', / /Dapatkan konten nama kolom dari header tabel drawCell: function(g, data,select, Column, x, y, w, h, tableView){//Metode rendering sel yang disesuaikan var id = tableView.getRowIndex(data);//Mengembalikan indeks baris tempat objek data berada ht.Default.drawText(g, 'row' + (id + 1), null, null, x, y, w, h, 'center');//Parameter teks gambar (g objek kuas, isi teks nilai, font teks font, warna teks warna, koordinat x saat gambar dimulai, koordinat y saat gambar dimulai pada y, lebar saat menggambar w, tinggi saat menggambar h , ratakan perataan horizontal teks, vSejajarkan perataan vertikal teks) } }, { displayName: 'Nama', drawCell: function(g, data, dipilih, kolom, x, y, w, h, tableView){ var id = tableView.getRowIndex(data); var info = arr[id]; ht.Default.drawText(g, info, null, null, x, y, w, h, 'center'); }

Setelah menjelaskan parameter di fillFormPane, mari kita lihat bagaimana fungsi ini didefinisikan. Pada dasarnya, langkah terakhir adalah mengklik elemen di komponen tabel tablePane dan mengembalikan elemen ini ke kotak teks textField di komponen formulir formPane:

 fungsi fillFormPane(formP, w, h, tableP, arr, cb){//formpane di sebelah kanan if(formP === tidak terdefinisi){ return; } formP.setWidth(w); setHGap (0); if(formP.v('tag') === 'tidak terdefinisi' || formP.v('tag') === '') { formP.v('tag', arr[0]); } tableP.onDataDoubleClicked = function(data){//Callback ketika baris data dalam komponen tabel diklik dua kali var v = arr[data.a('index) ') ]; formP.v('tag', v);//Tetapkan nilai elemen item yang sesuai sesuai dengan id, yang merupakan singkatan dari setValue. Elemen dengan id tag adalah kotak teks dialog.hide(. ); jika (cb){cb(v);} //Jika parameter cb diteruskan, atur nilai data.a('number')/data.a('helloName') ke nilai baris yang diklik dua kali dalam tabel , yaitu, ditetapkan ke atribut ketiga dan keempat} tableP.onDataClicked = function(data){//Dipanggil ketika baris data dalam komponen tabel diklik, dialog.getConfig().buttons[1].action = function(){//Klik OK untuk melanjutkan operasi berikut var v = arr[data.a('index')]; formP.v('tag', v); dialog.hide(); { cb(v);} } }; kembalikan formP.getView();}

 fungsi fillFormPane(formP, w, h, tableP, arr, cb){//formpane di sebelah kanan if(formP === tidak terdefinisi){ return; } formP.setWidth(w); setHGap (0); if(formP.v('tag') === 'tidak terdefinisi' || formP.v('tag') === '') { formP.v('tag', arr[0]); } tableP.onDataDoubleClicked = function(data){//Callback ketika baris data dalam komponen tabel diklik dua kali var v = arr[data.a('index) ') ]; formP.v('tag', v);//Tetapkan nilai elemen item yang sesuai sesuai dengan id, yang merupakan singkatan dari setValue. Elemen dengan id tag adalah kotak teks dialog.hide(. ); jika (cb){cb(v);} //Jika parameter cb diteruskan, atur nilai data.a('number')/data.a('helloName') ke nilai baris yang diklik dua kali dalam tabel , yaitu, ditetapkan ke atribut ketiga dan keempat} tableP.onDataClicked = function(data){//Dipanggil ketika baris data dalam komponen tabel diklik, dialog.getConfig().buttons[1].action = function(){//Klik OK untuk melanjutkan operasi berikut var v = arr[data.a('index')]; formP.v('tag', v); dialog.hide(); { cb(v);} } }; kembalikan formP.getView();}

Tampilan property bar di pojok kanan atas berakhir di sini. Panel tabel di pojok kanan bawah dibuat dengan cara yang sama.

Terakhir, mari kita bicara tentang susunan node di seluruh antarmuka. Komponen tata letak otomatis autolayout di HT menyediakan berbagai jenis algoritme untuk mengatur posisi node secara otomatis berdasarkan hubungan antara node dan koneksi. Tata letak otomatis sering digunakan dalam adegan yang terdapat banyak elemen grafis atau hubungan koneksi yang kompleks, sehingga sulit untuk menyeret dan menempatkannya secara manual. Saya menyajikan setiap metode tata letak melalui tombol. Klik tombol yang sesuai, dan metode tata letak akan secara otomatis ditata sesuai dengan metode tata letak yang diatur dengan menekan tombol:

Pertama, buat instance baru, teruskan objek yang memerlukan tata letak otomatis, yang dapat berupa DataModel, graphView, dan graph3dView, lalu atur metode tata letak default:

 autoLayout = new ht.layout.AutoLayout(gv);setTimeout(function(){ layout('towardsouth', true);//Karena sebelum gambar dimuat, tata letak otomatis ditata sesuai dengan ukuran default node} , 200);

Kemudian buat panel formulir formPane, tambahkan ke badan, dan letakkan di sudut kiri atas badan. Saya tidak akan menempelkan semua kode, cukup tampilkan tombol tata letak pertama:

 function createDirectionForm(){ var form = new ht.widget.FormPane(); form.setWidth(200);//Mengatur lebar formulir form.setHeight(80); formulir .getView().style.background = '#fff'; form.getView().style.boxShadow = '4px 16px 16px rgba(0, 0, 0, 0.1)';//Mengatur bentuk gaya bayangan.addRow([//Baris ini diambil secara terpisah sebagai judul { elemen: 'Tata Letak Otomatis:',//Teks yang ditampilkan}] , [0.1]);//Hanya ada satu objek dalam array, cukup atur lebar satu objek form.addRow([ { button: { icon: 'Layout/South Layout.json', onClicked: function(){ layout('towardsouth', true }, latar belakang: null, labelColor: '#fff', groupId: 'btn', toolTip: 'layout selatan', borderColor: null } }, //.. . .Selanjutnya tambahkan 6 tombol yang tersisa], [0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1]);//Ada tujuh objek dalam array, jadi lebar ketujuh objek tersebut harus diatur bentuk kembaliannya;}

Ini adalah bagian yang lebih menarik. Terima kasih telah membaca. Saya harap ini dapat membantu pembelajaran Anda. Saya juga berharap semua orang mendukung Jaringan Seni Bela Diri VeVb.