scalemode属性 html,Laya屏幕适配及尺寸属性
一、各种尺寸属性
2.Laya.Stage
/**设计宽度(初始化时设置的宽度Laya.init(width,height))*/
public var designWidth:Number = 0;
/**设计高度(初始化时设置的高度Laya.init(width,height))*/
public var designHeight:Number = 0;
override public function set width(value:Number):void {
this.designWidth = value;
super.width = value;
Laya.timer.callLater(this, _changeCanvasSize);
}
override public function set height(value:Number):void {
this.designHeight = value;
super.height = value;
Laya.timer.callLater(this, _changeCanvasSize);
}
/**当前视窗由缩放模式导致的 X 轴缩放系数。*/
public function get clientScaleX():Number {
return _transform ? _transform.getScaleX() : 1;
}
/**当前视窗由缩放模式导致的 Y 轴缩放系数。*/
public function get clientScaleY():Number {
return _transform ? _transform.getScaleY() : 1;
}
3.html canvas
style="position: absolute; left: 0px; top: 0px; background: none;
transform-origin: 0px 0px 0px;
transform: matrix(0.5, 0, 0, 0.5, 0, 96);">
下面来做个测试
Laya.init(1136, 640, Laya.WebGL);
Laya.stage.screenMode = Stage.SCREEN_HORIZONTAL;
Laya.stage.alignH = Stage.ALIGN_CENTER;
Laya.stage.alignV = Stage.ALIGN_MIDDLE;
Laya.stage.scaleMode = Stage.SCALE_SHOWALL;
...
Laya.stage.on(Laya.Event.RESIZE, this, this.resize);
private resize() {
console.log("Browser.width",Laya.Browser.width);
console.log("Browser.height",Laya.Browser.height);
console.log("stage.width",Laya.stage.width);
console.log("stage.height",Laya.stage.height);
console.log("html canvas width",Laya.Render.canvas.getAttribute("width"));
console.log("html canvas height",Laya.Render.canvas.getAttribute("height"));
}
Browser.width 2048
Browser.height 1536
stage.width 1136
stage.height 640
html canvas width 2048
html canvas height 1154
说明:因为Laya.init(1136, 640, Laya.WebGL);所以stage.width,height就是这个宽高。然后当前是在IPAD屏幕下,因为用了SCALE_SHOWALL模式,画面上下端出现了白条。所以能看到Browser.height 是比html canvas height 要高一些。然后切换到IPHONE5屏幕时,发现这三者是一致的。
二、屏幕适配
先看一下官方例子中的舞台尺寸和矩形位置大小
(function()
{
Laya.init(550, 400);
Laya.stage.scaleMode = Stage.SCALE_NOSCALE;
Laya.stage.bgColor = "#232628";
createCantralRect();
})();
function createCantralRect()
{
rect = new Sprite();
rect.graphics.drawRect(-100, -100, 200, 200, "gray");
Laya.stage.addChild(rect);
updateRectPos();
}
function updateRectPos()
{
rect.x = Laya.stage.width / 2;
rect.y = Laya.stage.height / 2;
}
在一个sprite中,以0,0为中心,绘制了200,200大小的矩形,然后添加到舞台中心。舞台初始化大小是550,400。
那么在chrome中运行例子,按F12后,切换手机尺寸,通过观察layaCanvas的width和height,就能看到不同模式下的区别(下面以竖屏为例,横屏同样规则)
style="position: absolute; left: 0px; top: 0px;
background: rgb(35, 38, 40);
transform-origin: 0px 0px 0px;
transform: matrix(1, 0, 0, 1, 0, 0);"
>
Laya.stage.scaleMode = Stage.SCALE_NOSCALE;
应用保持设计宽高不变,不缩放不变型,stage的宽高等于设计宽高。
整个应用程序的大小固定,因此,即使播放器窗口的大小更改,它也会保持不变。如果播放器窗口比内容小,则可能进行一些裁切。
测试结果:
layaCanvas的width和height就没变过,一直是550,400。屏幕小时会出现裁切,至于矩形,则一直保持在中央。
Paste_Image.png
Laya.stage.scaleMode = Stage.SCALE_SHOWALL;
应用显示全部内容,按照最小比率缩放,等比缩放不变型,一边可能会留空白,stage的宽高等于设计宽高
整个应用程序在指定区域中可见,且不发生扭曲,同时保持应用程序的原始高宽比。应用程序的两侧可能会显示边框。
测试结果:
layaCanvas的width和height一直根据屏幕变化。比如IPHONE6的375,667尺寸下,宽度就变成最大值375,而高度因为要保持550,440的比例,也等比例变成273了。
这就导致竖屏模式下,canvas下面会出现很多空白边框
Paste_Image.png
应用根据屏幕大小铺满全屏,非等比缩放会变型,stage的宽高等于设计宽高。
整个应用程序在指定区域中可见,但不尝试保持原始高宽比。可能会发生扭曲,应用程序可能会拉伸或压缩显示。
Paste_Image.png
测试结果:
layaCanvas的width和height没变过,一直是550,400。但是矩形已经变形了,切换尺寸时,transform:matrix一直在变化,应该是直接拉伸了
应用按照最大比率缩放显示,宽或高方向会显示一部分,等比缩放不变型,stage的宽高等于设计宽高。
整个应用程序填满指定区域,不发生扭曲,但有可能进行一些裁切,同时保持应用程序的原始高宽比。
Paste_Image.png
测试结果:
layaCanvas的width和height没变过,一直是550,400。边缘被填满了,不过矩形被裁切。
/**应用保持设计宽高不变,不缩放不变型,stage的宽高等于屏幕宽高。*/
public static const SCALE_FULL:String = "full";
/**应用保持设计宽度不变,高度根据屏幕比缩放,stage的宽度等于设计高度,高度根据屏幕比率大小而变化*/
public static const SCALE_FIXED_WIDTH:String = "fixedwidth";
/**应用保持设计高度不变,宽度根据屏幕比缩放,stage的高度等于设计宽度,宽度根据屏幕比率大小而变化*/
public static const SCALE_FIXED_HEIGHT:String = "fixedheight";
综上,一般为了显示全部内容,我们还是常用SCALE_SHOWALL这种模式。
六、横屏竖屏
screenMode可以改变横屏竖屏
七、alignH,alignV
横向对齐分为左中右,纵向对齐分为上中下。
Laya.stage.alignH = Stage.ALIGN_CENTER;
//Laya.stage.alignV = Stage.ALIGN_MIDDLE;
Laya.stage.alignV = Stage.ALIGN_BOTTOM;
这个经过测试,layaCanvas的width和height也没变过,matrix一直在变。
Laya.stage.alignV = Stage.ALIGN_BOTTOM
END
scalemode属性 html,Laya屏幕适配及尺寸属性相关推荐
- @media 屏幕适配常用尺寸
1. 常见pc端屏幕尺寸如下,红色为常见分辨率尺寸: 分辨率 比例 设备尺寸 1024*500 8.9寸 1024*768 4:3 10.4寸.12.1寸.14.1寸.15寸 128 ...
- 如何用一个IPad屏幕适配各尺寸的IPhone
先声明两个宏:SCREEN_WIDTH_NEW 和 SCREEN_HEIGHT_NEW 这两个宏要写在工程的任何一个文件都能访问的位置 //原有设备实际尺寸 #define SCREEN_WIDTH_ ...
- Unity中的UGUI屏幕适配
本文分享Unity中的UGUI屏幕适配 屏幕适配一直是一个老生常谈的问题, 虽然只是项目一开始的时候会用到, 但是还是有很多东西需要学习和了解, 今天给大家分享下一些个人的学习和总结. 各种坐标 屏幕 ...
- 【Android 应用开发】Android屏幕适配解析 - 详解像素,设备独立像素,归一化密度,精确密度及各种资源对应的尺寸密度分辨率适配问题
. 作者 :万境绝尘 转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/19698511 . 最近遇到了一系列的屏幕适配问题, 以及 ...
- Android 屏幕尺寸、屏幕分辨率(px)、屏幕像素密度(dpi)、密度无关像素(dp/dip)、屏幕适配
1. dp , dpi , px 关系 (假设已经熟悉了基本概念,也可以参考最后的链接) 2. 运行时dp 如何转换成 px 3. 使用dp 和 px 设计结果比较 参考: Android屏幕适 ...
- 2021年最全Android屏幕适配的度量单位px dp(dip) ppi dpi sp pt的区别(最详细,屏幕尺寸,屏幕分辨率,屏幕兼容,屏幕适配)
0 前言 快乐李同学最新在学习Android屏幕适配相关的知识点,其中涉及到了很多Android屏幕适配相关概念和度量单位,但是快乐李同学掌握的相关知识不牢固,于是决定写出这两篇文章对这方面的知识点做 ...
- 屏幕适配(刘海屏、18:9屏幕尺寸、隐藏SystemUI)
刘海屏 萨瑞刘海屏API接口 <meta-data android:name="android.compatible_notch" android:value=&quo ...
- Android获取屏幕尺寸,屏幕适配
获取屏幕尺寸: DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics( ...
- Android 屏幕适配攻略(二)单位dp与px来表示控件的尺寸
Android 屏幕适配攻略(二)单位dp与px来表示控件的尺寸 在安卓中,将屏幕密度分为了五类 屏幕密度 对应的标签 对应的像素 120dip ldpi 1dp= 0.75px 160dip mdp ...
最新文章
- Co-occurrence网络图在R中的实现
- oracle 数据语句优化,oracle 查询语句优化录
- 怎么提高es服务器的性能,es集群服务器配置规则是怎样的?什么是es集群
- SpringCloud-Eureka-服务注册是如何发起的
- java数据库配置_java--数据库(文件配置连接,自定义连接池)
- mysql模糊查询LIKE、REGEXP(正则)的详解(在可视化工具navicat下)
- 使用spring框架时,使用xml还是注解
- 终于有人把 5G 和边缘计算的关系说清楚了! | 技术头条
- 2025年全球5G室内无线市值将达5.09亿美元
- 物资管理信息系统4 -- 修改密码界面
- matlab 生成噪声信号
- [经验分享]大锤教你如何十倍速读一本书
- easyui-filebox文件上传格式
- winxp连接不到HP LaserJet Pro M128fp MFP解决方法
- 海外媒体传播必做的三大社交媒体平台
- html中背景不平铺怎么写,css怎么让背景图片不平铺?
- if条件句和switch条件句
- Insets动画 - 安卓R
- 寻找苹果(Mac OS)分区的数据恢复软件经历
- SQL 查找是否“存在“,别再count了