createjs-screen-adaptation

简介

CreateJS 游戏渲染引擎的横竖屏适配插件

安装

npm install 'createjs-screen-adaptation'

基本使用

// 引入 Createjs
import createjs from 'createjs'
// 引入 Createjs 适配插件
import ScreenAdaptation from 'createjs-screen-adaptation'

const $canvas = document.getElementById(canvasId)
const stage = new createjs.Stage($canvas)
// 初始化
const screenAdapt = new ScreenAdaptation(stage)
// 设置参数，并自动适配
screenAdapt.set({
  designWidth: 750, // 一般设为设计稿基准的宽度，默认 auto 为动态获取屏幕宽度
  designHeight: 1334, // 一般设为设计稿基准的高度，默认 auto 为动态获取屏幕宽度
  scaleMode: 'FIXED_HEIGHT', // 适配模式，可选 'SHOW_ALL'、'EXACT_FIT'、'NO_BORDER'、'FIXED_WIDTH'、'FIXED_HEIGHT'
  screenMode: 'landscape', // 游戏呈现形式，可选 'portrait'、'landscape'
  alignH: true, // canvas是否垂直居中
  alignV: true, // canvas是否水平居中
  onOrientationChange: orientation => {} // 屏幕旋转响应回调
})

其他 API

screenAdapt.align(displayObject，position)

相对定位对齐，是横竖屏适配方案中对齐策略的应用，会动态地根据适配后的 Canvas 自动更新相对定位。

• 参数

  {DisplayObject} displayObject 是 Phaser.DisplayObject 元素

  {Object} position 位置对象，可选属性：top、left、right、bottom，以像素为单位；verticalCenter、horizontalCenter 属于Boolean类型

• 用法示例

  // 设置音乐图标距离右上角各上右30px
  const musicIcon = new createjs.Sprite(spriteSheetMusic)
  const musicIconPos = {
    top: 30,
    right: 30
  }
  screenAdapt.align(musicIcon, musicIconPos)
  stage.addChild(musicIcon)
   
  // 设置文本舞台水平垂直居中
  const text = new createjs.Text('Hello World', '20px Arial', '#ffffff')
  const textPos = {
    horizontalCenter: true,
    verticalCenter: true
  }
  screenAdapt.align(text, textPos)
  stage.addChild(text)

screenAdapt.fit(graphics)

适配舞台大小，自动铺满，始终保持 graphics 元素与 canvas 一致大小，常用于 'FIXED_WIDTH'、'FIXED_HEIGHT' 适配模式下

• 参数

  {Graphics} graphics Phaser.Graphics 元素

• 用法示例

  // 设置矩形与舞台大小一致
  const stageBackground = new createjs.Shape()
  stageBackground.graphics.beginFill("#000000").drawRect(0, 0, stage.stageWidth, stage.stageHeight)
   
  screenAdapt.fit(stageBackground.graphics)
  stage.addChild(stageBackground)

screenAdapt.setResizeCallback(callback)

resize 回调，每次 canvas 响应 resize 事件时，会运行回调返回横竖屏状态

区别于 onOrientationChange。setResizeCallback 是只要屏幕尺寸发生改变的时候就会响应，相当于 window.resize。而 onOrientationChange 是只有屏幕横竖屏变化的时候才会响应。

• 参数

  {Function} callback 回调函数

• 返回值

  {String} orientation 横竖屏状态：'portrait'、'landscape'

• 用法示例

  // 设置回调
  const callback = orientation => console.log('callback', orientation)
  screenAdapt.setResizeCallback(callback)