cocos2d-Lua FairyGUI之图形(五)

图形

---

参考：图形

注意：

• 可点击，使用接口为: addEventListener
• 可用于作为背景的遮罩层，类似于LayerColor，防止透点
• 可用于作为自定义遮罩，用于处理不规则点击
• 动态创建，一定要设置图形大小

创建矩形示例：

-- 如果为全屏的，主要用于作为遮罩层使用
local width = display.width             -- 宽度
local height = display.height           -- 高度
local lineSize = 0                      -- 线条粗细
local lineColor = cc.c4f(1, 1, 1, 1)    -- 线条颜色
local fillColor = cc.c4f(0, 0, 0, 0.6)  -- 填充颜色
local graphRect = fairygui.UIObjectFactory:newObject(fairygui.ObjectType.GRAPH)
graphRect:drawRect(width, height, lineSize, lineColor, fillColor)
graphRect:setTouchable(false)
graphRect:makeFullScreen() 				-- 用于设置全屏
view:addChild(graphRect)

创建椭圆示例：

local width, height = 100, 100          -- 大小,宽高一致则为圆
local lineSize = 1                      -- 线条粗细
local lineColor = cc.c4f(1, 1, 1, 1)    -- 线条颜色
local fillColor = cc.c4f(1, 0, 0, 1)    -- 填充颜色
local graphEllipse = fairygui.UIObjectFactory:newObject(fairygui.ObjectType.GRAPH)
graphEllipse:drawEllipse(width, height, lineSize, lineColor, fillColor)
graphEllipse:addEventListener(fairygui.UIEventType.Click, function()
   print("点击圆")
end)
graphEllipse:setPosition(75, 400)
view:addChild(graphEllipse)

创建多边形示例:

local lineSize = 10                                             -- 线条粗细
local lineColor = cc.c4f(1, 1, 1, 1)                            -- 线条颜色
local fillColor = cc.c4f(1, 1, 1, 1)                            -- 填充颜色
local points = {cc.p(200, 30), cc.p(250, 130), cc.p(200, 230)}  -- 点位置
local polygon = fairygui.UIObjectFactory:newObject(fairygui.ObjectType.GRAPH)
polygon:setSize(300, 300)
polygon:drawPolygon(lineSize, lineColor, fillColor, points)
view:addChild(polygon)

创建正多边形示例:

-- 一般多用于战斗力雷达图显示
-- 可在UI编译器中，添加一图片，一图形来创建
local lineSize = 11                             -- 线条粗细
local lineColor = cc.c4f(1, 1, 1, 1)            -- 线条颜色
local fillColor = cc.c4f(0.5, 1, 0.2, 0.6)      -- 填充颜色
local points = {0.5, 1, 0.6, 0.7, 0.8, 1}       -- 范围[0,1]
local sides = 6                                 -- 面数
local startAngle = 60                           -- 角度
local component = view:getChild("compoent")     
component:setSortingOrder(100)                  -- 设置层级
local graph = component:getChild("graph")
graph:drawRegularPolygon(lineSize, lineColor, fillColor, sides, startAngle, points)

图形的UI配置如下：

其他

---

在UI编译器中，图片也可以作为:自定义遮罩层

可以点击舞台区域的空白地方，就会显示如上图所示：

• 自定义遮罩，可以选择图形或图片; 可以选择反向相关
• 通过预览查看效果

关于自定义遮罩在游戏的显示效果中经常使用。

上一篇：cocos2dx-Lua FairyGUI 之装载器(四)
下一篇：cocos2d-Lua FairyGUI 之 动画(六)