cocos2d-js 控件——UIScale9Sprite

UIScale9Sprite公有属性、方法

/**
 * 内置着色器状态
 * 目前支持 默认 和 灰色 状态。
 */
enum class State
{
    NORMAL,
    GRAY
};

/**
 * 渲染类型
 */
enum class RenderingType
{
    SIMPLE,
    SLICE
};

/**
 * 创建一个空的Scale9Sprite
 * @return 一个Scale9Sprite实例
 */
static Scale9Sprite* create();

/**
 * 使用纹理文件，指定界限和指定的图章创建九宫格精灵
 * @param file      纹理文件名称
 * @param rect      九宫格的显示尺寸
 * @param capInsets 拉伸区域
 * @return 一个Scale9Sprite实例
 */
static Scale9Sprite* create(const std::string& file, const Rect& rect,  const Rect& capInsets);

/**
 * 用纹理文件创建一个九宫格精灵。 整个纹理将被分解成相等块的3×3网格。
 * @param capInsets 拉伸区域
 * @param file      纹理文件名称
 * @return 一个Scale9Sprite实例
 */
static Scale9Sprite* create(const Rect& capInsets, const std::string& file);

/**
 * 用纹理文件和指定界限创建一个九宫格精灵。 纹理将被分解成相等块的3×3网格
 * @param file 纹理文件名称
 * @param rect 九宫格的显示尺寸
 * @return 一个Scale9Sprite实例
 */
static Scale9Sprite* create(const std::string& file, const Rect& rect);

/**
 * 用纹理文件创建一个九宫格精灵。 整个纹理将被分解成相等块的3×3网格
 * @param file 纹理文件名称
 * @return 一个Scale9Sprite实例
 */
static Scale9Sprite* create(const std::string& file);

/**
 * 使用SpriteFrame对象创建一个九宫格精灵
 * 一旦创建了精灵，你就可以调用它的“setContentSize：”方法来调整精灵的大小，它将会是九宫格优良的内核
 * 它也受AnchorPoint属性影响
 *
 * @param spriteFrame  SpriteFrame对象
 * @return 一个Scale9Sprite实例
 */
static Scale9Sprite* createWithSpriteFrame(SpriteFrame* spriteFrame);

/**
 * 创建一个带有SpriteFrame对象和其区域中心的九宫格精灵
 * 一旦创建了精灵，你就可以调用它的“setContentSize：”方法来调整精灵的大小，它将会是九宫格优良的内核
 * 它也受AnchorPoint属性影响
 *
 * @param spriteFrame SpriteFrame对象
 * @param capInsets   拉伸区域
 * @return 一个Scale9Sprite实例
 */
static Scale9Sprite* createWithSpriteFrame(SpriteFrame* spriteFrame, const Rect& capInsets);

/**
 * 使用SpriteFrame对象名称创建一个九宫格精灵
 * 一旦创建了精灵，你就可以调用它的“setContentSize：”方法来调整精灵的大小，它将会是九宫格优良的内核
 * 它也受AnchorPoint属性影响
 *
 * @see initWithSpriteFrameName(const char *spriteFrameName)
 * @param spriteFrameName A sprite frame name.
 * @return A Scale9Sprite instance.
 */
static Scale9Sprite* createWithSpriteFrameName(const std::string& spriteFrameName);

/**
 * 创建一个SpriteFrame对象名称和区域中心的九宫格精灵
 * 一旦创建了精灵，你就可以调用它的“setContentSize：”方法来调整精灵的大小，它将会是九宫格优良的内核
 * 它也受AnchorPoint属性影响
 *
 * @param spriteFrameName 一个SpriteFrame对象
 * @param capInsets       拉伸区域
 * @return 一个Scale9Sprite实例
 */
static Scale9Sprite* createWithSpriteFrameName(const std::string& spriteFrameName, const Rect& capInsets);

/**
 * 使用capInsets创建并返回一个新的Scale9Sprite
 * 您可以使用这种方法将capInsets添加到sprite或更改sprite的现有capInsets
 * 在这两种情况下，你都会得到一个新的图像，并且原始的精灵仍然保持原样
 * 
 * @param capInsets 拉伸区域
 * @return 一个Scale9Sprite实例
 */
Scale9Sprite* resizableSpriteWithCapInsets(const Rect& capInsets) const;

/**
 * 用指定的Sprite更新Scale9Sprite。
 *
 * @param sprite    Sprite对象
 * @param rect      九宫格的显示尺寸
 * @param rotated   精灵是否旋转
 * @param capInsets 拉伸区域
 * @return 如果更新成功则为true，否则为false。
 */
virtual bool updateWithSprite(Sprite* sprite,
                              const Rect& rect,
                              bool rotated,
                              const Rect& capInsets);

/**
 * 用指定的Sprite更新Scale9Sprite。
 *
 * @param sprite        Sprite对象
 * @param rect          九宫格的显示尺寸
 * @param rotated       精灵是否旋转
 * @param offset        对精灵进行切片时的偏移量。
 * @param originalSize  精灵的原始大小。
 * @param capInsets     拉伸区域
 * @return 如果更新成功则为true，否则为false。
 */
virtual bool updateWithSprite(Sprite* sprite,
                              const Rect& rect,
                              bool rotated,
                              const Vec2 &offset,
                              const Size &originalSize,
                              const Rect& capInsets);

/**
 * 更改Sprite内部的SpriteFrame
 *
 * @param spriteFrame SpriteFrame对象
 * @param capInsets   拉伸区域
 */
