cocos2dx学习笔记之Scale9Sprite九宫格

最新推荐文章于 2025-07-12 18:26:56 发布

ellis1970

最新推荐文章于 2025-07-12 18:26:56 发布

阅读量3.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： cocos2dx 文章标签： cocos2d-x 游戏开发游戏引擎移动开发 C++

本文链接：https://blog.youkuaiyun.com/ellis1970/article/details/79019697

cocos2dx 专栏收录该内容

33 篇文章

订阅专栏

本文介绍如何使用Scale9Sprite类实现精灵缩放时四角不变形的效果，并对比Sprite、Scale9Sprite及ImageView的不同表现。

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

当有精灵缩放时，需要保持四个角不变，避免失真的需求时，需要使用到Scale9Sprite类，本文译作九宫格类.

需包含的头文件和命名空间如下：

#include "ui/UIScale9Sprite.h"
using namespace cocos2d::ui;

举个例子，代码和运行效果如下：

bool HelloWorld::init()
{
    if ( !Layer::init() )
    {
        return false;
    }
    
    auto rootNode = CSLoader::createNode("MainScene.csb");
    addChild(rootNode);


	Sprite* s0 = Sprite::create("btn0.png");
	s0->setPosition(190, 330);
	s0->setScaleX(0.5);
	addChild(s0);

	Scale9Sprite* sp = Scale9Sprite::create("btn0.png");
	sp->setPosition(720, 330);
	sp->setContentSize(Size(300, 192));
	addChild(sp);

	ImageView* i0 = ImageView::create("btn0.png");
	i0->setScale9Enabled(true);
	i0->setPosition(Vec2(190, 115));
	i0->setContentSize(Size(300,192));	
	addChild(i0);

	ImageView* imageView = (ImageView*)rootNode->getChildByName("Image_4");
	imageView->loadTexture("btn0.png");

    return true;
}

除了右下角的按钮，其他3个按钮是用代码创建的，可以看到使用精灵直接缩放的话，4个角会受到缩放影响变形。

使用Scale9Sprite或者ImageView对象缩放时，要注意这里使用的函数是setContentSize而不是setScale.

最下面2个按钮缩放是想说明ImageView自带了九宫格缩放功能，默认是未开启状态，可以手动调用setScale9Enabled(true);或者在CocosStudio里勾选九宫格选项.

右下角例子是想说明ImageView控件通过代码加载纹理时，如果自身大小和纹理大小不一致，则会发生缩放将纹理大小缩放至自身大小，此时可以根据需求选择是否开启setScale9Enabled(true),若ImageView通过LoadTexture加载纹理时发生了扭曲，则很可能也是九宫格缩放导致的，需设置setScale9Enabled(false)后再测试.