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. android setCompoundDrawables和setCompoundDrawablesWithIntrinsicBounds区别

    手工设置文本与图片相对位置时,常用到如下方法: setCompoundDrawables(left, top, right, bottom) setCompoundDrawablesWithIntri ...

  2. mysql中的数据类型enum和set

    mysql中的字符串数据类型set,enum 原文网址: https://www.cnblogs.com/benbenzhu/p/5604598.html 1.enum 单选字符串数据类型,适合存储表 ...

  3. CodeForces 528D Fuzzy Search 多项式 FFT

    原文链接http://www.cnblogs.com/zhouzhendong/p/8782849.html 题目传送门 - CodeForces 528D 题意 给你两个串$A,B(|A|\geq| ...

  4. Wxpython入门

    Wxpython入门 api文档以及中文教程: https://pan.baidu.com/s/1TDTgHg9Mwc74ODQy68YnlQ 提取码:354n 入门示例 frame=wx.Frame ...

  5. vscode断点调试工程化服务端文件

    一.创建express应用我们使用express-generator创建一个新的express应用.1.全局安装express-generator // 安装 sudo npm install exp ...

  6. luo3372线段树模板的分块做法

    题目大意 请你维护一个有n个元素的整数序列,要求支持区间查询&区间修改 对于100%的数据,\(1<=n<=10^5\) 分析 正常做法是线段树维护区间修改.区间查询,今天我要讲的 ...

  7. VIM编辑器用法

    Vim (vim + filename有则进入文件,无则创建并进入文件)>进入编辑模式,包括命令模式.插入模式.末行模式,具体命令: 按esc进入命令模式 按'shift' + ':'进入末行模 ...

  8. NOIP-无线网路发射器选址

    题目描述 随着智能手机的日益普及,人们对无线网的需求日益增大.某城市决定对城市内的公共场所覆盖无线网. 假设该城市的布局为由严格平行的129条东西向街道和129条南北向街道所形成的网格状,并且相邻的平 ...

  9. 王燕 201771010126《面向对象程序设计(java)》第一周学习总结

    王燕 201771010126<面向对象程序设计(java)>第一周学习总结 王燕 201771010126<面向对象程序设计(java)>第一周学习总结 第一部分:课程准备部 ...

  10. __x__(25)0907第四天__ overflow 父元素对溢出内容的处理

    overflow    父元素对于溢出内容的处理 visible;    默认值,对于溢出内容,在父元素之外显示. hidden;    对于溢出内容,进行隐藏,不显示. scroll;    对于溢 ...