เริ่มตั้งแต่วันนี้ เราจะวิเคราะห์วิธีสร้างแอปพลิเคชันกราฟโทโพโลยี HTML5 จากระดับพื้นฐานที่สุด HT จะห่อหุ้มส่วนประกอบกราฟโทโพโลยีภายใน ht.graph.GraphView (ต่อไปนี้จะเรียกว่า GraphView) ซึ่งเป็นองค์ประกอบที่มีฟังก์ชัน 2D ที่สมบูรณ์ที่สุด ในกรอบงาน HT และไลบรารีคลาสที่เกี่ยวข้องทั้งหมดอยู่ภายใต้แพ็คเกจ ht.graph GraphView มีฟังก์ชันการนำเสนอและแก้ไขกราฟิกขั้นพื้นฐาน การเชื่อมต่อโหนดทอพอโลยีและฟังก์ชันเค้าโครงอัตโนมัติ วัตถุที่กำหนดไว้ล่วงหน้าในอุตสาหกรรมต่างๆ เช่น พลังงานและโทรคมนาคม และเอฟเฟกต์พิเศษ เช่น การแสดงภาพเคลื่อนไหว ดังนั้นจึงมีแอปพลิเคชันที่หลากหลายและสามารถใช้เป็น a เครื่องมือวาดภาพและทรัพยากรบุคคลในสาขาการตรวจสอบ มีอินเทอร์เฟซของเครื่องและสามารถใช้เป็นเครื่องมือแก้ไขกราฟิกทั่วไป และสามารถขยายไปสู่แอปพลิเคชันระดับองค์กร เช่น ขั้นตอนการทำงานและแผนผังองค์กร พูดง่ายๆ ก็คือ แผนภาพโทโพโลยีเป็นคำทั่วไป แผนภาพโทโพโลยีเครือข่ายของการจัดการเครือข่ายโทรคมนาคม แผนภาพโทโพโลยีโครงข่ายไฟฟ้า แผนภาพการตรวจสอบการควบคุมทางอุตสาหกรรม แผนภาพขั้นตอนการทำงาน แผนที่สมองคิด ฯลฯ พูดง่ายๆ ก็คือ ประกอบด้วยการเชื่อมต่อโหนด นี่คือไดอะแกรมทอพอโลยีที่อ้างถึงที่นี่
การพัฒนาไดอะแกรมโทโพโลยีเครือข่ายด้วย HT เป็นเรื่องง่ายมาก ใช้โค้ดเพียงไม่กี่บรรทัดเพื่อสร้างไดอะแกรมโทโพโลยีเซิร์ฟเวอร์และไคลเอ็นต์อย่างง่าย:
ตัวอย่างนี้เป็นตัวอย่างพื้นฐานและเติมเต็มฟังก์ชันทอพอโลยีเกือบทั้งหมดของเซิร์ฟเวอร์และไคลเอ็นต์ เพื่อเป็นการไม่ให้เสียเวลา ลองเดาดูว่าตัวอย่างนี้ใช้โค้ดทั้งหมดกี่บรรทัด รวมถึงแท็ก HTML ทุกส่วนด้วย ลบบรรทัดว่างๆ ออกไป มีเพียง 50 บรรทัดเท่านั้น ฉันยังออกแบบสไตล์ไว้เยอะมาก สุดท้ายแล้ว ตัวอย่างที่ฉันอยากจะแสดงให้เห็นว่าคุณไม่สามารถน่าเกลียดเกินไปได้~
คุณสามารถดาวน์โหลดโค้ดได้ด้วยตัวเองที่ tuputu_jb51.rar โปรดทราบว่าเนื่องจากมีไฟล์ json จึงจะเกิดปัญหาข้ามโดเมนกับรูปภาพ คุณต้องใช้ Firefox หรือเซิร์ฟเวอร์ภายในเครื่องจึงจะเรียกใช้ได้
ให้เราอธิบายตั้งแต่ต้นว่า HT เป็นโซลูชั่นแบบครบวงจรสำหรับอินเทอร์เฟซกราฟิกแอปพลิเคชันระดับองค์กรที่ใช้มาตรฐาน HTML5 โดยประกอบด้วยไลบรารีการพัฒนาอินเทอร์เฟซแบบกราฟิกที่หลากหลาย เช่น ส่วนประกอบทั่วไป ส่วนประกอบโทโพโลยี และเอ็นจิ้นการเรนเดอร์ 3 มิติ ผู้ใช้เพียงแค่แนะนำ ht .js และไม่ขัดแย้งกับสิ่งอื่นใดเลย เนื่องจาก HT ประกาศตัวแปรโกลบอล ht เท่านั้น ไม่มีอะไรเพิ่มเติม
ถัดไป วิเคราะห์ส่วนของโค้ด ขั้นแรก สร้างฉากแผนผังโทโพโลยี:
dm = new ht.DataModel();//Data container gv = new ht.graph.GraphView(dm);//พารามิเตอร์ส่วนประกอบโทโพโลยีคือโมเดลข้อมูลที่เชื่อมโยงโดย dm gv.addToDOM();//เพิ่มกราฟโทโพโลยี เข้าสู่ร่างกาย
รูทของส่วนประกอบทั้งหมดของ HT คือ div ซึ่งได้มาจากเมธอด getView() เราใช้เมธอดนี้ในเมธอด addToDOM:
addToDOM = function(){ var self = this, view = self.getView(), //รับ div พื้นฐานขององค์ประกอบ style = view.style; document.body.appendChild(view); the body style.left = '0'; //โดยทั่วไปแล้ว HT จะตั้งค่าส่วนประกอบให้เป็นตำแหน่งที่แน่นอน style.right = '0'; style.top = '0'; window.addEventListener('resize', function () { self.iv(); }, false); // การเปลี่ยนแปลงขนาดหน้าต่างการฟังเหตุการณ์ iv เป็นองค์ประกอบการรีเฟรชล่าช้า}จากนั้นเพิ่มโหนดเซิร์ฟเวอร์และไคลเอ็นต์เข้ากับฉากโทโพโลยี:
var server = new ht.Node();server.setName('server');//ตั้งชื่อโหนดและแสดงไว้ด้านล่างของโหนด server.setImage('serverImage');//ตั้งค่ารูปภาพของโหนด server.setSize( 20, 60 );//กำหนดขนาดโหนด dm.add(server);//เพิ่มโหนดลงในที่เก็บข้อมูล dm server.setPosition(100, 100);//ตั้งค่าพิกัดโหนด (x, y) var group = new ht.Group();//Group สามารถมีได้หลายโหนดในกลุ่ม group.setImage('groupImage');//ตั้งค่ารูปภาพ dm .add (group);var client = new ht.Node();//โหนดนี้ถูกเพิ่มในกลุ่ม client.setName('client');client.setImage('clientImage');dm.add(client);group.addChild(client);// เพิ่ม ลูก ๆ ในกลุ่ม group.setExpanded(true);//ตั้งค่ากลุ่มเป็นโหมดขยาย client.setPosition(200, 100);//กำหนดตำแหน่งโหนด หากมีเพียงหนึ่งโหนดในกลุ่ม ตำแหน่งของโหนดนี้สามารถเป็นตำแหน่งของกลุ่มได้การเชื่อมต่อระหว่างเซิร์ฟเวอร์และไคลเอนต์? โค้ด 2 บรรทัดเสร็จแล้ว! ในความเป็นจริง วิธีการเพิ่มโหนดใน HT นั้นง่ายมาก โดยปกติแล้วจะใช้เวลาเพียง 2 บรรทัดของโค้ด: ประกาศตัวแปรอินสแตนซ์ก่อน จากนั้นจึงเพิ่มตัวแปรอินสแตนซ์ลงในที่เก็บข้อมูล
var edge = ht.Edge ใหม่ (เซิร์ฟเวอร์, ไคลเอนต์); dm.add (ขอบ);
เราสงสัยว่าเส้นประถูกสร้างขึ้นมาอย่างไร? การก่อตัวของเส้นประถูกสร้างขึ้นบนเส้นเชื่อมต่อและมีสามขั้นตอน:
มันไม่ง่ายเลยเหรอ! ต่อไปเรามาดูวิธีการตั้งค่า:
edge.s({//แอตทริบิวต์รูปแบบการตั้งค่าโหนด 'edge.dash': true,//แสดงเส้นประ'edge.dash.flow': true,//เปิดใช้งานเส้นประ flow'edge.dash.color': 'สีเหลือง ', //Dash line color'edge.dash.pattern': [8, 8],//Dash line style 'label': 'flow',//หมายเหตุประกอบโหนด 'label.พื้นหลัง': 'pink',// สีพื้นหลังคำอธิบายประกอบของโหนด });ด้วยวิธีนี้ ส่วนแสดงผลทั้งหมดได้ถูกแนะนำไปแล้ว~ เดี๋ยวนะ ดูเหมือนว่าจะมีบางอย่างหายไปใช่ไหม? โดยวิธีการที่ฉันลืมที่จะแนะนำคลาส ht.Group ใน HT มันหมายถึงกลุ่ม สามารถมีได้หลายโหนด แต่ฉันก็ยังเคลื่อนไหวเล็กน้อย นั่นคือส่วนแสดงผลที่มุมขวาบนของกลุ่มนั้นจริงๆ แล้วเป็นเครื่องหมายที่ใช้แสดงคำแนะนำ:
group.s({ 'group.พื้นหลัง': 'rgba(255, 255, 0, 0.1)',//ตั้งค่าสีพื้นหลังของกลุ่ม'หมายเหตุ': ดับเบิลคลิกฉัน!//ใส่คำอธิบายประกอบเนื้อหาที่แสดง'หมายเหตุ .position ': 13,//ตำแหน่งคำอธิบายประกอบ 'note.offset.y': 10,//ออฟเซ็ตแกน Y ของตำแหน่งคำอธิบายประกอบ});เราสามารถเปลี่ยนตำแหน่งของคำอธิบายประกอบผ่าน note.position (สำหรับข้อมูลตำแหน่งเฉพาะ โปรดดูที่ HT สำหรับคู่มือตำแหน่งเว็บ) หรือคุณสามารถใช้ note.offset.x และ note.offset.y เพื่อเปลี่ยนตำแหน่งของ คำอธิบายประกอบ
การวิเคราะห์โค้ดทั้งหมดเสร็จสมบูรณ์แล้ว! ฉันจะอัปเดตโดยเร็วที่สุดหากคุณรู้สึกว่าความคืบหน้าช้าคุณสามารถไปที่เว็บไซต์อย่างเป็นทางการของเรา (HT สำหรับเว็บ) เพื่อเรียนรู้ด้วยตัวเอง ฉันหวังว่าคุณจะได้รับมากขึ้น การเรียนรู้เป็นธุรกิจของคุณเอง แปลงเนื้อหาของบทความนี้ให้เป็น Make it your own Knowledge!
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network