本教程是衍生于
该方法可以让图片自适应屏幕尺寸,但因为窗口尺寸比例与图片比例不可能完全一致,如果我们需要图片满屏展示的话,该方法只能是完整展示图片,但却会出现黑边无法覆盖完整窗口的情况。
问题是,如果这个图片是作为启动画面,或者是需要全屏展示但又不希望被拉伸的时候。也就是我们不能这样设置图片
1 |
<layer name="test" url="2.jpg" align="center" width="100%" height="100%" /> |
如果用百分百来设置layer的宽高,尽管是满屏了,但往往会被拉伸或者被压扁,这样的情况效果更加糟糕。
点击代码窗口最右侧按钮,在新窗口打开后复制代码
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 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<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> |
核心代码是
1 |
picture_fullscreen |
与
krpano中如何让图片自适应屏幕尺寸代码的核心区别在于
1 2 3 4 5 6 7 8 |
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); ); |
重新计算以满足全屏需求。
onresize事件保证了屏幕尺寸变化时始终全屏。