问题标签 [pixel-perfect]

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 投票
0 回答
83 浏览

segmentation-fault - Pygame:尝试像素完美碰撞和图像修改时出现分割错误

当我将精灵移动到屏幕右侧时,我不断收到分段错误或崩溃。

我试图让我的“精灵”与我在与蒙版接触时拥有的另一个图像“切换”像素,然后在它离开时变回来。目前它做得不太好,分段错误也无济于事。

该项目从 https://www.youtube.com/watch?v=Idu8XfwKUao 上的 code.Pylet 显示的内容开始。我正在修改它的地方就是我遇到问题的地方,从 while 循环开始。根据我的 IDE,它与maskOverlap变量的设置有关,我认为更具体的错误在于offset2变量

所以我的问题是:任何人都可以看到分段错误发生的位置和原因,以及:我可以做些什么来改善我的精灵改变颜色然后变回来的结果。

0 投票
1 回答
50 浏览

html - 如何防止浏览器窗口调整大小时块偏移量发生 1-2px 变化

我在圆形边缘的彩色块内做像素完美的中心图标时遇到问题。图标在浏览器窗口调整大小时更改左右偏移。

使用https://github.com/facebook/react打开例如 Chrome 或 Safari

并尝试非常缓慢地(按像素)调整浏览器窗口的宽度。

您会看到图标之间的偏移量和按钮(Watch、Star、Fork)中的标题有一些变化(1-2px)。

带有圆形边缘的彩色块内的图标也会发生同样的情况。

为什么会发生?以及如何预防?

ps 最初,我在开发电子应用程序时遇到了这个问题,但它无处不在。

pps 可能有任何 webkit 选项来更改渲染方法,这将防止调整大小时出现这种颤抖?

0 投票
0 回答
311 浏览

c++ - SFML 像素完美碰撞仅限于视图?

在这段代码中,我有一个视图(白色,缩放 2)和原始窗口,还有一个用于汽车的精灵和一个用于墙壁的精灵......

...如果汽车和墙壁都与主窗口相关,我会与墙壁发生完美的汽车碰撞。 (见图)

现在如果我把车放在视野内......

...检测到碰撞,就好像墙在视图的边界内(放大)(见图)

如何使碰撞检测独立于视图?

0 投票
1 回答
211 浏览

matlab - 在 Matlab R2014b+ (HG2) 上获得可靠的渲染

我无法设法使 Matlab 新图形引擎 (HG2) 以可靠的方式显示线条和标记,这意味着在轴/屏幕的任何地方都以相同的方式显示/渲染。

为了演示这个问题,我编写了一个简单的脚本(见帖子末尾),并比较了 R2014a(使用 Matlab 旧 HG1 引擎)与 R2016b(因此使用 Matlab 新 HG2 引擎)下的结果,用于画家opengl渲染器。

(您可能会在脚本中注意到,我已尝试停用我所知道的任何类型的 HG2 平滑。尽管这确实会有所改变,但无论是否停用平滑,都会发生所描述的一般问题行为。)

图表视图

(恐怕SO正在调整图像的大小,这会导致问题,所以这里是图像本身的直接链接

  • R2014a (HG1) 和画家渲染器:如果你放大图像,你可以检查每个标记是否像素完美——无论它们在哪里绘制,它们都是绝对相同的。每条绿线正好是 1 像素宽。

  • R2014a (HG1) 和 opengl 渲染器:每条绿线正好是 1 像素宽,但标记的显示/绘制不完全相同。

  • R2016b (HG2) 和画家渲染器:奇怪的是,结果与 HG1 和 opengl 相似。线条的宽度是正确的(显示的与 HG1 中的有所不同,但至少它们是一致的),但标记在整个轴上有所不同。

  • R2016b (HG2) & opengl 渲染器:标记都是相同的(虽然我不太喜欢它们,这是一个主观问题,重要的是它们都是相同的),但是你可以看到三个绿线并不是所有的预期宽度of 1 pixel :顶部和底部的宽度为 2 像素,仅绘制了中间的宽度为 1 像素。

关于如何使两个渲染器中的任何一个在 HG2 中正确运行(即,无论它在图像中的哪个位置绘制相同的东西)的任何想法?

其他注意事项:

  • 如果可能的话,我更喜欢使用opengl,因为出于某种原因,对于HG2 的“合理”数量的数据点(即数千个),画家似乎非常慢(至少是相机控制)。当然,除非您知道如何在 HG2 中像在 HG1 中一样快速制作画家。

  • 虽然测试代码很简单,但我实际上需要在一个非常复杂的 GUI(自定义 uimenu、uicontrols、面板、回调等)中使用它。虽然我不知道这可能很重要,但显然,例如,使用 uifigure 而不是图形的潜在解决方案对我来说是不可用的。

  • 有关信息,这是我输入时得到的信息opengl('info')

在 Matlab R2014a 中:

在 Matlab R2016b 中:

使用的示例代码是:

0 投票
1 回答
3173 浏览

unity3d - unity 2018 像素完美相机,我可以放大和缩小吗?

两个问题第一个如何放大和缩小?为什么我在某些分辨率中有那条红线是错误还是问题(我尝试重新导入包并重新创建项目但没有任何新内容)?在此处输入图像描述

0 投票
1 回答
81 浏览

java - Java:JPanel 上的像素完美绘图

我正在使用 OpenJDK 11:

openjdk 版本“11.0.1” 2018-10-16
OpenJDK Runtime Environment 18.9(build 11.0.1+13)
OpenJDK 64-Bit Server VM 18.9(build 11.0.1+13,混合模式)

试图让应用程序在 JPanel 中绘制一些东西,我注意到一些令人讨厌的不准确之处。

以下代码应该在另一个下方绘制一系列线条(交换颜色是为了演示正在发生的事情):

}

然而,不是让一条线在另一条线下方绘制,而是在一些线之间存在间隙: 画有间隙的线条

我想这可能是由虚拟坐标系和物理坐标系之间的转换引起的。

然而,当精确度真的很重要时,如何让它像素完美呢?

0 投票
2 回答
1658 浏览

android - 如何统一定义安卓游戏支持的屏幕分辨率?

我有一个像素艺术游戏,它在参考分辨率 480x800 像素(使用像素完美相机)下看起来不错,并且任何比它更大的分辨率看起来都可以,但有些模糊(我不知道这是否是一个问题或它是如何工作的虽然按比例放大)但是对于任何低于该像素的分辨率都会看起来失真,是否有一个选项可以阻止具有较低分辨率手机的玩家从谷歌播放下载这个游戏?

0 投票
1 回答
101 浏览

layout - 如何在 Galen 框架中指定近似边距?

我在响应式设计的网站中使用 galen 框架。而且我需要通过不给出固定像素数量而是百分比来检查元素。例如,我必须检查一个元素在左侧大约 10%。盖伦怎么说?我知道如何说“大约 10% 的宽度”,但我与这里的宽度和高度无关。我需要说屏幕左侧大约 %10。

任何帮助将不胜感激。谢谢!

0 投票
1 回答
614 浏览

html - 像素完美设计:如何创建一个看起来完全像 PSD 模板的网站

我正在做一个项目以提高我的 HTML/CSS 技能。我下载了一个随机的 PSD 文件,并将其转换为 HTML/CSS。我希望尽可能接近 PSD,因为 Pixel Perfect 对招聘人员来说是强制性的。我的意思是像素完美,接近设计而不是浏览器兼容性。

为了实现这一点,我使用了一个名为“PerfectPixel”的 chrome 扩展。我可以将网站的图像放在顶部并将其与我的工作进行比较。出于某种原因,我总是偏离一两个像素,似乎无法完美匹配图像。即使是 PSD 文件中的测量值有时也有偏差,所以没有帮助....

这是否发生在你们中的一些人身上,还是我必须更加努力?

PS:如果某处有这方面的教程,请将链接发给我,因为我想提高我的前端技能。

0 投票
0 回答
52 浏览

html - 如何使两个部分在 SVG 中看起来像一个部分?

我们有一个由两部分组成的 SVG,它们正好沿着某个路径“接触”。

问题是浏览器仍然沿路径绘制灰色像素,即使这两个部分之间的距离为 0。

在两个接触部分之间绘制了不需要的路径

一种方法是添加描边,但这会导致这些部分重叠,有很多副作用(例如内部描边<clipPath />被忽略)并在复杂的 SVG 中造成混乱

我试图设置shape-rendering为:和geometricPrecision,但它们都没有最终解决问题。optimizeSpeedcrispyEdges

我怀疑浏览器在进行抗锯齿时没有考虑附近的对象,并且在小功能上非常明显。

是否有可能使这两个部分看起来像一个部分,它们之间没有任何伪影并且没有重叠?