tamakyi
feb5b1f78d
- dev/theme-builder/index.html：单文件、不联网、图片本地转 WebP - 预览与线上同机制（pattern + 6 槽 deco + page-image），拖拽反解 calc(50% - Npx) - 导出 CSS + 图片 + 安装说明，CSS 通过 TestThemeCSSComplete - 自检：?selftest=1 吐 CSS/zip 字节，?demo=1 载入示例
6.4 KiB
6.4 KiB
2026-10-20
01:10 shiroko 主题补「空气层」
- 用户问「还有没有其他元素，贴合主题又不突兀」。结论：场景压白 38% 后整页亮度只有 235~246， 再摆物件（书包/粉笔/纸飞机）一定会像贴纸，所以走纯渐变造光路线。
- 做了 4 个候选截图（A 纯窗光 / B 白散景 / C 光环符号 / D 组合），用户选 D。 ⚠️ B 是反面教材：白色散景叠在已经压白的场景上，实测差异 0.14 级，肉眼完全不可见。 要"提亮"必须先有暗部，真正起作用的是「底部压深 + 暖色光斑」的组合。
- 最终
--tb-deco后 4 槽：左窗光柱（112deg）、右侧 120px 暖散景（88% 30%）、 脚下 560×170 地面光斑（28% 94%）、底部 24% 压深。亮度差 3~9 级。 - 验证手段（本轮模型读不了图，全靠数值）：留白区差分（与候选 D 差 0.0）、 分区亮度表、横向扫描相邻像素差 max 4（判色阶断层）、PNG 体积比对。
- ⚠️ 造预览页两个坑：① 覆盖块必须包在
<style>里，裸写会被当正文渲染，整页布局炸掉； ②--tb-deco各层之间漏逗号会让整条声明失效 → 人物和所有背景层全没，且各变体看起来"完全一样"。 以后先 diff 两个变体的 CSS 文本再截图。 StaticVersion→20261020a；提交fb94b8c已推送。文档docs/theme-shiroko.md加「空气层」一节。
08:30 重画光环
- 用户反馈「光环变形太奇怪，而且中间没有扣干净」。根因两条： ① AI 画的环本身歪（bbox 291,93–584,232，比头还宽、偏移到左边）； ② 环内是封闭白孔（面积 5190px 的包围区域），四角 floodfill 进不去 → 抠完环里糊着一团白。
- 做法：非白像素从环上一点漫水拿到独立连通域（与头发不连通，头部顶端在 y≈265，环只到 232）， 整块抹白；先把 alpha 建好，再在 RGBA 上画新环——环心天然就是透明的，不用给封闭孔补洞。
- 新环参数：中心 (515,160)、100×34、线宽 10、-7° 倾斜、4 倍超采样后 LANCZOS 缩小、 外加 45% 模糊柔光；颜色 (127,211,220)，压白 16% 后实测环心 (164,220,224)。
- 坑：擦除矩形右边界要绕开灰色狼耳（x>630，y 190-260，颜色 (139,140,146) 不是青色）， 差点一起抹掉。判据是连通域 bbox 而不是"上方全是空白"。
- 验证：alpha 字符图确认环闭合、环心 alpha=0；渲染后页面里青色像素 bbox (201,467)-(271,649)， 环在 y 468-486，头顶约 505，间距正常。
StaticVersion→20261020b，图片?v=20261020b；提交2e9bd6b已推送。
09:40 部署反馈三修 + 自行车/步枪
- 狼耳顶端被削平：上一版用矩形
(281,83)-(594,242)抹旧光环，右下角正好切到左耳尖 （耳尖在 y≈185、x 420-480）。改成只抹光环的非白连通域（bbox 291,93-584,232，与头发不连通）。 - 手内侧 / 大腿内侧白没抠干净：那是闭合的白色区域，四角 floodfill 进不去。 加封闭白孔检测（>=246 且不与边缘连通、面积>=40）整块掏成透明。 ⚠️ 阈值必须 >=251 才能当"背景"：背景恒为 (253,253,253)，而白袜子是 237， 用 246 当背景阈值会把袜子一起吃掉（第一版就吃穿了一只袜子）。
- 人物像站在课桌上：原场景前景全是课桌，根本没有地面。重出场景： 前景留空地、课桌退到右后方，人物脚下才是地板。
- 自行车 + 步枪：独立素材
props/bike.webp（镜像成车头朝右、与人同向、压白 26%、 自带接触阴影），放在人物身后偏左。deco 层顺序 = 画在上面的在前，所以第一层是人、 第三层是车，车天然被她挡住。 - ⚠️
background-position的百分比是相对(定位区宽 - 图片宽)，不是相对视口宽。 人（117px）和车（397px）用同一个calc(50% - 901px)会差出 280px，车直接跑出屏幕只剩一片轮圈。 按各自宽度反解后：人calc(50% - 524px)、车calc(50% - 612px)。 - ⚠️ 道具不能烘焙进背景：背景走
cover，视口一变裁切量就变，和固定 px 的人物必然分家。 - 场景重出后色调用「逐通道均值/方差对齐旧场景」保持同一雾度；移动端从同图竖裁，避免两个房间。
StaticVersion→20261020d；提交15aebd6已推送。
09:55 素材规格书
- 用户打算换工具自己生成素材 → 写了
docs/theme-shiroko-assets-spec.md： 画布/导出/显示尺寸、比例（人 1:3.41、道具 1.53:1、背景 16:9）、雾度（人 16%、车 26%、场景 3038%+模糊 1.21.4px）、 构图硬约束（左侧 22% 前景必须是空地，否则又回到"站在课桌上"）、换图清单与定位公式。 - 配色给的是压白后的显示值 + 反算公式
原色=(显示值-40.8)/0.84，并特别标注袜子要用#ededed而不是纯白（纯白会和背景粘连，抠图必然吃穿）。
10:40 主题生成器（dev/theme-builder）
- 单文件
dev/theme-builder/index.html：上传背景/人物/道具 → 拖拽调位置 → 导出 zip， 解压到项目根即可新增主题。不联网、不起服务、图片全在浏览器本地转 WebP。 - 预览用和线上同一套机制渲染（pattern + deco 6 层 + page-image，size/position 对齐），
不是另画示意图；拖出来的「左沿像素」反解成
calc(50% - Npx)，换视口不跑位。 - 导出包：
static/css/themes/<slug>.css+static/images/themes/<slug>/*.webp+INSTALL-<slug>.txt。 CSS 同时写浅色/深色两块，10 个必需令牌齐全——实测通过TestThemeCSSComplete。 - zip 自己实现（STORE + CRC32，约 40 行），不引 CDN；
unzip -t无错。 - 踩坑：① 面板里
c.text2写成 undefined（light 对象里才算出来的派生色，要用light.text2）； ②contain模式如果不按内容裁画布，会留大片透明边 → 导出宽高比全错； ③ 预览容器grid-template-columns:340px 1fr会被 1512px 的 frame 撑破 →minmax(0,1fr)； ④ 无头 Chrome 下canvas.toBlob的回调在--dump-dom前不触发 → 全部改toDataURL同步化， 自检才能跑（?selftest=1输出 CSS/zip 字节，?demo=1载入示例素材）。 - ⚠️ 预览里深色必须走「暗色渐变 + deco none」，否则会拿白天场景图压深底（和导出结果不一致）。