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,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也可以改变九宫格的显示尺寸。

文章作者：forestsenlin

原文链接：https://blog.csdn.net/forestsenlin/article/details/49854139

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。