1

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

出于我的目的，我还需要在垂直和水平方向上具有不同的渐变速度，例如，水平方向的突发比垂直方向更宽。

我了解到这是使用距离变换算法完成的，并且我在 Jerry Huxtable 的网站上找到了一个 Java 实现，现在我需要弄清楚我需要使用哪些距离度量来在不同方向上产生不同的渐变。

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

4

1 回答 1

1

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

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

现在您了解了算法的概念，有一些重要的事情需要注意：

  • 这只是形状突发的简单近似。
  • 您真的想将对角线添加到您的 openList 中，与对角线像素的距离为 Sqrt(2)。

关于获得准确的 Shape-Burst 渐变。

  1. 找到透明像素旁边的所有不透明像素，将它们记录shortestDistanceToTransparentPixel为1，然后将所有这些像素添加到 BSP 树中
  2. 对于形状内的每个像素（您已经通过 alpha 测试过），找到最近的像素并计算准确的距离（将像素添加到 BSP 树）。
于 2012-09-12T14:22:15.147 回答