krpano怎么让文字一直显示在热点上

Posted 2023-04-25

参考技术A 默认的corfu模版可以实现鼠标移动到热点时，出现提示文字。但这种体验并不好，一方面，浏览者的鼠标不放到鼠标上方，他就不可能知道这个箭头指向的是哪一个场景。另一方面，在移动设备上，没有鼠标，也就是不能够实现onover事件，也就是根本就无效了。有些朋友可能直接采用ps文字为图片作为热点来展示，这种做法的好处就是能设计出很漂亮的文字图片效果，但如果热点很多，同时想要的也就是一个指示作用的话，用代码就能解决。
将下面的代码放到skin文件夹的vtourksin.xml中。

<action name="add_all_the_time_tooltip">
txtadd(tooltipname, 'tooltip_', get(name));
addplugin(get(tooltipname));
txtadd(plugin[get(tooltipname)].parent, 'hotspot[', get(name), ']');
set(plugin[get(tooltipname)].url,'%SWFPATH%/plugins/textfield.swf');
set(plugin[get(tooltipname)].align,top);
set(plugin[get(tooltipname)].edge,bottom);
set(plugin[get(tooltipname)].x,0);
set(plugin[get(tooltipname)].y,0);
set(plugin[get(tooltipname)].width,100);
set(plugin[get(tooltipname)].autoheight,true);
set(plugin[get(tooltipname)].background,true);
set(plugin[get(tooltipname)].backgroundcolor,0x000000);
set(plugin[get(tooltipname)].roundedge,15);
set(plugin[get(tooltipname)].backgroundalpha,0.5);
set(plugin[get(tooltipname)].border,true);
set(plugin[get(tooltipname)].glow,4);
set(plugin[get(tooltipname)].glowcolor,0xFFFFFF);
set(plugin[get(tooltipname)].css,'text-align:center; color:#FFFFFF; font-family:Arial; font-weight:bold; font-size:16px;');
set(plugin[get(tooltipname)].textshadow,1);
set(plugin[get(tooltipname)].textshadowrange,6.0);
set(plugin[get(tooltipname)].textshadowangle,90);
copy(plugin[get(tooltipname)].html,scene[get(linkedscene)].title);
set(plugin[get(tooltipname)].enabled,false);
</action>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<action name="add_all_the_time_tooltip">
txtadd(tooltipname, 'tooltip_', get(name));
addplugin(get(tooltipname));
txtadd(plugin[get(tooltipname)].parent, 'hotspot[', get(name), ']');
set(plugin[get(tooltipname)].url,'%SWFPATH%/plugins/textfield.swf');
set(plugin[get(tooltipname)].align,top);
set(plugin[get(tooltipname)].edge,bottom);
set(plugin[get(tooltipname)].x,0);
set(plugin[get(tooltipname)].y,0);
set(plugin[get(tooltipname)].width,100);
set(plugin[get(tooltipname)].autoheight,true);
set(plugin[get(tooltipname)].background,true);
set(plugin[get(tooltipname)].backgroundcolor,0x000000);
set(plugin[get(tooltipname)].roundedge,15);
set(plugin[get(tooltipname)].backgroundalpha,0.5);
set(plugin[get(tooltipname)].border,true);
set(plugin[get(tooltipname)].glow,4);
set(plugin[get(tooltipname)].glowcolor,0xFFFFFF);
set(plugin[get(tooltipname)].css,'text-align:center; color:#FFFFFF; font-family:Arial; font-weight:bold; font-size:16px;');
set(plugin[get(tooltipname)].textshadow,1);
set(plugin[get(tooltipname)].textshadowrange,6.0);
set(plugin[get(tooltipname)].textshadowangle,90);
copy(plugin[get(tooltipname)].html,scene[get(linkedscene)].title);
set(plugin[get(tooltipname)].enabled,false);
</action>

<style name="skin_hotspotstyle" url="vtourskin_hotspot.png" scale="0.5" edge="top" oy="0" distorted="false"
tooltip=""
onclick="if(linkedscene, skin_hidetooltips(); tween(scale,0.25,0.5); tween(oy,-20,0.5); tween(alpha,0,0.5); looktohotspot(); loadscene(get(linkedscene),null,get(skin_settings.loadscene_flags),get(skin_settings.loadscene_blend)); skin_updatescroll(); );"
onloaded="add_all_the_time_tooltip();"
/>
1
2
3
4
5
在vtourskin找到下面的代码

<style name="skin_hotspotstyle" url="vtourskin_hotspot.png" scale="0.5" edge="top" oy="0" distorted="false"
tooltip=""
onclick="if(linkedscene, skin_hidetooltips(); tween(scale,0.25,0.5); tween(oy,-20,0.5); tween(alpha,0,0.5); looktohotspot(); loadscene(get(linkedscene),null,get(skin_settings.loadscene_flags),get(skin_settings.loadscene_blend)); skin_updatescroll(); );"
onloaded="if(skin_settings.tooltips_hotspots, if(linkedscene, copy(tooltip,scene[get(linkedscene)].title); loadstyle(skin_tooltips); ));"
/>
1
2
3
4
5

