# 立绘层取景跟随背景图的 cover 缩放 立绘层(spine 特效层)的可见世界矩形不再按"含住作者视口"(contain)映射, 而是让它与背景图 `background-size: cover` 的缩放**同步**:背景放大多少倍,立绘层就放大多少倍。 ## 问题 背景走 CSS `cover`(铺满、按需裁切),立绘层走播放器自带的 contain 映射。 两者只在作者调参的那个比例下一致,比例一变缩放就分叉。以 1080×1920 竖屏为例, 背景被放大约 1.78 倍,立绘层的世界高度却纹丝不动——特效与背景插画脱节。 需要说明的是:contain 本身**不会**裁掉作者视口。可见矩形是宽高比等于画布、 且恰好含住作者视口的最小矩形,所以作者视口在任何比例下都完整可见。 "负内边距在其它比例下会裁掉主体"这个最初的判断经实测证伪。 ## 决定 - 参考比例取 `16/9`。该比例下取景与作者设定**逐像素一致**,保证已发布的观感不被改动。 - 其它比例:`V.h = V0.h × coverScale(参考比例) / coverScale(当前比例)`,中心不变, 其中 `V0` 是作者视口换算到参考比例后的可见矩形。等价于"立绘层相对背景插画永远 cover"。 - 应用方式是原地改写 `config.viewport` 字段后调 `player.setViewport(动画名)`, 绝不整体替换该对象:`setViewport()` 会无条件读 `config.viewport.animations[name]`, 换掉整个对象会在 `spine-player.js` 第 14973 行崩溃。 - 维护时机挂在 `config.frame` 回调(每帧相机计算之前),以画布比例作键。 `config.success` 不可用:它在 `setViewport` 之前触发,那时 `currentViewport` 还不存在。 - 预设可声明 `framing: "author"` 退回 contain 行为。 ## 代价 21:9 与 9:16 下立绘层的可见范围会明显收窄(竖屏约收窄到 1/4 宽度), 因为要让特效跟着被放大 1.78 倍的背景走。这是刻意的:不这样做,特效就会与背景插画对不上。 16:9 不受影响。若某档壁纸不适合这个策略,用 `framing: "author"` 单独退回。 ## 背景图比例从哪来 运行时读图片的 `naturalWidth / naturalHeight`,不在预设里重复写一个容易写错的数字。