在图像中混合渐变填充角的算法

Posted

技术标签:

【中文标题】在图像中混合渐变填充角的算法【英文标题】:Algorithm to blend gradient filled corners in image 【发布时间】:2010-09-11 12:28:34 【问题描述】:

我需要在图像周围放置一个 alpha 混合渐变边框。我的问题是混合角落,使它们在水平和垂直渐变相遇的地方平滑。我相信有一个标准算法可以解决这个问题。我想我什至多年前在学校也遇到过。但是我在几次网络搜索中都没有找到任何对其中之一的引用。

(我已经在角落实现了径向填充图案,但是过渡仍然不够平滑。)

我的问题

    如果有标准算法 这个问题,叫什么名字 它,甚至更好,它是如何 实施了吗?

    放弃任何标准算法, 确定所需像素的最佳方法是什么 产生平滑渐变的值 在角落里? (做一个光滑的 从垂直过渡 水平渐变 渐变。)

编辑:想象一下我有一张图片,我将在一张更大的图片上插入一张图片。较大的图像是纯黑色,较小的图像是纯白色。在我插入它之前,我想通过在较小的图像上设置 alpha 值来将较小的图像混合到较大的图像中,以在它周围创建一个透明的“边框”,使其“淡入”到较大的图像中。正确完成后,我应该有一个从黑色到白色的平滑渐变,除了角落和内边缘之外,我在任何地方都这样做。

在靠近图像中心的渐变边框边缘,该值将是 255(不透明)。当边界接近外边缘时,alpha 值接近 0。在图像的垂直和水平边界相交的角落,你最终会得到一条对角线。我想消除那条线并平稳过渡。

我需要的是一种算法,它可以确定在水平和垂直边缘相遇时在图像角落重叠的每个像素的 alpha 值 (0 - 255)。

【问题讨论】:

【参考方案1】:

大概是在两个渐变重叠的地方相乘,对吧?

不知道标准算法。但是,如果您使用符号形状的渐变而不是线性渐变,那应该会消除两者重叠的可见边缘。

一个简单的 sigmoid 函数是 smoothstep(t) = tt(3 - 2*t) 其中 0

【讨论】:

这看起来很有希望。我不确定我是否想弄乱 XNA(这是一个 C# 应用程序,我认为 XNA 是获得平滑步骤的最佳(唯一?)方法)但我现在正在使用它进行测试并将决定我是否想要使用它或根据结果滚动我自己的。 Smoothstep 只是我描述的(非常简单的)功能;它已经存在于 yonks 并且不是 XNA 独有的。 我刚刚做了一个实现 - 虽然它使渐变边缘更好,但角落也有同样的问题。真正的问题是渐变产生的视觉错觉。线性步长或平滑步长都没有“错误”,但您仍然会“看到”一条线,除非您从视野中阻止了渐变的重置。【参考方案2】:

如果您不需要调整大小,则可以使用简单的 alpha 贴图。

但是,我曾经使用过简单的高斯渐变,平均值位于我希望它成为最后一个完全不透明像素的位置。如果这有意义的话。

【讨论】:

以上是关于在图像中混合渐变填充角的算法的主要内容,如果未能解决你的问题,请参考以下文章

什么算法可以混合具有相同场景的多个图像,除了每个图像中不同位置的一个对象?

Flutter - 如何将图像与渐变颜色混合?

OpenCV中泛洪填充算法解析与应用

opencv:检测棋盘角的最佳方法

定义渐变/形状/角的 XML 父样式

图像处理------泛洪填充算法(Flood Fill Algorithm) 油漆桶功能