适配举例

前端适配需求

目前有一张1000500的图片需要适配1200700的屏幕,需要通过缩放适配,不能改变图片的宽高比使图片变形

方案一

宽度适配,将图片的宽度与高度同时放大1.2倍,经过放大后的图片的大小为1200*600,图片高不能铺满屏幕,上下两边图片会出现黑边

方案二

高度适配,将图片的宽度与高度同时放大1.4倍,经过放大后的图片大小为1400*700,可以铺满屏幕,宽度会超出屏幕

小结

得出结论,此处使用方案二更加合适,适配屏幕高度,将图片的宽度与高度同时放大1.4倍

适配代码

import { Node, view, UITransform } from 'cc';

/**

* 背景图片适配屏幕

* @param bg 背景图片节点

*/

adaptFullScreenBg(bg: Node){

// 获取视图设计的分辨率

const drSize = view.getDesignResolutionSize();

// 获取背景图片的内容尺寸(分辨率)

const bgSize = bg.getComponent(UITransform).contentSize;

// 宽度适配缩放比例

const widthAdaptScale = drSize.width/bgSize.width;

// 高度适配缩放比例

const heightAdaptScale = drSize.height/bgSize.height;

// 为了避免屏幕出现黑边,在高度适配与宽度适配中,使用较大的缩放比例

const adaptScale = widthAdaptScale > heightAdaptScale ? widthAdaptScale : heightAdaptScale;

bg.setScale(adaptScale,adaptScale);

}

文章来源

评论可见,请评论后查看内容,谢谢!!!评论后请刷新页面。

大家都在找:

cocos:cocos手机版下载

游戏引擎:游戏引擎是什么

前端:前端三大框架

大家都在看: