# NzSOwDHlgiPCx9klcKWcxzawnhe

Source: https://dianchukeji.feishu.cn/wiki/NzSOwDHlgiPCx9klcKWcxzawnhe


# 一.工作内容概述
  - 持续推进碎片收集系统进度
  - 尝试使用AI制作图片处理工具，解决之前遇到的“边缘问题”
# 二.图片处理工具
## 问题背景
在之前的尝试中，AI生成的单个按钮、图标或面板，视觉上看起来可用，但边缘像素通常不适合直接作为游戏资源使用，体现在如下方面：
  - 背景不是真实透明背景，而是被绘制上去的真实像素。
  - 使用AI进行抠图无法解决边缘问题，产出的图片边缘存在大量瑕疵，完全无法使用
## 尝试思路
尝试使用AI编写工具来进行资源的处理，思路如下：
使用特定颜色（如洋红色#FF00FF） 作为临时背景识别色工具通过这个颜色判断背景区域。但不能简单地把所有接近 #FF00FF 的像素都删除，因为素材内部也可能有粉色、紫色高光或装饰。因此需要通过“外部连通区域”来识别真正背景。
处理原则是：

> [嵌入电子表格: HcE6syErph4tJ9tlkn0c...]

也就是说，目标不是把素材变成纯扁平图形，而是把它处理成：**主体仍然有质感，但外部轮廓干净、透明、无紫边。**
如果输入图是高像素版本，例如目标尺寸的 3 倍或 4 倍，工具可以先完成边缘处理，再缩小到目标尺寸。
这样可以减少：
    - 紫边；
    - 锯齿；
    - AI 生成噪点；
    - 边缘不稳定像素。
但也要注意：
    - 小高光可能变弱；
    - 极细描边可能变淡；
    - 图标细节可能略糊。
所以缩放需要使用高质量算法，并允许轻微锐化。
## 流程原理梳理
### 颜色距离检测：判断像素是否接近背景色
工具首先计算每个像素与 #FF00FF 的颜色距离。
背景色为：
颜色距离计算：
距离越小，说明像素越接近背景色。
这一步的作用是：
  - 识别纯背景像素
  - 识别接近背景色的混色像素
  - 辅助判断紫边污染
不会直接删除像素，只是生成“背景候选区域”。
### 泛洪填充：只识别外部背景
仅靠颜色距离还不够，因为素材内部也可能有类似颜色。
因此工具从画布四周开始做泛洪填充：从图片四条边缘开始，找到接近 #FF00FF 的像素，向相邻像素扩散，只把与画布外部连通的区域标记为背景。这样可以避免误删素材内部的粉色或紫色内容。
例如：按钮内部的粉色高光，如果没有和外部背景连通，就不会被识别为背景
这一步会得到背景 Mask：背景区域 = 1，非背景区域 = 0
### 提取素材主体 Mask
背景 Mask 取反后，就可以得到素材主体的大致区域：主体 Mask = 非背景区域
但这个主体 Mask 还不一定干净，因为它可能包含：
  - 真正的按钮主体
  - 正常抗锯齿边缘
  - 外部阴影残留
  - 外发光残留
  - 紫边污染像素
所以这一步只是得到粗略主体，后续还需要边缘清理。
### 生成边缘检测区
为了只处理边缘问题，不误伤按钮内部质感，工具会基于主体 Mask 生成一圈边缘检测区。
方法是：
这个区域主要用于检查：
  - 外部阴影、发光
  - 混色边缘
  - 灰色软边等
这样工具只会重点处理素材外轮廓附近的问题，不会大范围修改按钮内部的高光、渐变和描边。
### 识别外部污染像素
工具在边缘检测区中判断哪些像素属于污染。
判断依据主要有两个：
  - 位置在主体外轮廓附近
  - 颜色接近 #FF00FF 或明显偏紫 / 偏灰 / 偏蓝光晕
污染大致分三类：

> [嵌入电子表格: HcE6syErph4tJ9tlkn0c...]

### 边缘去污染：修正紫边
紫边的本质是主体颜色与背景色混合：
例如白色按钮边缘与紫色背景混合后，就会变成淡紫色。
工具处理时分两种情况：
这类像素不属于素材本体，直接删除：
这类像素可能是正常抗锯齿，只是颜色被污染。
如果直接删除，会让按钮边缘变硬或破损。
更合理的方式是：找到紫边像素后，在附近寻找干净的主体颜色，用邻近主体颜色修正紫边
这样可以做到：去掉紫边，保留正常边缘过渡，避免按钮轮廓被硬切
### 生成真实 Alpha 通道
清理背景和边缘污染后，工具生成最终透明通道。
规则如下：
最终结果是：
此时 #FF00FF 背景已经被完全移除，最终图片是真正的透明 PNG。
### 自动裁切与安全边距
生成 Alpha 后，工具根据非透明区域计算最终裁切范围：
安全边距的作用是：
  - 避免素材贴边
  - 防止缩放时边缘被裁掉
  - 方便导入引擎后对齐
### 高像素缩放与轻微锐化
如果输入图是高像素版本，工具可以在边缘处理完成后缩放到目标尺寸，可以起到如下效果：
  - 减少锯齿
  - 弱化残留噪点
  - 让边缘更稳定
如果缩放后素材边缘变软，可以做轻微锐化用来恢复。
## 效果展示
![图片](../feishu-images/NzSOwDHlgiPCx9klcKWcxzawnhe_HqrDb9mWaoUn.png)
![图片](../feishu-images/NzSOwDHlgiPCx9klcKWcxzawnhe_DeSQbFvuOoe7.png)
![图片](../feishu-images/NzSOwDHlgiPCx9klcKWcxzawnhe_RN1ubzUQrojf.png)
![图片](../feishu-images/NzSOwDHlgiPCx9klcKWcxzawnhe_SrRGbt21Uo3S.png)
![图片](../feishu-images/NzSOwDHlgiPCx9klcKWcxzawnhe_SStPbbVsKo8p.png)
![图片](../feishu-images/NzSOwDHlgiPCx9klcKWcxzawnhe_SO3IbwHRSoB4.png)
![图片](../feishu-images/NzSOwDHlgiPCx9klcKWcxzawnhe_YeeVbZmbzoT8.png)
![图片](../feishu-images/NzSOwDHlgiPCx9klcKWcxzawnhe_TwojbFiQZopT.png)
![图片](../feishu-images/NzSOwDHlgiPCx9klcKWcxzawnhe_FnOEbE6YDoad.png)
当前版本相比前一版已经明显稳定，核心问题基本从“紫边 / 伪透明 / 抠图失败”转变为“白色 UI 柔边在深色背景下的显示适配”。
从检查结果看，图片 Alpha 状态正常，存在完整透明区、半透明边缘区和不透明主体区，背景已经是真透明，并不是伪透明背景，也不是黑底或压缩问题。
目前紫边的问题已基本解决，缩放锯齿也在可接受范围内。剩余主要问题是部分按钮边缘仍有浅色半透明柔边，在黑色或深色背景下会显示成灰白边。这主要来自按钮本身的白色柔边和浅蓝描边，不属于抠图异常。
## 仍未解决的问题