← 探索新知
ASTERXOR / 探索新知

经得起放大的图像

形状说明可以重新绘制,固定像素网格只能提供已经记录的内容。

藏蓝背景上细致的金色圆形轮廓。
用于栅格比较的解析圆源几何。
探索新知ASTERXOR / LEON LEUNG

为什么有些标志放大后仍然清楚,有些却露出方块?

两幅图在某个尺寸下看起来几乎一样,内部却可能保存完全不同的信息。一幅记录圆心和半径,另一幅记录矩形彩色样本数组。放大它们,是在向源材料提出不同问题。一个简单圆形就能说明区别,不需要依赖特定绘图软件或查看器。

缩放配方,与放大上次结果,是两回事。
THE RECIPE

一个圆,可以是一条短指令

源形状圆心为零、半径0.72,位于两轴都从−1到1的方框里。内部条件是坐标平方和不大于半径平方。这条规则能回答任意一点是否在圆内,无需为每个可能位置都保存颜色。

这就是矢量图的重要思路:用几何和绘制指令表示形状。路径、填色、描边和变换可以作为可编辑描述保留。复杂插画可能需要很多指令,但放大坐标系统,不必把原形状变成一张既有方块网格。

同一个圆,以24、96、384像素边长进行中心点测试。
FIG 01同一个圆,以24、96、384像素边长进行中心点测试。
THE GRID

栅格化,选择有限个问题

栅格器在每个像素中心采样,询问它是否在圆内,分别使用每边24、96、384个样本。每个像素取0或1。这个刻意简单的点测试让采样可见,并不是许多绘图系统使用的覆盖率抗锯齿。

三幅图中的圆方程没有改变,变化的是提问密度。细网格用小台阶跟随曲边,粗网格只能作大块判断。形状没有获得更多数学细节,是栅格表示增加了对同一几何的采样。

轻微平移能揭示中心采样的另一种影响。让圆沿两个轴各移动半个粗像素间距,即各约 0.041667 坐标单位。真实面积没有变化,24×24 二值网格的面积估计却从约 1.66667 变为 1.67361,因为跨过边界的采样中心换了一批。这是采样效应,不说明几何对象在移动时变大,也不说明源描述受损。

放大旧栅格与重新渲染原几何,是不同操作。
FIG 02放大旧栅格与重新渲染原几何,是不同操作。
TWO ENLARGEMENTS

放大像素,不会再问一次形状

并排图比较的是:用最近邻显示放大的24 × 24栅格,以及从原始圆重新渲染的384 × 384图。前者每个旧样本变成可见方块,后者用几何定义计算新的采样位置。

其他插值滤镜可以让放大栅格更平滑,方块不那么明显。它们根据现有样本估计中间值,不是去查询栅格文件里可能早已不存在的原始曲线。即使放大图好看,这个区别仍然存在。合理的边缘不自动等于恢复了原边界测量。

这也解释了为什么即使导出图看起来平滑,也应检查源。滤镜可以软化锯齿轮廓,却没有增加可用的形状信息。若接下来要改圆的半径或编辑曲线,柔化后的位图仍然没有原始可编辑方程。在某个显示尺寸下看起来不错,与未来能否可靠地修改,是两种不同的质量;丢弃源文件前应分别检查。

像素计数面积估计从不同方向接近精确圆面积。
FIG 03像素计数面积估计从不同方向接近精确圆面积。
COUNT THE AREA

面积提供另一种比较

数出内部像素,再乘以单像素面积,可估算圆面积。精确几何值为π乘0.72平方,约1.62860平方坐标单位。三种网格估计约1.66667、1.62500、1.62804。最细结果接近真值,但中间估计偏低,最粗估计偏高。

这些数字说明,分辨率并不保证每一步都单调变准确。边界与采样网格如何对齐很重要。本序列绝对误差递减,但换一组分辨率,误差可能来回波动。解析覆盖率或更精细积分,可以回答比只测中心更准确的面积问题。

THE FINAL DISPLAY

显示最终仍然落在像素上

矢量图最终也要在普通屏幕上栅格化。它没有绕过像素网格,也不保证小尺寸永远清楚。细线可能消失,相邻特征可能融合,滤镜会改变边缘。优势在于保留描述,可为所需输出生成合适栅格。

文件格式本身也不能决定全部。SVG可以嵌入栅格照片,有些效果依赖栅格处理。文档叫矢量,不代表所有元素都与分辨率无关。标志或图表缩放表现异常时,应查看实际源对象与导出设置。

抗锯齿并不会让最终网格消失。它可以记录一个像素有多少比例被图形覆盖,而不是强迫每个边界像素完全属于内部或外部。这些中间值很有用,却不能让单个显示像素容纳任意多的独立细节,微小特征仍可能合并。覆盖率也不是经过校准的亮度测量;新图只是用色阶显示覆盖比例,没有测试显示伽马或合成软件。

KEEP THE SOURCE

保留适合工作的表示

几何标志、图标和示意图,保留可编辑矢量源通常很有用。照片则天然是拍摄的采样记录,强行压成几条曲线,可能丢掉最重要的纹理。混合文档合理使用两者,完全说得通。

实用习惯是保留相关信息最丰富的源,再为目标用途生成输出。源若是固定栅格,准备足够像素,并了解放大只能估计什么。源若是几何,就重新渲染,不要反复放大一份小导出图。

COVERAGE, NOT JUST CENTRES

在每个像素内部多问一些问题

保持输出为 24×24 像素,但在每个像素里放入规则的 16×16 子采样中心阵列。落在圆内的比例,就是该像素覆盖率的估计。最后仍只保存 576 个输出值,却总共向几何规则查询 147,456 次。在这个例子中,60 个边界像素的值严格介于零与一之间。比较图保持相同的显示像素比例,差异来自边界的中间值,而不是更大的输出。

把覆盖率乘以像素面积再求和,得到约 1.628038 平方坐标单位,精确值约为 1.628602。这里的子像素采样位置,恰好与前面的 384×384 网格相同。将它们分组改变的是输出表示,不是采样面积总和。有限次数的超采样仍是一种估计,并未对圆弧边界作解析积分。它改善了这个例子,却不能证明对所有形状都有统一误差保证。

这种区分给出了实用的导出检查方法:应在实际目标尺寸下检查细线、小孔和文字,而不只看大幅预览。保留几何源供将来重绘,并根据必须留下的最小特征选择栅格化方式。增加采样可以改善覆盖率估计,但没有方法能让所有细节在所有尺寸下都保留。有时,专为小尺寸简化过的图标,比把复杂源直接缩小更易读。

在完全相同的像素比例下,对比二值粗圆与边缘像素带有覆盖比例的圆。
FIG 04两张输出都保持 24×24 像素;第二张每像素使用 16×16 几何采样估计覆盖率。颜色代表覆盖率,而非校准光输出。

继续阅读

W3C SVG 2: Basic shapes ↗PBRT: Sampling theory ↗

原始资料与延伸阅读。

留一个想法带走

放大后的清楚,往往在放大之前,就由你保留了什么源文件决定。