เมื่อเมาส์ผู้ใช้ถูกย้ายมีเฟรมป๊อปอัพ นี่เป็นเรื่องง่ายเมื่อจัดการกับองค์ประกอบ HTML แต่ถ้ามันถูกประมวลผลโดยกราฟิกที่ประกอบด้วย HTML5 Canvas วิธีนี้ไม่สามารถใช้ได้อีกต่อไปเนื่องจากผืนผ้าใบใช้กลไกอีกชุดหนึ่ง หนึ่งโดยรวม กราฟิกเองเป็นส่วนหนึ่งของผืนผ้าใบ อย่างไรก็ตามใน HT สำหรับเว็บความต้องการนี้ง่ายต่อการตระหนักและฉากดังต่อไปนี้:
ฉากนี้ขึ้นอยู่กับไฟล์ JSON ของ HT สำหรับเว็บ ขยายตัวและเป็นเรื่องง่ายที่จะปรับแต่งเพื่อตอบสนองตัวแก้ไขโทโพโลยีที่ตรงกับความต้องการของฉัน ไม่เพียงแค่นั้นในการสาธิตนี้แผนภูมิเวกเตอร์ของเฟรมระเบิดสามประเภท 'Tips1.json', 'Tips2.json', 'Tips3.json' ผ่านการแก้ไขเวกเตอร์นี้ (http: //www.hightopo /demo/vector-editor/index.html) เป็นเพียงการวาดและใช้งานง่าย ในสถานการณ์ด้านบนเมื่อผู้ใช้เคลื่อนย้ายเมาส์ไปที่หญ้าและวัตถุอื่น ๆ จะมีข้อมูลรายละเอียดของกล่องป๊อปอัพเพื่อแสดง
การใช้งานเฉพาะมีดังนี้:
การตระเตรียมแนะนำ ht ของเรา (http://www.hightopo.com/) :)::
<สคริปต์ src = 'ht.js'> </script> dataModel = ใหม่ ht.datamodel ();
HT จัดทำแบบฟอร์มคำอธิบายเวกเตอร์ที่กำหนดเองในรูปแบบ JSON ที่นี่ลงทะเบียนกล่องป๊อป JSON รูปสามรูปที่มีรูปเป็นภาพสำหรับการโทรที่ตามมา:
ht.default.setImage ('Tips1', 'Symbols /Tips1.json');จากนั้นรับวัตถุที่มีเอฟเฟกต์แบบโต้ตอบชื่อแอตทริบิวต์ของวัตถุคือชื่อป้ายชื่อสำหรับแต่ละภาพ:
// tree var time = {'time1': true, 'tree2': true, 'tree3': true}; }; กล่องป๊อป -อัพอันที่จริงแล้วสาระสำคัญของกล่องป๊อปอัพคือโหนด
1. ควบคุมที่ซ่อนและการแสดงของโหนดสามารถบรรลุผลของกรอบระเบิด;
2. การเปลี่ยนแปลงตำแหน่งเมาส์มาพร้อมกับการเปลี่ยนแปลงของตำแหน่งโหนด
3. เมื่อเมาส์ถูกย้ายไปยังวัตถุต่าง ๆ พื้นผิวบนโหนดก็จะเปลี่ยนไปเช่นกัน
4. ค่าแอตทริบิวต์ในโหนดยังเปลี่ยนไปตามตำแหน่งของเมาส์
ดังนั้นเพื่อให้บรรลุกรอบกระสุนก่อนสร้างโหนดใหม่และตั้งค่าระดับเป็น 'สูงกว่า'
ht.default.xhrload ('meadow.json', ฟังก์ชั่น (ข้อความ) {const json = ht.default.parse (ข้อความ); ถ้า (json.tital) document.title = json.title; deserialize (json); // ตั้งค่า hierarchical dataModel.each (ฟังก์ชั่น (data) {data.setLayer ('ล่าง');}); ;;จากนั้นเพื่อฟังเหตุการณ์ Mousemove ที่ชั้นล่างให้ตัดสินว่าตำแหน่งของเมาส์อยู่เหนือวัตถุทั้งสามหรือไม่และเรียกฟังก์ชั่น layout () ไปยังโหนด re -layout ตามประเภทวัตถุ:
graphview.getView () (! hoverdata) return; tips2 ');} อื่นถ้า (Mountain [holddata.gettg ()]) {เลย์เอาต์ (โหนด, pos,' tips3 ');}});});รายละเอียดฟังก์ชั่น Layout () โดยละเอียด . เนื้อหาของ func มีหลายประเภท:
1. ประเภทฟังก์ชั่นเรียกฟังก์ชันโดยตรงและส่งผ่านข้อมูลที่เกี่ยวข้องและดูวัตถุ
2. ประเภทสตริง:
เริ่มต้นที่ sty@*** ค่า data.getstyle (***) จะถูกส่งคืนซึ่งเป็นชื่อแอตทริบิวต์ของสไตล์
ที่จุดเริ่มต้นของ attr@*** ค่า data.getattr (***) จะถูกส่งกลับโดยที่ *** แสดงชื่อแอตทริบิวต์ของ attr
ที่จุดเริ่มต้นของฟิลด์@*** ข้อมูล
หากสถานการณ์ข้างต้นไม่ตรงกันประเภทสตริงจะเรียกโดยตรงว่าข้อมูล *** (ดู) เป็นชื่อฟังก์ชันของวัตถุข้อมูลและค่าส่งคืนจะใช้เป็นค่าพารามิเตอร์
นอกเหนือจากแอตทริบิวต์ Func คุณสามารถตั้งค่าแอตทริบิวต์ค่าเป็นค่าเริ่มต้น คู่มือการเชื่อมโยงข้อมูล HT สำหรับเว็บ (http: /www.hightopo.pom/guide/guide/core/datamodel/htamodel-guide.html) ตัวอย่างเช่นที่นี่ผลลัพธ์ของการเชื่อมโยงข้อมูลของค่าแสงแดดในไฟล์ 'Tips1.json' มีดังนี้:
ข้อความ: {func: attr@sunshine, ค่า: ค่าแสงแดด},ใส่ซอร์สโค้ดของฟังก์ชันเลย์เอาต์ ():
เค้าโครงฟังก์ชั่น (Node, POS, Type) {node.s ('2d.visible', true); getWidth ()/2, pos.y -node.getheigh ()/2); : 'Rain Dew Value:'+ (pos.y/1000) .tofixed (2), 'love': ': ค่าความรัก: ***'});} อื่นถ้า (type == 'tips2') {node .SetPosition (pos.x, pos.y -node.getheight ()/2); x // 100)+'%'});} อื่นถ้า (type == 'tips3') {node.setPosition (pos.x -node.getWidth ()/2, pos.y -node.getheigh ()/ 2); node.a ({'hight': ':' + math.round (pos.y) + 'mi', 'ภูมิทัศน์': 'landform: karster'}); คลาวด์มือถือในที่สุดการสาธิตของเรายังมีเอฟเฟกต์แอนิเมชั่นบนคลาวด์ . HT จัดทำโดย HT ฟังก์ชั่นแอนิเมชั่นของ ht.default.startanim, ht.default.startanim สนับสนุนสองวิธี: ตามเฟรมและเวลา:
ผู้ใช้วิธีการเฟรมควบคุมเอฟเฟกต์ภาพเคลื่อนไหวโดยระบุจำนวนเฟรมภาพเคลื่อนไหวเฟรมและพารามิเตอร์ช่วงเวลาของเฟรมภาพเคลื่อนไหวช่วงเวลา
วิธีการตามเวลาผู้ใช้จำเป็นต้องระบุมิลลิวินาทีของวงจรภาพเคลื่อนไหวของระยะเวลา
สำหรับรายละเอียดดู HT สำหรับเว็บ
ที่นี่เราใช้วิธีการตามเวลา
var cloud = dataModel.getDatabyTag ('Cloud'); .getPosition () end == Round1)? Round2: Round1; * v, py);}};ในที่สุดก็ทำการสาธิตของเราอีกครั้งสำหรับการอ้างอิงของคุณ