krpano中如何让图片不变形自适应全屏

本教程是衍生于

该方法可以让图片自适应屏幕尺寸，但因为窗口尺寸比例与图片比例不可能完全一致，如果我们需要图片满屏展示的话，该方法只能是完整展示图片，但却会出现黑边无法覆盖完整窗口的情况。

问题是，如果这个图片是作为启动画面，或者是需要全屏展示但又不希望被拉伸的时候。也就是我们不能这样设置图片

<layer name="test" url="2.jpg" align="center" width="100%" height="100%" />

1	<layer name="test" url="2.jpg" align="center" width="100%" height="100%" />

如果用百分百来设置layer的宽高，尽管是满屏了，但往往会被拉伸或者被压扁，这样的情况效果更加糟糕。

点击代码窗口最右侧按钮，在新窗口打开后复制代码

<krpano>
 
	<preview type="grid(CUBE,16,16,512,0xCCCCCC,0xFFFFFF,0x999999);"/>
 
	<layer name="test" url="2.jpg" align="center" onloaded="picture_fullscreen(get(name));" />

	<events name="picture_fullscreen" keep="true" onresize="callwith(layer[test],onloaded);"/>

	<action name="picture_fullscreen">
	 
	<!-- 使用屏幕宽度或高度的百分之百 -->
	    if(stagewidth LT stageheight,
	    	set(url,2.jpg),
	    	set(url,1.jpg)
	    	);
	    
		div(aspect, layer[%1].imagewidth, layer[%1].imageheight);	 
		mul(new_width, stagewidth, 1);	 
		div(new_height, new_width, aspect);	 
		mul(max_height, stageheight, 1);	 
		if(new_height GT max_height,	 
			copy(new_height, max_height);	 
			mul(new_width, new_height, aspect);	 
			);	 
		roundval(new_width); 
		roundval(new_height);
		if(new_width LT stagewidth,
			copy(new_width,stagewidth);
			div(new_height,new_width,aspect);
			);
		if(new_height LT stageheight,
			copy(new_height,stageheight);
			mul(new_width,new_height,aspect);
			);	 
		copy(layer[%1].width, new_width);	 
		copy(layer[%1].height, new_height); 

	</action>
 
</krpano>

if(stagewidth LT stageheight,

set(url,2.jpg),

set(url,1.jpg)

);

div(aspect, layer[%1].imagewidth, layer[%1].imageheight);

mul(new_width, stagewidth, 1);

div(new_height, new_width, aspect);

mul(max_height, stageheight, 1);

if(new_height GT max_height,

copy(new_height, max_height);

mul(new_width, new_height, aspect);

);

roundval(new_width);

roundval(new_height);

if(new_width LT stagewidth,

copy(new_width,stagewidth);

div(new_height,new_width,aspect);

);

if(new_height LT stageheight,

copy(new_height,stageheight);

mul(new_width,new_height,aspect);

);

copy(layer[%1].width, new_width);

copy(layer[%1].height, new_height);

</action>

</krpano>

高亮的部分是如果需要横屏竖屏各自准备图片的话，就需要使用。如果只是用一张图片的话，则可以把高亮部分代码删除。

核心代码是

picture_fullscreen

1	picture_fullscreen

与

krpano中如何让图片自适应屏幕尺寸代码的核心区别在于

		if(new_width LT stagewidth,
			copy(new_width,stagewidth);
			div(new_height,new_width,aspect);
			);
		if(new_height LT stageheight,
			copy(new_height,stageheight);
			mul(new_width,new_height,aspect);
			);