简介
CreateJS 游戏渲染引擎的横竖屏适配插件
安装
npm install 'createjs-screen-adaptation'
基本使用
// 引入 Createjs// 引入 Createjs 适配插件
const $canvas = documentconst stage = $canvas// 初始化const screenAdapt = stage// 设置参数,并自动适配screenAdapt
其他 API
screenAdapt.align(displayObject,position)
相对定位对齐,是横竖屏适配方案中对齐策略的应用,会动态地根据适配后的 Canvas 自动更新相对定位。
-
参数
{DisplayObject} displayObject 是 Phaser.DisplayObject 元素
{Object} position 位置对象,可选属性:top、left、right、bottom,以像素为单位;verticalCenter、horizontalCenter 属于Boolean类型
-
用法示例
// 设置音乐图标距离右上角各上右30pxconst musicIcon = spriteSheetMusicconst musicIconPos =top: 30right: 30screenAdaptalignmusicIcon musicIconPosstage// 设置文本舞台水平垂直居中const text = 'Hello World' '20px Arial' '#ffffff'const textPos =horizontalCenter: trueverticalCenter: truescreenAdaptaligntext textPosstage
screenAdapt.fit(graphics)
适配舞台大小,自动铺满,始终保持 graphics 元素与 canvas 一致大小,常用于 'FIXED_WIDTH'、'FIXED_HEIGHT' 适配模式下
-
参数
{Graphics} graphics Phaser.Graphics 元素
-
用法示例
// 设置矩形与舞台大小一致const stageBackground =stageBackgroundgraphicsscreenAdaptstage
screenAdapt.setResizeCallback(callback)
resize 回调,每次 canvas 响应 resize 事件时,会运行回调返回横竖屏状态
区别于 onOrientationChange。setResizeCallback 是只要屏幕尺寸发生改变的时候就会响应,相当于 window.resize。而 onOrientationChange 是只有屏幕横竖屏变化的时候才会响应。
-
参数
{Function} callback 回调函数
-
返回值
{String} orientation 横竖屏状态:'portrait'、'landscape'
-
用法示例
// 设置回调const callback = consolescreenAdapt