问题标签 [visual-artifacts]

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 回答
590 浏览

firefox - SVG 变换:将文本缩放到很小会导致奇怪的重叠效果

我正在绘制一个带有圆圈和一段文字的 SVG 组。作为动画的一部分,我向上和向下缩放组。当组规模相对较小时,一切看起来都很好。但是,一旦它变得非常小,您就会开始得到一些令人讨厌的工件。

下面是一个例子。注意右边的圆圈很好,但是当它们变得非常小时,你会在左边看到文本伪影。

Firefox 上的 svg 工件

下面是一些导致伪影的示例性 SVG 代码。这似乎只发生在Firefox中。

0 投票
0 回答
314 浏览

c# - 在 RotateTransform 之后垂直滚动 DataGrid 时的视觉伪影

我使用这个 StackOverflow答案来旋转 DataGrid,使列标题显示为行标题,而新的 DataGrid 行将显示为列(水平 DataGrid)。

在 DataGrid 的样式中,我有一个 ControlTemplate,它由一个 ScrollContentPresenter 和两个 ScrollBar(垂直和水平)组成。ScrollContentPresenter 的 CanContentScroll 设置为“true”,以便单元格以逻辑方式而不是物理方式滚动。此 ControlTemplate 的摘录如下所示:

此网格的水平滚动按预期工作。但是,垂直滚动仍然会在物理上发生,并且当单元格滚动到屏幕外(或返回屏幕)时,会在第一行单元格上出现一些奇怪的视觉伪影。文物截图在这里

当我向下滚动时,单元格(TextBlock)的内容会随着单元格顶部移出屏幕而消失。当我继续在单元格中垂直滚动时,背景颜色会水平“擦除”。

以下是我应用于网格的变换:

应用于 DataGridCells 的样式

应用于列标题的样式

应用于 DataGrid 的样式

有所有的 LayoutTransforms,而不是 RenderTransforms。似乎变换在滚动期间影响了单元格的计算 DisplayHeight,并导致它们在真正离开屏幕之前“消失”。(旁注:逻辑滚动 (CanContentScroll = true) 禁用 DataGridCells 的虚拟化)。

我的目标是通过逻辑滚动或纠正渲染问题(首选)来消除垂直滚动伪影。

编辑:我的问题如下:由于滚动旋转的数据网格,如何消除这些视觉伪影?

0 投票
1 回答
193 浏览

ios - 具有旋转表面的 OpenGL ES 2.0 工件

我正在研究旋转网格,除了在旋转的某些阶段之外,它在大多数情况下都可以正常工作。例如:

在此处输入图像描述

介于两者之间

在此处输入图像描述

在此处输入图像描述

正如你所看到的,就像 OpenGL 改变了它对前面的东西的看法。有趣的是,前后两个阶段本身看起来都很“正常”,尽管它们是一种相互逆转。(这是一种迷幻的光学效果,但不是我想要的。)

我正在使用 GLKit 在 iOS 6 中编程。

我不知道我的问题是与设置和绘图代码有关,还是与我进行旋转的方式有关。任何见解将不胜感激。

0 投票
0 回答
587 浏览

c# - 滚动时的伪影

复亲步骤:

  • 将流布局面板添加到空的 windows 窗体。
  • 启用自动滚动。
  • 用 100-200 个彩色面板填充它。
  • 尝试上下滚动。

观察撕裂/伪影。我能做些什么来解决这个问题?

在此处输入图像描述

代码:

而已

0 投票
1 回答
209 浏览

javascript - 三个JS中错误的三角形z-index创建工件

我正在使用 Three.js,但在某些情况下遇到了问题。
这就是问题所在:http: //i60.tinypic.com/1zz6jac.png

我已经进行了研究,我知道这是一个 CanvasRenderer 问题,如果不使用 WebGLRenderer 就没有办法解决这个问题吗?

我尝试使用 WebGLRenderer,但现在我遇到了更多问题,因为我围绕 CanvasRenderer 创建了我的脚本:http://i59.tinypic.com/9joktu.png
此外
,使用 WebGLRenderer 的不透明度在我的立方体和线条上不再起作用,它可以在屏幕截图中的立方体下的网格中可以看到它。

0 投票
0 回答
132 浏览

javascript - 运行craftyjs(通过画布)并重绘数字会创建奇怪的线条

我们正在开发一个基于浏览器/JavaScript 的游戏,其中 sprite 会定期重绘,但是这样做会在每次重绘后产生奇怪的线条。我们当然可以让孔视图在每一帧之后重绘,但这会严重影响性能。有没有其他方法可以解决这个问题?

