直播礼物播放有边框,黑边解决方案
svga格式礼物制作尺寸一般是750 *1334,iphone8之前手机分辨率比例大部分都是750 *1334的,所以之前一般不会出现有边框或者不透明黑边,现在手机分辨率比例都和之前不一样了,变的窄长,比如苹果的iphoneX,iphone11,iphone12等比例都变成750 *1624,所以之前750 *1334尺寸的礼物在这种手机上显示都会出现两侧黑边,如图所示,但是礼物尺寸 改成750 *1624后 ,在iphone8 上又会出现两侧黑边,鱼和熊掌不可兼得,我们的解决方案是 在后台每个礼物增加一个缩放模式字段,AspectFit,AspectFill 。
三种缩放模式含义:
Aspect Fill 在保持长宽比的前提下,缩放图片,使图片充满容器。
Aspect Fit 在保持长宽比的前提下,缩放图片,使得图片在容器内完整显示出来。
Scale to Fill 缩放图片,使图片充满容器。图片未必保持长宽比例协调,有可能会拉伸至变形。
程序收到播放礼物消息后,根据当前礼物的播放模式去调整礼物的缩放,使礼物适配每一个机型的手机。全屏礼物推荐使用AspectFill,小礼物推荐使用AspectFit。使用效果如下:
具体代码解决方案如下:
IOS代码部分:
Android代码部分:
Web代码部分: