ทันใดนั้นมีความคิดถ้าคุณสามารถใส่จุดความรู้ที่แตกต่างกันในอินเทอร์เฟซเดียวกันและวางไว้ในกล่องดังนั้นหากฉันต้องการดูสิ่งใดมันสามารถแสดงได้โดยตรงและกล่องนี้จะต้องสามารถเปิดได้ แก่นแท้ ฉันใช้ HT เพื่อตระหนักถึงความคิดของฉันด้วยรหัสมากกว่าร้อยบรรทัดดังนั้นรหัสน้อยสามารถบรรลุเอฟเฟกต์นี้ได้
มาดูการเรนเดอร์กันเถอะ:
พื้นฐานที่สุดของตัวอย่างนี้คือกล่องด้านนอกสุดดังนั้นลองมาดูวิธีการบรรลุผล:
var box = new ht.csgbox ();
การใช้ HT สามารถใช้งานได้อย่างง่ายดาย
แผนที่พื้นฐานที่ใช้ในตัวอย่างนี้คือ ht.csgbox ซึ่งเป็นโมเดลกล่องคุณสามารถอ้างถึง HT สำหรับคู่มือการสร้างแบบจำลองเว็บ ht.style (HT สำหรับคู่มือสไตล์เว็บ)
หากคุณต้องการเพิ่มสติกเกอร์ที่ด้านหนึ่งของกล่องสิ่งที่ฉันคิดได้คือฟังก์ชั่น ht.default.setImage ที่ห่อหุ้ม
วิธีการที่ฉันนำมาใช้ที่นี่คือการอ้างถึงตัวแก้ไขของ HT เพื่อดำเนินการใหม่ -declare ส่วนประกอบ graphview และรูปแบบข้อมูล DataModel จากนั้นเรียก JSON ผ่านวิธี HT.Default.xhrload ในรูปแบบวิธี JSON เนื้อหาใน JSON เป็นอินเทอร์เฟซภาพจากนั้นตั้งค่าภาพเคลื่อนไหวแล้วรีเฟรชอินเทอร์เฟซของ JSON นี้ทันที
ht.default.xhrload ('แสดง/demo/pump.json', ฟังก์ชั่น (ข้อความ) {const json = ht.default.parse (ข้อความ); pumpdm.deserialize (json); var curent rotation = 0; var ล่าสุด = ใหม่ วันที่ () .getTime (); (การหมุนเวียนในปัจจุบัน);ในเวลานี้ฉันไม่สามารถเพิ่ม PumpGV และ G3D ลงในด้านล่างได้และความตั้งใจของฉันคือการเพิ่ม PumpGV ไปที่ด้านข้างของ CSGBox ใน G3D ไม่สมบูรณ์ หากคุณต้องการเห็นผลกระทบของความสูงที่กว้างนี้บนหน้าจอคุณสามารถเปลี่ยนได้ด้วยตัวเอง
pumpgv.getWidth = function () {return 600;} pumpgv.getheight = function () {return 600;} pumpgv.getCanvas ()การแสดงผลของแผนภูมิ Echarts นั้นเป็นพื้นฐานมาก
ในท้ายที่สุดคุณจะต้องส่งผ่านผ้าใบที่ส่งคืนทั้งสองนี้ไปยัง ht.default.setImage ::
ht.default.setImage ('echart', ชาร์ต (ตัวเลือก));ฟังก์ชั่น ht.default.drawimage สร้างไดอะแกรมใหม่จริงวาดรูปภาพบนผืนผ้าใบดังนั้นเราจึงต้องผ่านผืนผ้าใบที่เราวาดไปยัง ht.default.setImage เพื่อสร้างรูปภาพ
สิ่งหนึ่งที่ต้องได้รับการปรับปรุง เมื่อมีความโปร่งใสเราต้องตั้งค่าทั้งหมดแปลเป็นจริง
เราสามารถตั้งค่าความโปร่งใส: จริงที่ต้องแสดง ดูการเรนเดอร์หลังจากเสร็จสิ้น:
สรุปข้างต้นคือการใช้งาน WebGL ที่ใช้ HTML5 ของ JSON และ ECHARTS ชาร์ตที่แนะนำให้ทุกคน ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Vevb Wulin!