Krpano学习：在javascript中动态添加/删除/修改（位置）热点（向后端写入）

作为管理员，在管理全景时会涉及到各个标签的操作，本篇文章介绍在JS中对热点的操作，其数据可传到后端并写入数据库。

首先先给一个在xml文件中的动态热点添加的方法，下面的代码直接把两个url图片换了就可以直接看效果：

<hotspot name="mark" url="hotspot.png" scale="0.2" ath="56.614" atv="-27.089" onclick="test();" />
<events onclick="test();" />
<action name="test">
	screentosphere(mouse.x, mouse.y, h, v);
	addhotspot(get(hs));
	set(hotspot[get(hs)].url, 'mark2.png');
</action>

接下来看在JS中的方法：
1.手动添加热点（点击图上添加点）

krpano提供screentosphere(x,y,h,v)和spheretoscreen(h,v,x,y,stereoside)方法来进行屏幕和全景坐标转换。

先看第一种方法，这种krpano工程中添加热点的方法：

krpano的每一个全景项目都有一个tour_editor.html文件，这个文件里提供的添加热点的方法是先在固定点添加一个热点，并给热点添加一个可拖动的方法，然后再手动拖动热点到想要添加的地方。

//动态添加热点
function AddHotspot() {
    var spotname = "addhotspot";
    var hlookat = 0.000;
    var vlookat = 0.000;
    krpano.call("addhotspot(" + spotname + ");");
    krpano.call("set(hotspot[" + spotname + "].url,../SystemPicture/Mark.png);");
    krpano.call("set(hotspot[" + spotname + "].ath," + hlookat + ");");
    krpano.call("set(hotspot[" + spotname + "].atv," + vlookat + ");");
    krpano.call("set(hotspot[" + spotname + "].ondown,draghotspot(););");
}
 
