CocosCreator的canvas适配

最新推荐文章于 2024-09-20 16:16:52 发布

原创最新推荐文章于 2024-09-20 16:16:52 发布 · 2.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#CocosCreator #CocosCreator画布的适配 #CocosCreator自适应宽高

Cocos Creator 专栏收录该内容

13 篇文章

订阅专栏

本文围绕CocosCreator展开，介绍了canvas特性与属性，如作为UI根节点提供视窗位置信息和适配策略接口，有fitHeight、fightWidth属性。还阐述了cc.view全局视图对象的方法，以及cc.visibleRect的属性和方法，并给出实例，助力开发者掌握画布适配。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

canvas

特性:

作为 UI 根节点，为所有子节点提供视窗四边的位置信息以供对齐，另外提供屏幕适配策略接口，方便从编辑器设置。
注：由于本节点的尺寸会跟随屏幕拉伸，所以 anchorPoint 只支持 (0.5, 0.5)。

属性：

fitHeight：是否优先将设计分辨率高度撑满视图高度
fightWidth：是否优先将设计分辨率宽度撑满视图宽度。

cc.view 全局的视图对象

全局的单例对象，使用时cc.view.methodName();既可调用view的方法。
方法：
setOrientation ：设置游戏屏幕朝向，它能够是横版，竖版或自动
getVisibleSize ：返回视图窗口可见区域尺寸。
getVisibleOrigin ：返回视图窗口可见区域原点。
getDesignResolutionSize ：返回视图的设计分辨率。
convertToLocationInView ：将屏幕坐标转换为游戏视图下的坐标。
getViewportRect ：返回视窗剪裁区域。
getScaleX：返回横轴的缩放比，这个缩放比是将画布像素分辨率放到设计分辨率的比例。
getScaleY：返回纵轴的缩放比，这个缩放比是将画布像素分辨率缩放到设计分辨率的比例。

cc.visibleRect

全局的单例对象，使用时cc.visibleRect.属性；既可调用visibleRect的属性和方法
和 cc.view.getViewportRect()相同
属性
topLeft :
top :
topRight :
left :
center :
right :
bottomLeft :
bottom :
bottomRight :
height : 屏幕的高
width : 屏幕的宽

实例

   setHeightOrWidth: function  () {
            var ca = this.getComponent(cc.Canvas);
            if( (cc.visibleRect.width / cc.visibleRect.height) < (cc.view.getDesignResolutionSize().width / cc.view.getDesignResolutionSize().height) ){
                ca.fitHeight = false;
                ca.fitWidth = true;
            }else{
                ca.fitWidth = false;
                ca.fitHeight = true;
            }
      }