Penjelasan detail contoh monitoring pusat perbelanjaan berdasarkan HTML5 Canvas

Dengan pesatnya perkembangan ekonomi dalam negeri, tuntutan masyarakat terhadap keselamatan semakin tinggi. Untuk mencegah terjadinya situasi berikut, Anda perlu mempertimbangkan untuk memasang sistem keamanan: Memberikan bukti dan petunjuk: Di banyak pabrik, bank, pencurian atau kecelakaan, lembaga terkait dapat mendeteksi kasus berdasarkan informasi video, yang merupakan hal yang sangat penting. petunjuk. Ada juga beberapa perselisihan atau kecelakaan, dan tanggung jawab personel terkait dapat dengan mudah diketahui melalui rekaman video. Tingginya biaya pertahanan udara sipil: Saat ini, ketika banyak tempat memikirkan keamanan, mereka berpikir untuk menyewa penjaga keamanan. Setiap penjaga keamanan dikenakan biaya 800 per bulan dan bekerja tiga shift sehari. Satu shift personel membutuhkan hampir 40,000 yuan per tahun biaya peralatan keamanan elektronik tidak murah, dan kebutuhan untuk mengganti peralatan keamanan elektronik dalam beberapa tahun berkurang. Oleh karena itu, biaya pertahanan udara sipil relatif tinggi. Bantuan pertahanan udara sipil: Dalam banyak kasus, sangat sulit untuk bergantung sepenuhnya pada manusia untuk menjamin keselamatan. Banyak hal yang memerlukan bantuan peralatan keamanan elektronik (seperti monitor dan alarm) agar lebih sempurna. Ini harus digunakan dalam acara-acara khusus: dalam beberapa kondisi yang keras (panas tinggi, dingin, tertutup, dll.), sulit bagi orang untuk mengamati dengan jelas dengan mata telanjang, atau lingkungan tidak cocok untuk ditinggali orang, jadi peralatan keamanan elektronik harus digunakan. Penyembunyian: Dengan menggunakan peralatan keamanan elektronik, masyarakat awam tidak akan merasa diawasi terus-menerus, dan disembunyikan. Jaminan keamanan 24 jam: Untuk mencapai persyaratan keamanan 24 jam tanpa gangguan, peralatan elektronik harus diperhatikan. Pemantauan jarak jauh: Dengan perkembangan teknologi komputer dan teknologi jaringan, pemantauan jarak jauh dan melihat gambar dari berbagai tempat menjadi mungkin. Sekarang banyak pemimpin perusahaan dapat melihat situasi cabang mana pun di seluruh dunia secara real time melalui INTERNET, yang kondusif untuk memahami situasi pada waktu yang tepat. Pelestarian gambar: Perkembangan teknologi video digital memungkinkan gambar disimpan melalui perangkat penyimpanan digital komputer, sehingga dapat disimpan dalam jangka waktu yang lebih lama dan dengan gambar yang lebih jelas. Manajemen produksi: Manajer dapat memahami situasi di garis depan produksi secara tepat waktu dan intuitif, yang memfasilitasi komando dan manajemen.

Mengingat besarnya permintaan sistem pemantauan di Tiongkok, hari ini kami akan memperkenalkan kepada Anda cara membuat bagian front-end dari sistem pemantauan.

http://www.hightopo.com/demo/metro/demo2.html Masuk ke halaman dan klik kanan elemen inspeksi untuk melihat contoh kode sumber.

Efek dinamis dari contoh ini adalah sebagai berikut:

Mari kita buat adegan dasar terlebih dahulu. Di HT, cara yang sangat umum untuk mengimpor adegan eksternal ke interior adalah dengan mengurai file JSON. Salah satu manfaat menggunakan file JSON untuk membuat adegan adalah adegan tersebut dapat didaur ulang menggunakan JSON. Selanjutnya, HT akan menggunakan fungsi ht.Default.xhrLoad untuk memuat adegan JSON, dan menggunakan DataModel.deserialize(json) yang dienkapsulasi HT untuk membatalkan serialisasinya, dan menambahkan objek yang dideserialisasi ke DataModel:

 ht.Default.xhrLoad('demo2.json', function(text) { var json = ht.Default.parse(text); if(json.title) document.title = json.title;//Ubah judul file JSON ditugaskan ke judul variabel global dataModel.deserialize(json);//Deserialize graphView.fitContent(true);//Memperbesar topologi terjemahan untuk menampilkan semua elemen grafis, yaitu membiarkan semua elemen ditampilkan});

Di HT, ketika objek Tipe data dibuat, maka secara otomatis akan diberi atribut id secara internal, yang dapat diperoleh dan diatur melalui data.getId() dan data.setId(id). setelah objek Data ditambahkan ke DataModel. Anda dapat menggunakan dataModel.getDataById(id) dengan cepat menemukan objek Data. Umumnya disarankan agar atribut id secara otomatis ditetapkan oleh HT. Pengidentifikasi unik dari signifikansi bisnis pengguna dapat disimpan dalam atribut tag. Fungsi Data#setTag(tag) memungkinkan perubahan dinamis pada nilai tag objek dapat ditemukan melalui DataModel#getDataByTag(tag). , dan mendukung penghapusan objek Data melalui DataModel#removeDataByTag(tag). Di sini kita mengatur atribut tag dari objek Data di JSON, dan memperoleh objek Data melalui fungsi dataModel.getDataByTag(tag) dalam kode:

 var fan1 = dataModel.getDataByTag('fan1');var fan2 = dataModel.getDataByTag('fan2');var camera1 = dataModel.getDataByTag('camera1');var camera2 = dataModel.getDataByTag('camera2');var camera3 = dataModel.getDataByTag('camera3');var redAlarm = dataModel.getDataByTag('redAlarm');var yellowAlarm = dataModel.getDataByTag('YellowAlarm');

Saya membuat elemen yang sesuai dengan setiap label pada gambar di bawah ini:

Kemudian kita mengatur objek yang perlu diputar dan di-flash. HT merangkum fungsi setRotation(rotation) untuk rotasi. Dengan mendapatkan sudut rotasi objek saat ini, kita menambahkan radian tertentu berdasarkan sudut ini dan memanggilnya secara teratur melalui setInterval, jadi Anda dapat memutar busur yang sama dalam interval waktu tertentu:

 setInterval(fungsi(){ var time = Tanggal baru().getTime(); var deltaTime = waktu - waktu terakhir; var deltaRotation = deltaTime * Math.PI / 180 * 0,1; lastTime = waktu; fan1.setRotation(fan1.getRotation( ) + deltaRotation*3); fan2.setRotation(fan2.getRotation() + deltaRotation*3); kamera1.setRotation(camera1.getRotation() + deltaRotation/3); kamera2.setRotation(camera2.getRotation() + deltaRotation/3); if (waktu - stairTime > 500) { stairIndex--; (stairIndex < 0) { stairIndex = 8; } stairTime = time; } for (var i = 0; i < 8; i++) {//Karena ada beberapa elemen serupa, nama tag yang kami tetapkan serupa, tetapi keduanya serupa diganti dengan 1, 2, 3, jadi kita menggunakan loop for untuk mendapatkan var color = stairIndex === i ? '#F6A623' : '#CFCFCF'; dataModel.getDataByTag('stair_1_' + i).s('shape.border.color', color); dataModel.getDataByTag('stair_2_' + i).s('shape.border.color', color } jika (Tanggal baru().getSeconds() % 2 === 1) { yellowAlarm.s('shape.background', null); redAlarm.s('bentuk.latar belakang', null); } else { yellowAlarm.s('bentuk.latar belakang', 'kuning'); redAlarm.s('bentuk.latar belakang', 'merah' }}, 5 );

HT juga merangkum fungsi setStyle untuk mengatur gaya, yang dapat disingkat s. Untuk gaya tertentu, silakan merujuk ke manual gaya HT untuk Web:

 for (var i = 0; i < 8; i++) {//Karena ada beberapa elemen serupa, nama tag yang kita tetapkan serupa, tetapi kemudian diubah menjadi 1, 2, dan 3, jadi kita menggunakan perulangan for untuk mendapatkan var color = stairIndex === i ? '#F6A623' : '#CFCFCF'; dataModel.getDataByTag('stair_1_' + i).s('shape.border.color', color); dataModel.getDataByTag('stair_2_' + i).s('shape.border.color', color);}

Kami juga melakukan kontrol waktu pada kedipan lampu peringatan. Jika jumlah detiknya genap, warna latar belakang lampu disetel ke tidak berwarna. Sebaliknya, jika alarmnya kuning, maka alarmnya disetel ke kuning , disetel ke merah:

 if (Tanggal baru().getSeconds() % 2 === 1) { yellowAlarm.s('shape.background', null); redAlarm.s('shape.background', null);}else { yellowAlarm.s ('bentuk.latar belakang', 'kuning'); redAlarm.s('bentuk.latar belakang', 'merah');}

Seluruh contoh diselesaikan dengan sangat mudah, sangat mudah. . .

Di atas adalah penjelasan rinci tentang contoh pemantauan pusat perbelanjaan berdasarkan HTML5 Canvas yang diperkenalkan oleh editor. Saya harap ini dapat membantu Anda jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu . Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!