引擎在更新到2.4版本后,有6种屏幕缩放模式。有新增的,也有改变的(比如noBorder模式)。下面我们详细说一下它们的区别和效果。

新版缩放模式在使用 wing 创建项目的时候可以很方便的选择,非常直观。

您也可以在创建好的项目里随时修改,具体的位置是 index.html 里的 body 部分,如下所示

data-scale-mode="noScale" >

你还可以在项目代码里随时修改

this.stage.scaleMode = egret.StageScaleMode.FIXED_WIDTH;

各种模式的效果示意图

蓝色背景代表舞台尺寸,屏幕适配模式只解决舞台宽高和屏幕尺寸之间的关系。这只实现了完整屏幕适配的第一步,第二步是根据获得的舞台宽高去调整内部元素的位置。使用EUI的自适应流式布局将很容易实现第二步。

showAll 模式

showAll 模式就是保持宽高比,显示全部内容。缩放后应用程序内容向较宽方向填满播放器窗口,另一个方向的两侧可能会不够宽而留有黑边。在此模式下,舞台尺寸(stage.stageWidth,stage.stageHeight)始终等于初始化时外部传入的应用程序内容尺寸。

目前的手机屏幕大部分都是16:9的,所以指定一个设计宽高尺寸,就可以在大部分移动设备有相接近的体验,这时使用 showAll 模式是一个比较简单的适配模式。

noScale 模式

noScale 模式顾名思义,就是不对内容进行任何缩放,保持原始的1:1比例,然后直接把舞台对齐到浏览器的左上角。即使在更改播放器窗口大小时,它仍然保持不变。如果播放器窗口比内容小,则可能进行一些裁切。在此模式下,舞台尺寸(stage.stageWidth,stage.stageHeight)始终跟播放器窗口大小保持一致。

noBorder 模式

noBorder 和之前版本的缩放模式是不一样的,原来的 noBorder 模式现在叫 fixedWidth ,后面会有说明。

noBorder 模式会根据屏幕的尺寸等比缩放内容,缩放后应用程序内容向较窄方向填满播放器窗口,不会有黑边存在,另一个方向的两侧可能会超出播放器窗口而被裁切,只显示中间的部分。

在此模式下,舞台尺寸(stage.stageWidth,stage.stageHeight)始终等于初始化时外部传入的应用程序内容尺寸。

exactFit 模式

exactFit 模式是不保持原始宽高比缩放应用程序内容,缩放后应用程序内容正好填满播放器窗口。简单的说就是不按照原来内容的比例,直接拉伸,暴力填充整个屏幕。在此模式下,舞台尺寸(stage.stageWidth,stage.stageHeight)始终等于初始化时外部传入的应用程序内容尺寸。

fixedWidth 模式

fixedWidth 模式是保持原始宽高比缩放应用程序内容,缩放后应用程序内容在水平和垂直方向都填满播放器窗口,但只保持应用程序内容的原始宽度不变,高度可能会改变。在此模式下,舞台宽度(stage.stageWidth)始终等于初始化时外部传入的应用程序内容宽度。舞台高度(stage.stageHeight)由当前的缩放比例与播放器窗口高度决定。

fixedWidth 就是老版本中的 noBorder 模式,是一般做游戏推荐的模式。宽度固定了,高度随屏幕自适应,可以获得最好的显示效果。

fixedHeight 模式

fixedHeight 模式保持原始宽高比缩放应用程序内容,缩放后应用程序内容在水平和垂直方向都填满播放器窗口,但只保持应用程序内容的原始高度不变,宽度可能会改变。在此模式下,舞台高度(stage.stageHeight)始终等于初始化时外部传入的应用程序内容高度。舞台宽度(stage.stageWidth)由当前的缩放比例与播放器窗口宽度决定。

fixedHeight 是新增的一种缩放模式,和 fixedWidth 相反,高度固定,宽度随屏幕自适应。

在 Egret Engine 2.5.6 中新增了 fixedNarrow 和 fixedWide 两种缩放模式。在新增的屏幕缩放模式下,首先会填满屏幕不留黑边,缩放后可以保持原始的宽高比例不变,等比的缩放程序内容,缩放后应用程序向设定的方向来填满播放器窗口。舞台的高度和宽度由当前的缩放比例与播放器视口决定,可以根据舞台的高度和宽度来自适应布局。这两种缩放模式简单可以理解为fixedWidth和fixedHeight的高级封装,显示效果与那两种模式类似,但是决定缩放比例的方向不是定死的,而是根据内容距离屏幕的边距宽窄来决定。在这两种模式下可以比较方便的布局 UI。

fixedNarrow 模式

保持原始宽高比缩放应用程序内容,缩放后应用程序内容在水平和垂直方向都填满播放器视口,应用程序内容的较窄方向可能会不够宽而填充。

在此模式下,舞台高度(Stage.stageHeight)和舞台宽度(Stage.stageWidth)由当前的缩放比例与播放器视口宽高决定。

fixedWide 模式

保持原始宽高比缩放应用程序内容,缩放后应用程序内容在水平和垂直方向都填满播放器视口,应用程序内容的较宽方向的两侧可能会超出播放器视口而被裁切。

在此模式下,舞台高度(Stage.stageHeight)和舞台宽度(Stage.stageWidth)由当前的缩放比例与播放器视口宽高决定。

旋转模式

通过设置旋转模式,可以在浏览器因为重力感应发生旋转的时候,让内容根据你的要求随着变化。

新版旋转模式在创建项目的时候可以很方便的选择,非常直观。

和缩放模式一样,您也可以在 index.html 里的 body 部分修改,如下所示

