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>
渲染文本格式:
--重绘矩形
&lt;GGraph|name=graph_1|cmds=[{\&quot;args\&quot;:{\&quot;lineSize\&quot;:0,\&quot;cornerRadius\&quot;:[10,10,10,10],\&quot;fillColor\&quot;:\&quot;#ffff00\&quot;},\&quot;fun\&quot;:\&quot;redrawRect\&quot;}]|scale=0.8&gt;
--重绘圆形
&lt;GGraph|name=graph_2|cmds=[{\&quot;args\&quot;:{\&quot;lineSize\&quot;:0,\&quot;fillColor\&quot;:\&quot;#ff0000\&quot;},\&quot;fun\&quot;:\&quot;redrawEllipse\&quot;}]|scale=0.8&gt;
--重绘椭圆
&lt;GGraph|name=graph_3|cmds=[{\&quot;args\&quot;:{\&quot;lineSize\&quot;:0,\&quot;fillColor\&quot;:\&quot;#ff0000\&quot;},\&quot;fun\&quot;:\&quot;redrawEllipse\&quot;}]|scaleY=0.5&gt;
--重绘多边形
&lt;GGraph|name=graph_4|cmds=[{\&quot;args\&quot;:{\&quot;lineSize\&quot;:0,\&quot;points\&quot;:[50,0,140,70,100,120,50,150,0,80],\&quot;fillColor\&quot;:\&quot;#ff00ff\&quot;},\&quot;fun\&quot;:\&quot;redrawPolygon\&quot;}]&gt;
--重绘正多边形
&lt;GGraph|name=graph_5|cmds=[{\&quot;args\&quot;:{\&quot;lineSize\&quot;:0,\&quot;sides\&quot;:5,\&quot;startAngle\&quot;:45,\&quot;fillColor\&quot;:\&quot;#cccccc\&quot;},\&quot;fun\&quot;:\&quot;redrawRegularPolygon\&quot;}]&gt;
--绘制线条
&lt;GGraph|name=graph_6|cmds=[{\&quot;args\&quot;:[],\&quot;fun\&quot;:\&quot;clearDraw\&quot;},{\&quot;args\&quot;:{\&quot;toY\&quot;:80,\&quot;toX\&quot;:120,\&quot;lineWidth\&quot;:4,\&quot;fromY\&quot;:80,\&quot;lineColor\&quot;:\&quot;#00ff00\&quot;,\&quot;fromX\&quot;:20},\&quot;fun\&quot;:\&quot;drawLine\&quot;}]&gt;
--绘制多条线条
&lt;GGraph|name=graph_7|cmds=[{\&quot;args\&quot;:[],\&quot;fun\&quot;:\&quot;clearDraw\&quot;},{\&quot;args\&quot;:{\&quot;toY\&quot;:120,\&quot;toX\&quot;:120,\&quot;lineWidth\&quot;:4,\&quot;fromY\&quot;:20,\&quot;lineColor\&quot;:\&quot;#00ff00\&quot;,\&quot;fromX\&quot;:20},\&quot;fun\&quot;:\&quot;drawLine\&quot;},{\&quot;args\&quot;:{\&quot;toY\&quot;:20,\&quot;toX\&quot;:120,\&quot;lineWidth\&quot;:4,\&quot;fromY\&quot;:120,\&quot;lineColor\&quot;:\&quot;#00ff00\&quot;,\&quot;fromX\&quot;:20},\&quot;fun\&quot;:\&quot;drawLine\&quot;}]&gt;
--绘制一系列线段
&lt;GGraph|name=graph_8|cmds=[{\&quot;args\&quot;:[],\&quot;fun\&quot;:\&quot;clearDraw\&quot;},{\&quot;args\&quot;:{\&quot;y\&quot;:0,\&quot;x\&quot;:0,\&quot;lineColor\&quot;:\&quot;#00ff00\&quot;,\&quot;points\&quot;:[20,20,120,20,20,120,120,120],\&quot;lineWidth\&quot;:4},\&quot;fun\&quot;:\&quot;drawLines\&quot;}]&gt;
--绘制曲线
&lt;GGraph|name=graph_9|cmds=[{\&quot;args\&quot;:[],\&quot;fun\&quot;:\&quot;clearDraw\&quot;},{\&quot;args\&quot;:{\&quot;y\&quot;:0,\&quot;x\&quot;:0,\&quot;lineColor\&quot;:\&quot;#00ff00\&quot;,\&quot;points\&quot;:[20,80,50,0,80,80,110,160,140,80],\&quot;lineWidth\&quot;:4},\&quot;fun\&quot;:\&quot;drawCurves\&quot;}]&gt;
--绘制填充矩形和矩形框
&lt;GGraph|name=graph_10|cmds=[{\&quot;args\&quot;:[],\&quot;fun\&quot;:\&quot;clearDraw\&quot;},{\&quot;args\&quot;:{\&quot;y\&quot;:40,\&quot;height\&quot;:80,\&quot;width\&quot;:40,\&quot;fillColor\&quot;:\&quot;#0066FF\&quot;,\&quot;x\&quot;:20},\&quot;fun\&quot;:\&quot;drawRect\&quot;},{\&quot;args\&quot;:{\&quot;y\&quot;:40,\&quot;height\&quot;:80,\&quot;lineWidth\&quot;:2,\&quot;width\&quot;:40,\&quot;lineColor\&quot;:\&quot;#0066FF\&quot;,\&quot;x\&quot;:100},\&quot;fun\&quot;:\&quot;drawRect\&quot;}]&gt;
--绘制圆形
&lt;GGraph|name=graph_11|cmds=[{\&quot;args\&quot;:[],\&quot;fun\&quot;:\&quot;clearDraw\&quot;},{\&quot;args\&quot;:{\&quot;fillColor\&quot;:\&quot;#ffcc00\&quot;,\&quot;radius\&quot;:50,\&quot;y\&quot;:80,\&quot;x\&quot;:80},\&quot;fun\&quot;:\&quot;drawCircle\&quot;}]&gt;
--绘制扇形
&lt;GGraph|name=graph_12|cmds=[{\&quot;args\&quot;:[],\&quot;fun\&quot;:\&quot;clearDraw\&quot;},{\&quot;args\&quot;:{\&quot;startAngle\&quot;:45,\&quot;x\&quot;:80,\&quot;fillColor\&quot;:\&quot;#ffccff\&quot;,\&quot;radius\&quot;:50,\&quot;endAngle\&quot;:315,\&quot;y\&quot;:80},\&quot;fun\&quot;:\&quot;drawPie\&quot;}]&gt;
--绘制五角星
&lt;GGraph|name=graph_13|cmds=[{\&quot;args\&quot;:[],\&quot;fun\&quot;:\&quot;clearDraw\&quot;},{\&quot;args\&quot;:{\&quot;fillColor\&quot;:\&quot;#ff0000\&quot;,\&quot;points\&quot;:[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],\&quot;y\&quot;:80,\&quot;x\&quot;:80},\&quot;fun\&quot;:\&quot;drawPoly\&quot;}]&gt;
--绘制路径
&lt;GGraph|name=graph_14|cmds=[{\&quot;args\&quot;:[],\&quot;fun\&quot;:\&quot;clearDraw\&quot;},{\&quot;args\&quot;:{\&quot;pen\&quot;:{\&quot;strokeStyle\&quot;:\&quot;#ffffff\&quot;,\&quot;lineWidth\&quot;:20},\&quot;y\&quot;:0,\&quot;brush\&quot;:{\&quot;fillStyle\&quot;:\&quot;#cc6600\&quot;},\&quot;x\&quot;:0,\&quot;paths\&quot;:[[\&quot;moveTo\&quot;,40,40],[\&quot;lineTo\&quot;,120,40],[\&quot;arcTo\&quot;,160,40,160,80,40],[\&quot;lineTo\&quot;,120,120],[\&quot;arcTo\&quot;,0,120,0,80,40],[\&quot;lineTo\&quot;,40,40],[\&quot;closePath\&quot;]]},\&quot;fun\&quot;:\&quot;drawPath\&quot;}]&gt;
--设置CD倒计时
&lt;GGraph|cmds=[{\&quot;args\&quot;:{\&quot;radius\&quot;:30,\&quot;color\&quot;:\&quot;0xff0000\&quot;,\&quot;alpha\&quot;:0.8},\&quot;fun\&quot;:\&quot;setCdStyle\&quot;},{\&quot;args\&quot;:{\&quot;cdTime\&quot;:10000,\&quot;elapsedTime\&quot;:0},\&quot;fun\&quot;:\&quot;playCd\&quot;}]|name=graph_1&gt;
新增字段cmds
,包含一条或多条命令,每条命令包括fun(方法)和args(参数),cmds的值为cmds={{fun=&quot;drawLine&quot;,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
线条粗细 格式:2lineColor
线条颜色 格式:"#ff0000"fillColor
填充颜色 格式:"#ff0000"cornerRadius
圆角半径 格式:{5,5,5,5} 按照左上、右上、左下、右下的顺序设置;//只有一个值时,四个圆角都会设置为该值
重新绘制椭圆(包括圆形)
GGraph:redrawEllipse(lineSize, lineColor, fillColor)
以组件的中心为圆心坐标,以组件宽/2为半径
lineSize
线条粗细 格式:2lineColor
线条颜色 格式:"#ff0000"fillColor
填充颜色 格式:"#ff0000"
重新绘制多边形
GGraph:redrawPolygon(lineSize, lineColor, fillColor, points)
以组件(0,0)为坐标原点
lineSize
线条粗细 格式:2lineColor
线条颜色 格式:"#ff0000"fillColor
填充颜色 格式:"#ff0000"points
多边形点列表 格式:[x1,y1,x2,y2,x3,y3...]
重新绘制正多边形
GGraph:redrawRegularPolygon(lineSize, lineColor, fillColor, sides, startAngle, distances)
以组件(0,0)为坐标原点
lineSize
线条粗细 格式:2lineColor
线条颜色 格式:"#ff0000"fillColor
填充颜色 格式:"#ff0000"sides
正多边形边数目 格式:3startAngle
开始旋转角度 格式:45distances
正多边形每顶点距中心半径比例 格式:{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总时间,单位:mselapsedTime
流逝的时间,单位: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[&quot;cmds&quot;] then
self[&quot;cmds&quot;] = {}
end
table.insert(self[&quot;cmds&quot;], cmd);
end
--结束绘制
function GGraph:endDraw()
if self[&quot;cmds&quot;] then
self.__node_prop[&quot;cmds&quot;] = json.encode(self[&quot;cmds&quot;]);
self[&quot;cmds&quot;] = nil
end
end
--重新绘制矩形
--param lineSize 线条粗细 格式:2
--param lineColor 线条颜色 格式:&quot;#ff0000&quot;
--param fillColor 填充颜色 格式:&quot;#ff0000&quot;
--param cornerRadius 圆角半径 格式:{5,5,5,5} 按照左上、右上、左下、右下的顺序设置;//只有一个值时,四个圆角都会设置为该值
function GGraph:redrawRect(lineSize, lineColor, fillColor, cornerRadius)
local cmd = {fun=&quot;redrawRect&quot;, args={}}
if lineSize then
cmd.args[&quot;lineSize&quot;] = lineSize
end
if lineColor then
cmd.args[&quot;lineColor&quot;] = lineColor
end
if fillColor then
cmd.args[&quot;fillColor&quot;] = fillColor
end
if cornerRadius then
cmd.args[&quot;cornerRadius&quot;] = cornerRadius
end
self:addCmd(cmd)
return self
end
--重新绘制椭圆(包括圆形)
--param lineSize 线条粗细 格式:2
--param lineColor 线条颜色 格式:&quot;#ff0000&quot;
--param fillColor 填充颜色 格式:&quot;#ff0000&quot;
function GGraph:redrawEllipse(lineSize, lineColor, fillColor)
local cmd = {fun=&quot;redrawEllipse&quot;, args={}}
if lineSize then
cmd.args[&quot;lineSize&quot;] = lineSize;
end
if lineColor then
cmd.args[&quot;lineColor&quot;] = lineColor;
end
if fillColor then
cmd.args[&quot;fillColor&quot;] = fillColor;
end
self:addCmd(cmd)
return self
end
--重新绘制多边形
--param lineSize 线条粗细 格式:2
--param lineColor 线条颜色 格式:&quot;#ff0000&quot;
--param fillColor 填充颜色 格式:&quot;#ff0000&quot;
--param points 多边形点列表 格式:[x1,y1,x2,y2,x3,y3...]
function GGraph:redrawPolygon(lineSize, lineColor, fillColor, points)
local cmd = {fun=&quot;redrawPolygon&quot;, args={}}
if lineSize then
cmd.args[&quot;lineSize&quot;] = lineSize;
end
if lineColor then
cmd.args[&quot;lineColor&quot;] = lineColor;
end
if fillColor then
cmd.args[&quot;fillColor&quot;] = fillColor;
end
cmd.args[&quot;points&quot;] = points;
self:addCmd(cmd)
return self
end
--重新绘制正多边形
--param lineSize 线条粗细 格式:2
--param lineColor 线条颜色 格式:&quot;#ff0000&quot;
--param fillColor 填充颜色 格式:&quot;#ff0000&quot;
--param sides 正多边形边数目 格式:3
--param startAngle 开始旋转角度 格式:45
--param distances 正多边形每顶点距中心半径比例 格式:{1, 1, 1},有几条边distances就有几个值
function GGraph:redrawRegularPolygon(lineSize, lineColor, fillColor, sides, startAngle, distances)
local cmd = {fun=&quot;redrawRegularPolygon&quot;, args={}}
if lineSize then
cmd.args[&quot;lineSize&quot;] = lineSize;
end
if lineColor then
cmd.args[&quot;lineColor&quot;] = lineColor;
end
if fillColor then
cmd.args[&quot;fillColor&quot;] = fillColor;
end
if sides then
cmd.args[&quot;sides&quot;] = sides;
end
if startAngle then
cmd.args[&quot;startAngle&quot;] = startAngle;
end
if distances then
cmd.args[&quot;distances&quot;] = distances;
end
self:addCmd(cmd)
return self
end
--清空绘制
function GGraph:clearDraw()
local cmd = {fun=&quot;clearDraw&quot;, 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=&quot;drawLine&quot;, args={}}
cmd.args[&quot;fromX&quot;] = fromX;
cmd.args[&quot;fromY&quot;] = fromY;
cmd.args[&quot;toX&quot;] = toX;
cmd.args[&quot;toY&quot;] = toY;
cmd.args[&quot;lineColor&quot;] = lineColor;
if lineWidth then
cmd.args[&quot;lineWidth&quot;] = 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=&quot;drawLines&quot;, args={}}
cmd.args[&quot;x&quot;] = x;
cmd.args[&quot;y&quot;] = y;
cmd.args[&quot;points&quot;] = points;
cmd.args[&quot;lineColor&quot;] = lineColor;
if lineWidth then
cmd.args[&quot;lineWidth&quot;] = 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=&quot;drawCurves&quot;, args={}}
cmd.args[&quot;x&quot;] = x;
cmd.args[&quot;y&quot;] = y;
cmd.args[&quot;points&quot;] = points;
cmd.args[&quot;lineColor&quot;] = lineColor;
if lineWidth then
cmd.args[&quot;lineWidth&quot;] = 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=&quot;drawRect&quot;, args={}}
cmd.args[&quot;x&quot;] = x;
cmd.args[&quot;y&quot;] = y;
cmd.args[&quot;width&quot;] = width;
cmd.args[&quot;height&quot;] = height;
if fillColor then
cmd.args[&quot;fillColor&quot;] = fillColor;
end
if lineColor then
cmd.args[&quot;lineColor&quot;] = lineColor;
end
if lineWidth then
cmd.args[&quot;lineWidth&quot;] = 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=&quot;drawCircle&quot;, args={}}
cmd.args[&quot;x&quot;] = x;
cmd.args[&quot;y&quot;] = y;
cmd.args[&quot;radius&quot;] = radius;
if fillColor then
cmd.args[&quot;fillColor&quot;] = fillColor;
end
if lineColor then
cmd.args[&quot;lineColor&quot;] = lineColor;
end
if lineWidth then
cmd.args[&quot;lineWidth&quot;] = 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=&quot;drawPie&quot;, args={}}
cmd.args[&quot;x&quot;] = x;
cmd.args[&quot;y&quot;] = y;
cmd.args[&quot;radius&quot;] = radius;
cmd.args[&quot;startAngle&quot;] = startAngle;
cmd.args[&quot;endAngle&quot;] = endAngle;
if fillColor then
cmd.args[&quot;fillColor&quot;] = fillColor;
end
if lineColor then
cmd.args[&quot;lineColor&quot;] = lineColor;
end
if lineWidth then
cmd.args[&quot;lineWidth&quot;] = 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=&quot;drawPoly&quot;, args={}}
cmd.args[&quot;x&quot;] = x;
cmd.args[&quot;y&quot;] = y;
cmd.args[&quot;points&quot;] = points;
if fillColor then
cmd.args[&quot;fillColor&quot;] = fillColor;
end
if lineColor then
cmd.args[&quot;lineColor&quot;] = lineColor;
end
if lineWidth then
cmd.args[&quot;lineWidth&quot;] = lineWidth;
end
self:addCmd(cmd)
return self
end
--绘制路径。
--@param x 开始绘制的 X 轴位置。
--@param y 开始绘制的 Y 轴位置。
--@param paths 路径集合,路径支持以下格式:[[&quot;moveTo&quot;,x,y],[&quot;lineTo&quot;,x,y,x,y,x,y],[&quot;arcTo&quot;,x1,y1,x2,y2,r],[&quot;closePath&quot;]]。
--@param brush (可选)刷子定义,支持以下设置{fillStyle}。
--@param pen (可选)画笔定义,支持以下设置{strokeStyle,lineWidth,lineJoin,lineCap,miterLimit}。
function GGraph:drawPath(x,y,paths,brush,pen)
local cmd = {fun=&quot;drawPath&quot;, args={}}
cmd.args[&quot;x&quot;] = x;
cmd.args[&quot;y&quot;] = y;
cmd.args[&quot;paths&quot;] = paths;
if brush then
cmd.args[&quot;brush&quot;] = brush;
end
if pen then
cmd.args[&quot;pen&quot;] = pen;
end
self:addCmd(cmd)
return self
end
ssr_ui.node.lua 新增水平和垂直缩放接口
function ssr_ui_node:set_scaleX(scale)
self.__node_prop[&quot;scaleX&quot;] = scale
return self
end
function ssr_ui_node:set_scaleY(scale)
self.__node_prop[&quot;scaleY&quot;] = scale
return self
end
ssr.lua新增节点属性
ssr.node_prop = {
['scaleX'] = { desc = '缩放X' },
['scaleY'] = { desc = '缩放Y' },
[&quot;cmds&quot;] = {&quot;命令&quot;},
}
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(&quot;graph_1&quot;)
rectGrp:set_scale(0.8)
rectGrp:redrawRect(0, nil, &quot;#ffff00&quot;, {10,10,10,10});
rectGrp:endDraw()
table.insert(ui_tbl, rectGrp)
--重绘圆形
local circleGrp = GGraph:new(&quot;graph_2&quot;)
circleGrp:set_scale(0.8)
circleGrp:redrawEllipse(0, nil, &quot;#ff0000&quot;);
circleGrp:endDraw()
table.insert(ui_tbl, circleGrp)
--重绘椭圆
local ellipseGrp = GGraph:new(&quot;graph_3&quot;)
ellipseGrp:set_scaleY(0.5)
ellipseGrp:redrawEllipse(0, nil, &quot;#ff0000&quot;);
ellipseGrp:endDraw()
table.insert(ui_tbl, ellipseGrp)
--重绘多边形
local polygonGrp = GGraph:new(&quot;graph_4&quot;)
polygonGrp:redrawPolygon(0, nil, &quot;#ff00ff&quot;, {50,0,140,70,100,120,50,150,0,80});
polygonGrp:endDraw()
table.insert(ui_tbl, polygonGrp)
--重绘正多边形
local regularPolygonGrp = GGraph:new(&quot;graph_5&quot;)
regularPolygonGrp:redrawRegularPolygon(0, nil, &quot;#cccccc&quot;, 5, 45);
regularPolygonGrp:endDraw()
table.insert(ui_tbl, regularPolygonGrp)
--绘制线条
local onelineGrp = GGraph:new(&quot;graph_6&quot;)
onelineGrp:clearDraw();
onelineGrp:drawLine(20,80,120,80, &quot;#00ff00&quot;, 4)
onelineGrp:endDraw();
table.insert(ui_tbl, onelineGrp)
--绘制多条线条
local mulLineGrp = GGraph:new(&quot;graph_7&quot;)
mulLineGrp:clearDraw();
mulLineGrp:drawLine(20,20,120,120, &quot;#00ff00&quot;, 4)
mulLineGrp:drawLine(20,120,120,20, &quot;#00ff00&quot;, 4)
mulLineGrp:endDraw();
table.insert(ui_tbl, mulLineGrp)
--绘制一系列线段
local serialLineGrp = GGraph:new(&quot;graph_8&quot;)
serialLineGrp:clearDraw();
serialLineGrp:drawLines(0,0,{20,20,120,20,20,120,120,120}, &quot;#00ff00&quot;, 4)
serialLineGrp:endDraw();
table.insert(ui_tbl, serialLineGrp)
--绘制曲线
local curvesGrp = GGraph:new(&quot;graph_9&quot;)
curvesGrp:clearDraw();
curvesGrp:drawCurves(0,0,{20,80,50,0,80,80,110,160,140,80}, &quot;#00ff00&quot;, 4)
curvesGrp:endDraw();
table.insert(ui_tbl, curvesGrp)
--绘制填充矩形和矩形框
local mulRectGrp = GGraph:new(&quot;graph_10&quot;)
mulRectGrp:clearDraw();
mulRectGrp:drawRect(20,40,40,80, &quot;#0066FF&quot;)
mulRectGrp:drawRect(100,40,40,80, nil, &quot;#0066FF&quot;, 2)
mulRectGrp:endDraw();
table.insert(ui_tbl, mulRectGrp)
--绘制圆形
local mulCircleGrp = GGraph:new(&quot;graph_11&quot;)
mulCircleGrp:clearDraw();
mulCircleGrp:drawCircle(80,80,50, &quot;#ffcc00&quot;)
mulCircleGrp:endDraw();
table.insert(ui_tbl, mulCircleGrp)
--绘制扇形
local mulCircleGrp = GGraph:new(&quot;graph_12&quot;)
mulCircleGrp:clearDraw();
mulCircleGrp:drawPie(80,80,50,45,315,&quot;#ffccff&quot;)
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(&quot;graph_13&quot;)
polyGrp:clearDraw();
polyGrp:drawPoly(80,80,points,&quot;#ff0000&quot;)
polyGrp:endDraw();
table.insert(ui_tbl, polyGrp)
--绘制路径
local paths = {}
table.insert(paths, {&quot;moveTo&quot;,40,40})
table.insert(paths, {&quot;lineTo&quot;,120,40})
table.insert(paths, {&quot;arcTo&quot;,160,40,160,80,40})
table.insert(paths, {&quot;lineTo&quot;,120,120})
table.insert(paths, {&quot;arcTo&quot;,0,120,0,80,40})
table.insert(paths, {&quot;lineTo&quot;,40,40})
table.insert(paths, {&quot;closePath&quot;})
local pathGrp = GGraph:new(&quot;graph_14&quot;)
pathGrp:clearDraw();
pathGrp:drawPath(0,0,paths,{fillStyle=&quot;#cc6600&quot;},{strokeStyle=&quot;#ffffff&quot;,lineWidth=20})
pathGrp:endDraw();
table.insert(ui_tbl, pathGrp)
local clearBtn = GButton:new(&quot;clearBtn&quot;)
clearBtn:set_link(_pack('clearView'))
table.insert(ui_tbl, clearBtn)
local refreshBtn = GButton:new(&quot;refreshBtn&quot;)
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(&quot;graph_&quot;..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