cocos2dx-Lua FairyGUI 之装载器(四)

图片

---

参考： 图片

注意:

• 多用于作背景图使用

• 不支持点击，或者更换，如果需要，请使用装载器

• 舞台中图片如果要更换为Loader，可以:选择图片 ->替换元件 -> 选择loader即可

• 大张图片可以双击打开属性， 纹理集选择: 单独NPOT

• 图片如果拉伸，可以双击打开属性， 缩放模式选择: 九宫格

一般情况下图片不会进行动态创建， 但是熟悉下常用接口吧：

local view = fairygui.UIPackage:createObject("Basic", "Demo_Image")
local root = nil 

-- 设置颜色
local colorImg = view:getChild("img_color")
colorImg:setColor(cc.c3b(255, 0, 0))

-- 设置翻转
local flipImg = view:getChild("img_flip")
flipImg:setFlip(fairygui.FlipType.VERTICAL)

-- 设置填充
local fillImg  = view:getChild("img_fill")
-- 设置填充方法：setFillMethod/getFillMethod, C++没有提供
-- 设置填充原点: setFillOrigin/getFillOrigin, C++没有提供
-- 设置填充比例: setFillAmount/getFillAmount, C++没有提供

装载器

---

参考： 装载器

注意：

• 用于动态更换资源，常用接口为：setURL
• 用于动态更换足奖，常用接口为: setURL
• 动态创建一定要设置大小，如无其他需求，建议设置自动大小: setAutoSize
• 如果是在代码中动态加载资源，一定要记得UI编译器：设置URL时，勾选发布时清空，这样可以提升效率
• 支持加载非UI编译器内资源，也就是所谓的外部资源

资源建议：

• 如果资源比较少的情况下，可以将资源放置到UI编译器中, 注意：设置为导出

• 如果资源比较多的情况下，比如背包icon资源，建议放置到项目指定的res目录下，取出一两个放置到UI编译器中，且在指定包设置中，将该资源添加到排除资源中。

  (方式: 文件 --> 发布设置 --> 包设置 --> 排除资源 )

动态创建示例：

local loader = fairygui.UIObjectFactory:newObject(fairygui.ObjectType.LOADER)
loader:setSize(100, 100)                                    -- 设置初始化大小
loader:setAutoSize(true)                                    -- 设置自动大小
loader:setAlign(fairygui.TextHAlignment.CENTER)             -- 设置水平对齐方式
loader:setVerticalAlign(fairygui.TextVAlignment.CENTER)     -- 设置垂直对齐方式
loader:setURL("ui://Common/22")                             -- 设置URL,为图片
loader:addEventListener(fairygui.UIEventType.Click, function(context)
    print("您点击了loader")
end)
loader:setPosition(153, 214)
view:addChild(loader) 

更换图片示例：

local loader = view:getChild("imgLoader_1")
-- 使用UI编译器内url编码更换， 编译器中，右击资源，选择复制URL即可
local url = "ui://a0imyaf1vx0u33"
loader:setURL(url)

-- 使用UI编译器内资源名更换， 格式为: "ui://" .. PkgName  .. "/" .. "resName"
local url = "ui://Common/r4"
loader:setURL(url)

-- 使用外部资源更换， 一定要添加后缀png/jpg等
local url = "res/Default/r1.png"
loader:setURL(url)

关于装载器动态更换资源，查看下C++的主要接口相关

void GLoader::loadContent()
{
    if (_url.length() == 0)
        return;
		
    // 检测资源是否为FairyGUI ui资源
    if (_url.compare(0, 5, "ui://") == 0)
        loadFromPackage();
    else
    {
       // 添加外部资源
        _contentStatus = 3;
        loadExternal();
    }
}

// 加载
void GLoader::loadFromPackage()
{
    // 根据url获取指定的packageItem 
    _contentItem = UIPackage::getItemByURL(_url);	
}

void GLoader::loadExternal()
{
    auto tex = Director::getInstance()->getTextureCache()->addImage(_url);
    if (tex)
    {
        auto sf = SpriteFrame::createWithTexture(tex, Rect(Vec2::ZERO, tex->getContentSize()));
        onExternalLoadSuccess(sf);
}

更换组件示例：

local loader = self._view:getChild("loader_2")
-- 该url为按钮
local url = "ui://Common/normal_btn1"
loader:setURL(url)

-- 获取按钮组件
local component = loader:getComponent()
print("loader component:")
local titleText = component:getChild("title")
titleText:setText("loader内标题")

在Loader中添加组件，如果要获取组件，使用的接口是: getComponent, 原因在于：

// GLoader.h
GComponent* getComponent() const { return _content2; }

// GLoader.cpp
// 在加载的时候，针对于组件类型，会进行创建，并将创建的节点放置到_content2中
void GLoader::loadFromPackage()
{
  _contentItem = UIPackage::getItemByURL(_url);
  if (_contentItem->type == PackageItemType::COMPONENT)
  {
     GObject* obj = UIPackage::createObjectFromURL(_url);
     // ..
    _content2 = obj->as<GComponent>();
}

上一篇：cocos2d-Lua FairyGUI UI结构(三)
下一篇：cocos2d-Lua FairyGUI之图形(五)