Heim >Web-Frontend >H5-Tutorial >HTML5 Canvas-Implementierung der 360-Grad-Panorama-Methode

HTML5 Canvas-Implementierung der 360-Grad-Panorama-Methode

小云云Original: 2018-01-31 10:52:446369Durchsuche

In diesem Artikel wird hauptsächlich der Beispielcode für die Implementierung eines 360-Grad-Panoramas in HTML5 Canvas vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Viele Shopping-Websites unterstützen jetzt 360-Grad-Panoramabilder von realen Objekten, und Sie können Muster in 360-Grad-Ansicht anzeigen. Dies ist ein gutes Verbrauchererlebnis. Es gibt viele solcher Plug-Ins im Internet jQuery. Es gibt kostenpflichtige und kostenlose. Tatsächlich ist ein Plug-in namens 3deye.js sehr nützlich. 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 habe, sind ähnliche Funktionen vorhanden auch mit HTML5 Canvas umgesetzt.

Lassen Sie uns zunächst über das Prinzip des 360-Grad-Panoramas sprechen.

Zuerst müssen Sie Bilder des tatsächlichen Objekts aufnehmen Jedes Foto ist um 15 Grad geneigt, es werden also 23 Fotos aufgenommen.
2. Nachdem das Foto fertig ist, versuchen Sie, das JPG-Format auszuwählen und es auf die entsprechende Größe zuzuschneiden.
3. Laden Sie alle Fotos vorab in JavaScript, um die Ladegenauigkeit in Verbindung mit dem Fortschrittsbalken anzuzeigen.
4. Erstellen Sie das Canvas-Objekt, fügen Sie Maus-Listening-Ereignisse hinzu und zeichnen Sie entsprechend verschiedene Frames links und rechts. Das allgemeine Prinzip ist einfach!

Implementierungscode:

<!DOCTYPE html>  
<html>  
<head>  
  <meta charset=utf-8">  
  <title>Full 360 degree View</title>  
  <script>  
        var ctx = null; // global variable 2d context  
        var frame = 1; // 23  
        var width = 0;  
        var height = 0;  
        var started = false;  
        var images = new Array();  
        var startedX = -1;  
      window.onload = function() {  
        var canvas = document.getElementById("fullview_canvas");  
        canvas.width = 440;// window.innerWidth;  
        canvas.height = 691;//window.innerHeight;  
        width = canvas.width;  
        height = canvas.height;  
        var bar = document.getElementById(&#39;loadProgressBar&#39;);  
        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();  
                images[i].src = i + ".jpg";  
            }  
        }  
        ctx = canvas.getContext("2d");  
          
        // mouse event  
        canvas.addEventListener("mousedown", doMouseDown, false);  
        canvas.addEventListener(&#39;mousemove&#39;, doMouseMove, false);  
        canvas.addEventListener(&#39;mouseup&#39;,   doMouseUp, false);  
        // loaded();  
          
        // frame = 1  
        frame = 1;  
        images[frame].onload = function() {  
            redraw();  
            bar.style.display = &#39;none&#39;;  
        }  
    }  
    function doMouseDown(event) {  
        var x = event.pageX;  
        var y = event.pageY;  
        var canvas = event.target;  
        var loc = getPointOnCanvas(canvas, x, y);  
        console.log("mouse down at point( x:" + loc.x + ", y:" + loc.y + ")");  
        startedX = loc.x;  
        started = true;  
    }  
      
    function doMouseMove(event) {  
        var x = event.pageX;  
        var y = event.pageY;  
        var canvas = event.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(count > 0)  
            {                 
                console.log("frameIndex = " + frameIndex);  
                count--;      
                if(frameIndex > 0)  
                {  
                    frameIndex--;  
                    frame++;  
                } else if(frameIndex < 0)  
                {  
                    frameIndex++;  
                    frame--;  
                }  
                else if(frameIndex == 0)  
                {  
                    break;  
                }  
                                  
                if(frame >= 24)  
                {  
                    frame = 1;  
                }  
                if(frame <= 0)  
                {  
                    frame = 23;  
                }  
                redraw();  
            }  
        }  
    }  
      
    function doMouseUp(event) {  
        console.log("mouse up now");  
        if (started) {  
            doMouseMove(event);  
            startedX = -1;  
            started = 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 loaded() {  
        setTimeout( update, 1000/8);  
    }  
    function redraw()  
    {  
        // var imageObj = document.createElement("img");  
        // var imageObj = new Image();  
        var imageObj = images[frame];  
        ctx.clearRect(0, 0, width, height)  
        ctx.drawImage(imageObj, 0, 0, width, height);  
    }  
    function 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()">Auto Play</button>  
</body>  
</html>

Demo-Datei-Download-Adresse-> fullview_jb51.rar

Verwandte Empfehlungen:

So verwenden Sie H5 Canvas zum Implementieren eines dynamischen 3D-Diagramms

HTML2-Canvas zum Implementieren von Browser-Screenshots

JS+ Dynamic mechanischer Uhranimationseffekt, gezeichnet von Leinwand

Das obige ist der detaillierte Inhalt vonHTML5 Canvas-Implementierung der 360-Grad-Panorama-Methode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So lösen Sie das Sprungproblem von „font-weight:blod“ mit CSSNächster Artikel：So lösen Sie das Sprungproblem von „font-weight:blod“ mit CSS

In Verbindung stehende Artikel

Mehr sehen