# UISprite图片渲染

# 概述

二维图片的渲染组件，根据节点的Transfrom大小与锚点，决定渲染区域大小与位置。

# 属性

# 渲染类型 type

// 图片渲染类型枚举值 engine.UISprite.Type
enum Type {
  Simple = 0, // 基础矩型图像渲染，默认值
  Sliced = 1, // 九宫格图像渲染模式
  Tiled = 2,  // 平铺渲染模式
  Filled = 3, // 填充渲染模式
}

• Simple 矩形图片渲染。
• Sliced 九宫格图片渲染，会基于 SpriteFrame 的 SlicedRect 定义九宫格的九个区域，边缘的八个区域大小固定，中间区域根据节点的渲染区域进行拉伸。
  • 支持 fillDir 为 Horizontal / Vertical 的使用，此时，会在九宫格的基础上实现水平或垂直的填充渲染。
• Tiled 平铺图片渲染，会基于 SpriteFrame 的 Rect 与 tileScale 算出的 tile 区域，去适配节点的渲染区域，从左上角开始平铺，保证图片充满渲染整个渲染区域，越界的渲染会隐藏掉。
• Filled 填充图片渲染，会根据 fillDir 决定填充的类型，invertFill 决定填充方向，fillAmount 决定填充比例进行渲染。

  // 填充类型枚举值 engine.UISprite.FillDirectionType
  enum FillDirectionType {
    Horizontal,
    Vertical,
    Radial90,
    Radial180,
    Radial360,
  }
  

# 图片切片 spriteFrame

图片渲染所使用的图片切片，当用户清除贴图（设置为Empty），就会使用 内置的透明贴图。

# 图片翻转 filp

图片在各个方向的渲染是否翻转

// 翻转类型枚举值 engine.UISprite.FlipType
enum FillDirectionType {
  Nothing, // 默认值
  Horizontally,
  Vertically,
  Both,
}

# 使用方法

# 代码使用

UISprite 是渲染组件，因此需要挂载到非渲染节点上。

const uiSpriteComponent = entity.addComponent(engine.UISprite);
uiSpriteComponent.spriteFrame = spriteFrameAssets;

# 编辑器使用

右键 - UI - 新建Sprite

# 使用案例

使用各类渲染元素