virtual void setSpriteFrame(SpriteFrame * spriteFrame, const Rect& capInsets = Rect::ZERO);

// 重用方法
virtual void setContentSize(const Size & size) override;
virtual void setAnchorPoint(const Vec2& anchorPoint) override;

/**
 * 更改九宫格精灵的状态
 * @param state 状态枚举值
 */
void setState(State state);

/**
 * 查询当前明亮状态
 * @return 状态枚举值
 */
State getState()const;

/**
 * 查询精灵的原始大小
 * @return Sprite size.
 */
Size getOriginalSize() const;

/**
 * 更改Scale9Sprite的显示尺寸
 * @param size 九宫格的显示尺寸
 */
void setPreferredSize(const Size& size);

/**
 * 查询Scale9Sprite的显示尺寸
 * @return Scale9Sprite的显示尺寸
 */
Size getPreferredSize() const;

/**
 * 更改拉伸区域
 * @param rect 拉伸区域
 */
void setCapInsets(const Rect& rect);

/**
 * 获取拉伸区域
 * @return 拉伸区域
 */
Rect getCapInsets()const;

/**
 * 改变Sprite左侧间距
 * @param leftInset 左侧间距
 */
void setInsetLeft(float leftInset);

/**
 * 获取Sprite左侧间距
 * @return 左侧间距
 */
float getInsetLeft()const;

/**
 * 改变Sprite顶部间距
 * @param topInset 顶部间距
 */
void setInsetTop(float topInset);

/**
 * 获取Sprite顶部间距
 * @return 顶部间距
 */
float getInsetTop()const;

/**
 * 改变Sprite右侧间距
 * @param rightInset 右侧间距
 */
void setInsetRight(float rightInset);

/**
 * 获取Sprite右侧间距
 * @return 右侧间距
 */
float getInsetRight()const;

/**
 * 改变Sprite底部间距
 * @param bottomInset 底部间距
 */
void setInsetBottom(float bottomInset);

/**
 * 获取Sprite底部间距
 * @return 底部间距
 */
float getInsetBottom()const;

/**
 * 切换九宫格特性
 * 如果Scale9Sprite禁用九宫格特性，Scale9Sprite将呈现为普通精灵。
 * 不要使用setScale9Enabled（false），应使用setRenderingType（RenderingType :: SIMPLE）。setScale9Enabled（false）仅用于回退兼容性。
 * @param enabled 启用九宫格为true，否则为false。
 */
void setScale9Enabled(bool enabled);

/**
 * 查询Scale9Sprite是否启用九宫格
 * @return 启用九宫格为true，否则为false。
 */
bool isScale9Enabled()const;

/**
 * 获取原始的没有九宫格特性的Sprite
 * @return Sprite实例
 */
Sprite* getSprite()const;

/**
 * 设置是否水平翻转
 * @param flippedX true则进行翻转，false则不翻转
 */
virtual void setFlippedX(bool flippedX);

/**
 * 返回是否水平翻转
 * 它只翻转部件的纹理，而不是部件的子部件的纹理。
 * 此外，翻转纹理不会改变anchorPoint。
 * 如果你想要翻转它或者它的子部件的anchorPoint，可以使用：
 * widget->setScaleX(sprite->getScaleX() * -1);
 *
 * @return 如果水平翻转，则为true，否则为false。
 */
virtual bool isFlippedX()const;

/**
 * 设置是否垂直翻转
 * @param flippedY 如果垂直翻转，则返回true，否则返回false。
 */
virtual void setFlippedY(bool flippedY);

/**
 * 返回是否垂直翻转
 * 它只翻转部件的纹理，而不是部件的子部件的纹理。
 * 此外，翻转纹理不会改变anchorPoint。
 * 如果你想要翻转它或者它的子部件的anchorPoint，可以使用：
 * widget->setScaleY(widget->getScaleY() * -1);
 *
 * @return 如果垂直翻转，则为true，否则为false。
 */
virtual bool isFlippedY()const;

// 重用函数
virtual void setScaleX(float scaleX) override;
virtual void setScaleY(float scaleY) override;
virtual void setScale(float scale) override;
virtual void setScale(float scaleX, float scaleY) override;
using Node::setScaleZ;
virtual float getScaleX() const override;
virtual float getScaleY() const override;
virtual float getScale() const override;
using Node::getScaleZ;
virtual void setCameraMask(unsigned short mask, bool applyChildren = true) override;
virtual void setGlobalZOrder(float globalZOrder) override;

/**
 * 设置Scale9Sprite渲染类型。
 * 当设置为SIMPLE时，只有4个顶点用于渲染。否则将使用16个顶点进行渲染.
 * @see RenderingType
 */
void setRenderingType(RenderingType type);

/**
 * 获取Scale9Sprite渲染类型。
 */
RenderingType getRenderingType()const;

// 重置渲染
void resetRender();

UIScale9Sprite示例

// 聊天内容气泡
var contentBubble = new cc.Scale9Sprite("res/Resource/Circle/ChatWindow/bg_panel_chat_1.png");

// 设置九宫格拉伸范围
contentBubble.setCapInsets(cc.rect(15, 40, 435, 0));

// 设置九宫格精灵显示大小
contentBubble.setPreferredSize(cc.size(chatContentSize.width + Chat_TextSize, chatContentSize.height + 10));

contentBubble.setAnchorPoint(0, 1);

contentBubble.setPosition(headerContainView.x + headerContainView.width + 10, size.height - 40);

this.addChild(contentBubble);