현재 많은 쇼핑 웹사이트는 실제 사물의 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 프레임 = 1; / 23 var 너비 = 0; var 시작 = false; var selectedX = -1; var canvas = document.getElementById(fullview_canvas); canvas.width = 440;//window.innerWidth; canvas.height = 691;//window.innerHeight; width = canvas.width; var bar = document .getElementById('loadProgressBar'); for(var i=1; i<24; i++) { bar.value = i; if(i<10) { 이미지[i] = 새 이미지(); 이미지[i].src = 0 + i + .jpg } else { 이미지[i] = 새 이미지(); .src = i + .jpg; } } ctx = canvas.getContext(2d); // 마우스 이벤트 canvas.addEventListener(mousedown, doMouseDown, false); canvas.addEventListener('mousemove', doMouseMove, false); canvas.addEventListener('mouseup', doMouseUp, false) // 로드됨(); // 프레임 = 1 이미지[프레임].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(지점( x: + loc.x + , y: + loc.y + )); startX = loc.x; 시작됨 = true; } function doMouse(event) { var x = event.pageX; var canvas = event.target; var loc = getPointOnCanvas(canvas, x, y); if (시작됨) { var count = Math.floor(Math.abs((startedX - loc.x)/30)); loc.x)/30); while(count > 0) { console.log(frameIndex = + 프레임인덱스)--; FrameIndex--; 프레임++; } else if(frameIndex++; 프레임--; } else if(frameIndex == 0) { break; } if(frame >= 24) if(프레임 <= 0) { 프레임 = 23; } redraw(); } } } function doMouseUp(event) { console.log(지금 마우스를 올리세요); (시작됨) { doMouseMove(이벤트); 시작됨X = -1; 시작됨 = false; } } function getPointOnCanvas(canvas, x, y) { var bbox = canvas.getBoundingClientRect(); return { x: x - bbox.left * canvas.width / bbox.width), y: y - bbox.top * (canvas.height / bbox.height) }; } function load() { setTimeout( 업데이트, 1000/8); } function redraw() { // var imageObj = document.createElement(img); // var imageObj = new Image(); ; ctx.clearRect(0, 0, 너비, 높이) ctx.drawImage(imageObj, 0, 0, 너비, 높이) } function update() { redraw(); 프레임++; if (frame >= 23) 프레임 = 1; setTimeout( 업데이트, 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 Network를 지지해 주시길 바랍니다.