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屏幕自适应以及强制横屏的更多相关文章

  1. iOS 9 强制横屏

    首先在plist 文件中 Supported interface orientations 选项 只留下一个 portrait 屏幕强制横屏 使用以下代码 self.navigationControl ...

  2. iOS强制横屏

    由于项目需求,需要整个项目页面都是竖屏,唯独一个折线图页面强制性横屏显示. 网上逛了许多帖子,也看了好多大神的提供的方法,都没能够实现本屌丝想要的效果.没办法自己研究自己搞,借鉴各路大神的思路,最后费 ...

  3. 【转】从viewController讲到强制横屏,附IOS5强制横屏的有效办法

    文字罗嗦,篇幅较长,只需营养可直接看红字部分. 一个viewController的初始化大概涉及到如下几个方法的调用: initWithNibName:bundle: viewDidLoad view ...

  4. iOS设置某个界面强制横屏,进入就横屏

    最近有一个项目,例如:A界面跳转到B界面,A界面是竖屏的,B界面进入就要横屏. 花了半天的时间在网上搜索解决方案,有些论坛的大牛也就贴两行代码,具体实现也没有,对我们这种菜鸟造成一万点真实伤害.为了避 ...

  5. 【Unity3D插件】NGUI屏幕自适应(转)

    屏幕自适应 NGUI可以比较方便的实现屏幕自适应,但是它的官方教程里面针对这个问题没有详细的教程,所以可能在实现的时候会走比较多的弯路.以下是我在开发过程中找到的一个比较方便的实现方法. 主要组件 1 ...

  6. 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 ...

  7. css中添加屏幕自适应方法(rem)

    css中添加屏幕自适应方法(rem) 只需要在公共css文件中添加下面代码:设计稿以750px,基础字体为20px为例,兼容性高,使用过程中px转化为rem即可 /*竖屏*/ @media scree ...

  8. 移动端web如何让页面强制横屏

    前段时间公司针对直播服务做了改版升级,APP客户端支持了横屏和竖屏推流/播放. 在这个背景下,虽然触屏未做改动,但本着敏而好学,不断探索的精神,针对如何让web页面强制横屏显示,做了一下试验研究. 首 ...

  9. [Unity3D]NGUI用Sprite动画和屏幕自适应做游戏开始场景

    我们在玩任何一款手游产品时,都是先上来个logo界面,游戏欢迎界面等,这就意味着我们要做一款游戏需要多个场景,场景之间来回切换实现游戏逻辑,unity也不例外,所以从本篇开始将会介绍如何搭建多个场景, ...

随机推荐

  1. 华为HCNA乱学Round 9:VRRP

  2. proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    1.nginx 配置模板 server { listen ; client_max_body_size 512M; proxy_set_header Connection ""; ...

  3. Java中的异常处理try catch(第八周课堂示例总结)

    异常处理 使用Java异常处理机制: 把可能会发生错误的代码放进try语句块中. 当程序检测到出现了一个错误时会抛出一个异常对象. 异常处理代码会捕获并处理这个错误. catch语句块中的代码用于处理 ...

  4. 2019中山纪念中学夏令营-Day4[JZOJ]

    Begin (题目的排序方式:难易程度) 什么是对拍: 对拍是一种在写完程序后,验证自己程序是不是正解的比较方便的方法. 实现过程: 对同一道题,再打一个暴力程序,然后用一些大数据等跑暴力程序来进行验 ...

  5. HTML5-placeholder属性

    HTML 5<input> placeholder属性 placeholder属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示,并会在字段获得焦点时消失. ...

  6. loj 6043「雅礼集训 2017 Day7」蛐蛐国的修墙方案

    loj 爆搜? 爆搜! 先分析一下,因为我们给出的是一个排列,然后让\(i\)给\(p_i\)连边,那么我们一定会得到若干个环,最后要使得所有点度数为1,也就是这些环有完备匹配,那么最后一定全是偶环. ...

  7. 26 Python模块之paramiko

    paramiko模块提供了ssh及sft进行远程登录服务器执行命令和上传下载文件的功能.这是一个第三方的软件包,使用之前需要安装. 1. 基于用户名和密码的sshclient方式登录 #创建一个ssh ...

  8. KPI VS OKR

    近几年,OKR 这个词越来越流行了. 在硅谷,Google.Facebook.Amazon.LinkedIn 等公司都陆续成功落地了 OKR,国内的互联网巨头们,腾讯.百度.滴滴.小米等互联网公司也都 ...

  9. JavaScript学习基础

    基本语法    JavaScript语法和Java语言类似,每个语句以 : 结束,语句块用 {...}包起来.JavaScript并不强制要求在每个语句的结尾加: ,但是建议都加上,不给自己找麻烦.  ...

  10. Jquery.serializeArray()可看表单提交内容