安卓端360度全景图的html5实现
这里是一款旅游相关的安卓应用，其中虚拟旅游的功能采用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 }));
并且传出了一些参数，其中scrollX这个参数是针对原图比例的手指滑动时图片的偏移量，它在计算热点位置时起到至关重要的作用。因此在绑定ddredraw这个事件，在该事件触发时候进行热点的计算和绘制及点击事件的绑定。这里为了方便，我们还需要一个参数，就是针对canvas比例的手指滑动时图片的偏移量。这个在ddpanorama.js中setScrollX这个方法中的scrollX取得，我们可以定义一个全局变量canvasScrollX，将这个值存储起来，随时使用。
至于计算过程，需要慢慢调试，这里上个代码：
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事件触发的坐标来计算，需要引入以下两个方法：
//获取鼠标事件的坐标 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中的网页来说，离线缓存和本地存储都需要客户端代码的支持，不然目前会出现无效的情况，这点要注意。
