algorithm - 使用距离变换算法的形状突发

Question

我正在开发 HTML5 Canvas 应用程序，该应用程序需要在 Canvas 上绘制的形状上创建边框爆发效果。它看起来像是沿着形状边界起源的内部渐变。类似于内部发光过滤器的东西。请在此处查看示例:http://www.jhlabs.com/ip/filters/ShapeFilter.html

为了我的目的，我还需要在垂直和水平方向上有不同的梯度速度，这样，例如，我在水平方向上的脉冲串比垂直方向的脉冲串更宽。

我了解到这是使用距离变换算法完成的，我在 Jerry Huxtable 的网站上找到了一个 Java 实现，现在我需要弄清楚我需要使用什么距离度量来在不同方向上具有不同的梯度。

我将不胜感激任何帮助，因为我在图像处理方面有一点经验。此外，如果我可以使用其他算法，我会很高兴看到它们。

Answer 1

几乎实现 Shape-Burst 渐变的最简单方法。

1. 找到透明像素旁边的所有不透明像素，将它们的shortestDistanceToTransparentPixel记录为1，并将所有周围的像素添加到一个openList 候选 shortestDistanceToTransparentPixel of 2
2. 处理您的openList 中的每个像素，始终从最低的候选 shortestDistanceToTransparentPixel 开始
   1. 如果像素是透明的，或者已经处理过，则退出
   2. 记录shortestDistanceToTransparentPixel，并将所有周围像素添加到openList，候选shortestDistanceToTransparentPixel等于用于此像素的值(+ 1)

现在你已经了解了算法的概念，有一些重要的事情需要注意:

• 这只是 shape-burst 的简单近似。
• 您确实想向 openList 添加对角线，与对角线像素的距离为 Sqrt(2)。

关于获得准确的 Shape-Burst 梯度。

1. 找到透明像素旁边的所有不透明像素，将它们的shortestDistanceToTransparentPixel记录为1，然后将所有这些像素添加到 BSP 树中
2. 对于形状内的每个像素(您已经通过 alpha 进行了测试)，找到最近的像素并计算准确的距离(将像素添加到 BSP 树)。