主流浏览器中亚像素精度的当前状态是什么？

Question

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

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

我的理解是Flash本身支持子像素定位，使用缇将对象定位到像素的二十分之一，并且当使用TextLayoutFramework时，此精度也扩展到文本。但是，至少有一份报告表明这在Chrome中无法正常运行。谁能证实这一点？

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

我了解Chrome（截至v21）根本不支持子像素定位。

我理解IE9不支持子像素定位，但它出现在下面链接的MS博客帖子中，IE10会。

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

我理解像这样的总结问题可能引发一些争论，但我相信这对于人们提供有用的答案是足够具体的，并且希望这个线程可以作为目前定位准确性状态的参考。

一些参考文献：

http://blogs.msdn.com/b/ie/archive/2012/02/17/sub-pixel-rendering-and-the-css-object-model.aspx

Sub-pixel rendering in Chrome Canvas

http://johnblackburne.blogspot.co.uk/2011/11/twips.html

http://ejohn.org/blog/sub-pixel-problems-in-css/

Sub Pixel CSS positioning

https://productforums.google.com/forum/?fromgroups=#!topic/chrome/pRt3tiVIkSI

Answer 1

目前，你可以期待最好的舍入和子像素支持来自Mozilla，IE作为亚军。 IE可能最终会被更好地调整，但是他们的发布周期太长，以至于Mozilla可能会保持领先。

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

某些浏览器无法正确缩放的原因与子像素支持无关，这是因为它们无法正确记住确切位置和舍入。换句话说，它们过早地使位置变圆并导致图像不对齐。

Answer 2

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

答案很长：
在亚像素精度下，浏览器/ OS / HW之间在如何捕获/呈现输入方面存在很多差异。在大多数现代浏览器上启用h / w加速后，在不同操作系统上运行不同浏览器的不同PC上呈现的数量存在很大差异。这么多，甚至可以通过稍微不同的variations in the rendered output of a common sample来识别每个唯一用户。

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

1. 允许以缩放/放大级别编辑图像。

2. 为元素设计对齐网格方法。

<强>更新
“缩放”操作将是您的自定义实现，而不是底层框架的功能。因此，如果您需要亚像素精度达到像素的十分之一，那么就需要将一个10x_zoom（）实现为您的web-app的一部分，这将从中呈现数据

第1像素 - ＆gt; 10x10像素（0,0），
第二像素 - ＆gt; 10x10像素，从（11,11）开始。

这样一个人可以对数据有一个非常放大的视图，但是框架很幸福地没有意识到这一切，并且对屏幕上的像素（在我们的情况下现在是图像像素的1/10）精确呈现。 / p>

另外需要注意的是，如果一次完成整个图像，此操作将消耗大量内存。因此，仅在“缩放窗口”中对图像的可见部分执行此操作将更快，并且内存密集程度更低。

一旦在你的绘图web-app中实现，框架中的子像素不准确可能不会成为用户的问题，因为他总是可以切换到这些模式并提供准确的输入。