let c = this.node.getComponent(cc.Canvas);
c.fitHeight = true;
c.fitWidth = false;

let h = 960 * cc.winSize.height / cc.winSize.width;

c.designResolution = new cc.Size(960, h);
this.node.setContentSize(960, h);

// 适配解决方案
let _canvas = cc.Canvas.instance;
// 设计分辨率比
let _rateR = _canvas.designResolution.height/_canvas.designResolution.width;
// 显示分辨率比
let _rateV = cc.winSize.height/cc.winSize.width;
console.log("winSize: rateR: "+_rateR+" rateV: "+_rateV);
if (_rateV > _rateR)
{
_canvas.fitHeight = false;
_canvas.fitWidth = true;
console.log("winSize: fitWidth");
}
else
{
_canvas.fitHeight = true;
_canvas.fitWidth = false;
console.log("winSize: fitHeight");
}

三点注意事项:

1.主域和子域的设计分辨率和适配方案要相同

2.sharedCanvas 不要设置宽高

3.承载sharedCanvas 的sprite要根据实际分辨率动态调整

Cocos Creator 动态设置Canvas的宽度与高度,更改适配的更多相关文章

  1. jQuery获取或设置元素的宽度和高度

    jQuery获取或设置元素的宽度和高度: 可使用以下3种方法: 1,jQuery width() 和 height() 方法: 2,innerWidth() 和 innerHeight() 方法: 3 ...

  2. Ueditor 自动设置上传图片的宽度或高度

    Uedior在上传图片的生活,需要自动设置上传图片的宽度或高度属性.该方法只能用于多图上传组件,单图上传无法使用. 该方法基于 ueditor 1.4.3 版本制作: 1.添加属性字段,在config ...

  3. 关于chart.js 设置canvas的宽度为父级元素的宽度的百分百 以及 X轴上面刻度数据太多如何处理

    今天在做一个数据统计的界面的时候,需要做折线统计图,在网上找了一圈发现数据统计的插件还是不少的,本着轻量级的的原则选择了Chart.js,后来在做的过程中便遇到两个问题,以此记录下来,和刚刚接触前端的 ...

  4. 如何使用代码动态的获取和设置ImageView的宽度和高度?

    http://blog.csdn.net/wulianghuan/article/details/8644144 国内某金融企业的一道面试题:如何在代码中获得一个ImageVIew的高度和宽度? 相信 ...

  5. imageView--转-如何代码动态的获取和设置ImageView的宽度和高度?

    11- 12- 13-android获取图片原始长宽; ========= 11--国内某金融企业的一道面试题:如何在代码中获得一个ImageVIew的高度和宽度? 相信很大一部分人,会直接想到用im ...

  6. Cocos Creator 动态改变sprite图片

    首先将存放图片最外层文件夹命名为resources changeBj: function(){ var url = 'globalUI/video/gVideoPlayClick'; var _thi ...

  7. cocos creator 动态创建精灵

    var node = new cc.Node();var sprite = node.addComponent(cc.Sprite);sprite.spriteFrame = new cc.Sprit ...

  8. android 动态设置Framelayout,view,imageView,Layout高度

    直接:测试可以 Framelayout.getLayoutParams().width=600;Framelayout.getLayoutParams().height=400; 如:view,ima ...

  9. 教你使用Cocos Creator制作国旗头像生成器,附源码!

    关注「编程小王子」公众号回复[头像生成器]获得源码! 下面我重点介绍一下Cocos Creator H5头像生成的实现方法: 获取手机相册图片 在 Cocos Creator 中加载相册图片 Coco ...

随机推荐

  1. ASP.NET 多环境下配置文件web.config的灵活配置

    调试,发布Asp.net程序的时候,开发环境和发布环境的Web.Config往往不同,比如connectionstring等.如果常常有调试,发布的需求,就需要常常修改web.config文件,这往往 ...

  2. Matlab将多项式的系数设为0

    符号运算时有些多项式的系数值接近于0,像这样 fun = 3.5753839759325595498222646101085e-49*x + 1.836709923159824231201150839 ...

  3. drf视图组件、认证组件

    视图组件 1.基本视图 url(r'^publish/$', views.PublishView.as_view()), url(r'^publish/(?P<pk>\d+)/$', vi ...

  4. Arrange the Bulls [POJ2441] [状压DP]

    题意 n头牛,m个房间,每头牛有自己喜欢的房间,问每头牛都住进自己喜欢的房间有多少种分配方法? Input In the first line of input contains two intege ...

  5. Lock锁方式解决线程安全问题

    在JDK5.0之后新增加了一种更强大的线程同步机制---通过显示定义同步锁来实现线程同步解决线程安全问题.同步锁使用Lock对象充当. java.util.concurrent.locks.lock接 ...

  6. Windows中杀死占用某个端口的进程(转)

    最近写项目,总是出现端口被占用的问题,原来傻傻的把电脑重启一下,终于有一天受不了了,想要想办法解决.刚开始从网上找了好多教程,发现不行.开始自己尝试,终于,成功的将占用端口的进程杀掉.在此记录下过程( ...

  7. gulp前端构建化工具,帮你搞定不同浏览器的兼容性写法问题

    .相信所有的前端攻城狮.听到浏览器兼容性问题都深有体会. 浏览器兼容性问题,无非就是因为浏览器内核不同,浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.还有就是根据浏览器的版本不同,所兼 ...

  8. linux下压缩解压缩命令

    zip/gzip 命令 linux zip命令参数列表:   -a 将文件转成ASCII模式 -F 尝试修复损坏的压缩文件 -h 显示帮助界面 -m 将文件压缩之后,删除源文件   -n 特定字符串 ...

  9. jquery弹窗插件layer:layer.layui.com

    这两天在做抽奖转盘功能,浏览器自带的alert弹出框太low,本人又基本不会前端, 于是借鉴前人用fancybox插件做的效果 结果没看懂其写法(http://www.0101shop.com/goo ...

  10. HDU 6311 Cover (无向图最小路径覆盖)

    HDU 6311 Cover (无向图最小路径覆盖) Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/ ...