Efek kotak realisasi berdasarkan kanvas html5

Ketika mouse pengguna dipindahkan, ada bingkai pop -up. Ini sederhana ketika berhadapan dengan elemen HTML, tetapi jika diproses oleh grafik yang terdiri dari kanvas HTML5, metode ini tidak lagi berlaku, karena kanvas menggunakan set mekanisme lain. satu secara keseluruhan. Grafik itu sendiri sebenarnya adalah bagian dari kanvas. Namun, di HT untuk web, permintaan ini mudah disadari, dan adegannya adalah sebagai berikut:

Adegan ini didasarkan pada file JSON HT untuk Web diperluas, dan mudah untuk disesuaikan untuk bertemu dengan editor topologi yang memenuhi kebutuhan saya. Tidak hanya itu, dalam demo ini, bagan vektor dari tiga jenis bingkai bom 'Tips1.json', 'Tips2.json', 'Tips3.json' adalah melalui editor vektor ini (http: //www.hightopo. Com. /Demo/vector-editor/index.html) hanya ditarik, dan cukup mudah digunakan. Dalam skenario di atas, ketika pengguna memindahkan mouse ke rumput dan benda -benda lain, akan ada informasi terperinci dari kotak pop -up untuk menampilkannya.

Implementasi spesifik adalah sebagai berikut:

Perkenalkan HT kami (http://www.highopo.com/) :):

 <skrip src = 'ht.js'> </script> datamodel = new ht.datamodel ();

HT menyediakan formulir deskripsi vektor yang disesuaikan dalam format JSON. Di sini, daftarkan kotak pop -up JSON -shape ke dalam gambar untuk panggilan berikutnya:

 ht.default.setImage ('Tips1', 'Symbols /Tips1.json');

Kemudian dapatkan objek dengan efek interaktif, nama atribut objek adalah nama label yang diatur untuk setiap gambar:

 // tree var time = {'time1': true, 'tree2': true, 'tree3': true}; }; // gunung var gunung = {'gunung': true};

Bahkan, esensi kotak pop -up adalah sebuah node.

1. Kontrol Node yang tersembunyi dan tersembunyi dapat mencapai efek bingkai bom;

2. Perubahan posisi tikus disertai dengan perubahan posisi simpul;

3. Ketika mouse dipindahkan ke objek yang berbeda, tekstur pada node juga berubah;

4. Nilai atribut dalam node juga berubah dengan posisi mouse.

Oleh karena itu, untuk mencapai bingkai peluru, pertama -tama buat node baru dan atur level ke 'lebih tinggi' sebelum itu, file json dari bagan adegan juga diperlukan hierarkis 'lebih rendah' ​​untuk mencegah diblokir oleh dolar yang ada:

 ht.default.xhrload ('meadow.json', function (teks) {const json = ht.default.parse (teks); if (json.tital) document.title = json.title; deserialize (json); // Atur hierarki datamodel.each (function (data) {data.setLayer ('lebih rendah');}); ;;

Kemudian, untuk mendengarkan insiden mousemove di lapisan bawah, menilai apakah posisi mouse berada di atas tiga objek, dan memanggil fungsi tata letak () ke simpul re -layout sesuai dengan jenis objek:

 GraphView.GetView (). (!!! Tips2 ');} lain jika (gunung [holddata.gettg ()]) {tata letak (node, pos,' tips3 ');}});});

Fungsi tata letak () dilakukan secara rinci secara rinci. Konten fungsi memiliki beberapa jenis:

1. Jenis fungsi, langsung panggil fungsi, dan lulus dalam data terkait dan tampilan objek.

2. Jenis string:

Mulai dari Sty@***, nilai data.getStyle (***) dikembalikan, yang merupakan nama atribut gaya.

Pada awal attr@***, nilai data.getAttr (***) dikembalikan, di mana *** mewakili nama atribut ATTR.

Di awal bidang@***, data.

Jika situasi di atas tidak cocok, tipe string secara langsung disebut data *** (Lihat) sebagai nama fungsi objek data, dan nilai pengembalian digunakan sebagai nilai parameter.

Selain atribut fungsi, Anda juga dapat mengatur atribut nilai sebagai nilai default. Manual pengikat data HT untuk Web (http://www.hightopo.pom/guide/guide/core/datamodel/htamodel-guide.html). Misalnya, di sini, hasil pengikatan data dari nilai sinar matahari di file 'Tips1.json' adalah sebagai berikut:

 Teks: {func: attr@sunshine, nilai: nilai sinar matahari},

Letakkan kode sumber fungsi tata letak ():

 Tata letak fungsi (node, pos, type) {node.s ('2d.visible', true); getWidth ()/2, pos.y -node.getheigh ()/2); : 'Hujan nilai embun:'+ (pos.y/1000) .tofixed (2), 'love': ': Nilai cinta: ***'});} lain jika (type == 'Tips2') {node .setPosition (pos.x, pos.y -node.getHeight ()/2); x // 100)+'%'});} lain jika (type == 'Tips3') {node.setPosition (pos.x -node.getWidth ()/2, pos.y -node.getheigh ()/ 2);

Akhirnya, demo kami juga memiliki efek animasi cloud seluler. . HT disediakan oleh HT fungsi animasi ht.default.startanim, ht.default.startanim mendukung dua cara: berbasis bingkai dan berbasis waktu:

Metode berbasis bingkai pengguna mengontrol efek animasi dengan menentukan jumlah frame frame bingkai animasi, dan parameter interval interval dari bingkai animasi interval;

Metode berbasis waktu hanya perlu menentukan milidetik dari siklus animasi durasi.

Untuk detailnya, lihat HT untuk web.

Di sini kami menggunakan metode berbasis waktu.

 Var cloud = datamodel.getDatabytag ('cloud'); .getPosition (). End == round1)? * v, py);}};

Akhirnya, kenakan demo kami lagi untuk referensi Anda.