问题标签 [subpixel]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
589 浏览

java - 亚像素渲染

我正在尝试使用亚像素定位在 Java 中渲染 2d 形状,但失败了。下面是一个失败的尝试(暂时忽略scale和):AffineTransform

这会产生以下输出:

渲染

这些线应该是均匀分布的,但是,正如你所看到的,它们不是。我的猜测是起点和终点被四舍五入到最近的像素。

关于 SO 的建议解决方案提到使用Line2D.Double(我已经在做但显然不起作用),或使用AffineTransform缩小。如果您scale将代码示例中的变量更改为 100,那么这会以更高的比例绘制线条,然后根据建议使用变换将其缩小。这对生成的图像也没有影响。

我究竟做错了什么?

0 投票
0 回答
693 浏览

c++ - 使用 openCV 在 C++ 中以小步长和亚像素精度对图像进行平移、旋转和缩放

我正在尝试在 openCV 中以亚像素精度进行平移、旋转和缩放。

这是使用亚像素精度进行翻译的链接:

在 C++ 中通过 OpenCV 以非常小的步骤翻译图像

所以,我需要对缩放和旋转做同样的事情,例如,当我将图像旋转 2 度时它可以工作,但是当我将它旋转 1 度或低于 1 度时它不起作用,并且旋转 2 度的结果相当于旋转2.1度!

在提供的链接中提到我可以通过更改 imgproc.hpp 中的以下代码来提高精度

这是一个旋转示例:源图像如下:

我正在相对于图像中心进行旋转。

旋转 1 度,结果与源图像相同!

对于旋转 2 度,结果与旋转 2.1 度(不应该如此)相同!

这是一个代码:

当我检查提供的翻译代码时,它以 1e-7 精度工作,但是当我在 1e-8 列中进行翻译时,它给了我源图像而不是翻译它(这是不正确的),当我在matlab 它给了我以下正确的结果(我希望在 c++ 中获得具有良好准确性的相同结果):

同样,当我将图像旋转 1 度时,结果应该如下所示(这是我在 matlab 中得到的,并且希望在 c++ 中得到相同的结果)(我必须删除一些数字(降低精度),这样矩阵可以放在这里)

现在我的问题是如何提高 openCV 中的亚像素精度?或者是否有任何想法或代码可以按亚像素精度进行图像缩放和旋转(如上述链接中为图像翻译提供的代码)?

我会很感激任何想法。

0 投票
0 回答
105 浏览

math - 亚像素移动代码问题

这是我的运动代码,带有单独的子像素变量。这里的子像素是像素的 256 分之一。velx 和 vely 也存储了 256 次。

这是我的问题:

  • 我将对象的速度设置为 -1024(相当于 -4),
  • 我将对象的重力设置为 64(在每个对象之后应用重力:移动)
  • 第一帧,它移动 -4 个像素,
  • 下一帧,-3,
  • 下一帧,-4,
  • 接下来 3 帧,-3

我很困惑为什么它会移动 -4、-3、-4、-3、-3、-3,然后是 -2、-3、-2 等,而不是我想要它做的事情,即:

  • -4,
  • -3,
  • -3,
  • -3,
  • -2,
  • -2,
  • -2,
  • -1,

如果我使用浮点数,则需要使用 math.ceil 等,但因为我不是,所以我并不是 100% 在哪里以及如何实现它。

编辑:它可能就在我面前,但代码写得有点混乱,即使对我来说......

0 投票
1 回答
332 浏览

html - chrome 上的小型 HTML5 画布上没有亚像素定位

在大画布上为图像设置动画时,图像在非整数坐标上正确渲染,并且动画流畅。在一个小画布上,比如 200x200,子像素坐标不适用,图像从整数位置“跳跃”到下一个位置,产生“抖动”运动。

该问题似乎仅适用于光栅源(图像和画布)。例如,文本可以在所有画布尺寸上流畅地制作动画。

我目前正在使用 Chrome 版本 58.0.3029.110(64 位)进行测试,但该问题也出现在早期版本中。

有没有人偶然发现这个问题?

这是我测试的代码:

0 投票
0 回答
110 浏览

python - 在python中的浮点坐标处缩放子图像

我想知道是否有一个 python 库能够以超像素精度(浮点坐标)提取子图像并将其重新缩放为目标大小(显然是整数)。

我想做的例子:假设我们有一个大小为 100x100 的图像。我想在坐标 10.3,10.3(左上角)到 80.6,80.6(右下角)处提取子图像。生成的切口具有浮点大小,应使用双线性插值重新调整为 32x32。

标准库(pil、scipy)提供了适用于完整图像(无子像素位置)的重新缩放功能,即从 int 坐标到 int 坐标的转换。如上所述,我想从浮点坐标转换为整数坐标。

我必须自己实施还是重新发明轮子?到目前为止,我还没有看到实现这一目标的标准功能。我会假设这是图像识别的标准任务,例如从更大图像内的浮动检测中提取图像样本时。

0 投票
0 回答
104 浏览

compression - 如何压缩亚像素文本位图

最近,我在做有关 Windows clearType 文本压缩的工作;Windows 文本字体使用亚像素渲染技术,使文本字体边缘充满杂色,如下图。

在此处输入图像描述

我试过jpeg、zstd、lz4,它们的压缩比不能让我满意,所以有人有经验或想法来压缩这种类型的位图,有损还是无损?

0 投票
1 回答
123 浏览

python - 使用python在亚像素级别旋转时重新分配圆形粒子的强度

我有一些与通过旋转移动粒子(强度为高斯分布的圆形粒子)有关的问题。当我旋转图像时,我希望当粒子最终位于子像素位置时,粒子强度能够正确重新分布。假设我在 2,2 处有一个粒子,我将它旋转了大约 4,3(注意:不是图像的几何中心)12 度,它最终在 3.2,4.6 处。

我试图挖掘一些东西,我发现了这个这个

我不是很相信。我在这里附上我用这段代码合成的图片

现在,我为每个新帧(平移、旋转等)创建新粒子,但我想操作初始图像。

谢谢阿伦

0 投票
1 回答
398 浏览

javascript - 处理亚像素渲染时如何使图像或视频填充整个容器?

似乎某些浏览器在渲染使用百分比在页面上定位和调整大小的图像或视频媒体时,有时会舍入媒体内容(图像或视频)的大小,而不是舍入包含它们的实际 DOM 元素。我们不确定如何解决这个问题。有两种变体:HTML5 视频元素和带有背景图像的 div(设置为“包含”)。

我的测试是在 macOS Sierra 上的 Chrome 64.0 上进行的,但我们在 Windows 上的 Chrome 上报告了同样的问题。我还没有测试过其他浏览器。

视频元素

这是一个显示问题的非常小的测试用例的示例。调整浏览器的宽度,直到您在视频旁边看到一条红线,或者视频溢出其元素(如下面的屏幕截图所示)。

或者,作为 codepen:https ://codepen.io/jthomerson/pen/mXrpZr

以下是错误的两种变体:

视频渲染略小于视频元素 视频渲染略大于视频元素

有没有办法来解决这个问题?JW Player似乎正在使用一些复杂的 JS 来解决这个问题,这些 JS 正在监视所有调整大小事件,然后将动态变换和定位直接添加到视频元素。有没有更简单的方法?或者,如果这是唯一的方法,是否有一个标准化的图书馆?(我们使用的是VideoJS,但这不是 VideoJS 特有的问题)。

背景图片

如果 div 的大小与背景图像的纵横比完全相同,并且背景图像使用no-repeatand ,也会发生同样的事情contain

或者,作为 codepen:https ://codepen.io/jthomerson/pen/xYEYZK

以下是错误示例:

图像渲染得比它作为背景的元素略大

当然,在这种情况下,您可能会说“只需更改containcover,这就是它的用途”。这是真的,但在我们的实际用例中,当视频未播放时,我们使用带有背景图像的 div 作为视频的海报图像。但是,我们不知道图像的实际纵横比。视频播放器本身的大小始终为 16:9,但在某些情况下,我们的客户上传的海报图像为 1:1(例如:音乐视频专辑封面)或 4:3 或 2:1(对于遗留内容他们没有 16:9 的内容)。因此,除非我们containcover编程方式加载图像,检测其大小,然后如果它实际上是 16:9,则使用cover,否则使用contain

0 投票
0 回答
562 浏览

css - 电子 - 亚像素抗锯齿不起作用

如何配置 Electron 以使用亚像素抗锯齿?我尝试使用:

但这似乎没有任何效果。我使用的是 Electron 的 1.8.2 版。

0 投票
2 回答
1350 浏览

java - JavaFX 字体渲染中的错误字符间距(紧缩)(在 Linux 中)

我已经开始在 JavaFX 中开发一个应用程序并且我遇到了一个问题,我几乎找不到关于以下方面的有用信息:Linux 中字符之间的间距非常不均匀。我不是在谈论不同字符的宽度,而是在谈论字符之间的空格。

它在普通文本中可见,但下面的示例比普通文本更能说明效果。看看第一行。前两个字符之间的间距小于第二个和第三个字符之间的间距。这也发生在第六个和第七个字符以及其他几个字符之间:

字符间距不均匀

Swing 没有这个问题,JavaFX 在 Windows 中没有这个问题,或者它在那个操作系统上几乎不可见。它似乎也不是 Mac 上的主要问题。为了比较,下面是 2014 年年中 Mac Retina MacBook Pro 上的示例输出,运行 OS X 10.12.6 和 Java 9.0.4:

在此处输入图像描述

有谁知道这是否是 JavaFX 字体渲染引擎中的错误?如果是这样,是否有解决方法?

我真的开始怀疑是否应该更改框架,因为在我看来,这种糟糕的字体渲染是不可接受的。

关于这个问题还有另一个问题,但尚未得到解答: 为什么 JavaFX 在使用 Text 组件时会在字母之间添加额外的间距,我该如何解决?

我已经能够在运行 Manjaro 的两台不同的 Linux 机器和运行 Debian 的虚拟机上使用以下代码重现此问题: