PIXI屏幕自适应以及强制横屏
canvas屏幕适配可以用css样式自适应, 可以设置transform旋转角度和transfrom-origin:center以中心点旋转位置以及宽高width和height来实现对canvas的适应,这种适配可适合大部分游戏引擎(没做测试只是听说),但是对pixi却会导致事件响应错乱,css适应代码如下:
cssResize(){
let [canvas,stage] = [this.application.view,this.application.stage];
let [width,height] = [document.documentElement.clientWidth,document.documentElement.clientHeight];
let style = "";
if(width >= height){
style = `width:${width}px;
height:${height}px;
transform:rotate(0deg);
transform-origin:center;`;
}
else{
style = `width:${height}px;
height:${width}px;
transform:rotate(90deg);
transform-origin:${width/2}px ${width/2}px;`;
}
canvas.style = style;
}
由于pixijs事件问题没有解决,故想方设法选择pixijs自适应的另一种解决方法:
以铺满宽或高为适配,计算出宽高比率,假如以宽度铺满为例,let ratio = canvas.width/clientWidth;height = canvas.height*ratio;下面是强制横屏的适配方法(注意这个是onresize的回调):
rendererResize(){
let stage = this.application.stage;
let [width,height] = [document.documentElement.clientWidth,document.documentElement.clientHeight];
let ratio = 1;
if(width > this.stageWidth || height > this.stageHeight){
width = this.stageWidth;
height = this.stageHeight;
}
if(width >= height){
stage.rotation = 0;
stage.x = 0;
ratio = width/this.stageWidth;
}
else{
stage.rotation = Math.PI/2;
stage.x = width;
ratio = height/this.stageWidth;
}
this.application.view.style = `width:${width}px;height:${height}px;`;
stage.scale.set(ratio);
this.application.renderer.resize(width,height);
}
旋转舞台,同时更改canvas的style.width和style.height,即可实现强制横屏。
这只是自己写的一个简单的适配。
PIXI屏幕自适应以及强制横屏的更多相关文章
- iOS 9 强制横屏
首先在plist 文件中 Supported interface orientations 选项 只留下一个 portrait 屏幕强制横屏 使用以下代码 self.navigationControl ...
- iOS强制横屏
由于项目需求,需要整个项目页面都是竖屏,唯独一个折线图页面强制性横屏显示. 网上逛了许多帖子,也看了好多大神的提供的方法,都没能够实现本屌丝想要的效果.没办法自己研究自己搞,借鉴各路大神的思路,最后费 ...
- 【转】从viewController讲到强制横屏,附IOS5强制横屏的有效办法
文字罗嗦,篇幅较长,只需营养可直接看红字部分. 一个viewController的初始化大概涉及到如下几个方法的调用: initWithNibName:bundle: viewDidLoad view ...
- iOS设置某个界面强制横屏,进入就横屏
最近有一个项目,例如:A界面跳转到B界面,A界面是竖屏的,B界面进入就要横屏. 花了半天的时间在网上搜索解决方案,有些论坛的大牛也就贴两行代码,具体实现也没有,对我们这种菜鸟造成一万点真实伤害.为了避 ...
- 【Unity3D插件】NGUI屏幕自适应(转)
屏幕自适应 NGUI可以比较方便的实现屏幕自适应,但是它的官方教程里面针对这个问题没有详细的教程,所以可能在实现的时候会走比较多的弯路.以下是我在开发过程中找到的一个比较方便的实现方法. 主要组件 1 ...
- Css实现手机端页面强制横屏的方法示例
样式 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 @media screen ...
- css中添加屏幕自适应方法(rem)
css中添加屏幕自适应方法(rem) 只需要在公共css文件中添加下面代码:设计稿以750px,基础字体为20px为例,兼容性高,使用过程中px转化为rem即可 /*竖屏*/ @media scree ...
- 移动端web如何让页面强制横屏
前段时间公司针对直播服务做了改版升级,APP客户端支持了横屏和竖屏推流/播放. 在这个背景下,虽然触屏未做改动,但本着敏而好学,不断探索的精神,针对如何让web页面强制横屏显示,做了一下试验研究. 首 ...
- [Unity3D]NGUI用Sprite动画和屏幕自适应做游戏开始场景
我们在玩任何一款手游产品时,都是先上来个logo界面,游戏欢迎界面等,这就意味着我们要做一款游戏需要多个场景,场景之间来回切换实现游戏逻辑,unity也不例外,所以从本篇开始将会介绍如何搭建多个场景, ...
随机推荐
- 【Python开发】python读写文件,和设置文件的字符编码比如utf-8
一. python打开文件代码如下: f = open("d:\test.txt", "w") 说明: 第一个参数是文件名称,包括路径: 第二个参数是打开的模式 ...
- Object的构造函数方法
参考自MDN Object 构造函数的方法 1.Object.assign() 将可枚举属性的值从一个或多个源对象复制到目标对象. 2.Object.create() 创建一个新对象,继承现有对象的构 ...
- kibana 查询例子
1.数字比较和布尔查询 account_number:< AND balance:>
- FTL2
ABSTACT 1.NAND flash memory (主要缺点): (1)partial page updates (2)general-purpose cache usually does n ...
- mac 上iterm终端连接Linux服务后 中文为乱码问题
https://www.jianshu.com/p/8b00f71b2177 编辑 ssh 配置vim /etc/ssh/ssh_config修改如下:Host *#SendEnv LANG LC_* ...
- cp 命令
cp - copy files and directories 用法: cp [OPTION] source dest DESCRIPTION Copy SOURCE to DEST, or mult ...
- java 统计素数个数问题
题目:判断101-200之间有多少个素数,并输出所有素数. 程序分析:判断素数的方法:用一个数分别去除2到sqrt(这个数),如果能被整除,则表明此数不是素数,反之是素数. package Study ...
- [转帖]linux中systemctl详细理解及常用命令
linux中systemctl详细理解及常用命令 2019年06月28日 16:16:52 思维的深度 阅读数 30 https://blog.csdn.net/skh2015java/article ...
- IDEA Git回退到指定历史版本
1.找到要回退的版本号(右击项目--> Git --> Show History -->选中要回退的版本-->Copy Revision Number): 2.打开idea的T ...
- table表格的无缝循环
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...