Krpano 常用方法总结

1. 小行星开场效果

来自1.20及以上版本皮肤中的效果修改。如果使用系统自带的皮肤，可以在skin_settings中设置：

littleplanetintro="false"

以下是实现方法，调用即会显示

<action name="skin_setup_littleplanetintro_custom">
        
        set(global.lpinfo, scene=get(xml.scene), hlookat=get(view.hlookat), vlookat=get(view.vlookat), fov=get(view.fov), fovmax=get(view.fovmax), limitview=get(view.limitview) );
        set(view, fovmax=170, limitview=lookto, vlookatmin=90, vlookatmax=90);
        set(layer[cross_menu].visible, false);
        lookat(calc(global.lpinfo.hlookat - 0), 90, 150, 1, 0, 0);
        delayedcall (0.5,
            start_custom_view();
        );
    </action>


<!--小行星结束后进入正常视角-->
   <action name="start_custom_view">
        set(control.usercontrol, off);
        set(view, limitview=get(lpinfo.limitview), vlookatmin=null, view.vlookatmax=null);
        tween(view.hlookat|view.vlookat|view.fov|view.distortion, calc('' + lpinfo.hlookat + '|' + lpinfo.vlookat + '|' + lpinfo.fov + '|' + 0.0), 3.0, easeOutQuad);
            delayedcall(3.0,
                set(control.usercontrol, all);
                tween(view.fovmax, get(lpinfo.fovmax));
                delete(global.lpinfo);
            );
        
    </action>

2. 动态热点

使用png图片序列，重复切割显示达到动态的效果，调用的方法：

<!--参数分别是 每一帧宽、高，以及帧率-->
<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>

3. Hotspot或Layer显示网页

<hotspot name="iframelayer"
         url="black.png"
         ath="0" atv="0"
         distorted="true"
         renderer="css3d"
         onloaded="delayedcall(0,add_iframe('https://www.krpano.com', 640, 360));"
         />
 
<!--添加一个iframe用以显示网页-->
<action name="add_iframe" type="Javascript">
    var iframe = document.createElement("iframe");
    iframe.style.position = "absolute";
    iframe.style.left = 0;
    iframe.style.top = 0;
    iframe.style.width = "100%";
    iframe.style.height = "100%";
    iframe.style.border = 0;
    iframe.src = args[1];
    iframe.setAttribute('id',resolve(caller.name));
    caller.registercontentsize(args[2], args[3]);
    caller.sprite.appendChild(iframe);
    caller.sprite.style.webkitOverflowScrolling = "touch";
    caller.sprite.style.overflowY = "auto";
    caller.sprite.style.overflowX = "auto";
</action>

如同上面的热点一样，如果使用热点，则需设置 render="css3d" ，此时热点如同 layer 一样，作为一个html元素存在于页面上。同时由于hotspot不直接支持网页，需要设置一张透明或黑色图片作为url。

4. Hotspot Layer 循环

<!--layer 类似 -->
for(set(i,0),i LT hotspot.count,inc(i),
    hotspot[get(i)]
);

5. 空白预览全景

只需要一个网格或空白的时候(网格颜色可设置透明)：

<krpano>
    <preview type="grid(CUBE,16,16,512,0xCCCCCC,0xFFFFFF,0x999999);" />
</krpaon>

6. js动态添加一个 events

krpano.set('events[test_event].keep', true);
krpano.set('events[test_event].onidle', 'trace(view.fov);');

7. flat图的真实fovmax

flat图的fov都很小，当设置的fovmax比较大的时候几乎等于无效。测试发现当设置了一个fovmax，例如为10之后，虽然缩小到最小了，但fovmax并不为10，也就是实际的fovmax和设置的fovmax不一样。且不会自己更新为实际的。

可以使用如下方法获取真实的fovmax：

<events name="f" onresize="set_fovmax()"/>

	<action name="set_fovmax">
		div(imageratio, image.hfov, image.vfov);
		div(screenratio, stagewidth, stageheight);
		if(imageratio LT screenratio,
			set(view.fovtype, HFOV);
			copy(view.fovmax, image.hfov);
		,
      		        set(view.fovtype, VFOV);
			copy(view.fovmax, image.vfov);
		);
	</action>