ทุกคนจะต้องคุ้นเคยกับรายการแอตทริบิวต์ โดยปกติแล้ว รายการแอตทริบิวต์ที่สร้างโดยใช้ HTML5 อาจเป็นเมนูแบบเลื่อนลง และในหลายกรณี รายการแบบเลื่อนลงไม่สวยงามเพียงพอ ฉันพยายามใช้ HT สำหรับเว็บเพื่อรับรู้ถึงฟังก์ชันของการคลิกปุ่มในแถบคุณสมบัติเพื่อเปิดกล่องการเลือกหลายฟังก์ชันและเลือกข้อมูลที่เข้ามา ฉันรู้สึกว่าการปฏิบัติโดยรวมค่อนข้างง่ายและสะดวก ดังนั้นฉันจะแบ่งปัน มันกับคุณที่นี่
การเรนเดอร์http://www.hightopo.com/demo/propertyEditor/index.html
การใช้รหัส แผนที่โทโพโลยีจากการเรนเดอร์ด้านบน เราจะเห็นว่าทั้งหน้าแบ่งออกเป็น 3 ส่วน ได้แก่ ส่วนโทโพโลยี graphView ทางด้านซ้าย ส่วนตาราง tableView ที่มุมขวาล่าง และส่วนแอตทริบิวต์ propertyView ที่มุมขวาบน ขั้นแรกเราแบ่งฉากทั้งหมด จากนั้นจึงเพิ่มเนื้อหาเฉพาะลงในแต่ละส่วน:
gv = new ht.graph.GraphView();var tablePane = new ht.widget.TablePane(gv.dm());//ส่วนประกอบแผงตาราง propertyView = new ht.widget.PropertyView(gv.dm());/ /formPane อยู่ใน propertyView ดังนั้นคุณต้องกำหนด var rightView = new ht.widget.SplitView(propertyView, tablePane, 'v', 0.4);//แยกส่วนประกอบ โดย v จะแบ่งออกเป็นชั้นบนและชั้นล่าง อัตราส่วนคือ 0.4:0.6rightView.getView().style.borderLeft = '1px solid #000';var borderPane = new ht .widget.BorderPane( );//ส่วนประกอบแผงเส้นขอบ borderPane.setRightView(rightView, 400);//ตั้งค่า borderPane องค์ประกอบที่ถูกต้องคือ rightView ที่มีความกว้าง 400borderPane.setCenterView(gv);//ตั้งค่าองค์ประกอบตรงกลางของ borderPane เป็น gv borderPane.addToDOM();//เพิ่มองค์ประกอบ borderPane ลงในเนื้อหา
ส่วนใหม่ในโค้ดข้างต้นเป็นส่วนประกอบที่ห่อหุ้ม HT ทั้งหมด ซึ่งเทียบเท่ากับคลาส นี่คือคำอธิบายขององค์ประกอบการแยก SplitView ใช้เพื่อแยกองค์ประกอบย่อยสองรายการไปทางซ้ายและขวาหรือขึ้นและลง -ส่วนประกอบสามารถเป็นส่วนประกอบที่จัดทำโดยกรอบงาน HT หรืออาจเป็นองค์ประกอบดั้งเดิมของ HTML ส่วนประกอบย่อยอยู่ในตำแหน่งที่แน่นอนโดยมีค่าสัมบูรณ์ พารามิเตอร์ในองค์ประกอบนี้คือ (ส่วนประกอบด้านซ้ายหรือส่วนประกอบด้านบน ส่วนประกอบด้านขวา หรือ องค์ประกอบล่าง h หมายถึงการหารซ้ายและขวา v ระบุการแบ่งส่วนบนและส่วนล่าง ค่าเริ่มต้นของตำแหน่งการแบ่งคือ 0.5 หากค่าที่ตั้งไว้คือ 0~1 จะถูกหารด้วยเปอร์เซ็นต์ ที่มากกว่า 1 แสดงถึงความกว้างหรือความสูงสัมบูรณ์ของส่วนประกอบด้านซ้ายหรือส่วนประกอบด้านบน น้อยกว่า 1 หมายถึงความกว้างหรือความสูงสัมบูรณ์ของส่วนประกอบด้านขวาหรือส่วนประกอบด้านล่าง และส่วนประกอบแผง BorderPane เป็นคอนเทนเนอร์เค้าโครง ซึ่งสามารถวางส่วนประกอบย่อยในห้าพื้นที่: บน ล่าง ซ้าย ขวา และกึ่งกลาง ส่วนประกอบย่อยสามารถเป็นส่วนประกอบที่จัดทำโดยกรอบงาน HT หรืออาจเป็นส่วนประกอบดั้งเดิมของ HTML ดำเนินการวางตำแหน่งสัมบูรณ์สำหรับโหมดสัมบูรณ์ ที่นี่ฉันรวม SplitView และ BorderPane เพื่อแบ่งฉากออกเป็นสามส่วน สุดท้ายนี้ อย่าลืมเพิ่มคอนเทนเนอร์โครงร่างสุดท้ายให้กับเนื้อหาหรือแท็ก HTML เพื่อให้สามารถแสดงบนอินเทอร์เฟซได้ คำจำกัดความของ addToDOM เป็นดังนี้:
addToDOM = function(){ var self = this, view = self.getView(), //รับ div พื้นฐานขององค์ประกอบนี้ style = view.style; // รับแอตทริบิวต์ style ของ div document.body.appendChild( view) ; //เพิ่ม div พื้นฐานลงใน body style.left = '0'; //HT โดยค่าเริ่มต้นจะกำหนดส่วนประกอบเพื่อกำหนดตำแหน่งที่แน่นอน ดังนั้นตำแหน่งจะต้องถูกตั้งค่า style.right = '0'; บนสุด = '0' ; style.bottom = '0'; window.addEventListener('resize', function () { self.iv(); }, false);โดยทั่วไปส่วนประกอบ HT จะถูกฝังอยู่ในคอนเทนเนอร์ เช่น BorderPane, SplitView และ TabView ส่วนประกอบ HT ภายนอกสุดต้องการให้ผู้ใช้เพิ่มองค์ประกอบ div พื้นฐานที่ส่งคืนโดย getView() ด้วยตนเองไปยังองค์ประกอบ DOM ของเพจ เมื่อขนาดของคอนเทนเนอร์หลักเปลี่ยนแปลง หากคอนเทนเนอร์หลักเป็นส่วนประกอบคอนเทนเนอร์ที่กำหนดไว้ล่วงหน้าของ HT เช่น BorderPane และ SplitView คอนเทนเนอร์ HT จะเรียกใช้ฟังก์ชันที่ไม่ถูกต้องขององค์ประกอบย่อยซ้ำโดยอัตโนมัติเพื่อแจ้งเตือนการอัปเดต แต่ถ้าคอนเทนเนอร์พาเรนต์เป็นองค์ประกอบ html ดั้งเดิม คอมโพเนนต์ HT จะไม่ทราบว่าจำเป็นต้องอัปเดต ดังนั้น โดยทั่วไปคอมโพเนนต์ HT ภายนอกสุดจำเป็นต้องฟังเหตุการณ์การเปลี่ยนแปลงขนาดหน้าต่างของหน้าต่างและเรียกใช้ฟังก์ชันที่ไม่ถูกต้องของส่วนนอกสุด ส่วนประกอบที่จะอัปเดต
ฉากถูกสร้างขึ้น เพื่อแสดงความแตกต่างในคุณลักษณะที่สอดคล้องกับโหนดต่างๆ เราได้เพิ่มโหนดเจ็ดโหนดลงในแผนผังโทโพโลยี:
function initModel(){ var name = device; var count = 0; var root = createNode(name + count++, name + (++count));//พารามิเตอร์ 1 คือชื่อ, พารามิเตอร์ 2 คือแท็ก root.setImage('. /สัญลักษณ์/ห้องคอมพิวเตอร์/server.json'); root.setName('server'); root.s('label.position', 3); gv.sm().ss(root);//โหนดรูทถูกเลือกโดยค่าเริ่มต้นสำหรับ (var i = 0; i < 2; i++) { var iNode = createNode(name + count++, name + (++count) );/ /Parameter 1 คือชื่อ พารามิเตอร์ 2 คือแท็ก createEdge(root, iNode); for (var j = 0; j < 2; j++) { var jNode = createNode(name + count++, name + (++นับ)); createEdge(iNode, jNode);การประกาศฟังก์ชัน createNode เป็นดังนี้:
ฟังก์ชัน createNode(ชื่อ, แท็ก){//สร้างโหนดโหนด ++; var node = new ht.Node(); node.setTag(tag); node.setImage('./ symbols/computer room / XX subsystem.json'); node.a('ซ่อน', false);//แอตทริบิวต์ที่กำหนดเอง คุณสามารถควบคุม node.a('hidden') เพื่อควบคุมการมองเห็นของโหนด node.a('Interface type', 'SATA'); node.a('Graphics card', 'Nvidia ') ; if(ตั้งค่าสถานะ % 2 === 0){ node.a('interface type', 'IDE'); node.a('graphics card', 'ATI'); } node.s('label. ตำแหน่ง', 11); gv.dm().add(node);//เพิ่มโหนดในที่เก็บข้อมูล DataModel node.tablePane1 = createTableView(serviceType, dataModel1);//สร้างแผงตาราง node.tablePane2 = createTableView(serviceSize, dataModel2); node. tablePane3 = createTableView(เวอร์ชัน, dataModel3); node.formPane1 = createFormPane(node.tablePane1);//สร้างแผงแบบฟอร์ม node.formPane1.title = 'Type';//เพื่อเตรียมพร้อมสำหรับชื่อเรื่องของกล่องโต้ตอบที่ตามมา node.formPane2 = createFormPane(node.tablePane2); title = 'หน่วยความจำ'; node.formPane3 = createFormPane (node.tablePane3); node.formPane3.title = 'รุ่น'; if(ตั้งค่าสถานะ % 3 === 0){ node.formPane3.v('tag', 'Lenovo Server X3650M5 8871'); }else{ node.formPane3.v('tag', 'Lenovo IBM X3250 5458I21 '); } node.a('model', node.formPane3.v('tag')); โหนดส่งคืน;}เราควบคุมการมองเห็นของโหนดโดยการควบคุมแอตทริบิวต์ที่ซ่อนอยู่ของโหนดนี้ และใช้ฟังก์ชัน setVisibleFunc ตัวกรองภาพใน graphView:
gv.setVisibleFunc(function(data){ if(data.a('hidden')){ return false; } return true;}); แผงคุณสมบัติด้วยโหนด เป็นเรื่องปกติที่จะแสดงแอตทริบิวต์ เมื่อรวมกับค่าในแผงตาราง tablePane ด้านล่าง จะมีการเพิ่มแอตทริบิวต์ทั้งหมดเจ็ดรายการ:
ฟังก์ชัน createProperty(){//สร้างคุณสมบัติ propertyView.addProperties([ { name: 'name',//รับแอตทริบิวต์ name รวมกับแอตทริบิวต์ accessType เพื่อเข้าถึงแอตทริบิวต์ของโหนดในที่สุด ค่าเริ่มต้นของ accessType จะเป็น null เช่น เนื่องจากชื่อคืออายุ ให้ใช้เมธอด get/set หรือ is/set ของ getAge() และ setAge(98) เพื่อเข้าถึง (ชื่อที่นี่คือชื่อ ดังนั้นรับมันผ่าน getName()) displayName: 'ชื่อ'//ตั้งค่าข้อความที่แสดงของชื่อแอตทริบิวต์}, { ชื่อ: 'ซ่อน',//รับแอตทริบิวต์ที่ซ่อนอยู่ชื่อจอแสดงผล: 'ซ่อนโหนดนี้', ประเภทการเข้าถึง: 'attr',//หากชื่อถูกซ่อนอยู่ ใช้ getAttr( 'hidden') และ setAttr('hidden', false) เพื่อเข้าถึงไอคอน: 'images/alert.gif', //ตั้งค่าไอคอน valueType ที่แสดงทางด้านซ้ายของชื่อแอตทริบิวต์: 'boolean', //ใช้เพื่อแจ้งให้ส่วนประกอบจัดเตรียมตัวเรนเดอร์ที่เหมาะสมในการแสดงผลประเภทบูลีน ซึ่งแสดงเป็นกล่องกาเครื่องหมายที่แก้ไขได้: true //ตั้งค่าว่าคุณสมบัตินั้นสามารถแก้ไขได้หรือไม่}, { name: 'grade', displayName: 'Type' , accessType : 'attr', DrawPropertyValue: function(g, property, value, rowIndex, x, y, w, h, data, view){//ฟังก์ชันการแสดงผลค่าแอตทริบิวต์ที่กำหนดเอง var cb = function(v) { data.a('grade', v); } return fillFormPane(data.formPane1, w, h, data.tablePane1, serviceType, cb); } }, { ชื่อ: 'หมายเลข', displayName: 'หน่วยความจำ', accessType: 'attr', DrawPropertyValue: function(g, คุณสมบัติ, ค่า, rowIndex, x, y, w, h, ข้อมูล, มุมมอง){ var cb = function(v) { data.a('number', v); } return fillFormPane(data.formPane2, w, h, data.tablePane2, serviceSize, cb); } }, { ชื่อ: 'ประเภทอินเทอร์เฟซ', accessType: 'attr', displayName : 'ประเภทอินเทอร์เฟซ' }, { ชื่อ: 'กราฟิกการ์ด' ประเภทการเข้าถึง: 'attr' ชื่อจอแสดงผล: 'กราฟิกการ์ด' }, { ชื่อ: 'รุ่น' ประเภทการเข้าถึง: 'attr', ชื่อจอแสดงผล: 'รุ่น', } ]);}ค่าที่ส่งคืนของแอตทริบิวต์ DrawPropertyValue ในแอตทริบิวต์ที่สามและสี่คือฟังก์ชัน fillFormPane พารามิเตอร์ของฟังก์ชันนี้คือ (ส่วนประกอบของฟอร์ม formP, ความกว้างของส่วนประกอบของฟอร์ม w, ความสูงของส่วนประกอบของฟอร์ม h, คลิกปุ่มในส่วนประกอบของฟอร์มเพื่อสร้างตาราง ส่วนประกอบ tableP ในกล่องป๊อปอัป เนื้อหาอาร์เรย์ arr ในส่วนประกอบตาราง ฟังก์ชัน cb จะกำหนดค่าที่ส่งคืนโดยการดับเบิลคลิกที่แถวในส่วนประกอบตารางไปยังกล่องข้อความ ht.widget.TextField ในแบบฟอร์ม)
พารามิเตอร์แรก formP คือการสร้างส่วนประกอบของฟอร์มคือการสร้างส่วนประกอบของฟอร์มและเพิ่มกล่องข้อความและปุ่มให้กับส่วนประกอบของฟอร์ม ขั้นตอนนี้ก็ค่อนข้างง่ายใน HT:
ฟังก์ชัน createFormPane(tPane) {//สร้างแผงแบบฟอร์ม var formPane = new ht.widget.FormPane(); formPane.setPadding(0);//กำหนดระยะห่างรอบแบบฟอร์มและเนื้อหาส่วนประกอบ var tField = new ht.widget.TextField();//สร้างกล่องข้อความ tField.setText('');//เนื้อหาของกล่องข้อความว่างเปล่า tField.setDisabled(true);//กล่องข้อความใช้งานไม่ได้ formPane.addRow( [// เพิ่มแถวในรูปแบบ { id: 'tag', // สามารถรับแอตทริบิวต์การระบุที่ไม่ซ้ำกันได้ผ่าน formPane.getItemById(id) และเพิ่มไปยังองค์ประกอบวัตถุรายการที่เกี่ยวข้อง: tField//ค่าแอตทริบิวต์อาจเป็นองค์ประกอบดั้งเดิมของ HTML ข้อมูลข้อความที่วาดเองภายใน FormPane และส่วนประกอบในตัว HT เช่น Button, CheckBox และ ComboBox ฯลฯ}, { button:{//หลังจากตั้งค่าแอตทริบิวต์นี้ HT จะ ถูกสร้างขึ้นโดยอัตโนมัติตามค่าแอตทริบิวต์ ht.widget.Button object และบันทึกไว้ในป้ายกำกับแอตทริบิวต์ขององค์ประกอบ:'...',//เนื้อหาข้อความบนปุ่ม onClicked: function(){//Button click event for(var ฉัน = 0; ฉัน < tPane.dm().size(); i++){//ตั้งค่า tablePane เพื่อเลือกค่าที่สอดคล้องกับ formPane โดยค่าเริ่มต้น var data = tPane.dm().getDatas().get(i); 'value' ) === formPane.v('tag')){ tPane.sm().ss(data); } } ส่งคืน createDialog(tPane, formPane);//สิ่งที่ส่งคืนคือการสร้างกล่องโต้ตอบ ซึ่งเนื้อหาคือแผงตาราง} } }], [0.5, 0.1]);//กำหนดอัตราส่วนการแสดงผลขององค์ประกอบแรกและองค์ประกอบที่สองใน ส่วนประกอบของตาราง องค์ประกอบของตารางนี้มีเพียงสององค์ประกอบเท่านั้น ได้แก่ กล่องข้อความและปุ่ม โดยมีสัดส่วน 0.5 และ 0.1 ตามลำดับ ส่งคืน formPane;}กระบวนการสร้างฟังก์ชัน createDialog นั้นเรียบง่ายและชัดเจนเช่นกัน ชื่อ ขนาด เนื้อหา ฯลฯ ของกล่องโต้ตอบได้รับการกำหนดค่าผ่านเมธอด setConfig(config) ฉันส่งพารามิเตอร์ตาราง tPane ไปยัง createDialog ซึ่งใช้เป็น เนื้อหาที่แสดงในกล่องโต้ตอบ:
ฟังก์ชัน createDialog(tPane){//สร้างกล่องป๊อปอัป dial.setConfig({ title: gv.sm().ld().getName()++formPane.title,//ชื่อเรื่องของเนื้อหากล่องโต้ตอบ: tPane, // ตั้งค่าเนื้อหาของกล่องป๊อปอัปโดยตรงไปที่ความกว้างของแผงตาราง: 400, //ระบุความกว้างของความสูงของกล่องโต้ตอบ: 200, ลากได้: จริง //ระบุว่าสามารถลากและปรับเปลี่ยนกล่องโต้ตอบได้หรือไม่: จริง //ระบุว่าจะแสดงปุ่มปิดหรือไม่ เลื่อนเมาส์ไปทางขวาของกล่องโต้ตอบ ขนาดของกล่องโต้ตอบสามารถเปลี่ยนได้ที่มุมด้านล่าง ซึ่งหมายความว่าสามารถปรับปุ่มความกว้างและความสูงได้: [//เพิ่มสองปุ่ม { label: 'Cancel', การกระทำ: function(){ dial.hide() } }, { label: 'OK ', } ] }); Dialog.show();//แสดงกล่องโต้ตอบ}พารามิเตอร์ที่สี่ tableP ส่วนประกอบของตารางนั้นไม่มีอะไรพิเศษ เพียงสร้างส่วนประกอบของฟอร์มแล้วเพิ่มคอลัมน์ให้กับส่วนประกอบของฟอร์ม ขั้นตอนนั้นง่ายและโค้ดก็ค่อนข้างง่ายเช่นกัน:
ฟังก์ชัน createTableView(arr, dm){//สร้างส่วนประกอบของตาราง var tableView = new ht.widget.TableView(dm); tableView.addColumns([//เพิ่มข้อมูลคอลัมน์เป็นกลุ่มโดยใช้พารามิเตอร์อาร์เรย์ json{ displayName: 'ID', / /รับเนื้อหาชื่อคอลัมน์ของ DrawCell ส่วนหัวของตาราง: function(g, data, Selected, column, x, y, w, h, tableView){//วิธีการเรนเดอร์เซลล์แบบกำหนดเอง var id = tableView.getRowIndex(data);//ส่งคืนดัชนีแถวที่มีวัตถุข้อมูลอยู่ ht.Default.drawText(g, 'row' + (id + 1), null, null, x, y, w, h, 'center');//พารามิเตอร์ข้อความการวาด (วัตถุแปรง g, เนื้อหาข้อความค่า, แบบอักษรข้อความแบบอักษร, สีข้อความสี, พิกัด x เมื่อเริ่มวาด, พิกัด y เมื่อวาดเริ่มที่ y, ความกว้างเมื่อวาด w, ความสูงเมื่อวาด h , จัดข้อความในแนวนอน, vจัดข้อความในแนวตั้ง) } }, { displayName: 'Name', DrawCell: function(g, data,การคัดเลือก, คอลัมน์, x, y, w, h, tableView){ var id = tableView.getRowIndex(data); var info = arr[id]; กลับ tableView; }หลังจากอธิบายพารามิเตอร์ใน fillFormPane แล้ว เรามาดูกันว่าฟังก์ชันนี้ถูกกำหนดอย่างไร โดยพื้นฐานแล้ว ขั้นตอนสุดท้ายคือการคลิกที่องค์ประกอบในส่วนประกอบของตาราง tablePane และส่งคืนองค์ประกอบนี้ไปที่กล่องข้อความ textField ในส่วนประกอบของฟอร์ม formPane:
ฟังก์ชัน fillFormPane(formP, w, h, tableP, arr, cb){//formpane ทางด้านขวา if(formP === undefinition){ return; } formP.setHeight(h); setHGap (0); if(formP.v('tag') === 'ไม่ได้กำหนด' || formP.v('tag') === '') { formP.v('tag', arr[0]); } tableP.onDataDoubleClicked = function(data){//Callback เมื่อแถวข้อมูลในส่วนประกอบของตารางถูกดับเบิลคลิก var v = arr[data.a('index ') ]; formP.v('tag', v);//ตั้งค่าองค์ประกอบรายการที่สอดคล้องกันตาม id ซึ่งเป็นตัวย่อของ setValue องค์ประกอบที่มี id ของแท็กคือกล่องข้อความ dial.hide( ); ถ้า (cb){cb(v);} //หากส่งพารามิเตอร์ cb ให้ตั้งค่าของ data.a('number')/data.a('helloName') เป็นค่าของแถวที่ดับเบิลคลิก ในตาราง ซึ่งก็คือ กำหนดให้กับแอตทริบิวต์ที่สามและสี่} tableP.onDataClicked = function(data){//เรียกว่าเมื่อมีการคลิกแถวข้อมูลในองค์ประกอบของตาราง Dialog.getConfig().buttons[1].action = function(){//คลิก ตกลง เพื่อดำเนินการต่อไปนี้ var v = arr[data.a('index')]; formP.v('tag', v); Dialog.hide(); { cb(v);} } }; กลับ formP.getView();} ฟังก์ชัน fillFormPane(formP, w, h, tableP, arr, cb){//formpane ทางด้านขวา if(formP === undefinition){ return; } formP.setHeight(h); setHGap (0); if(formP.v('tag') === 'ไม่ได้กำหนด' || formP.v('tag') === '') { formP.v('tag', arr[0]); } tableP.onDataDoubleClicked = function(data){//Callback เมื่อแถวข้อมูลในส่วนประกอบของตารางถูกดับเบิลคลิก var v = arr[data.a('index ') ]; formP.v('tag', v);//ตั้งค่าองค์ประกอบรายการที่สอดคล้องกันตาม id ซึ่งเป็นตัวย่อของ setValue องค์ประกอบที่มี id ของแท็กคือกล่องข้อความ dial.hide( ); ถ้า (cb){cb(v);} //หากส่งพารามิเตอร์ cb ให้ตั้งค่าของ data.a('number')/data.a('helloName') เป็นค่าของแถวที่ดับเบิลคลิก ในตาราง ซึ่งก็คือ กำหนดให้กับแอตทริบิวต์ที่สามและสี่} tableP.onDataClicked = function(data){//เรียกว่าเมื่อมีการคลิกแถวข้อมูลในองค์ประกอบของตาราง Dialog.getConfig().buttons[1].action = function(){//คลิก ตกลง เพื่อดำเนินการต่อไปนี้ var v = arr[data.a('index')]; formP.v('tag', v); dial.hide(); { cb(v);} } }; กลับ formP.getView();}การแสดงแถบคุณสมบัติที่มุมขวาบนจะสิ้นสุดที่นี่ แผงตารางที่มุมขวาล่างจะถูกสร้างขึ้นในลักษณะเดียวกัน คุณสามารถอ่านโค้ดเพื่อทำความเข้าใจได้ด้วยตัวเอง
เลย์เอาต์อัตโนมัติสุดท้ายนี้ เรามาพูดถึงการจัดเรียงโหนดในอินเทอร์เฟซทั้งหมดกัน องค์ประกอบเค้าโครงอัตโนมัติใน HT มีอัลกอริทึมหลายประเภทเพื่อจัดเรียงตำแหน่งโหนดโดยอัตโนมัติตามความสัมพันธ์ระหว่างโหนดและการเชื่อมต่อ เค้าโครงอัตโนมัติมักใช้ในฉากที่มีองค์ประกอบกราฟิกจำนวนมากหรือความสัมพันธ์ในการเชื่อมต่อที่ซับซ้อน ทำให้ยากต่อการลากและวางด้วยตนเอง ฉันนำเสนอวิธีการจัดวางแต่ละวิธีผ่านปุ่มต่างๆ คลิกปุ่มที่เกี่ยวข้อง และวิธีการจัดวางจะถูกจัดวางโดยอัตโนมัติตามวิธีการจัดวางที่กำหนดโดยปุ่มกด:
ขั้นแรก สร้างอินสแตนซ์ใหม่ ส่งผ่านออบเจ็กต์ที่ต้องการเลย์เอาต์อัตโนมัติ ซึ่งอาจเป็น DataModel, GraphView และ Graph3dView จากนั้นตั้งค่าวิธีการเลย์เอาต์เริ่มต้น:
autoLayout = new ht.layout.AutoLayout(gv);setTimeout(function(){layout('towardouth', true);//เนื่องจากก่อนที่รูปภาพจะถูกโหลด เลย์เอาต์อัตโนมัติจะถูกจัดวางตามขนาดเริ่มต้นของโหนด} , 200);จากนั้นสร้างแผงแบบฟอร์ม formPane เพิ่มลงในเนื้อหา และวางไว้ที่มุมซ้ายบนของเนื้อหา ฉันจะไม่วางโค้ดทั้งหมดออกไป เพียงแสดงปุ่มของเค้าโครงแรก:
ฟังก์ชั่น createDirectionForm(){ var form = new ht.widget.FormPane(); form.setWidth(200);//ตั้งค่าความกว้างของแบบฟอร์ม form.setHeight(80); document.body.appendChild(form.getView()); แบบฟอร์ม .getView().style.พื้นหลัง = '#fff'; form.getView().style.boxShadow = '4px 16px 16px rgba(0, 0, 0, 0.1)';//Set the shadow style form.addRow([//บรรทัดนี้ถูกนำออกมาแยกกันเป็นชื่อ { องค์ประกอบ: 'เค้าโครงอัตโนมัติ:',//ข้อความที่แสดง}] , [0.1]);//ในอาร์เรย์มีวัตถุเพียงตัวเดียว เพียงตั้งค่าความกว้างของวัตถุตัวเดียว form.addRow([ { button: { icon: 'Layout/South Layout.json', onClicked: function(){ เค้าโครง ('ไปทางทิศใต้', จริง); }, พื้นหลัง: null, labelColor: '#fff', groupId: 'btn', toolTip: 'รูปแบบทิศใต้', borderColor: null } }, //.. ต่อไปเพิ่มปุ่มที่เหลืออีก 6 ปุ่ม], [0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1]);//ในอาร์เรย์มีวัตถุเจ็ดชิ้น ดังนั้นต้องกำหนดความกว้างของวัตถุทั้งเจ็ดในรูปแบบส่งคืน}นี่เป็นส่วนที่น่าสนใจมากขึ้น ขอขอบคุณทุกท่านที่อ่าน ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของคุณ ฉันหวังว่าทุกคนจะสนับสนุน VeVb Martial Arts Network