Shuery
eb56efbd9e
取景（issue 04） - 新增 viewport-fitter.js：让立绘层缩放跟随背景图的 cover 缩放——背景放大多少倍、 特效就放大多少倍。原先背景走 cover、立绘层走 contain，比例一变两者就分叉。 16:9 下与作者设定逐像素一致（kv37 为 0 差异）。实测证伪了"contain 会裁掉作者视口" 这个最初的判断：contain 在任何比例下都完整含住作者视口。 - 应用方式为原地改写 config.viewport 字段后调 setViewport()，不重建播放器； 维护挂在 config.frame 上按画布比例增量进行（config.success 早于 setViewport，拿不到视口）。 WE 属性（issue 05） - project.json 新增 bgm combo（所有壁纸音源的并集 + 「随预设」）；所选项不属于当前壁纸时 音频回落该壁纸默认，选择本身保留。 - fps 限流包裹实例 drawFrame 并接管排程。修掉两个实测缺陷：朴素丢帧会把 rAF 抖动放大成 整拍丢失（目标 30fps 实测只有 22.5fps）；fps:0 被真值判断吞掉导致无法取消限流。 打包（issue 06） - project.json version 升至 3 并更新描述；preset 的 combo 取值保持 xilian/kv37 不变。 - preview.gif 821 KB → 347 KB（每 2 帧取 1 帧 + 128 色不抖动，逐帧与源帧像素完全相同）。 - index.html 加内联 favicon，消除 CEF 自动请求 /favicon.ico 造成的 404 报错。 其它 - dist/scripts/wallpaper-engine.js 移到 tools/：它没有任何入口引用，且环境判据依赖真实 WE 并不存在的 wallpaperRegisterListener，一旦按它自己的说明挂进 index.html 会在生产环境自我激活。 - 修正死文件检查：原检查会拿文件名匹配到文件自身的内容，使这类文件漏网。 - 新增离线算式验证与 resize / 属性 / 全量验收三套浏览器测试脚本。
73 lines
3.0 KiB
JavaScript
73 lines
3.0 KiB
JavaScript
// 取景公式的离线验证：不依赖浏览器，直接对 viewport-fitter.js 求值。
|
||
// 两条硬约束：① 16:9 下必须与作者设定完全一致；② 立绘层缩放比必须等于背景 cover 缩放比。
|
||
import { readFileSync } from "node:fs";
|
||
|
||
const src = readFileSync(new URL("../dist/scripts/viewport-fitter.js", import.meta.url), "utf8").replace(/^export\s+/gm, "");
|
||
const mod = new Function(
|
||
src + "\nreturn { contain, frameForAspect, coverScale, resolveViewport, toViewportConfig, REFERENCE_ASPECT };",
|
||
)();
|
||
|
||
const rect = (x, y, width, height) => ({ x, y, width, height });
|
||
const fmt = (r) =>
|
||
`x=${r.x.toFixed(2)} y=${r.y.toFixed(2)} w=${r.width.toFixed(2)} h=${r.height.toFixed(2)} 比例=${(r.width / r.height).toFixed(4)}`;
|
||
|
||
const cases = [
|
||
{
|
||
name: "xilian（昔涟立绘）",
|
||
R: rect(-2181.72, 1442.39, 4226.57, 3403.35),
|
||
imgW: 2048,
|
||
imgH: 1080,
|
||
},
|
||
{
|
||
name: "kv37（「成为昨日的明天」）",
|
||
R: rect(-1419.8, -512.4, 2457.6, 1228.8),
|
||
imgW: 2560,
|
||
imgH: 1440,
|
||
},
|
||
];
|
||
const canvases = [
|
||
[3440, 1440, "21:9"],
|
||
[1920, 1080, "16:9"],
|
||
[2560, 1600, "16:10"],
|
||
[1080, 1920, "9:16"],
|
||
];
|
||
|
||
// 背景走 CSS background-size:cover，它在画布上真实的像素缩放就是这两个候选里的较大者。
|
||
const bgScale = (w, h, imgW, imgH) => Math.max(w / imgW, h / imgH);
|
||
|
||
let failures = 0;
|
||
for (const c of cases) {
|
||
const imgAspect = c.imgW / c.imgH;
|
||
const V0 = mod.contain(c.R, mod.REFERENCE_ASPECT);
|
||
console.log(`\n=== ${c.name} 背景图 ${c.imgW}x${c.imgH}（比例 ${imgAspect.toFixed(4)}） ===`);
|
||
console.log(`作者视口 R : ${fmt(c.R)}`);
|
||
console.log(`参考取景 V0 : ${fmt(V0)}`);
|
||
|
||
// 基准取 16:9 1080p：立绘与背景都以此为准比较"被放大了多少倍"
|
||
const refCanvas = [1920, 1080];
|
||
const spinePx0 = refCanvas[1] / V0.height;
|
||
const bgPx0 = bgScale(refCanvas[0], refCanvas[1], c.imgW, c.imgH);
|
||
|
||
for (const [w, h, tag] of canvases) {
|
||
const aspect = w / h;
|
||
const V = mod.frameForAspect(V0, aspect, imgAspect);
|
||
const spineRatio = h / V.height / spinePx0;
|
||
const bgRatio = bgScale(w, h, c.imgW, c.imgH) / bgPx0;
|
||
const synced = Math.abs(spineRatio - bgRatio) < 1e-6;
|
||
if (!synced) failures++;
|
||
console.log(
|
||
` ${tag.padEnd(5)} ${String(w).padStart(4)}x${String(h).padEnd(4)} ${fmt(V)}` +
|
||
` 立绘 x${spineRatio.toFixed(4)} 背景 x${bgRatio.toFixed(4)} ${synced ? "同步 ✓" : "不同步 ✗"}`,
|
||
);
|
||
}
|
||
|
||
// 参考比例下必须与作者设定逐像素一致，且必须与拟合前的真实渲染值吻合
|
||
const Vref = mod.frameForAspect(V0, mod.REFERENCE_ASPECT, imgAspect);
|
||
const untouched = ["x", "y", "width", "height"].every((k) => Math.abs(Vref[k] - V0[k]) < 1e-9);
|
||
if (!untouched) failures++;
|
||
console.log(` 参考比例回归: ${untouched ? "与作者设定完全一致 ✓" : "被改动 ✗"}`);
|
||
}
|
||
|
||
console.log(`\n结论：${failures === 0 ? "全部通过 ✓" : `${failures} 项失败 ✗`}`);
|
||
process.exit(failures === 0 ? 0 : 1);
|