FGUI图形组件的使用

<font size=5>引擎0908版本新增</font>

图形组件使用GGraph

Demo下载： [图形Demo.zip](https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=bc9a3675a53b584a9d86cce587916d22 "[图形Demo.zip")

示例效果：

引擎支持FGUI编辑器对图形的编辑

<font color="#ff0000" size=3>编辑器能通过组件的宽高不相等绘制椭圆，但引擎不支持。若要绘制椭圆，可通过设置组件的scaleX、scaleY实现</font>

渲染文本格式：

--重绘矩形
<GGraph|name=graph_1|cmds=[{\"args\":{\"lineSize\":0,\"cornerRadius\":[10,10,10,10],\"fillColor\":\"#ffff00\"},\"fun\":\"redrawRect\"}]|scale=0.8>
--重绘圆形
<GGraph|name=graph_2|cmds=[{\"args\":{\"lineSize\":0,\"fillColor\":\"#ff0000\"},\"fun\":\"redrawEllipse\"}]|scale=0.8>
--重绘椭圆
<GGraph|name=graph_3|cmds=[{\"args\":{\"lineSize\":0,\"fillColor\":\"#ff0000\"},\"fun\":\"redrawEllipse\"}]|scaleY=0.5>
--重绘多边形
<GGraph|name=graph_4|cmds=[{\"args\":{\"lineSize\":0,\"points\":[50,0,140,70,100,120,50,150,0,80],\"fillColor\":\"#ff00ff\"},\"fun\":\"redrawPolygon\"}]>
--重绘正多边形
<GGraph|name=graph_5|cmds=[{\"args\":{\"lineSize\":0,\"sides\":5,\"startAngle\":45,\"fillColor\":\"#cccccc\"},\"fun\":\"redrawRegularPolygon\"}]>
--绘制线条
<GGraph|name=graph_6|cmds=[{\"args\":[],\"fun\":\"clearDraw\"},{\"args\":{\"toY\":80,\"toX\":120,\"lineWidth\":4,\"fromY\":80,\"lineColor\":\"#00ff00\",\"fromX\":20},\"fun\":\"drawLine\"}]>
--绘制多条线条
<GGraph|name=graph_7|cmds=[{\"args\":[],\"fun\":\"clearDraw\"},{\"args\":{\"toY\":120,\"toX\":120,\"lineWidth\":4,\"fromY\":20,\"lineColor\":\"#00ff00\",\"fromX\":20},\"fun\":\"drawLine\"},{\"args\":{\"toY\":20,\"toX\":120,\"lineWidth\":4,\"fromY\":120,\"lineColor\":\"#00ff00\",\"fromX\":20},\"fun\":\"drawLine\"}]>
--绘制一系列线段
<GGraph|name=graph_8|cmds=[{\"args\":[],\"fun\":\"clearDraw\"},{\"args\":{\"y\":0,\"x\":0,\"lineColor\":\"#00ff00\",\"points\":[20,20,120,20,20,120,120,120],\"lineWidth\":4},\"fun\":\"drawLines\"}]>
--绘制曲线
<GGraph|name=graph_9|cmds=[{\"args\":[],\"fun\":\"clearDraw\"},{\"args\":{\"y\":0,\"x\":0,\"lineColor\":\"#00ff00\",\"points\":[20,80,50,0,80,80,110,160,140,80],\"lineWidth\":4},\"fun\":\"drawCurves\"}]>
--绘制填充矩形和矩形框
<GGraph|name=graph_10|cmds=[{\"args\":[],\"fun\":\"clearDraw\"},{\"args\":{\"y\":40,\"height\":80,\"width\":40,\"fillColor\":\"#0066FF\",\"x\":20},\"fun\":\"drawRect\"},{\"args\":{\"y\":40,\"height\":80,\"lineWidth\":2,\"width\":40,\"lineColor\":\"#0066FF\",\"x\":100},\"fun\":\"drawRect\"}]>
--绘制圆形
<GGraph|name=graph_11|cmds=[{\"args\":[],\"fun\":\"clearDraw\"},{\"args\":{\"fillColor\":\"#ffcc00\",\"radius\":50,\"y\":80,\"x\":80},\"fun\":\"drawCircle\"}]>
--绘制扇形
<GGraph|name=graph_12|cmds=[{\"args\":[],\"fun\":\"clearDraw\"},{\"args\":{\"startAngle\":45,\"x\":80,\"fillColor\":\"#ffccff\",\"radius\":50,\"endAngle\":315,\"y\":80},\"fun\":\"drawPie\"}]>
--绘制五角星
<GGraph|name=graph_13|cmds=[{\"args\":[],\"fun\":\"clearDraw\"},{\"args\":{\"fillColor\":\"#ff0000\",\"points\":[4.8985871965894e-15,-80,17.961119063183,-24.721359549996,76.084521303612,-24.721359549996,29.061701120214,9.4427190999916,47.022820183398,64.721359549996,1.8710938122421e-15,30.557280900008,-47.022820183398,64.721359549996,-29.061701120214,9.4427190999916,-76.084521303612,-24.721359549996,-17.961119063183,-24.721359549996],\"y\":80,\"x\":80},\"fun\":\"drawPoly\"}]>
--绘制路径
<GGraph|name=graph_14|cmds=[{\"args\":[],\"fun\":\"clearDraw\"},{\"args\":{\"pen\":{\"strokeStyle\":\"#ffffff\",\"lineWidth\":20},\"y\":0,\"brush\":{\"fillStyle\":\"#cc6600\"},\"x\":0,\"paths\":[[\"moveTo\",40,40],[\"lineTo\",120,40],[\"arcTo\",160,40,160,80,40],[\"lineTo\",120,120],[\"arcTo\",0,120,0,80,40],[\"lineTo\",40,40],[\"closePath\"]]},\"fun\":\"drawPath\"}]>
--设置CD倒计时
<GGraph|cmds=[{\"args\":{\"radius\":30,\"color\":\"0xff0000\",\"alpha\":0.8},\"fun\":\"setCdStyle\"},{\"args\":{\"cdTime\":10000,\"elapsedTime\":0},\"fun\":\"playCd\"}]|name=graph_1>

新增字段cmds，包含一条或多条命令，每条命令包括fun(方法)和args(参数)，cmds的值为cmds={{fun="drawLine",arg={}}}应用json.encode(cmds)得到。 fun(方法)有如下实现： redrawRect重新绘制矩形 redrawEllipse重新绘制椭圆(包括圆形) redrawPolygon重新绘制多边形 redrawRegularPolygon重新绘制正多边形 <font color="#ff0000" size=3>以上方法擦除之前所有绘制</font> drawLine绘制一条直线 drawLines绘制连续线段 drawCurves绘制一系列曲线 drawRect绘制矩形 drawCircle绘制圆形 drawPie绘制扇形 drawPoly绘制多边形 drawPath绘制路径 <font color="#ff0000" size=3>以上方法不会擦除之前所有绘制</font> clearDraw清空绘制 setCdStyle设置CD样式 playCd开始CD倒计时 args(参数)可在下面查看

---

<font size=6>下面是针对引擎Publish版本拓展的接口和示例代码</font>

Lua新增绘图接口：

重新绘制矩形

GGraph:redrawRect(lineSize, lineColor, fillColor, cornerRadius) 以组件的宽高为矩形的宽高

• lineSize线条粗细        格式：2
• lineColor线条颜色        格式："#ff0000"
• fillColor填充颜色        格式："#ff0000"
• cornerRadius圆角半径        格式：{5,5,5,5} 按照左上、右上、左下、右下的顺序设置；//只有一个值时，四个圆角都会设置为该值

重新绘制椭圆(包括圆形)

GGraph:redrawEllipse(lineSize, lineColor, fillColor) 以组件的中心为圆心坐标，以组件宽/2为半径

• lineSize        线条粗细        格式：2
• lineColor       线条颜色        格式："#ff0000"
• fillColor       填充颜色        格式："#ff0000"

重新绘制多边形

GGraph:redrawPolygon(lineSize, lineColor, fillColor, points) 以组件(0,0)为坐标原点

• lineSize        线条粗细        格式：2
• lineColor       线条颜色        格式："#ff0000"
• fillColor       填充颜色        格式："#ff0000"
• points         多边形点列表    格式：[x1,y1,x2,y2,x3,y3...]

重新绘制正多边形

GGraph:redrawRegularPolygon(lineSize, lineColor, fillColor, sides, startAngle, distances) 以组件(0,0)为坐标原点

• lineSize        线条粗细        格式：2
• lineColor       线条颜色        格式："#ff0000"
• fillColor       填充颜色        格式："#ff0000"
• sides           正多边形边数目   格式:3
• startAngle      开始旋转角度    格式：45
• distances       正多边形每顶点距中心半径比例    格式:{1, 1, 1}，有几条边distances就有几个值

<font color="#ff0000" size=5>调用以上接口会擦除之前所有绘制</font>

绘制一条直线

• GGraph:drawLine(fromX,fromY,toX,toY,lineColor,lineWidth)
• fromX X轴开始位置。
• fromY Y轴开始位置。
• toX X轴结束位置。
• toY Y轴结束位置。
• lineColor 颜色。
• lineWidth （可选）线条宽度。

绘制连续线段。

GGraph:drawLines(x,y,points,lineColor,lineWidth)

• x 开始绘制的X轴位置。
• y 开始绘制的Y轴位置。
• points 线段的点集合。格式:[x1,y1,x2,y2,x3,y3...]。
• lineColor 线段颜色，或者填充绘图的渐变对象。
• lineWidth （可选）线段宽度。

绘制一系列曲线

GGraph:drawCurves(x,y,points,lineColor,lineWidth)

• x 开始绘制的 X 轴位置。
• y 开始绘制的 Y 轴位置。
• points 线段的点集合，格式[startx,starty,ctrx,ctry,startx,starty...]。
• lineColor 线段颜色，或者填充绘图的渐变对象。
• lineWidth （可选）线段宽度。

绘制矩形

GGraph:drawRect(x,y,width,height,fillColor,lineColor,lineWidth)

• x 开始绘制的 X 轴位置。
• y 开始绘制的 Y 轴位置。
• width 矩形宽度。
• height 矩形高度。
• fillColor 填充颜色，或者填充绘图的渐变对象。
• lineColor （可选）边框颜色，或者填充绘图的渐变对象。
• lineWidth （可选）边框宽度。

绘制圆形

GGraph:drawCircle(x,y,radius,fillColor,lineColor,lineWidth)

• x 圆点X 轴位置。
• y 圆点Y 轴位置。
• radius 半径。
• fillColor 填充颜色，或者填充绘图的渐变对象。
• lineWidth （可选）边框宽度。

绘制扇形

GGraph:drawPie(x,y,radius,startAngle,endAngle,fillColor,lineColor,lineWidth)

• x 开始绘制的 X 轴位置。
• y 开始绘制的 Y 轴位置。
• radius 扇形半径。
• startAngle 开始角度。
• endAngle 结束角度。
• fillColor 填充颜色，或者填充绘图的渐变对象。
• lineColor （可选）边框颜色，或者填充绘图的渐变对象。
• lineWidth （可选）边框宽度。

绘制多边形

GGraph:drawPoly(x,y,points,fillColor,lineColor,lineWidth)

• x 开始绘制的 X 轴位置。
• y 开始绘制的 Y 轴位置。
• points 多边形的点集合。
• fillColor 填充颜色，或者填充绘图的渐变对象。
• lineColor （可选）边框颜色，或者填充绘图的渐变对象。
• lineWidth （可选）边框宽度。

绘制路径

GGraph:drawPath(x,y,paths,brush,pen)

• x 开始绘制的 X 轴位置。
• y 开始绘制的 Y 轴位置。
• paths 路径集合，路径支持以下格式：[["moveTo",x,y],["lineTo",x,y,x,y,x,y],["arcTo",x1,y1,x2,y2,r],["closePath"]]。
• brush （可选）刷子定义，支持以下设置{fillStyle}。
• pen （可选）画笔定义，支持以下设置{strokeStyle,lineWidth,lineJoin,lineCap,miterLimit}。

<font color="#ff0000" size=5>调用以上接口不会擦除之前所有绘制，可以调用下面接口清空绘制</font>

清空绘制

GGraph:clearDraw()

设置CD样式

GGraph:setCdStyle(radius,color,alpha)

• radius 绘制圆半径，以容器的中心点为圆心
• color绘制圆颜色
• alpha绘制圆透明度

播放CD倒计时

GGraph:playCd(cdTime,elapsedTime)

• cdTime CD总时间，单位:ms
• elapsedTime流逝的时间，单位:ms

Lua脚本做如下新增或修改：

GGraph.lua代码修改如下

GGraph = class('GGraph', ssr_ui_node)

function GGraph:new(name)
    local cls = self:ctor(name)
    return cls
end

--添加命令
function GGraph:addCmd(cmd)
    if not self["cmds"] then
        self["cmds"] = {}
    end
    table.insert(self["cmds"], cmd);
end

--结束绘制
function GGraph:endDraw()
    if self["cmds"] then
        self.__node_prop["cmds"] = json.encode(self["cmds"]);
        self["cmds"] = nil
    end
end

--重新绘制矩形
--param lineSize        线条粗细        格式：2
--param lineColor       线条颜色        格式："#ff0000"
--param fillColor       填充颜色        格式："#ff0000"
--param cornerRadius    圆角半径        格式：{5,5,5,5} 按照左上、右上、左下、右下的顺序设置；//只有一个值时，四个圆角都会设置为该值
function GGraph:redrawRect(lineSize, lineColor, fillColor, cornerRadius)
    local cmd = {fun="redrawRect", args={}}
    if lineSize then
        cmd.args["lineSize"] = lineSize
    end
    if lineColor then
        cmd.args["lineColor"] = lineColor
    end
    if fillColor then
        cmd.args["fillColor"] = fillColor
    end
    if cornerRadius then
        cmd.args["cornerRadius"] = cornerRadius
    end
    self:addCmd(cmd)
    return self
end

--重新绘制椭圆(包括圆形)
--param lineSize        线条粗细        格式：2
--param lineColor       线条颜色        格式："#ff0000"
--param fillColor       填充颜色        格式："#ff0000"
function GGraph:redrawEllipse(lineSize, lineColor, fillColor)
    local cmd = {fun="redrawEllipse", args={}}
    if lineSize then
        cmd.args["lineSize"] = lineSize;
    end
    if lineColor then
        cmd.args["lineColor"] = lineColor;
    end
    if fillColor then
        cmd.args["fillColor"] = fillColor;
    end
    self:addCmd(cmd)
    return self
end

--重新绘制多边形
--param lineSize        线条粗细        格式：2
--param lineColor       线条颜色        格式："#ff0000"
--param fillColor       填充颜色        格式："#ff0000"
--param points          多边形点列表    格式：[x1,y1,x2,y2,x3,y3...]
function GGraph:redrawPolygon(lineSize, lineColor, fillColor, points)
    local cmd = {fun="redrawPolygon", args={}}
    if lineSize then
        cmd.args["lineSize"] = lineSize;
    end
    if lineColor then
        cmd.args["lineColor"] = lineColor;
    end
    if fillColor then
        cmd.args["fillColor"] = fillColor;
    end
    cmd.args["points"] = points;
    self:addCmd(cmd)
    return self
end

--重新绘制正多边形
--param lineSize        线条粗细        格式：2
--param lineColor       线条颜色        格式："#ff0000"
--param fillColor       填充颜色        格式："#ff0000"
--param sides           正多边形边数目   格式:3
--param startAngle      开始旋转角度    格式：45
--param distances       正多边形每顶点距中心半径比例    格式:{1, 1, 1}，有几条边distances就有几个值
function GGraph:redrawRegularPolygon(lineSize, lineColor, fillColor, sides, startAngle, distances)
    local cmd = {fun="redrawRegularPolygon", args={}}
    if lineSize then
        cmd.args["lineSize"] = lineSize;
    end
    if lineColor then
        cmd.args["lineColor"] = lineColor;
    end
    if fillColor then
        cmd.args["fillColor"] = fillColor;
    end
    if sides then
        cmd.args["sides"] = sides;
    end
    if startAngle then
        cmd.args["startAngle"] = startAngle;
    end
    if distances then
        cmd.args["distances"] = distances;
    end
    self:addCmd(cmd)
    return self
end

--清空绘制
function GGraph:clearDraw()
    local cmd = {fun="clearDraw", args={}}
    self:addCmd(cmd)
    return self
end

--重新绘制一条直线
--@param fromX X轴开始位置。
--@param fromY Y轴开始位置。
--@param toX X轴结束位置。
--@param toY Y轴结束位置。
--@param lineColor 颜色。
--@param lineWidth （可选）线条宽度。
function GGraph:drawLine(fromX,fromY,toX,toY,lineColor,lineWidth)
    local cmd = {fun="drawLine", args={}}
    cmd.args["fromX"] = fromX;
    cmd.args["fromY"] = fromY;
    cmd.args["toX"] = toX;
    cmd.args["toY"] = toY;
    cmd.args["lineColor"] = lineColor;
    if lineWidth then
        cmd.args["lineWidth"] = lineWidth;
    end
    self:addCmd(cmd)
    return self
end

--绘制一系列线段。
--@param x 开始绘制的X轴位置。
--@param y 开始绘制的Y轴位置。
--@param points 线段的点集合。格式:[x1,y1,x2,y2,x3,y3...]。
--@param lineColor 线段颜色，或者填充绘图的渐变对象。
--@param lineWidth （可选）线段宽度。
function GGraph:drawLines(x,y,points,lineColor,lineWidth)
    local cmd = {fun="drawLines", args={}}
    cmd.args["x"] = x;
    cmd.args["y"] = y;
    cmd.args["points"] = points;
    cmd.args["lineColor"] = lineColor;
    if lineWidth then
        cmd.args["lineWidth"] = lineWidth;
    end
    self:addCmd(cmd)
    return self
end

--绘制一系列曲线。
--@param x 开始绘制的 X 轴位置。
--@param y 开始绘制的 Y 轴位置。
--@param points 线段的点集合，格式[startx,starty,ctrx,ctry,startx,starty...]。
--@param lineColor 线段颜色，或者填充绘图的渐变对象。
--@param lineWidth （可选）线段宽度。
function GGraph:drawCurves(x,y,points,lineColor,lineWidth)
    local cmd = {fun="drawCurves", args={}}
    cmd.args["x"] = x;
    cmd.args["y"] = y;
    cmd.args["points"] = points;
    cmd.args["lineColor"] = lineColor;
    if lineWidth then
        cmd.args["lineWidth"] = lineWidth;
    end
    self:addCmd(cmd)
    return self
end

--绘制矩形。
--@param x 开始绘制的 X 轴位置。
--@param y 开始绘制的 Y 轴位置。
--@param width 矩形宽度。
--@param height 矩形高度。
--@param fillColor 填充颜色，或者填充绘图的渐变对象。
--@param lineColor （可选）边框颜色，或者填充绘图的渐变对象。
--@param lineWidth （可选）边框宽度。
function GGraph:drawRect(x,y,width,height,fillColor,lineColor,lineWidth)
    local cmd = {fun="drawRect", args={}}
    cmd.args["x"] = x;
    cmd.args["y"] = y;
    cmd.args["width"] = width;
    cmd.args["height"] = height;
    if fillColor then
        cmd.args["fillColor"] = fillColor;
    end
    if lineColor then
        cmd.args["lineColor"] = lineColor;
    end
    if lineWidth then
        cmd.args["lineWidth"] = lineWidth;
    end
    self:addCmd(cmd)
    return self
end

--绘制圆形。
--@param x 圆点X 轴位置。
--@param y 圆点Y 轴位置。
--@param radius 半径。
--@param fillColor 填充颜色，或者填充绘图的渐变对象。
--@param lineColor （可选）边框颜色，或者填充绘图的渐变对象。
--@param lineWidth （可选）边框宽度。
function GGraph:drawCircle(x,y,radius,fillColor,lineColor,lineWidth)
    local cmd = {fun="drawCircle", args={}}
    cmd.args["x"] = x;
    cmd.args["y"] = y;
    cmd.args["radius"] = radius;
    if fillColor then
        cmd.args["fillColor"] = fillColor;
    end
    if lineColor then
        cmd.args["lineColor"] = lineColor;
    end
    if lineWidth then
        cmd.args["lineWidth"] = lineWidth;
    end
    self:addCmd(cmd)
    return self
end

--绘制扇形。
--@param x 开始绘制的 X 轴位置。
--@param y 开始绘制的 Y 轴位置。
--@param radius 扇形半径。
--@param startAngle 开始角度。
--@param endAngle 结束角度。
--@param fillColor 填充颜色，或者填充绘图的渐变对象。
--@param lineColor （可选）边框颜色，或者填充绘图的渐变对象。
--@param lineWidth （可选）边框宽度。
function GGraph:drawPie(x,y,radius,startAngle,endAngle,fillColor,lineColor,lineWidth)
    local cmd = {fun="drawPie", args={}}
    cmd.args["x"] = x;
    cmd.args["y"] = y;
    cmd.args["radius"] = radius;
    cmd.args["startAngle"] = startAngle;
    cmd.args["endAngle"] = endAngle;
    if fillColor then
        cmd.args["fillColor"] = fillColor;
    end
    if lineColor then
        cmd.args["lineColor"] = lineColor;
    end
    if lineWidth then
        cmd.args["lineWidth"] = lineWidth;
    end
    self:addCmd(cmd)
    return self
end

--绘制多边形。
--@param x 开始绘制的 X 轴位置。
--@param y 开始绘制的 Y 轴位置。
--@param points 多边形的点集合。
--@param fillColor 填充颜色，或者填充绘图的渐变对象。
--@param lineColor （可选）边框颜色，或者填充绘图的渐变对象。
--@param lineWidth （可选）边框宽度。
function GGraph:drawPoly(x,y,points,fillColor,lineColor,lineWidth)
    local cmd = {fun="drawPoly", args={}}
    cmd.args["x"] = x;
    cmd.args["y"] = y;
    cmd.args["points"] = points;
    if fillColor then
        cmd.args["fillColor"] = fillColor;
    end
    if lineColor then
        cmd.args["lineColor"] = lineColor;
    end
    if lineWidth then
        cmd.args["lineWidth"] = lineWidth;
    end
    self:addCmd(cmd)
    return self
end

--绘制路径。
--@param x 开始绘制的 X 轴位置。
--@param y 开始绘制的 Y 轴位置。
--@param paths 路径集合，路径支持以下格式：[["moveTo",x,y],["lineTo",x,y,x,y,x,y],["arcTo",x1,y1,x2,y2,r],["closePath"]]。
--@param brush （可选）刷子定义，支持以下设置{fillStyle}。
--@param pen （可选）画笔定义，支持以下设置{strokeStyle,lineWidth,lineJoin,lineCap,miterLimit}。
function GGraph:drawPath(x,y,paths,brush,pen)
    local cmd = {fun="drawPath", args={}}
    cmd.args["x"] = x;
    cmd.args["y"] = y;
    cmd.args["paths"] = paths;
    if brush then
        cmd.args["brush"] = brush;
    end
    if pen then
        cmd.args["pen"] = pen;
    end
    self:addCmd(cmd)
    return self
end

ssr_ui.node.lua 新增水平和垂直缩放接口

function ssr_ui_node:set_scaleX(scale)
    self.__node_prop["scaleX"] = scale
    return self
end

function ssr_ui_node:set_scaleY(scale)
    self.__node_prop["scaleY"] = scale
    return self
end

ssr.lua新增节点属性

ssr.node_prop = {
    ['scaleX'] = { desc = '缩放X' },
    ['scaleY'] = { desc = '缩放Y' },
    ["cmds"] = {"命令"},
}

Demo示例代码

graphDemo_view.lua

local view = {}
local function _pack(fun_name, args)
    return p_protocol.pack('graphDemo', fun_name, args)
end

--- 打开界面
function view.open_ui(player)
    p_ui.open_ui(player, view.res_path, view.ui_key)
end

--- 刷新界面
function view.refresh_ui(player)
    local ui_tbl = {}

    --重绘矩形
    local rectGrp = GGraph:new("graph_1")
    rectGrp:set_scale(0.8)
    rectGrp:redrawRect(0, nil, "#ffff00", {10,10,10,10});
    rectGrp:endDraw()
    table.insert(ui_tbl, rectGrp)

    --重绘圆形
    local circleGrp = GGraph:new("graph_2")
    circleGrp:set_scale(0.8)
    circleGrp:redrawEllipse(0, nil, "#ff0000");
    circleGrp:endDraw()
    table.insert(ui_tbl, circleGrp)

    --重绘椭圆
    local ellipseGrp = GGraph:new("graph_3")
    ellipseGrp:set_scaleY(0.5)
    ellipseGrp:redrawEllipse(0, nil, "#ff0000");
    ellipseGrp:endDraw()
    table.insert(ui_tbl, ellipseGrp)

    --重绘多边形
    local polygonGrp = GGraph:new("graph_4")
    polygonGrp:redrawPolygon(0, nil, "#ff00ff", {50,0,140,70,100,120,50,150,0,80});
    polygonGrp:endDraw()
    table.insert(ui_tbl, polygonGrp)

    --重绘正多边形
    local regularPolygonGrp = GGraph:new("graph_5")
    regularPolygonGrp:redrawRegularPolygon(0, nil, "#cccccc", 5, 45);
    regularPolygonGrp:endDraw()
    table.insert(ui_tbl, regularPolygonGrp)

    --绘制线条
    local onelineGrp = GGraph:new("graph_6")
    onelineGrp:clearDraw();
    onelineGrp:drawLine(20,80,120,80, "#00ff00", 4)
    onelineGrp:endDraw();
    table.insert(ui_tbl, onelineGrp)

    --绘制多条线条
    local mulLineGrp = GGraph:new("graph_7")
    mulLineGrp:clearDraw();
    mulLineGrp:drawLine(20,20,120,120, "#00ff00", 4)
    mulLineGrp:drawLine(20,120,120,20, "#00ff00", 4)
    mulLineGrp:endDraw();
    table.insert(ui_tbl, mulLineGrp)

    --绘制一系列线段
    local serialLineGrp = GGraph:new("graph_8")
    serialLineGrp:clearDraw();
    serialLineGrp:drawLines(0,0,{20,20,120,20,20,120,120,120}, "#00ff00", 4)
    serialLineGrp:endDraw();
    table.insert(ui_tbl, serialLineGrp)

    --绘制曲线
    local curvesGrp = GGraph:new("graph_9")
    curvesGrp:clearDraw();
    curvesGrp:drawCurves(0,0,{20,80,50,0,80,80,110,160,140,80}, "#00ff00", 4)
    curvesGrp:endDraw();
    table.insert(ui_tbl, curvesGrp)

    --绘制填充矩形和矩形框
    local mulRectGrp = GGraph:new("graph_10")
    mulRectGrp:clearDraw();
    mulRectGrp:drawRect(20,40,40,80, "#0066FF")
    mulRectGrp:drawRect(100,40,40,80, nil, "#0066FF", 2)
    mulRectGrp:endDraw();
    table.insert(ui_tbl, mulRectGrp)

    --绘制圆形
    local mulCircleGrp = GGraph:new("graph_11")
    mulCircleGrp:clearDraw();
    mulCircleGrp:drawCircle(80,80,50, "#ffcc00")
    mulCircleGrp:endDraw();
    table.insert(ui_tbl, mulCircleGrp)

    --绘制扇形
    local mulCircleGrp = GGraph:new("graph_12")
    mulCircleGrp:clearDraw();
    mulCircleGrp:drawPie(80,80,50,45,315,"#ffccff")
    mulCircleGrp:endDraw();
    table.insert(ui_tbl, mulCircleGrp)

    --绘制五角星
    local points = {}
    local outerR = 80
    local rad = 18*math.pi/180
    local innerR = math.sin(rad) * outerR / math.cos(rad*2)
    local outterAngle = 0
    local outrerRadian = 0
    local innerAngle = 0;
    local innerRadian = 0
    for i = 0, 4, 1 do
        outterAngle = 72 * i - 90
        outrerRadian = outterAngle * math.pi / 180
        table.insert(points, math.cos(outrerRadian) * outerR)
        table.insert(points, math.sin(outrerRadian) * outerR)

        innerAngle = 72 * i - 54
        innerRadian = innerAngle * math.pi / 180
        table.insert(points, math.cos(innerRadian) * innerR)
        table.insert(points, math.sin(innerRadian) * innerR)
    end
    local polyGrp = GGraph:new("graph_13")
    polyGrp:clearDraw();
    polyGrp:drawPoly(80,80,points,"#ff0000")
    polyGrp:endDraw();
    table.insert(ui_tbl, polyGrp)

    --绘制路径
    local paths = {}
    table.insert(paths, {"moveTo",40,40})
    table.insert(paths, {"lineTo",120,40})
    table.insert(paths, {"arcTo",160,40,160,80,40})
    table.insert(paths, {"lineTo",120,120})
    table.insert(paths, {"arcTo",0,120,0,80,40})
    table.insert(paths, {"lineTo",40,40})
    table.insert(paths, {"closePath"})
    local pathGrp = GGraph:new("graph_14")
    pathGrp:clearDraw();
    pathGrp:drawPath(0,0,paths,{fillStyle="#cc6600"},{strokeStyle="#ffffff",lineWidth=20})
    pathGrp:endDraw();
    table.insert(ui_tbl, pathGrp)

    local clearBtn = GButton:new("clearBtn")
    clearBtn:set_link(_pack('clearView'))
    table.insert(ui_tbl, clearBtn)

    local refreshBtn = GButton:new("refreshBtn")
    refreshBtn:set_link(_pack('refreshView'))
    table.insert(ui_tbl, refreshBtn)

    p_ui.refresh_ui(player, view.res_path, view.ui_key, ui_tbl, true)
end

function view.clear_ui(player)
    local ui_tbl = {}
    for i = 1, 14, 1 do
        local graph = GGraph:new("graph_"..i)
        graph:clearDraw()
        graph:endDraw()
        table.insert(ui_tbl, graph)
    end
    p_ui.refresh_ui(player, view.res_path, view.ui_key, ui_tbl, true)
end

---关闭界面
function view.close_ui(player)
    p_ui.close_ui(player, view.res_path, view.ui_key)
end

return view

graphDemo_logic.lua

--模块table
local logic = {}

function logic.open_ui(player, tbl)
    logic.view.open_ui(player)
end

function logic.refresh_ui(player, res_path, ui_key, pt_data, ext_data)
    logic.view.refresh_ui(player)
end

function logic.close_ui(player)
    logic.view.close_ui(player)
end

function logic.clearView(player)
    logic.view.clear_ui(player)
end

function logic.refreshView(player)
    logic.view.refresh_ui(player)
end

return logic