//获取krpano点坐标 ath-x  atv-y
function GetHotspot(ath, atv) {
    $('#showpoint').text(ath + '
' + atv);
    //将数据添加到数据库
    //成功后图上删除该点
}

xml中的代码

		<!--  Drag hotspot  -->
		<!--  The screentosphere action will convert the x/y variables to the h/v variables and the spheretoscreen action the h/v variables to the x/y variables.  -->
		<action name="draghotspot">
			spheretoscreen(ath, atv, hotspotcenterx, hotspotcentery, 'l');
			sub(drag_adjustx, mouse.stagex, hotspotcenterx);
			sub(drag_adjusty, mouse.stagey, hotspotcentery);
			asyncloop(pressed,
				sub(dx, mouse.stagex, drag_adjustx);
				sub(dy, mouse.stagey, drag_adjusty);
				screentosphere(dx, dy, ath, atv);
				roundval(ath, 3);
				roundval(atv, 3);
				js(GetHotspot(get(ath), get(atv)));
			  );
		</action>

当然，以上代码只提供了方法，还要在JS中添加一个按钮，一个文本框，点击按钮来激活添加点功能，文本框显示全景坐标，这个坐标需要传到后端保存到数据库中。

上面的方法有一个缺点，毕竟如果要目的地在目前视角的对面，由于需要拖动到目的地，所以显得心累……

因此，下面来看第二种方法：

krpano提供的与JS的交互方法中，就有屏幕坐标转换为球面坐标（screentosphere(x,y)），球面坐标转换为屏幕坐标（spheretoscreen(h,v)）,获得的结果是一个对象。

function AddAnyHotspot() {
    //跨浏览器的事件对象
    var EventUtil = {
        addHandler:function(elem,type,handler){
            if(elem.addEventListener)
            {
                elem.addEventListener(type,handler,false);
            }else if(elem.attachEvent)
            {
                elem.attachEvent("on"+type,handler);
            }else
            {
                elem["on"+type]=handler;
            }
        },
        removeHandler:function(elem,type,handler){
            if(elem.removeEventListener)
            {
                elem.removeEventListener(type,handler,false);
            }else if(elem.detachEvent)
            {
                elem.detachEvent("on"+type,handler);
            }else
            {
                elem["on"+type]=null;
            }
        },
        getEvent:function(event){
            return event?event:window.event;
        },
        getTarget:function(event){
            return event.target||event.srcElement;
        },
        preventDefault:function(event){
            if(event,preventDefault){
                event.preventDefault();
            }else{
                event.returnValue = false;
            }
        },
        stopPropagation:function(event){
            if(event.stopPropagation){
                event.stopPropagation();
            }else{
                event.cancelBubble=true;
            }
        }
    };
    //鼠标点击监听
    var div = document.getElementById("pano");
    EventUtil.addHandler(div, "click", function(event){
        event = EventUtil.getEvent(event);
        //JS中获取屏幕坐标方法的Y值比krpano中获取方法多66个像素点
        var sphereXY = krpano.screentosphere(event.screenX, event.screenY - 66);
        var  sp  = krpano.spheretoscreen(event.screenX, event.screenY - 66);
        var sphereX = sphereXY.x;
        var sphereY = sphereXY.y ;
        krpano.call("addhotspot(kk);");
        krpano.call("set(hotspot[kk].url,../SystemPicture/Mark.png);");
        krpano.call("set(hotspot[kk].ath," + sphereX + ");");
        krpano.call("set(hotspot[kk].atv," + sphereY + ");");
    });
}

大概是Krpano的获取屏幕坐标点的算法和JS中的不一样，他们获得的屏幕坐标的Y是不相同的，JS大66，所以必须减去。
还是需要在JS中添加一个按钮来调用这个函数哟。

其实我觉得对热点的操作难点应该就是在添加热点了吧，所以其他部分就直接放代码了。

2.查找热点

//查找点
function LookupHotspot() {
    //手动输入热点text查找，此时可能出现多个热点
    var spottext = $("#inputHotspot").val();  //热点的text名字,可重复
    //在数据库中找到该名字所匹配的所有热点，并返回其信息，在图上显示
    //......
    //图上点击某点，信息框中出现对应的信息，此时点唯一
    //在数据库中找到该名字所匹配的热点后，再匹配坐标值找到对应点    函数传递三个变量，后两个可缺省
 
    //将全景图的视野转向第一个热点所在位置
    $("#ModyfiHotspot").attr("disabled", false);
    $("#DelHotspot").attr("disabled", false);
    krpano.set("view.hlookat", -180);
    krpano.set("view.vlookat", 50);
    //改变所找到点的图标
    krpano.call("set_hotspots/plugin(hotspot, url, ../SystemPicture/Mark2.png, name, " + spottext + ");");  //此处变量应为热点text和图片，热点text是用户输入的值
}

注意，注释中的热点text是热点的某种名称，例如每个人的姓名，不唯一，而热点的hotspot_name是热点的真正的名称，例如每个人的身份证号，是唯一的。
如果热点具有点击事件，那么点击热点后可直接获取这个热点的真正名称改变其图标，如果不具有可操作事件，那就根据上面的方法获取屏幕点坐标，然后给定一个小范围的圆，在这个圆内的点就是你点的那个点，毕竟你点的位置和点的真正位置不一定是完全一致的。

3.修改热点

function ModyfiHotspot() {
    //点击表中所查找出的点，修改对应的信息
    var spotname = $("#inputHotspot").val();  //该点的name，唯一值
    //将视野转向该点并修改该点的图标
    krpano.set("view.hlookat", 0);
    krpano.set("view.vlookat", 30);
    //krpano.call("set_hotspots/plugin(hotspot, url, ../SystemPicture/Mark2.png, name, spot4);");
    //设置该点在图上可拖动，修改坐标
    krpano.call("set(hotspot[" + spotname + "].ondown,draghotspot(););");
    //......返回修改的内容
    //......修改成功后图上删掉该点
}

修改热点不推荐先删再添加，如果热点多且表关联大，则效率极其低下，而且如果这样做更好，那还要update干嘛呢。

4.删除热点

//删除点
function DeleteHotspot() {
    var spotname = $("#inputHotspot").val();
    //图上操作
    krpano.call("removehotspot(" + spotname + ");");//此处变量为热点name，唯一值，主键
    //数据库操作
}

其他方法

获取接口对象
在创建播放器时，可以通过config的onready参数传入回调函数来获取krpano Javascript-Interface object。修改页面的JS代码如下：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="./krpano.js"></script>
  <style type="text/css">
    html,body{width:100%;height:100%;}
  </style>
</head>
<body>
  <div id="container" style="width:100%;height:100%;"></div>
  <script type="text/javascript">
		var krpanoReady = function(krpano){
		  //函数传入的krpano参数就是krpano Javascript-Interface object
		  //显示krpano打印窗口
		  krpano.call("showlog()")
		}
		var config = {target: "container", swf: "krpano.swf", xml: "index.xml", html5: "prefer", onready: krpanoReady}
		embedpano(config)
  </script>
</body>
</html>

接口对象的方法
krpano Javascript-Interface object拥有 set(variable,value)、 get(variable)、 call(action)、 spheretoscreen(h,v)、 screentosphere(x,y)这五个方法。那么要通过JS来设置播放器的效果，主要通过set、get、call这三个方法。使用这些方法前，需要先点这里了解一下krpano实现的简单动态脚本语言。

set(variable,value)

定义或者设置krpano动态脚本语言的变量值。使用例子如下：

 
//定义或设置变量a为1
krpano.set("a", 1)
//设置name为layer_1的layer对应visible属性为false
krpano.set("layer[layer_1].visible", false)
//设置name为layer_1的layer对应html属性为'txt'
krpano.set("layer[layer_1].html", "txt")

get(variable)

获取krpano动态脚本语言的变量值，当变量值未定义时返回null。使用例子如下：

//获取变量值
var a = krpano.get("a")
//获取name为layer_1的layer对应visible属性
var visible = krpano.get("layer[layer_1].visible")

call(action)

执行指定的任意krpano动态语言语句。使用例子如下：

//显示krpano打印窗口
krpano.call("showlog()")

通过JavaScript添加场景
上述样例代码只创建了一个空播放器，那么我们怎么样使用JavaScript来添加场景等相关播放器数据呢？

我们先来看一下，如何添加并设置一个场景的图片资源。JS代码如下：

var krpanoReady = function(krpano){
  var xml = ''
  krpano.call("loadxml(" + xml + ");loadscene(scene_1);")
}
var config = {target: "container", swf: "krpano.swf", xml: "index.xml", html5: "prefer", onready: krpanoReady}
embedpano(config)

添加数据主要通过调用krpano动态语言的loadxml方法实现。那么loadscene方式的作用是：根据指定scene的name来加载并渲染指定的场景。详细请参考krpano文档。

loadxml不止可以添加场景，还可以添加任何krpano的XML配置允许的数据来达到展示效果。比如添加plugin、layer、hotspot等。但是loadxml有一定的限制，当执行loadxml时，会将没有声明keep属性为true的数据对象都移除并切换掉当前的场景。时间有限，今天的就先介绍到这里。使用loadxml相关注意的具体应用问题，在后续的文章中进行介绍。