css - 主流浏览器的亚像素精度现状如何？

Question

我正在开发一个需要高精度的绘图应用程序，我想知道哪个主要浏览器平台（包括 HTML Canvas 元素和 Flash）提供了最佳的子像素布局精度，无论是对于绘制的元素（ Canvas 或 Flash 中的矩形，浏览器中绝对定位的 DIV）和文本。

在这个网站和其他网站上都有很多与此相关的帖子（见底部列表），但很多都是相当古老的，没有一个能总结当前的情况。

我的理解是，Flash原生支持亚像素定位，使用twips将对象定位到二十分之一像素，而当使用TextLayoutFramework时，这种精度也延伸到了文字上。但是，至少有一份报告表明这在 Chrome 中无法正常工作。谁能证实这一点？

我对浏览器情况的理解是，Firefox 14+ 在页面布局和画布中都支持文本和绘制元素的亚像素定位，但我无法确定这有多准确。

我了解 Chrome（从 v21 开始）根本不支持亚像素定位。

我知道 IE9 不支持亚像素定位，但从下面链接的 MS 博客文章中可以看出 IE10 会。

我不知道这是否有任何 Mac/PC 差异，我也不知道 Flash 的准确性是否因平台和/或浏览器而异。

我理解这样一个总结性的问题可能会引起一些争论，但我相信这是足够具体的，可以让人们提供有用的答案，并希望这个线程可以作为定位精度到现在的状态的参考。

一些参考资料：

score 10 · Accepted Answer

目前，您可以期待最好的舍入和亚像素支持来自 Mozilla，而 IE 则获得亚军。IE 最终可能会得到更好的调整，但它们的发布周期如此之长，以至于 Mozilla 可能会领先于它们。

就做亚像素布局而言，你可能会追逐一缕，因为亚像素优势改善了抗锯齿问题，而不是屏幕定位精度。无论亚像素支持如何，您的图像都不会比真实位置更精确 1 个像素。

一些浏览器不能正确缩放的原因与子像素支持无关，这是因为它们没有记住确切的位置和正确的舍入。换句话说，它们过早地舍入了位置，导致图像未对齐。

score 2 · Accepted Answer

简短的回答：
不。这是不可能的/记录在案的。
即使通过实验确定，也不能保证将来保持不变。

长答案：
在亚像素精度下，浏览器/操作系统/硬件之间在如何捕获/渲染输入方面存在很大差异。在大多数现代浏览器上启用硬件加速后，在不同操作系统上运行不同浏览器的不同 PC 之间的渲染存在大量差异。如此之多，甚至可以通过普通样本的渲染输出中的细微差异来识别每个唯一用户。

与其担心底层框架的差异，不如将绘图应用程序的 UI 设计为独立于这些问题。我现在能想到的几种方法是：

更新：
“缩放”操作将是您的自定义实现，而不是底层框架的功能。因此，如果您需要 1/10 像素的亚像素精度，则需要将 10x_zoom() 实现为 Web 应用程序的一部分，该应用程序将从

第一个像素 --> 10x10pixels at (0,0),
第二个像素 --> 10x10pixels 从 (11,11) 开始。

这样一来，人们就会对数据有一个非常放大的视图，但是框架很高兴地没有意识到这一切，并且可以精确地渲染到屏幕像素（在我们的例子中，它现在是图像像素的 1/10）。

还需要注意的重要一点是，如果一次对整个图像执行此操作会消耗大量内存。因此，仅对“缩放窗口”中图像的可见部分执行此操作会更快且内存占用更少。

一旦在您的绘图网络应用程序中实现，框架中的亚像素不准确性可能不会成为用户的问题，因为他总是可以切换到这些模式并提供准确的输入。

2 回答 2