这里是一款旅游相关的安卓应用,其中虚拟旅游的功能采用html5的360度全景图技术实现,使用户能够身临其境的感受旅游景点的风光。
此处引入了ddpanorama插件,它的原理是在canvas上绘制全景图,手指滑动时重绘canvas来实现。它包括通过手指滑动循环查看全景图,点击热点可进入另一全景图,缩放,离线访问等功能。
热点的计算和绘制:
可以在ddpanorama.js中看到在redraw这个方法也就是canvas重绘的时候定义了一个事件:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
$(this.img).trigger( jQuery.Event(ddpanoramas.event_prefix+"redraw", { scrollX : scrollX, canvas : this.canvas, speed : $(this.canvas).prop("speedX") / ddpanoramas.max_speed, loaded : loaded }));
并且传出了一些参数,其中scrollX这个参数是针对原图比例的手指滑动时图片的偏移量,它在计算热点位置时起到至关重要的作用。因此在绑定ddredraw这个事件,在该事件触发时候进行热点的计算和绘制及点击事件的绑定。这里为了方便,我们还需要一个参数,就是针对canvas比例的手指滑动时图片的偏移量。这个在ddpanorama.js中setScrollX这个方法中的scrollX取得,我们可以定义一个全局变量canvasScrollX,将这个值存储起来,随时使用。
至于计算过程,需要慢慢调试,这里上个代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
imgEle.ddpanorama({ width: bodyWidth, height: bodyHeight }).bind("ddredraw", function (event) { var canvas = event.canvas; var ctx = canvas.getContext("2d"); var imgNatualWidth = imgEle.get()[0].naturalWidth; var imgNatualHeight = imgEle.get()[0].naturalHeight; var fontSize = imgNatualHeight / 40; if (hotPointInfo != null) { for (var i = 0; i < hotPointInfo.length; i++) { if (hotPointInfo[i] != null && hotPointInfo[i].PanImgHotType != null && hotPointInfo[i].PanImgInfoID != null && hotPointInfo[i].PanImgHotType == 0 && hotPointInfo[i].PanImgInfoID == GetHotPanImgInfoID) { var hotPanImgInfoId = hotPointInfo[i].HotPanImgInfoID; var scrollX = event.scrollX + hotPointInfo[i].HotPosX; var canvasNatualWidth = bodyWidth * imgNatualHeight / bodyHeight; //原始图可见区域的宽 if (event.scrollX > 0) { if (hotPointInfo[i].HotPosX > canvasNatualWidth) { scrollX = event.scrollX - imgNatualWidth + hotPointInfo[i].HotPosX; } } if (event.scrollX < -hotPointInfo[i].HotPosX - hotPointInfo[i].PanImgHotName.length * fontSize) { scrollX = event.scrollX + hotPointInfo[i].HotPosX + imgNatualWidth; } ctx.beginPath(); ctx.globalAlpha = 0.6; ctx.fillStyle = "black"; showRoundRect(ctx, scrollX - fontSize, hotPointInfo[i].HotPosY - fontSize * 4 / 3, (hotPointInfo[i].PanImgHotName.length + 2) * fontSize, fontSize * 2, fontSize / 2); ctx.globalAlpha = 1; showText(ctx, fontSize + "px 微软雅黑, Arial", "#fff", hotPointInfo[i].PanImgHotName, scrollX, hotPointInfo[i].HotPosY); ctx.closePath(); } } } $(canvas).unbind("click").click(function (e) { var mouseCoord = getMouseCoord(e); var isOnHotPoint = false; if (hotPointInfo != null) { for (var i = 0; i < hotPointInfo.length; i++) { if (hotPointInfo[i].PanImgHotType == 0) { var canvasX = hotPointInfo[i].HotPosX * bodyHeight / imgNatualHeight; var canvasY = hotPointInfo[i].HotPosY * bodyHeight / imgNatualHeight; var totalWidth = imgNatualWidth * bodyHeight / imgNatualHeight; var canvasFontSize = fontSize * bodyHeight / imgNatualHeight; if (canvasScrollX < bodyWidth - canvasX && canvasScrollX > -canvasX - hotPointInfo[i].PanImgHotName.length * canvasFontSize - 20) { var isOntheArea = detectMousePos(mouseCoord, canvasScrollX + canvasX - canvasFontSize * 2, canvasY - canvasFontSize * 2, (hotPointInfo[i].PanImgHotName.length + 4) * canvasFontSize, canvasFontSize * 4); if (isOntheArea == true) { isOnHotPoint = true; } canvasClick(isOntheArea, hotPointInfo[i].HotPanImgInfoID); } else if (canvasScrollX > -canvasX || canvasScrollX < bodyWidth - canvasX - totalWidth) { var isOntheArea; if (canvasX + canvasScrollX - totalWidth - canvasFontSize * 2 < 0) { isOntheArea = detectMousePos(mouseCoord, canvasX + canvasScrollX + totalWidth - canvasFontSize * 2, canvasY - canvasFontSize * 2, (hotPointInfo[i].PanImgHotName.length + 4) * canvasFontSize, canvasFontSize * 4); } else { isOntheArea = detectMousePos(mouseCoord, canvasX + canvasScrollX - totalWidth - canvasFontSize * 2, canvasY - canvasFontSize * 2, (hotPointInfo[i].PanImgHotName.length + 4) * canvasFontSize, canvasFontSize * 4); } if (isOntheArea == true) { isOnHotPoint = true; } canvasClick(isOntheArea, hotPointInfo[i].HotPanImgInfoID); } } } } //去除隐藏缩略图 if (!isOnHotPoint) { // showOrHide(); } }); try { isOnLine = Virtual.checkConnectNet(); } catch (e) { hideloding(); } if (isOnLine == 1) { localStorage.setItem("virtualTravelInfoObj" + sceAreaId, JSON.stringify(virtualTravelInfoObj)); } hideloding(); });
这里如何获取点击事件呢?
将整个canvas元素绑定click事件,然后通过click事件触发的坐标来计算,需要引入以下两个方法:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
//获取鼠标事件的坐标 function getMouseCoord(e) { var mx = 0, my = 0; if (e.layerX || e.layerX == 0) { mx = e.layerX; my = e.layerY; } else if (e.offsetX || e.offsetX == 0) { mx = e.offsetX; my = e.offsetY; } var coord = { x: mx, y: my }; return coord; } //检测鼠标是否在某个区域里 function detectMousePos(mouseCoord, x, y, w, h) { var isOntheArea = false; if (mouseCoord.x > x && mouseCoord.x < x + w && mouseCoord.y > y && mouseCoord.y < y + h) { isOntheArea = true; } return isOntheArea; }
宽高自适应屏幕:
在插件初始化时候传入width,height可以设置canvas的宽高:
imgEle.ddpanorama({ width: bodyWidth, height: bodyHeight });
js获取屏幕宽:screen.availWidth,屏幕高:screen.availHeight
由于在移动端屏幕顶部有信号条,还有app壳占用了一些高度,所以更好的办法是由客户端开发人员通过url参数传webview的宽和高的值给我们调用。
离线访问:通过离线缓存和本地存储结合使用来实现。
设置一个全局对象来缓存数据(一般是JSON格式),每次ajax请求的数据都缓存在该对象中,待所有数据取得后,将该对象通过JSON.stringify方法转换成字符串格式,然后存到localStorage中。
通过navigator.onLine来判断网络状态(目前测过chrome支持),但在手机中会出现无效的情况,这时候客户端提供一个接口来判断网络状态,如果是onLine,那么ajax请求数据,如果是offLine,那么从localStoage中取数据,然后通过JSON.parse方法转换为JSON格式的对象。
对于嵌在APP中的网页来说,离线缓存和本地存储都需要客户端代码的支持,不然目前会出现无效的情况,这点要注意。