Viele Shopping-Websites unterstützen jetzt 360-Grad-Panoramabilder von realen Objekten, und Sie können Beispiele in jedem beliebigen 360-Grad-Rundum anzeigen. Dies ist ein gutes Konsumerlebnis für Käufer. Es gibt viele solcher Plug-Ins im Internet, die auf jQuery basieren oder kostenlos. Ja, es gibt tatsächlich ein sehr nützliches Plug-in namens 3deye.js. Das Plug-in unterstützt Desktop- und mobile Endgeräte iOS und Android. Sein Demoprogramm: http://www.voidcanvas.com/demo/28823deye/.
Nachdem ich diese Demo selbst gespielt hatte, folgte ich ihren Ideen und implementierte ähnliche Funktionen mit HTML5 Canvas.
Lassen Sie uns also zunächst über das Prinzip seines 360-Grad-Panoramas sprechen1. Zuerst müssen Sie Fotos des tatsächlichen Objekts aufnehmen. Das Intervall besteht darin, jedes Foto um 15 Grad zu drehen, sodass 23 Fotos benötigt werden.
2. Nachdem das Foto fertig ist, versuchen Sie, das JPG-Format auszuwählen und es auf die entsprechende Größe zuzuschneiden.
3. Alle Fotos sind in JavaScript vorgeladen und die Ladegenauigkeit kann in Verbindung mit dem Fortschrittsbalken angezeigt werden.
4. Erstellen/rufen Sie das Canvas-Objekt ab, fügen Sie Mausüberwachungsereignisse hinzu und zeichnen Sie entsprechend unterschiedliche Rahmen, wenn sich die Maus nach links und rechts bewegt. Das allgemeine Prinzip ist einfach!
Implementierungscode:
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Vollständige 360-Grad-Ansicht</title> <script> var ctx = null; // globale Variable 2d context var frame = 1; / 23 var width = 0; var selected = false; var images = new Array(); var canvas = document.getElementById(fullview_canvas);// window.innerWidth = 691;//window.innerHeight; height = canvas.height; .getElementById('loadProgressBar'); for(var i=1; i<24; i++) { bar.value = i; if(i<10) { images[i] = new Image(); images[i].src = 0 + i + .jpg } else { images[i] = new Image(); .src = i + .jpg; } } ctx = canvas.getContext(2d); // Mausereignis canvas.addEventListener(mousedown, doMouseDown, false); canvas.addEventListener('mousemove', doMouseMove, false); // geladen( // images[frame].onload = function( ) { redraw(); bar.style.display = 'none'; } } function doMouseDown(event) { var x = event.pageX; event.pageY; var canvas = event.target; var loc = getPointOnCanvas(canvas, x, y); console.log(mouse down at point( x: + loc.x + , y: + loc.y + )); gestartetX = loc.x; gestartet = true; } function doMouseMove(event) { var x = event.pageX; var loc = getPointOnCanvas(canvas, x, y); if (started) { var count = Math.floor(Math.abs((startedX - loc.x)/30)); loc.x)/30); while(count > 0) { console.log(frameIndex = + frameIndex--; FrameIndex--; Frame++; <= 0) { frame = 23; } redraw(); } } function doMouseUp(event) { console.log(mouse up now); (gestartet) { doMouseMove(event); gestartet = false; } } function getPointOnCanvas(canvas, x, y) { var bbox = canvas.getBoundingClient(); return { x: x - bbox.left * ( canvas.width / bbox.width), y: y - bbox.top * (canvas.height / bbox.height) }; } function geladen() { setTimeout( update, 1000/8); } function redraw() { // var imageObj = document.createElement(img); // var imageObj = images[frame] ; ctx.clearRect(0, 0, width, height) ctx.drawImage(imageObj, 0, 0, width, height } function update() { redraw(); if (frame >= 23) frame = 1; setTimeout( update, 1000/8); 0 max=23></progress> <canvas id=fullview_canvas></canvas> <button onclick=loaded()>Auto Play</button> </body> </html>Download-Adresse der Demodatei -> fullview.rar
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.