Krpano之四添加热点动画和注记

效果

小飞机热点动画

前提

全景图工程已经处理，全景图中已经添加热点了，如

1、添加热点图

添加热点图片，放在工程这个位置下面

热点图长这样，宽度256，高度6400，高度其实是宽度25，也就是有25张正方形的图片(256256)拼接而成

2、修改vtourskin.xml

查看tour.xml部分

再看vtourskin.xml中对应上面同名称的style部分

vtourskin.xml部分增加或者修改热点动画和热点注记

动画完整部分

<action name="do_crop_animation" scope="local" args="framewidth, frameheight, framerate">
		<!-- 定义局部变量 -->
		calc(local.xframes, (caller.imagewidth /framewidth) BOR 0);
		calc(local.frames, xframes * ((caller.imageheight / frameheight) BOR 0));
		def(local.frame, integer, 0);
		
		<!-- 设置第一帧 -->
		calc(caller.crop, '0|0|' + framewidth + '|' + frameheight);
		
		<!-- 动画部分 -->
		setinterval(calc('crop_anim_' + caller.name), calc(1.0 / framerate),
			if(caller.loaded,
				inc(frame);
				if(frame GE frames, if(caller.onlastframe !== null, callwith(caller, onlastframe() ) ); set(frame,0); );
				mod(xpos, frame, xframes);
				div(ypos, frame, xframes);
				Math.floor(ypos);
				mul(xpos, framewidth);
				mul(ypos, frameheight);
				calc(caller.crop, xpos + '|' + ypos + '|' + framewidth + '|' + frameheight);
			  ,
				<!-- 当热点移除时停止动画 -->
				clearinterval(calc('crop_anim_' + caller.name));
			);
		);
	</action>

注记完整部分

<action name="skin_hotspotstyle_setup" >
		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)].autowidth,true);
        set(plugin[get(tooltipname)].autoheight,true);
        set(plugin[get(tooltipname)].vcenter,true);
        set(plugin[get(tooltipname)].background,true);
        set(plugin[get(tooltipname)].backgroundcolor,0x000000);
        set(plugin[get(tooltipname)].roundedge,5);
        set(plugin[get(tooltipname)].backgroundalpha,0.65);
        set(plugin[get(tooltipname)].padding,5);
        set(plugin[get(tooltipname)].border,false);
        set(plugin[get(tooltipname)].glow,0);
        set(plugin[get(tooltipname)].glowcolor,0xFFFFFF);
        set(plugin[get(tooltipname)].css,'text-align:center; color:#FFFFFF; font-family:MicrosoftYahei;  font-size:36px;');
        if(device.mobile,set(plugin[get(tooltipname)].css,'text-align:center; color:#FFFFFF; font-family:MicrosoftYahei; font-weight:bold; font-size:24px;');
            );
        set(plugin[get(tooltipname)].textshadow,0);
        set(plugin[get(tooltipname)].textshadowrange,6.0);
        set(plugin[get(tooltipname)].textshadowangle,90);
		if(text == '' OR text === null,
        copy(plugin[get(tooltipname)].html,scene[get(linkedscene)].name),
        copy(plugin[get(tooltipname)].html,text)
        );    
		set(plugin[get(tooltipname)].enabled,false);    
	</action>

3、启动浏览

双击即可

4、效果