html5全景vr html 360全景

木道笔记

于 2024-03-07 18:53:05 发布

阅读量554

点赞数 4

文章标签： html html5 vr

本文链接：https://blog.csdn.net/jabccc/article/details/136542812

版权

这里是一款旅游相关的安卓应用，其中虚拟旅游的功能采用html5的360度全景图技术实现，使用户能够身临其境的感受旅游景点的风光。

此处引入了ddpanorama插件，它的原理是在canvas上绘制全景图，手指滑动时重绘canvas来实现。它包括通过手指滑动循环查看全景图，点击热点可进入另一全景图，缩放，离线访问等功能。

热点的计算和绘制：

可以在ddpanorama.js中看到在redraw这个方法也就是canvas重绘的时候定义了一个事件：

$(this.img).trigger(
                                jQuery.Event(ddpanoramas.event_prefix+"redraw", {
                                    scrollX : scrollX,
                                    canvas : this.canvas,
                                    speed : $(this.canvas).prop("speedX") / ddpanoramas.max_speed,
                                    loaded : loaded
                                }));

View Code

并且传出了一些参数，其中scrollX这个参数是针对原图比例的手指滑动时图片的偏移量，它在计算热点位置时起到至关重要的作用。因此在绑定ddredraw这个事件，在该事件触发时候进行热点的计算和绘制及点击事件的绑定。这里为了方便，我们还需要一个参数，就是针对canvas比例的手指滑动时图片的偏移量。这个在ddpanorama.js中setScrollX这个方法中的scrollX取得，我们可以定义一个全局变量canvasScrollX，将这个值存储起来，随时使用。

至于计算过程，需要慢慢调试，这里上个代码：