多くのショッピング Web サイトは現在、実際のオブジェクトの 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 width = 0; var height = 0; var 開始 = new Array(); var 開始 X = -1; var Canvas = document.getElementById(fullview_canvas); Canvas.width = 440;// window.innerWidth = 691; // window.innerHeight = Canvas.height; .getElementById('loadProgressBar'); for(var i=1; i<24; i++) { bar.value = i; if(i<10) { 画像 [i] = 新しい画像 [i].src = 0 + i + .jpg } else { 画像 [i] = 新しい画像 [i]; .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' } } 関数 doMouseDown(event) { var x =event.pageX;イベント.ページY; var Canvas = イベント.ターゲット; var loc = getPointOnCanvas(canvas, x, y); console.log(x: + loc.x + , y: + loc.y + ); startX = loc.x; 開始 = true; } 関数 doMouseMove(event) { var x = イベント.pageX; var Canvas = イベント.target; var loc = getPointOnCanvas(canvas, x, y); if (started) { var count = Math.floor(Math.abs((startedX - loc.x)/30)) var FrameIndex = Math.floor((startedX -) loc.x)/30); while(カウント > 0) { console.log(frameIndex = + フレームインデックス);フレームインデックス--; フレーム++; } else if(フレームインデックス < 0) { フレームインデックス ++; } if(フレーム >= 24) { フレーム = 1; <= 0) { フレーム = 23; } redraw(); } } } function doMouseUp(event) { console.log(マウスアップ中); (開始) { doMouseMove(event); 開始 = -1; } } 関数 getPointOnCanvas(canvas, x, y) { var bbox = Canvas.getBoundingClientRect(); Canvas.width / bbox.width), y: y - bbox.top * (canvas.height / bbox.height) }; } function added() { setTimeout( update, 1000/8); } function redraw() { // var imageObj = document.createElement(img); // var imageObj = new Image(); ; ctx.clearRect(0, 0, 幅, 高さ) ctx.drawImage(imageObj, 0, 0, 幅, 高さ);関数 update() { redraw(); if (フレーム >= 23) フレーム = 1; </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 をご支援いただければ幸いです。