Giter Club home page Giter Club logo

createjsview's Introduction

CreateJSView

基于CreateJS框架的H5轻互动游戏的横屏适配插件

实现原理

前往阅读文章《H5游戏开发:横屏适配》

API

1. createjs.view.CONTAIN

内置的 CONTAIN 模式

2. createjs.view.COVER

内置的 COVER 模式

3. createjs.view.FILL

内置的 FILL 模式

4. createjs.view.FIXED_WIDTH

内置的 FIXED_WIDTH 模式

5. createjs.view.FIXED_HEIGHT

内置的 FIXED_HEIGHT 模式

6. createjs.view.setViewMode

createjs.view.setViewMode( stage, designWidth, designHeight, mode, resizeCallback )

为舞台设置合适的缩放适配模式,用于在横屏游戏场景进行横屏适配。

参数:

  • stage {obj} 舞台对象
  • designWidth {number} 设计稿宽度
  • designHeight {number} 设计稿高度
  • mode {obj} 内置五种缩放适配模式之一,如createjs.view.CONTAIN
  • resizeCallback resize回调函数

使用示例:

// 例如,缩放适配为CONTAIN模式
createjs.view.setViewMode(stage, designWidth, designHeight, createjs.view.CONTAIN, function(){
  console.log("resize"); //做任何你所需要的游戏内容层面的适配操作
})

7. createjs.view.adjustFullSize

createjs.view.adjustFullSize( item )

用于重绘制那些以舞台区域宽高大小作为其大小设置的参考标准的全屏类元素,避免留空情况。

参数:

  • item {displayObject} 需要被重绘制的对象

使用示例:

// shape.graphics 是依据舞台大小为标准的全屏图形
shape.graphics.beginFill("#000000").drawRect(0, 0, self.designWidth, self.designHeight);

// 加入重绘制处理
createjs.view.adjustFullSize(shape.graphics);

8. createjs.view.adjustPosition

createjs.view.adjustPosition( item )

用于重定位舞台贴边元素,避免被裁剪的情况。

参数:

  • item {displayObject} 需要被重定位的对象

使用示例:

// 首先,设置 top 、right 、bottom 、left 属性,以确定它的贴边位置
music1.right = 0;
music1.top = 0;

music2.left = 100;
music2.top = 100;

music3.right = 109;
music3.bottom = 109;

music4.left = 0;
music4.bottom = 0;

// 最后,把对象加入重定位处理
createjs.view.adjustPosition(music1, music2, music3, music4);

许可

MIT

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.