data-orientation="auto" >

你还可以在项目代码里随时修改

this.stage.orientation = egret.OrientationMode.AUTO;

旋转模式目前有4种,下面我们就详细的说一下。

效果图的缩放模式均为 showAll

auto 模式

auto 模式很容易理解,不管横屏还是竖屏,都是从上到下的显示内容。

portrait 模式

portrait 模式是始终以竖屏状态下手机的左上角为起点显示内容

landscape 模式

landscape 和 portrait 类似,是始终以竖屏状态下手机的右上角为起点显示内容。

landscapeFlipped 模式

landscapeFlipped 模式比较特殊,横屏状态下和 landscape 起点相同,竖屏状态下起点位置和 landscape 相反,从右上方变成了左下方。

landscape 和 landscapeFlipped 这两种模式,一般用于横屏游戏,但需要提示用户关闭重力感应锁,锁定屏幕方向。简单说就是竖屏状态下玩横屏游戏。

scalemode属性 html,egret 缩放模式和旋转模式说明相关推荐

  1. BasicAnimation:纯Swift的基础动画库,支持 iOS 属性动画:缩放、旋转、平移、背景颜色、透明度、阴影等和弹性动画

    BasicAnimation https://github.com/ZuopanYao/BasicAnimation iOS 属性动画:缩放.旋转.平移.背景颜色.透明度.阴影等,一句代码的事 支持以 ...

  2. scalemode属性 html,flash中的Stage属性...

    Stage 类是一个顶级类,不必使用构造函数即可访问其方法.属性和处理函数. Stage.align 用法 Stage.align = "值" 属性:指示 SWF 文件在播放器或浏 ...

  3. CORDIC算法——圆周系统之旋转模式

    CORDIC(Coordinate Rotation Digital Computer) 算法,这个算法只利用移位和加减运算,就能计算常用三角函数值,如Sin,Cos,Sinh,Cosh等函数. 历史 ...

  4. js对象赋值只保留存在的属性_js对象的创建对象模式和继承模式(上)---构建对象模式...

    ​前言 ECMAScript与其他面向对象语言不同的是,它没有类的概念,因此它的对象也和基于类的语言中的对象有所不同,深入理解js的对象是每个前端工程师的基本素养,本文将就创建对象模式的方面对对象进行 ...

  5. 大屏页面使用transform属性scale进行缩放,高德地图点击事件失效,地图展示模糊

    这里写自定义目录标题 大屏页面使用transform属性scale进行缩放,高德地图点击事件失效,地图展示模糊 1.大屏缩放自适应时使用tansform scale 缩放 1.1.window.res ...

  6. 数字图像处理(9): 图像缩放、图像旋转、图像翻转 和 图像平移

    目录 1 图像缩放- resize() 2 图像旋转- getRotationMatrix2D(), warpAffine() 3 图像翻转- flip() 4 图像平移- warpAffine() ...

  7. 数据增强方法:图片镜像、图片缩放、图片旋转、加噪点

    1.图片镜像 //rotate with mirror #include <iostream> #include <opencv2/opencv.hpp> using name ...

  8. Java使用thumbnailator进行图片压缩缩放裁剪水印旋转处理

    Java使用thumbnailator进行图片压缩缩放裁剪水印旋转处理 一.thumbnailator介绍 二.使用步骤 1.maven的pom.xml引入如下 2.测试代码 一.thumbnaila ...

  9. CORDIC算法详解(一)- CORDIC 算法之圆周系统之旋转模式( Rotation Mode )

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/Pieces_thinking/arti ...

最新文章

  1. SignalR的另类实现技巧
  2. 如何查看某oracle实例下面定义了多少jobs
  3. 深入浅出 kvm qemu libvirt
  4. C#获取网上图片的宽高代码
  5. 投入机器学习的怀抱?先学Python吧
  6. BZOJ 1565: [NOI2009]植物大战僵尸
  7. oracle按特定字符截取字符串_LeetCode基础算法题第159篇:找出由特定字符数组组成的字符串...
  8. SIP协议详解(中文)-5
  9. 使用AD13设计PCB的技巧总结
  10. 现代时尚企业文化宣传短视频pr模板剪辑素材/MOGET图形动态转场模板素材
  11. 学大伟业:2019年物理竞赛学习方法
  12. 君子签亮相2021中国互联网峰会,区块链电子签约赋能26家机构现场签约
  13. 【Linux杂篇】经常登录Linux,用户密码背后的知识了解一下
  14. 怎么样将视频转换成gif?
  15. c语言线性表链路存储结构运用,哈尔滨工业大学2020年考研854计算机基础考试大纲...
  16. RFC系列协议--rfc2373--IP Version 6 Addressing Architecture
  17. 反直觉的三门问题,80%的人都会错?
  18. 微软2013年暑期实习招聘笔试回忆[已补充完整]
  19. selenium网页自动登录、打卡(一)
  20. flash动画作品《童话》mtv_Pelephone翻唱版

热门文章

  1. jmeter线程组之二 --浪涌测试
  2. zabbix监控邮箱报警
  3. QtApplets-Q_ASSERT使用
  4. SharePoint学习总结
  5. Java进阶——Java中的Atomic原子特性
  6. Mybatis架构解析
  7. 【笔试面试】腾讯WXG 面委会面复盘总结 --一次深刻的教训
  8. 日本PSE认证的开关电源适配器
  9. c语言 random安全函数,random函数-关于C语言的函数问题请问,randomize()random这两 爱问知识人...
  10. phantomjs 抓取html,phantomjs抓取完整网页