diff --git a/packages-user/client-modules/src/render/ui/title.tsx b/packages-user/client-modules/src/render/ui/title.tsx index 7658714..965e028 100644 --- a/packages-user/client-modules/src/render/ui/title.tsx +++ b/packages-user/client-modules/src/render/ui/title.tsx @@ -26,6 +26,7 @@ import { ExitFullscreen, Fullscreen, SoundVolume } from '../components'; import { mainSetting, triggerFullscreen } from '@motajs/legacy-ui'; import { saveLoad } from './save'; import { MainSceneUI } from './main'; +import { adjustCover } from '../utils'; const enum TitleButton { StartGame, @@ -59,19 +60,12 @@ export const GameTitle = defineComponent(props => { const bg = core.material.images.images['bg.webp']; //#region 计算背景图 - const aspect = bg.width / bg.height; - const canvasAspect = MAIN_WIDTH / MAIN_HEIGHT; - const [width, height] = (() => { - if (canvasAspect > aspect) { - const width = MAIN_WIDTH; - const height = width / aspect; - return [width, height]; - } else { - const height = MAIN_HEIGHT; - const width = height * aspect; - return [width, height]; - } - })(); + const [width, height] = adjustCover( + bg.width, + bg.height, + MAIN_WIDTH, + MAIN_HEIGHT + ); //#region 标题设置 diff --git a/packages-user/client-modules/src/render/utils/layout.ts b/packages-user/client-modules/src/render/utils/layout.ts index 8bad227..0c2a1bb 100644 --- a/packages-user/client-modules/src/render/utils/layout.ts +++ b/packages-user/client-modules/src/render/utils/layout.ts @@ -57,3 +57,30 @@ export function adjustGrid( locs }; } + +/** + * 适配为覆盖模式,类似于 `object-fit: cover` + * @param itemWidth 元素宽度 + * @param itemHeight 元素高度 + * @param targetWidth 目标宽度 + * @param targetHeight 目标高度 + * @returns 适配为覆盖模式后元素的宽高 + */ +export function adjustCover( + itemWidth: number, + itemHeight: number, + targetWidth: number, + targetHeight: number +): Readonly { + const aspect = itemWidth / itemHeight; + const canvasAspect = targetWidth / targetHeight; + if (canvasAspect > aspect) { + const width = targetWidth; + const height = width / aspect; + return [width, height]; + } else { + const height = targetHeight; + const width = height * aspect; + return [width, height]; + } +}