Unity UGUI进阶：手把手教你重写OnPopulateMesh实现自定义Filled裁剪

Unity UGUI深度定制：基于OnPopulateMesh实现九宫格Filled模式的高级实践

在Unity的UI开发中，进度条、血条等动态填充效果是高频需求。标准UGUI的Image组件虽然提供了Filled模式，但面对九宫格(Sliced)图片时却显得力不从心。本文将带你深入UGUI渲染管线，通过重写OnPopulateMesh方法，实现一个既支持九宫格又能完美适配Filled模式的增强型Image组件。

1. 理解UGUI渲染管线的核心机制

UGUI的渲染流程始于Canvas的Rebuild操作，当UI元素需要更新时，会触发Graphic类的OnPopulateMesh方法。这个方法负责生成网格(Mesh)数据，最终由CanvasRenderer提交给Unity的渲染管线。

传统Image组件的局限性主要体现在：

• Sliced模式：保持四个边角不变，仅拉伸中间区域，但无法实现渐进式裁剪
• Filled模式：支持径向、水平、垂直等多种填充方式，但不兼容九宫格特性

// 标准Image组件的OnPopulateMesh简化逻辑
protected override void OnPopulateMesh(VertexHelper vh)
{
    switch(type) {
        case Type.Sliced:
            GenerateSlicedSprite(vh);
            break;
        case Type.Filled:
            GenerateFilledSprite(vh);
            break;
        // 其他类型处理...
    }
}

2. 设计增强型Image组件的架构

我们需要创建一个继承自Image的新组件AdvancedFilledImage，核心是重写OnPopulateMesh方法，同时添加必要的属性控制：

[AddComponentMenu("UI/Advanced Filled Image")]
public class AdvancedFilledImage : Image 
{
    [SerializeField] private bool m_SlicedFillEnabled = false;
    
    protected override void OnPopulateMesh(VertexHelper vh)
    {