更新于 2020.11.19 krpano 1.20.9
补地效果
代码使用说明
这次我们要做一个补地logo,我们要用到的文件夹路径是
你电脑的路径\krpano-1.20.9\viewer\examples\nadir-logo
如果每个场景都补地或者只给某个场景补地代码放置的位置是不大一样的。我们把krpano-roundlogo.png这个补地logo放在vtour根目录下,补地logo的要求是透明png,logo一般选用圆形,你愿意的话也可以三角形,心形。这里我们用的是krpano自己的logo。
然后我们打开nadir-logo.xml,tour.xml以及vtourskin.xml,把nadir-logo.xml里面的代码粘贴到vtourskin里,首先找到<!– Skin Events –>这里放着两段events代码,我们把
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 |
<events name="nadirlogorotation" keep="true" onviewchange="copy(hotspot[nadirlogo].rotate,view.hlookat);" /> |
onviewchange这个事件后面的if语句对rotatewithview的判断为真时,能让logo的rotate属性,也就是自身的旋转与视角坐标hlookat保持一致。因为场景漫游刚开始时,hlookat为0,同时rotate也是0,不管怎么转动,始终是让图片字样能够保持正常的状态。当然,默认情况下rotatewithview是false,也就是logo如同地面的一部分,不会随着场景旋转一起旋转。
然后把logo的热点代码也放在某个空档,放在scene标签的外面
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 7 8 9 10 |
<hotspot name="nadirlogo" url="krpano-roundlogo.png" keep="true" ath="0" atv="90" distorted="true" scale="1.0" rotate="0.0" onclick="openurl('http://krpano.com');" /> |
这里因为是全局热点,所以加入了keep=“true”,同时注意url中对路径的修正,因为该图片不在skin文件夹。用鼠标点击logo时,会执行openurl,打开你想要的链接。
单独对一个场景进行补地
如果我们只是对其中一个scene进行补地,那么我们只需要在这个scene标签内加入下面代码,注意,已经去掉了keep=“true”。
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<events name="nadirlogorotation" onviewchange="set(hotspot[nadirlogo].rotate,get(view.hlookat) );" /> <hotspot name="nadirlogo" url="krpano-roundlogo.png" ath="0" atv="90" distorted="true" scale="1.0" rotate="0.0" onclick="" /> |
单独对部分场景进行补地
如果我们只针对其中一个scene(例如航拍)不加地面logo,其它的scene都加上地面logo。
下面代码要放在所有scene标签的外面
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<hotspot name="nadirlogo" url="krpano-roundlogo.png" keep="true" ath="0" atv="90" distorted="true" scale="1.0" rotate="0.0" onclick="" /> <events name="logo_excluded" keep="true" onnewpano="if(xml.scene == 'scene_1',set(hotspot[nadirlogo].visible,false),set(hotspot[nadirlogo].visible,true))"/> <events name="nadirlogorotation" keep="true" onviewchange="copy(hotspot[nadirlogo].rotate,view.hlookat);" /> |
如果有多个scene,例如scene_1、scene_2、scene_3都不需要补地,那么可以用 OR 逻辑表达式。如下
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<hotspot name="nadirlogo" url="krpano-roundlogo.png" keep="true" ath="0" atv="90" distorted="true" scale="1.0" rotate="0.0" onclick="" /> <events name="logo_excluded" keep="true" onnewpano="if(xml.scene == 'scene_1' OR xml.scene == 'scene_2' OR xml.scene == 'scene_3',set(hotspot[nadirlogo].visible,false),set(hotspot[nadirlogo].visible,true))"/> <events name="nadirlogorotation" keep="true" onviewchange="copy(hotspot[nadirlogo].rotate,view.hlookat);" /> |
在 “移花接木(9)- 为默认皮肤添加补地logo” 上有 1 条评论