Muchos sitios web de compras ahora admiten imágenes panorámicas de 360 grados de objetos reales y puede optar por ver muestras en 360 grados. Esta es una buena experiencia de consumo para los compradores. Hay muchos complementos de este tipo basados en jQuery en Internet, algunos de los cuales son pagos. o gratis Sí, en realidad existe un complemento muy útil llamado 3deye.js. El complemento es compatible con terminales móviles y de escritorio iOS y Android. Su programa de demostración: http://www.voidcanvas.com/demo/28823deye/.
Después de jugar esta demostración, seguí sus ideas e implementé funciones similares usando HTML5 Canvas.
Primero hablemos del principio de su panorama de 360 grados.1. Primero, debe tomar fotografías del objeto real. El intervalo es rotar cada foto 15 grados, por lo que se necesitan 23 fotografías.
2. Una vez que la foto esté lista, intente elegir el formato JPG y recórtela al tamaño adecuado.
3. Todas las fotos están precargadas en JavaScript y la precisión de la carga se puede mostrar junto con la barra de progreso.
4. Cree/obtenga el objeto Canvas, agregue eventos de escucha del mouse y dibuje diferentes cuadros de manera apropiada cuando el mouse se mueva hacia la izquierda y hacia la derecha. El principio general es este, ¡sencillo!
Código de implementación:
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Vista completa de 360 grados</title> <script> var ctx = null // variable global contexto 2d var frame = 1; / 23 ancho de var = 0; alto de var = 0; var iniciado = false; var imágenes = new Array(); var lienzo = document.getElementById(fullview_canvas); lienzo.width = 440;// ventana.innerWidth; lienzo.height = 691;//window.innerHeight; ancho = lienzo.ancho; var bar = documento; .getElementById('loadProgressBar'); for(var i=1; i<24; i++) { bar.valor = i; if(i<10) { imágenes[i] = nueva Imagen(); imágenes[i].src = 0 + i + .jpg } else { imágenes[i] = nueva Imagen(); .src = i + .jpg; } } ctx = canvas.getContext(2d); // evento del mouse canvas.addEventListener(mousedown, doMouseDown, false); canvas.addEventListener('mousemove', doMouseMove, false); canvas.addEventListener('mouseup', doMouseUp, false); // cargado() // marco = 1 marco = 1; ) { redibujar(); bar.style.display = 'ninguno'; } } función doMouseDown(evento) { var x = evento.pageX var y = event.pageY; var canvas = event.target; var loc = getPointOnCanvas(canvas, x, y); mouse hacia abajo en el punto (x: + loc.x +, y: + loc.y +)); iniciadoX = loc.x; iniciado = verdadero; } función doMouseMove(evento) { var x = evento.páginaX var y = evento.páginaY; var loc = getPointOnCanvas(canvas, x, y); if (iniciado) { var count = Math.floor(Math.abs((startedX - loc.x)/30)); loc.x)/30); while(cuenta > 0) { console.log(frameIndex = + frameIndex--; frameIndex--; frame++; } else if(frameIndex < 0) { frameIndex++; frame--; } else if(frameIndex == 0) { romper } if(frame>= 24) { frame = 1; <= 0) { frame = 23; } redibujar(); } } } function doMouseUp(evento) { console.log(mouse arriba ahora); (iniciado) { doMouseMove(evento); iniciadoX = -1; iniciado = falso } } función getPointOnCanvas(lienzo, x, y) { var bbox = canvas.getBoundingClientRect(); canvas.width / bbox.width), y: y - bbox.top * (canvas.height / bbox.height) }; } función cargada() { setTimeout( actualización, 1000/8); } función redibujar() { // var imageObj = document.createElement(img); // var imageObj = new Image(); ctx.clearRect(0, 0, ancho, alto) ctx.drawImage(imageObj, 0, 0, ancho, alto); función actualizar() { redibujar(); marco++; si (marco >= 23) marco = 1; setTimeout(actualizar, 1000/8); 0 max=23></progress> <canvas id=fullview_canvas></canvas> <button onclick=loaded()>Reproducción automática</button> </body> </html>Dirección de descarga del archivo de demostración-> fullview.rar
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.