问题标签 [subpixel]

我有一条线应该越长越细。问题是，当像素变薄时，您可以清楚地看到跳跃。有没有办法在 Android 上进行亚像素渲染/抗锯齿？

canvas.drawRect()采用浮点值，但它忽略了这些。这是代码：

油漆对象已ANTI_ALIAS_FLAG启用并包含纯色。

这是默认行：

这是它变得更长更薄的时候。它的侧面应该有一些抗锯齿，尽管使整个过渡看起来更平滑。

根据文档，可以在 CATextLayer 中启用字体平滑：

Text can only be drawn using sub-pixel antialiasing when it is composited into an existing opaque background at the same time that it's rasterized.

以下是我对这句话的理解：

这是行不通的。不使用亚像素抗锯齿绘制文本。

I'm using css transform:scale to scale some elements up, and now the borders, which were originally 1px solid black, get some subpixel rendering - 'antialiasing' - since they are now 1.4px or something. Exactly how it looks depends on the browser, but its blurry on all modern browsers.

Can I disable subpixel rendering for certain elements?

我正在使用 C++ 和 OpenCV 开发一个简单的“激光线”扫描仪。到目前为止，我可以以 1 个像素的精度检测激光线的中心，因此我有一个可能的“亚像素”功能/算法的起点。（激光线宽约 15-20 像素）

现在我有兴趣将其改进为亚像素精度。我知道 OpenCV 有一些亚像素检测功能，但据我所知，这些仅用于检测角点。

如果有人有任何建议，我想听听他们的意见。

一些信息;

• 系统：QT Framework、C++、OpenCV库

• 相机; 单色（无颜色），配备红色滤光片

• 图像分辨率；2560 x 1920

• 注意：对于激光线，仅分析 1 个图像。

出于某种原因，我使用的任何版本的 Oracle JDK 都使用灰度提示而不是子像素。我在使用 Netbeans 7.3 甚至 Dev nightly+JDK 8 时注意到了这一点。

参照。这些图片：

左侧是 JDK 6，右侧是 JDK 8（与 JDK 7 的行为相同）

其他例子，在这里放大。

如何强制 Netbeans 使用亚像素提示？我什至在这里关注了常见问题解答，但运气不佳。

我知道 Apple 的 JDK 已针对 OS X 字体渲染进行了微调，但我发现我得到灰度提示而不是亚像素也很奇怪。

我有一个连续占用 829px 的容器，并且具有相同大小的背景图像。

我在该容器中有一个 div，它根据 829px 容器计算其宽度。在 safari 上，div 的宽度大约是 173.8px，但由于 safari/webkit 向下舍入，它被截断并变成 173px 的宽度。

这个 829px 的容器在同一行有 3 个内联 div。第一个 div 丢失了 1px，第二个 div 丢失了 2px，第三个 div 丢失了 3 个像素，因此第三个 div 向左移动了三个像素。在 ipad 上，那是 6 个像素丢失。

我试图搜索亚像素渲染问题，并且我阅读了 john resigs 文章和其他一些 SO 问题，但我找不到解决方案。

在谷歌上，我发现了一篇文章：http ://www.pixafy.com/blog/2013/05/css-subpixel-rendering/#more-310 我试图将它应用于我的情况，但我无法逃脱设置在容器上计算的宽度 829px。

我能做些什么？

光看一下 chromium 项目的 issue 列表，很多都是跨平台的文本渲染问题。不得不使用平台的文本渲染系统，并迎合他们各自的特质，我想这是很多工作。

为什么不简单地使用 FreeType 库并完成它呢？FreeType 用于 Linux、iOS 和 Android 等平台。因此，在这些平台上，浏览器无论如何都在使用封装的 FreeType 库。为什么不放弃这种包装，放弃 Windows 和 Mac 上的平台提供的渲染，转而使用纯 FreeType？

我想到的唯一答案是，也许是利用 Windows 和 Mac 提供的渲染提供的硬件加速合成和字形混合。

或者我的另一个答案是，可能是因为 WebKit 是在亚像素抗锯齿专利到期之前移植的，所以获得亚像素抗锯齿文本的唯一方法是使用平台提供的渲染。

这些都是正确的吗？如果不是，那是什么情况？

我有一个具有小数宽度（例如 250.5 像素）的 div 和一个宽度为 100% 的表格。出于某种原因，Chrome 会截断表格宽度的小数部分（例如，从 250.5 像素到 250 像素）。页面渲染时，div 向上取整，表格右侧与 div 右侧有 1 个像素的间隙。如果我嵌套一个 div，我不会遇到这个问题。

为什么会发生这种情况，有没有办法让表格保留小数部分？我只在 Chrome 中遇到问题；IE10 看起来不错。

问题演示@http://jsfiddle.net/7UrHa/

HTML：

CSS

我遇到了流体网格这个奇怪的问题。在 chrome 和 firefox 中一切看起来都不错，但在 Ios 和桌面 safari 上网格不会对齐。我意识到这是因为浏览器呈现子像素的方式不同。我的问题是是否有人对此有解决方法？

在这里查看一个工作示例：http: //codepen.io/anon/pen/eFyIl

I have the following fiddle which distills an issue I am having with a larger project

http://jsfiddle.net/zhaocnus/6N3v8/

in Firefox and Safari, this animation will start having a jittering effect left and right on odd zoom levels (zoom in/out using Ctrl+/- or Cmd+/- on Mac). I believe this is do to sub-pixel rendering issues and the differences between the various browsers round up or down pixels during the zoom calculations, but I have no idea how to fix it and am looking for any suggestions.

I can't use more modern CSS3 animation features as I need to support legacy browsers like IE7.

(code from fiddle below, can't seem to post without it, although not sure it makes sense without CSS and HTML)