Maison > interface Web > Tutoriel H5 > Implémentation HTML5 Canvas de la méthode de panorama à 360 degrés

Implémentation HTML5 Canvas de la méthode de panorama à 360 degrés

小云云
Libérer: 2018-01-31 10:52:44
original
6362 Les gens l'ont consulté

Cet article présente principalement l'exemple de code pour implémenter un panorama à 360 degrés dans HTML5 Canvas. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

De nombreux sites Web d'achat prennent désormais en charge des images panoramiques à 360° d'objets réels, et vous pouvez choisir de visualiser des échantillons à 360 degrés. Il s'agit d'une bonne expérience de consommation pour les acheteurs. Il existe de nombreux plug-ins de ce type sur Internet. jQuery. Il en existe des payants et des gratuits. En fait, un plug-in appelé 3deye.js est très utile. Le plug-in prend en charge les terminaux de bureau et mobiles iOS et Android. Son programme de démonstration : http://www.voidcanvas.com/demo/28823deye/

Après avoir joué cette démo moi-même, en suivant ses idées, des fonctions similaires sont disponibles. également implémenté à l'aide de HTML5 Canvas.

Parlons donc d'abord du principe de son panorama à 360 degrés

1. Tout d'abord, vous devez prendre des photos de l'objet réel. L'intervalle est de faire pivoter. chaque photo à 15 degrés, il faut donc 23 photos.
2. Une fois la photo prête, essayez de choisir le format JPG et recadrez-la à la taille appropriée.
3. Préchargez toutes les photos en JavaScript, qui peuvent afficher la précision du chargement en conjonction avec la barre de progression
4. Créez/obtenez l'objet Canvas, ajoutez des événements d'écoute de la souris et dessinez différents cadres de manière appropriée lorsque la souris bouge. gauche et droite. Le principe général est le suivant, simple !

Code d'implémentation :


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

<!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>

Copier après la connexion

Adresse de téléchargement du fichier de démonstration-> fullview_jb51.rar

Recommandations associées :

Comment utiliser H5 Canvas pour implémenter un graphique dynamique 3D

Canevas HTML2 pour implémenter des captures d'écran du navigateur

JS+ Dynamic effet d'animation de montre mécanique dessiné par toile

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal