问题标签 [subpixel]

我正在尝试缓慢地为 div 的背景位置设置动画，但没有它有生涩的运动。你可以在这里看到我目前努力的结果：

http://jsfiddle.net/5pVr4/2/

我已经在这里工作了好几个小时，找不到任何可以在亚像素级别缓慢流畅地动画的东西。我当前的示例是根据此页面上的示例代码制作的：http: //css-tricks.com/parallax-background-css3/

在此页面的 translate() 示例中可以看到我所追求的动画的流畅度：

http://css-tricks.com/tale-of-animation-performance/

如果背景位置无法完成，有没有办法用多个 div 伪造重复背景并使用 translate 移动这些 div？

我正在寻找如何通过相移实现亚像素精度的解释。

我的问题是：
如果我有一个具有离散列数的投影仪和一个列数比投影仪更多的相机，那么我如何才能找到每个相机像素的精确深度值？是否假设投影像素值正在影响它的邻居？

也许这张图片我的问题更清楚了。在观察到的图像（相机像素）中，多个像素将始终包含相同的强度，因此会产生相同的对应关系（这可能是错误的）。如果我们只拟合每个像素的正弦曲线，我们就没有任何额外的信息——是吗？图像呈现绝对清晰的投影。

编辑：阅读有关亚像素渲染的更多信息，我了解到导致小数或部分像素值的 CSS 值不是“浏览器友好的”。因此，值应设置为小数位！

我正在通过对所有子元素（.project）的宽度求和来计算父元素（.container）的宽度。到目前为止，我尝试了这个，但它不起作用。有人可以帮帮我吗？

例如：当我有五个子元素，每个子元素的宽度为 363.667 像素时，我想获得 364 像素的宽度。

HTML 标记

jQuery

我有一个设置为显示内联块的 ul 和设置为显示内联块的列表元素。

ul 设置为具有 auto 宽度，因此如果容器这样做（响应式），它会缩小。

列表项设置为其内容的自动宽度，设置为空白 nowrap，因此如果它们不适合一行，它们会下拉到下一行。

如果发生这种情况，我正在尝试使用 jQuery 进行检测。所以我得到了ul的内部宽度（使用width（）），并通过获取每个outerWidth（）并将它们加在一起来计算每个li的总宽度。然后我检查总 li 宽度是否大于 ul 的内部宽度。

但是问题来了，jQuery 为导航的内部宽度返回 933.6800003051758 的值，为列表项返回 934 的值。所以你会认为列表项会进入第二行——但事实并非如此！所以我认为浏览器将导航的内部宽度四舍五入为 934。

我想知道的是，如果我在将值与总列表项宽度进行比较之前将导航的内部宽度四舍五入，那将是可靠的，或者我的函数有时会认为列表项没有中断到第二行事实上他们是？

我正在研究亚像素光栅化器。输出将呈现在不透明的位图上。我已经到了正确地以黑底白字的方式呈现文本（因为我基本上可以忽略位图的内容）。

问题是混合。由于低通滤波技术（我使用的是 5-tap fir - 1/9、2/9、3/9 等），以及额外的 alpha 水平，每个实际渲染的像素也会影响它的邻居强度水平要渲染的像素。然后必须将此结果以字母混合到目标图像上，这就是问题发生的地方......

必须将像素交互的结果加在一起以实现正确的亮度 - 并将字母混合到目的地 - 但是如果我一次光栅化一个像素，我会“松散”先前像素的信息，因此，进一步的添加可能会导致到溢出。

这应该怎么做？我能想象的唯一可行的解​​决方案是，使用每种颜色的 alpha 通道渲染到单独的图像，然后使用一些复杂的混合算法，最后将其 alphablend 到目的地.. 不知何故。

但是，除了 lcd 子像素渲染的基本概念和监视器像素的漂亮特写图像之外，我找不到任何有关如何实际执行此操作的资源。如果有人能一路帮助我，我将不胜感激。

我已经解决了一半这个问题，但没有完全理解这个问题，这让我很担心。我想知道是否有人可以帮助我了解在玩什么？

我通过 CSS 将 iframe 设置为 100% 宽度。容器 div 为 767px。因此 iframe 也是如此。

我在 iframe 的样式表中有以下媒体查询：

在除 Firefox 之外的所有流行浏览器中测试，媒体查询生效并将正文背景设置为红色。在 Firefox 中，媒体查询仅在 iframe 设置为 766px - 1px 时才会生效，即使 max-width 应该是“最多并包括”。这似乎是一个错误。我现在的解决方法是将 iframe 宽度设置为 766.7 像素（减去 0.3 像素）。这似乎在 Firefox 中有效（减去 0.2 无效）。

我的问题 - 这里发生了什么？这实际上可能是 Firefox 中的错误吗？我知道我的 iframe 实现有点不规则，但我认为根本原因可能与启发我的解决方案的这个问题有关：Media query lost in Firefox when window resized to max-width minus scrollbar width

Cairo 是否支持任意路径上的亚像素抗锯齿？

我对文本的亚像素抗锯齿感兴趣，但我使用的 Cairo 版本是在不支持任何底层文本渲染引擎（如 Freetype）的情况下编译的。因此，我留下了User Fonts后端，它似乎使用 Cairo 的本机路径渲染 API 来渲染字形轮廓。是否可以使用此代码路径实现 LCD 子像素过滤？

当我将精灵移动得慢到一个像素时，除了边缘之外，所有东西都移动子像素，这是一个视频：https ://www.youtube.com/watch?v=zcai1PUfzzA&feature=youtu.be我认为它这样做是因为它是不允许的缩放图像。如果我在图像边缘添加一个透明像素，它看起来确实像这样：https ://www.youtube.com/watch?v= ovCBpBFj3FU&feature=youtu.be 可能是因为现在它不需要缩放图像，但这方式“糟透了”，因为那时我必须在定位上做 1 以移除透明像素，这样它看起来不错 + 它是性能消耗，因为我无法使图像成为“2 的幂”。我将如何允许它扩展？（如果这是问题？）我正在使用 MonoGame 制作我的游戏。

我有以下 Sass 规则：

输出以下CSS：

相反 - 我需要这个规则如下（小数精度并不重要 - 只有最后一个值是 6 - 而不是 7），这是为了解决子像素渲染问题。

如果我使用 sass 'floor' 功能 - 它会将整个事情四舍五入到 '16%'。有没有办法在 Sass 中四舍五入到 x 位小数？使用 mixin 来做到这一点怎么样？我正在使用 libsass（s​​ass 3.2）。

调整“精度”不起作用 - 最后一个值仍然是“7”。仅更改精度只会截断小数位数 - 它不会像我需要的那样舍入最后一个小数位。

代码笔： http ://codepen.io/calumbrodie/pen/aOzVga

编辑：无论谁将此标记为重复 - 这是一个不同的问题，另一个问题是关于“精度”，而我明确解释了为什么这与“精度”无关。我真的不能说得更清楚了。

我发现了这个使用 XRender 扩展的文本渲染的好例子。但是字体是从 Freetype 以灰度格式加载的，有没有办法利用 XRender 来绘制子像素(LCD) 抗锯齿字形？如果是，如何？