Banyak situs belanja sekarang mendukung gambar panorama 360 dari objek nyata, dan Anda dapat memilih untuk melihat sampel dalam 360 derajat. Ini adalah pengalaman konsumsi yang baik bagi pembeli. Ada banyak plugin seperti itu di Internet berdasarkan jQuery, ada pula yang berbayar atau gratis. Ya, sebenarnya ada plugin yang sangat berguna bernama 3deye.js. Plug-in ini mendukung terminal desktop dan seluler iOS dan Android. Program demonya: http://www.voidcanvas.com/demo/28823deye/
Setelah memainkan demo ini sendiri, saya mengikuti idenya dan mengimplementasikan fungsi serupa menggunakan HTML5 Canvas.
Jadi pertama-tama mari kita bahas tentang prinsip panorama 360 derajatnya1. Pertama, Anda perlu mengambil foto objek sebenarnya. Intervalnya adalah memutar setiap foto sebesar 15 derajat, sehingga diperlukan 23 foto.
2. Setelah foto siap, coba pilih format JPG dan crop sesuai ukuran.
3. Semua foto dimuat sebelumnya dalam JavaScript, dan keakuratan pemuatan dapat ditampilkan bersama dengan bilah kemajuan.
4. Buat/dapatkan objek Canvas, tambahkan event mendengarkan mouse, dan gambar frame berbeda dengan tepat saat mouse bergerak ke kiri dan ke kanan. Prinsip umumnya begini, sederhana!
Kode implementasi:
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Tampilan 360 derajat penuh</title> <script> var ctx = null; // variabel global konteks 2d var frame = 1; / 23 var lebar = 0; var tinggi = 0; var mulai = salah; var gambar = new Array(); var startX = -1; var kanvas = dokumen.getElementById(fullview_canvas); kanvas.lebar = 440;// window.innerWidth; kanvas.tinggi = 691;//window.innerHeight; lebar = kanvas.lebar; .getElementById('loadProgressBar'); for(var i=1; i<24; i++) { bar.nilai = i; if(i<10) { gambar[i] = Gambar baru(); gambar[i].src = 0 + i + .jpg; } else { gambar[i] = gambar baru(); .src = i + .jpg; } } ctx = kanvas.getContext(2d); // acara mouse canvas.addEventListener(mousedown, doMouseDown, false); canvas.addEventListener('mousemove', doMouseMove, false); canvas.addEventListener('mouseup', doMouseUp, false); // frame = 1 gambar[frame].onload = fungsi( ) { menggambar ulang(); bar.style.display = 'tidak ada'; } } fungsi doMouseDown(acara) { var x = acara.halamanX; acara.halamanY; var kanvas = acara.target; var loc = getPointOnCanvas(kanvas, x, y); console.log(arahkan mouse ke titik( x: + loc.x + , y: + loc.y + )); startX = loc.x; mulai = benar; } fungsi doMouseMove(acara) { var x = acara.halamanX; var y = acara.halamanY; var loc = getPointOnCanvas(kanvas, x, y); if (dimulai) { var count = Math.floor(Math.abs((startedX - loc.x)/30)); loc.x)/30); while(hitungan > 0) { konsol.log(frameIndex = + frameIndex); if(frameIndex > 0) { frameIndex--; frame++; } else if(frameIndex < 0) { frameIndex++; } else if(frameIndex == 0) { break; <= 0) { frame = 23; } redraw(); } } } function doMouseUp(event) { console.log(mouse sekarang); (dimulai) { doMouseMove(acara); mulaiX = -1; dimulai = salah; } } fungsi getPointOnCanvas(kanvas, x, y) { var bbox = kanvas.getBoundingClientRect(); canvas.width / bbox.width), y: y - bbox.top * (canvas.height / bbox.height) }; } fungsi dimuat() { setTimeout( update, 1000/8); fungsi redraw() { // var imageObj = document.createElement(img); // var imageObj = Gambar baru(); ; ctx.clearRect(0, 0, lebar, tinggi) ctx.drawImage(imageObj, 0, 0, lebar, tinggi } fungsi pembaruan() { menggambar ulang(); bingkai++; jika (bingkai >= 23) bingkai = 1; setTimeout( pembaruan, 1000/8); 0 max=23></progress> <canvas id=fullview_canvas></canvas> <button onclick=loaded()>Putar Otomatis</button> </body> </html>Alamat pengunduhan file demo-> fullview.rar
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.