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也不例外,所以从本篇开始将会介绍如何搭建多个场景, ...
随机推荐
- pigcms研究
{s:5:"price";s:2:"20";s:3:"num";i:2;s:4:"name";s:21:"紫薯 ...
- 1 基于梯度的攻击——FGSM
FGSM原论文地址:https://arxiv.org/abs/1412.6572 1.FGSM的原理 FGSM的全称是Fast Gradient Sign Method(快速梯度下降法),在白盒环境 ...
- HttpClient常用方法总结
1.HttpPost发送表单请求 String url = ""; HttpPost httpPost = new HttpPost(url); List<NameValue ...
- PTA(Advanced Level)1046.Shortest Distance
The task is really simple: given N exits on a highway which forms a simple cycle, you are supposed t ...
- HDU3336 Count the string(kmp
It is well known that AekdyCoin is good at string problems as well as number theory problems. When g ...
- [LGP4859,...] 一类奇怪的容斥套DP
漫山遍野都是fake的光影. 题目 [LGP4859] 已经没有什么好害怕的了 给定两个长度为n的数组a和b,将a中元素与b中元素配对,求满足ai>bj的配对(i,j)个数减去满足ai<b ...
- # 组合数学-组合数+lacus定理
目录 数论-组合数+lacus定理 组合数计算 lacus定理-大组合数取模 数论-组合数+lacus定理 组合数计算 为避免爆long long,\(20!\)就达到了long long 的范围,采 ...
- php aes加解密,mcrypt_encrypt 和openssl_encrypt
php7.1以下版本使用 /* * mcrypt_encrypt 加密 * php7.1开始被丢弃 可以使用openssl_encrypt * */ function aes_encrypt($con ...
- jQuery导出word文档
DDoc.js function DDoc() { this.data = []; this.relationData = []; this.listCount = 0; this.counter = ...
- 2019最新的IDEA的激活方式!!!
第一步: 安装IDEAhttps://www.jetbrains.com/idea/ 选择要下载的版本Ultimate 第二步: 下载破解补丁链接:https://pan.baidu.com/s/1j ...