主要分析一下Canvas Scaler中的Scale With Screen Size模式,因为这个模式用到的比较多
在UGUI源码中,主要是这个方法在触发变化
其下有三个模式,Match Width Or Height,Expand,Shrink
其中ReferenceResolution是参考分辨率,即美术设计时参考的分辨率
1. Match Width Or Height模式
这里使用2做对数计算,
logWidth = 物理宽 / 参考分辨率的宽,再取2的对数
logHeight = 物理高 / 参考分辨率的高,再取2的对数
logWeightedAverage 则是对于logWidth 和 logHeight 做线性插值,t值为Match的值
所以当Macth = 0时,返回logWidth ,Macth = 1 时,返回logHeight
再对2取logWeightedAverage次幂,得到最终的Canvas的缩放系数
接下来准备实验条件
取屏幕分辨率为2436 * 1125
参考分辨率为1920 * 1080
Image的宽高为1920 * 1080
- Match=0时
图片此时是这样的,宽撑满了,但是高的部分溢出了
发现此时的Canvas的尺寸是1920 * 886.6995,即高变小了,而Scale的大小变成了1.26875
分析原因,因为Match = 0,此时logWeightedAverage = logWidth ,即最终是取的以 屏幕宽 / 参考分辨率的X的比值为基准计算出来的值,算出来的scaleFactor = 1.26875,而
2436 / 1.26875 = 1920
1125 / 1.26875 = 886.6995
所以此时的Canvas的宽依旧保持1920不变,而高需要适应宽计算出的比值出现了缩小,但是Image的高依旧是1080,所以此时Image的高超出了Canvas
- Match=1时
高度撑满了,但是宽度没有
发现此时的Canvas的宽高是 2338.56 * 1080,即宽变大了,但是高不变
分析原因,此时Match = 1,logWeightedAverage = logHeight,即最终是取的以 屏幕高 / 参考分辨率的Y的比值为基准计算出来的值,算出来的scaleFactor = 1.041667,而
2436 / 1.041667 = 2338.56
1125 / 1.041667 = 1,079.999 ≈ 1080
所以此时的Canvas的高依旧保持1080不变,而宽需要适应高计算出的比值出现了变大,但Image的宽依旧是1920,所以此时Image的宽不能填满屏幕
2. Expand模式
直接计算的屏幕宽高和参考分辨率的比值,取的最小值来做缩放系数,即最大程度缩小UI元素,可能会出现空白
此时Image的高撑满了,但是宽不够
此时Canvas的宽变大了,但是高不变,和上面的Match = 1时一样
3. Shrink模式
直接计算的屏幕宽高和参考分辨率的比值,取的最大值来做缩放系数,即最大程度放大UI元素,可能会出现裁剪
此时Image的宽撑满了,但是高溢出了
此时Canvas的宽保持不变,但是高变小了,情况和Match = 0 时一样