<style name="skin_hotspotstyle" url="vtourskin_hotspot.png" scale="0.5" edge="top" oy="0" distorted="false"
tooltip=""
onclick="if(linkedscene, skin_hidetooltips(); tween(scale,0.25,0.5); tween(oy,-20,0.5); tween(alpha,0,0.5); looktohotspot(); loadscene(get(linkedscene),null,get(skin_settings.loadscene_flags),get(skin_settings.loadscene_blend)); skin_updatescroll(); );"
onloaded="if(skin_settings.tooltips_hotspots, if(linkedscene, copy(tooltip,scene[get(linkedscene)].title); loadstyle(skin_tooltips); ));"
/>

替换为

<style name="skin_hotspotstyle" url="vtourskin_hotspot.png" scale="0.5" edge="top" oy="0" distorted="false"
tooltip=""
onclick="if(linkedscene, skin_hidetooltips(); tween(scale,0.25,0.5); tween(oy,-20,0.5); tween(alpha,0,0.5); looktohotspot(); loadscene(get(linkedscene),null,get(skin_settings.loadscene_flags),get(skin_settings.loadscene_blend)); skin_updatescroll(); );"
onloaded="add_all_the_time_tooltip();"
/>

krpano--控制热点跳转到场景的指定视角

krpano课堂(肥宗) · 2015-07-13 19:32

有这么一种情况，假设我们用三个场景，这三个场景恰好是一条街道的同一方向的三个拍摄点。如上图。

 

我们可以通过设置A、B、C三个场景中的view元素中的hlookat属性，实现了从A到B、从B到C保持同一个方向。假设我们的图是左东右西的方向。那我们站在A点面向B的方向，我们会看到链接到B的热点，当我们点击该热点时，初始视角应该还是面向东方，也就是能看到更远处的链接到C的热点。简单来说，保持了方位的统一。

 

问题来了，当我们从C回到B，或者从B回到A时，进入场景的时候初始视角还是面向东方，而不是面向西方，这样就没有保持方位的统一。如何在krpano的默认热点中实现方位的统一呢？

 

krpano默认生成热点的代码控制分为两个部分，一个是tour.xml中的每个hotspot元素，一个是在vtourskin.xml中对应的名为skin_hotspotstyle的style元素。

 

tour.xml中某个热点：

 

<hotspot name="spot1" style="skin_hotspotstyle" ath="200.496" atv="10.890"linkedscene="scene_a1kt" />

vtourskin.xml中的style：

 

<style name="skin_hotspotstyle" url="vtourskin_hotspot.png" scale="0.5" edge="top" oy="0"distorted="false" tooltip="" onclick="if(linkedscene, skin_hidetooltips(); tween(scale,0.25,0.5); tween(oy,-20,0.5); tween(alpha,0,0.5); looktohotspot(); loadscene(get(linkedscene),null,get(skin_settings.loadscene_flags),get(skin_settings.loadscene_blend)); skin_updatescroll(); );" onloaded="if(skin_settings.tooltips_hotspots, if(linkedscene, copy(tooltip,scene[get(linkedscene)].title); loadstyle(skin_tooltips); ));" />

当然，指定到特定的场景这个是没有问题的，本来热点就是指定到某个场景的。基本上我们要指定一个新的hlookat值。因此我们对hotspot的部分，例如是从C回到B时的热点，也就是在C场景中，linkedscene为B的热点：

 

<hotspot name="spot1" style="skin_hotspotstyle" ath="200.496" atv="10.890"linkedscene="scene_B" hlookat="200" />

可以看到我们加了一个hlookat=”200″，这个就是我们从C进入到B时的初始视角。该值的获取可以使用options插件。

 

然后我们将style改为：

 

<style name="skin_hotspotstyle" url="vtourskin_hotspot.png" scale="0.5" edge="top" oy="0"distorted="false" tooltip="" onclick="if(linkedscene, skin_hidetooltips(); tween(scale,0.25,0.5); tween(oy,-20,0.5); tween(alpha,0,0.5); looktohotspot(); loadscene(get(linkedscene),null,get(skin_settings.loadscene_flags),get(skin_settings.loadscene_blend)); skin_updatescroll();if(hlookat,lookat(get(hlookat),get(view.vlookat),110)); );" onloaded="if(skin_settings.tooltips_hotspots, if(linkedscene, copy(tooltip,scene[get(linkedscene)].title); loadstyle(skin_tooltips); ));" />

其实这里我们是在onclick事件中的if中增加了一个

 

if(hlookat,lookat(get(hlookat),get(view.vlookat),110));

 

意思就是如果存在hlookat，那么就使用lookat这个action，跳转到指定的位置。分别对应的是球面坐标中的水平和垂直位置以及视角fov