图形（GGraph）

• 编辑器中使用图形
  点击侧工具栏中图形按钮即可创建图形，图形支持圆形，矩形，空白三种，空白不消耗任何显示资源，多用于占位。

  
  GImage_04.png
  GImage_05.png
  

  通过圆角可以扩展出椭圆，圆角矩形等形状。同时可以设置填充颜色，边框线条大小，颜色。

• 通过代码创建图形：

const testGraph = new fairygui.GGraph();
testGraph.drawRect(1,'0xff0000','0xff0000');
// 需要设置图形的大小，否则显示不出来
testGraph.setSize(200,200);
testCom.addChild(testGraph);

• 图形绘制实现过程

  
  GImage_03.png
  

  通过源码可以了解到图形的绘制实际是使用了Laya的Graphics来实现的。那么它的创建和绘制过程都是和Laya一致，这里就不说了。

图片（GImage）

• 将图片从左边资源库拖到舞台中就完成了图片组件的创建。图片组件同样有原大小属性，图片缩放时为了防止拉伸变形需要用到九宫格。FGUI中图片同样支持九宫格缩放。双击舞台中的图片组件或者资源库中的图片资源可以打开如下界面 GImage_02.png

• GImage继承于GObject,不同的是GObject中的displayObject属性是Laya.Sprite对象，而GImage的displayObject属性是fgui.Image对象。
  

  fgui.Image继承自Laya.Sprite用来显示图片资源。 GImage_06.png
• GImage可以设置填充方法实现裁剪效果，可以设置水平填充，垂直填充，90°填充（以左上点为原点），180°填充（以上中点为原点），360°填充（以中心点为原点），实际运用中可以实现技能的CD。比如： GImage_0.gif

• 图片作为UI的基础，一般不会单独显示，所以FGUI不推荐使用代码动态创建GImage，如果确实需要创建一个图片的话，它的创建方法如下：

const testImage = UIPackage.CreateObject("包名","图片名").asImage;

FGUI中的图片为了保证简单高效所以一旦创建不允许修改Texture也不允许点击,在有动态修改Texture或者支持点击的需求应该改为使用装载器（GLoader）。