ขณะนี้เว็บไซต์ช็อปปิ้งหลายแห่งรองรับภาพพาโนรามา 360 องศาของวัตถุจริง และคุณสามารถเลือกดูตัวอย่างได้ 360 องศา นี่เป็นประสบการณ์การบริโภคที่ดีสำหรับผู้ซื้อ มีปลั๊กอินดังกล่าวมากมายบนอินเทอร์เน็ตที่ใช้ jQuery ซึ่งบางส่วนได้รับการชำระเงิน หรือฟรี ใช่แล้ว มีปลั๊กอินที่มีประโยชน์มากชื่อ 3deye.js ปลั๊กอินรองรับเดสก์ท็อปและเทอร์มินัลมือถือ iOS และ Android โปรแกรมสาธิต: http://www.voidcanvas.com/demo/28823deye/
หลังจากเล่นการสาธิตนี้ด้วยตัวเอง ฉันก็ทำตามแนวคิดของมันและนำฟังก์ชันที่คล้ายกันไปใช้โดยใช้ HTML5 Canvas
ก่อนอื่นเรามาพูดถึงหลักการของภาพพาโนรามา 360 องศากันก่อน1. ขั้นแรก คุณต้องถ่ายภาพวัตถุจริง โดยให้หมุนแต่ละภาพ 15 องศา ดังนั้นจึงจำเป็นต้องมี 23 ภาพ
2. หลังจากที่ภาพถ่ายพร้อมแล้ว ให้ลองเลือกรูปแบบ JPG และครอบตัดให้ได้ขนาดที่เหมาะสม
3. รูปภาพทั้งหมดโหลดไว้ล่วงหน้าใน JavaScript และสามารถแสดงความแม่นยำในการโหลดร่วมกับแถบความคืบหน้าได้
4. สร้าง/รับวัตถุ Canvas เพิ่มกิจกรรมการฟังเมาส์ และวาดเฟรมต่างๆ อย่างเหมาะสมเมื่อเมาส์เลื่อนไปทางซ้ายและขวา หลักการทั่วไปก็คือ ง่ายๆ เลย!
รหัสการใช้งาน:
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>มุมมอง 360 องศาเต็มรูปแบบ</title> <script> var ctx = null; // ตัวแปรส่วนกลาง 2d บริบท var frame = 1; / 23 var ความกว้าง = 0; var ความสูง = 0; var เริ่มต้น = false; var อิมเมจ = อาร์เรย์ใหม่ (); var startX = -1; var canvas = document.getElementById(fullview_canvas); canvas.width = 440;// window.innerWidth; canvas.height = 691;//window.innerHeight; ความสูง = canvas.height; .getElementById('loadProgressBar'); for(var i=1; i<24; i++) { bar.value = i; if(i<10) { รูปภาพ[i] = รูปภาพใหม่(); .src = i + .jpg; } } ctx = canvas.getContext(2d); // เหตุการณ์เมาส์ canvas.addEventListener(mousedown, doMouseDown, false); canvas.addEventListener('mousemove', doMouseMove, false); canvas.addEventListener('mouseup', doMouseUp, false); // โหลด (); ) { วาดใหม่(); bar.style.display = 'none'; } } ฟังก์ชั่น doMouseDown(event) { var x = event.pageX; event.pageY; var canvas = event.target; var loc = getPointOnCanvas (canvas, x, y); console.log (เลื่อนเมาส์ไปที่จุด ( x: + loc.x + , y: + loc.y + )); startX = loc.x; start = true; } ฟังก์ชัน doMouseMove (เหตุการณ์) { var x = event.pageX; var y = event.pageY; var loc = getPointOnCanvas(canvas, x, y); if (เริ่มต้น) { var count = Math.floor(Math.abs((startedX - loc.x)/30)); loc.x)/30); ในขณะที่ (นับ > 0) { console.log(frameIndex = + frameIndex); นับ--; frameIndex--; frame++; } else if(frameIndex < 0) { frameIndex++; } if(frameIndex == 0) { แตก; <= 0) { frame = 23; } วาดใหม่ (); } } } ฟังก์ชั่น doMouseUp(event) { console.log(mouse up now); (เริ่มต้น) { doMouseMove(event); startX = -1; beginning = false; } } ฟังก์ชัน getPointOnCanvas(canvas, x, y) { var bbox = canvas.getBoundingClientRect(); canvas.width / bbox.width), y: y - bbox.top * (canvas.height / bbox.height) }; } ฟังก์ชันโหลดแล้ว () { setTimeout (อัปเดต 1000/8); } ฟังก์ชันวาดใหม่ () { // var imageObj = document.createElement (img); // var imageObj = รูปภาพใหม่ (); ; ctx.clearRect(0, 0, ความกว้าง, ความสูง) ctx.drawImage(imageObj, 0, 0, ความกว้าง, ความสูง); อัปเดตฟังก์ชัน () { วาดใหม่ (); frame++; if (frame >= 23) frame = 1; setTimeout( update, 1000/8); } </script> </head> <body> <progress id=loadProgressBar value= 0 สูงสุด=23></ความคืบหน้า> <canvas id=fullview_canvas></canvas> <button onclick=loaded()>เล่นอัตโนมัติ</button> </body> </html>ที่อยู่ดาวน์โหลดไฟล์สาธิต -> fullview.rar
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network