问题标签 [pixel-perfect]

我正在尝试使用不同大小的照片网格创建一个 Pixel Perfect Responsive 页面。我想知道最好的方法是什么？我是否使用浮动列表执行此操作？浮动元素不在列表中？？

我真的不知道。下面是两张图片，显示了全宽（1200 像素）和缩小宽度（768 像素）的布局。我了解如何通过媒体查询更改容器宽度和删除元素，但我不知道如何获得我想要的外观。我使用列吗？

全宽 http://www.letsboogey.com/stackimages/1.jpg

768 宽度 http://www.letsboogey.com/stackimages/2.jpg

我正在寻找一个像素完美的网格。我已经尝试过主要的框架，但都有明显的舍入错误。我希望就你们在尝试实现像素完美设计时如何解决此类错误展开对话。

Chrome 似乎呈现出最好的效果，几乎没有明显的错误。Safari是最糟糕的。

这是 Safari
html 中 Bootstrap Grid 的屏幕截图：

（jsFiddle：http: //jsfiddle.net/gnrhca1p/）

以下是 Safari html 中的 Foundation 网格示例：

（jsFiddle：http: //jsfiddle.net/）

我有一个生成纹理的 GPU 渲染引擎。这些纹理被复制到 WriteableBitmap 中。此位图用作普通 Windows Presentation Foundation 视图中的 ImageSource。

现在，我将我的 dpi 设置为 120，也就是说，我在 Windows 控制面板中启用了 125% 字体大小设置。

自从那次改变之后，WritableBitmap 看起来真的很难看。它不再是像素完美的，看起来像抗锯齿严重（可能是因为 Wpf 以某种方式拉伸它）。

我玩了以下设置：

• 这个答案描述了如何从 Wpf 获取 Dpi，并且我相应地调整了 WritableBitmap dpi 和 Width/Height 值。
• 在包含图像的 XAML 中禁用 UseLayoutRounding 并启用 SnapToDevicePixels。

但我不能让它看起来很好。我不确定我是否理解我必须设置哪些值才能获得像素完美的显示。似乎有多个相互依赖的设置。

一个好的答案将解释如何组合设置哪些设置才能按预期工作。

我在 Xamarin 中使用 Cocossharp 为 Android 和 iOS 制作游戏。我有 2 个CCSprites，我需要知道一个精灵上带有颜色的像素是否与另一个精灵上带有颜色的像素重叠，但我似乎找不到包含CCSprite对象上像素的地图或数组。有谁知道它是否存在？在哪里？或者有人可以向我指出现有算法的方向，该算法可用于 Xamarin 的共享项目中。

请看一下这个 JSFiddle： https ://jsfiddle.net/a08vkmew/light/

我用 CSS/Html/Javascript 创建了一个指南针，它对页面上的水平鼠标移动做出反应。如果您缓慢移动鼠标，您会看到线条的宽度略有变化，从而导致指南针出现闪烁的外观。我认为当一条线与屏幕上的相应像素不完全匹配时会出现这种效果，因此只能显示线的一半宽度。在某些 GUI 框架中，我们可以选择将 GUI 显示为像素完美。在 CSS 中可能有这样的事情吗？

HTML

CSS

将 HierarchyViewer（在 Android 设备监视器中）与在模拟器上运行的应用程序一起使用可以正常工作，但 PixelPerfect 在任何 Pixel Perfect 透视视图中都没有显示任何内容。有没有其他人遇到过这个？除了官方文档外，网络上几乎没有关于 Pixel Perfect 的信息，到目前为止，这些文档已被证明无济于事。我按照此处的说明进行操作，按规定单击“检查屏幕截图”。

我希望我的 img 只能点击其非透明区域，因为它会阻止后面的图像。例如，当我点击法国北部时，它会选择德国。这怎么可能？我有这样的东西，所有国家都是 html 页面上的图像。

这是我网站的图片：

这与 AntiAlias 无关，请在回答之前阅读问题，谢谢。

添加赏金到--> android 将文本宽度（以像素为单位）转换为屏幕宽度/高度的百分比

质量信息 --> https://stackoverflow.com/a/1016941/1815624

尝试在画布上绘制文本时得到不一致的结果。请帮忙，谢谢。

我希望文本在所有设备上消耗相同数量的缩放空间

我不关心 ANTI_ALIAS 并添加了paint.setFlags(Paint.ANTI_ALIAS_FLAG);但问题是一样的......

在一个屏幕上，文本占用一半宽度，在另一个屏幕上仅占 1/3，甚至一个使用全宽。

我希望他们都使用等量的屏幕空间。

例如

1600X900 7寸平板奇巧实物：

1920.1080 5.2 kitkat 实物

1600x900 20in Lollipop 模拟

1280x720 4.7英寸

这些是使用http://www.gkproggy.com/2013/01/draw-text-on-canvas-with-font-size.html上的指南创建的

该教程显示一致的结果

要彻底这里是来源：

我已经尝试过来自 https://stackoverflow.com/a/5369766/1815624的建议

调查这个

https://stackoverflow.com/a/21895626/1815624

https://stackoverflow.com/a/14753968/1815624

https://stackoverflow.com/a/21895626/1815624 <-现在尝试

我正在导入 pixelperfect 并使用它的一个名为 check_collision(object1, object2) 的函数，这是我从http://www.pygame.org/wiki/FastPixelPerfect获得的网站， 当我使用它总是返回 false 的函数时，我不知道为什么。如果有人可以帮助我或有更好的方法来进行像素完美碰撞，我将不胜感激。

它总是返回 false 这就是问题所在。

这是代码：

我们的设计师更喜欢以 .psd (Photoshop) 格式提供网页设计。当我们开始创建页面标记和样式时，我们通常不得不妥协设计以支持我们可用的工具。当然，后者取决于实现页面的人的技能，但是鉴于以下示例，研究并得出正确的 CSS 技术来实现设计的一般方法是什么？

有问题的示例如下：在 Photoshop 中，基于文本的登录按钮最终结果如下所示：

这基本上是一个带有效果 (Fx) 的 [T]（文本）元素。效果是看起来像这样设置的颜色叠加：

没有这个效果，PSD中的登录页面看起来是这样的：

这正是它在浏览器页面中的外观。如果我们要让它看起来与最终的 .psd 设计完全相同，我们将如何寻找正确的 css-technique 示例？

我们将登录链接实现为<button>具有给定 .css 类的元素。我试过用 backgound-blend-mode: normal 像这样：

但它在 Chrome 中给出了以下外观：

我意识到这个问题可能与我们正在使用网络字体技术这一事实有关，它不受浏览器中的样式的影响，就像在 Photoshop 中影响文本一样，但我很感激有关如何处理上述问题的提示-描述的问题。谢谢你。