在此处输入图像描述

所以我们使用狡猾的方法在等轴测视图中在画布上绘制一些精灵,当删除这些精灵时会出现奇怪的线条,我们正在寻找一种让它们出现的方法。

任何建议都会有所帮助,评论也是如此

0 投票
1 回答
151 浏览

ffmpeg - 加速和 fps 更改后 WMP 中的伪影

尝试将 0.02 fps 的 1 小时视频转换为 10 fps 的非常短的视频(加速 100 倍)以包含在 powerpoint 演示文稿中。

我这样做了:

效果很好,可以很好地与 VLC 或 SMPlayer(我相信使用 ffmpeg 库进行解码)配合使用。但是,如果使用 Windows Media Player 播放,或插入到 powerpoint 演示文稿中,则会产生很多伪影……视频几乎无法观看。

有没有办法让这个在 powerpoint 中可观看(我猜问题在于 powerpoint 中使用的视频渲染器......)

0 投票
0 回答
380 浏览

android - LibGDX - 使用 BitmapFont 进行更清晰的字体渲染

想知道是否有一个简单的解决方案;我在 libGDX And​​roid 项目中使用精灵批处理和位图字体渲染一些文本。文本渲染得很好,但在一些字母之后会出现一些微妙的灰点,我想清理一下。更多上下文;我正在加载使用 Hiero 生成的粗体漫画 sans 字体(目前),我已将字体纹理的 minfilter 和 magfilter 设置为线性。此外,我不会在代码中的任何位置放大或缩小字体,但以后可能会想要。这是一个供参考的屏幕截图:http: //i824.photobucket.com/albums/zz161/9bjames/Screenshot_zpseac8c515.png(您可能需要放大一点)。

我查了一下,发现了这个:BitmapFont rendering artifacts,但我想知道是否有更快的修复......或者至少一个不那么“hacky”的修复。例如,使用距离场字体或自定义着色器会有所帮助吗?谢谢,让我知道您是否需要更多信息才能继续。在此期间,我将继续研究它。

- 快速编辑:发现使用默认纹理过滤器(最近的)有助于处理灰点,只要我不放大。似乎使用 TextureFilter.Nearest 的质量通常也会下降......但现在它会做,而我让更重要的部分工作。任何建议仍将不胜感激。

0 投票
1 回答
933 浏览

qt - 修改自定义 QGraphicsItem 时显示的工件

我目前正在开发一个小型矢量绘图程序,您可以在其中创建线条并在创建后对其进行修改(这些线条基于自定义 QGraphicsItem)。例如,下图显示了当线条的最左侧(标记为黄色)点被拖动到屏幕右侧时会发生什么,有效地延长了线条:

图1

缓慢移动该点时一切正常,但是,当快速移动时,会出现一些视觉伪影:

在此处输入图像描述

我用来调用重绘的代码位于mouseMoveEventredefined 方法中,该方法包含以下代码行:

我的定义显然没有问题,boundingRect因为添加方法表明:painter->drawRect(boundingRect())paint

在此处输入图像描述

并且当线简单地移动(设置标志)时也没有问题QGraphicsItem::ItemIsMovable,即使是快速移动。

有谁知道这里发生了什么?我的猜测是update不会立即调用,因此mouseMoveEvent可以在重绘发生之前多次调用,也许会取消以前的调用?我不知道。

当然,简单的解决方法是将QGraphicsView持有线的对象的视口模式设置为QGraphicsView::FullViewportUpdate),但这很难看(而且很慢)。

0 投票
2 回答
1907 浏览

html - css background-image w/ background-color 在 chrome 中显示工件边框

我正在尝试使用透明.png作为背景图像,以便我可以动态地使用我需要的任何颜色来更改“图标”的颜色。

我有一个 40px x 40px 的 .png。我使用背景图像将它应用到一个 div,然后我给同一个 div 一个背景颜色:

这通常工作正常,所以我不确定这是怎么回事。这是我在最新版本的 Chrome 中分别在 Mac 和 PC 上看到的屏幕截图:

苹果电脑在此处输入图像描述

个人电脑在此处输入图像描述

编辑:这是该网站的精简版,它显示了我遇到的问题:

我尝试制作小提琴(无论如何都在这里),但小提琴在 chrome 中完美显示,只是不在我的实际网站上。我没有为此或任何东西使用百分比,而是使用本机大小作为背景 - 其他人有这个问题吗?