Многие торговые сайты теперь поддерживают панорамные изображения реальных объектов на 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 context varframe = 1; / 23 вар ширина = 0; вар высота = 0; вар изображения = новый Array (); вар начал X = -1; var Canvas = document.getElementById(fullview_canvas); // window.innerWidth; Canvas.height = 691; //window.innerHeight; ширина = холст.ширина; высота = холст.высота; .getElementById('loadProgressBar'); for(var i=1; i<24; i++) { bar.value = я; если (я <10) {изображения [я] = новое изображение (); изображения [я]. src = 0 + я + .jpg } еще { изображения [я] = новое изображение (я); .src = i + .jpg; } } ctx = Canvas.getContext(2d); // событие мыши Canvas.addEventListener(mousedown, doMouseDown, false); Canvas.addEventListener('mousemove', doMouseMove, false); Canvas.addEventListener('mouseup', doMouseUp, false); // фрейм = 1 фрейм = 1; ) { 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(мышь вниз в точке ( x: + loc.x + , y: + loc.y + )); начатX = loc.x; начат = правда; } функция doMouseMove (событие) {вар х = event.pageX; вар y = event.pageY; 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); if(frameIndex > 0) { FrameIndex--; Frame++; } else if(frameIndex < 0) {frameIndex;frame--; } else if(frameIndex == 0) {break; } if(frame >= 24) {frame = 1; <= 0) {frame = 23; } redraw(); } } } function doMouseUp(event) { console.log(наведите курсор мыши вверх сейчас); (начато) { doMouseMove (событие); начато = false } } функция getPointOnCanvas (canvas, x, y) { var bbox = Canvas.getBoundingClientRect(); return { x: x - bbox.left * ( холст.ширина/bbox.ширина), y:y - bbox.top * (canvas.height/bbox.height) }; } function loading() { setTimeout( update, 1000/8); function redraw() { // var imageObj = document.createElement(img); // var imageObj = new Image(); var imageObj = images[frame] ctx.clearRect(0, 0, ширина, высота) ctx.drawImage(imageObj, 0, 0, ширина, высота }); функция update() { redraw(); Frame++; if (frame >= 23) Frame = 1; setTimeout(update, 1000/8 } </script> </head> <body> <progress id=loadProgressBar value=); 0 max=23></progress> <canvas id=fullview_canvas></canvas> <button onclick=loaded()>Автовоспроизведение</button> </body> </html>Адрес загрузки демо-файла->fullview.rar
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.