浅谈一下对cocos2d-x中九宫格精灵的简单理解和使用

浅谈一下对cocos2d-x中九宫格精灵的简单理解和使用

首先，使用cocos new命令创建了一个cocos2d-x的C++项目和Lua项目，在生成的HelloWorld中写测试代码。

1.C++代码创建一个九宫格精灵

#include "ui/UIScale9Sprite.h"
using namespace cocos2d::ui;
//创建一个九宫格精灵
Scale9Sprite* sp = Scale9Sprite::create("res/frame_Description_b.png");
addChild(sp,1);
sp->setPosition(origin.x + visibleSize.width/2,origin.y + visibleSize.height/2);
Size _size = sp->getContentSize();
sp->setCapInsets(Rect(20,20,_size.width-40,_size.height-40));
sp->setPreferredSize(Size(300,300));

2.Lua代码创建一个九宫格精灵

local layer = cc.Layer:create()
sceneGame:addChild(layer)
--创建一个九宫格精灵
local sp = ccui.Scale9Sprite:create('res/frame_Description_b.png')
local _size = sp:getContentSize()
sp:setCapInsets(cc.rect(20,_size.width-40,_size.height-40))
layer:addChild(sp)
sp:setPosition(origin.x+visibleSize.width/2,origin.y+visibleSize.height/2)
sp:setPreferredSize(cc.size(400,200))

在cocos studio中没有Scale9Sprite，但可以使用ImageView，给一个ImageView设置好图片资源后，打开九宫格，可以看到默认的一个内间距，如图

void setCapInsets(const Rect& rect)设置的矩形就是红框所表示的区域，有时九宫格精灵会变形，就是这个矩形设置的不正确，在一些不规整的图片进行九宫格缩放时容易出现这个现象。
九宫格其实就是4个角部分保持不变，中间的一块和相邻的4块进行叠加或者缩放，所以变大之后的精灵四角和原图保持了一致。

void setPreferredSize(const Size& size)改变九宫格的显示尺寸。其实在setCapInsets之后，setContentSize也可以改变九宫格的显示尺寸。

如果我在本文中有错误的观点，还请大家指教，多多包涵，共同交流，共同进步。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!