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

Question

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

就我的目的而言，我还需要在垂直和水平方向上有不同的渐变速度，这样，例如，横向我有比垂直更宽的爆发。

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

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

Answer 1

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

1. 找到透明像素旁边的所有不透明像素，将其shortestDistanceToTransparentPixel记录为 1 ，并将所有周围像素添加到打开列表，并带有候选人 shortestDistanceToTransparentPixel 2
2. 处理 openList 中的每个像素，始终以最低候选 shortestDistanceToTransparentPixel开头
   1. 如果像素是透明的，或已经处理过，请退出
   2. 记录 shortestDistanceToTransparentPixel ，并将所有周围像素添加到 openList ，候选 shortestDistanceToTransparentPixel 等于此像素使用的值（+ 1）

现在你了解算法，有几点需要注意：

• 这只是形状爆发的简单近似。
• 你真的想在openList中添加对角线，距离对角线像素的距离为Sqrt（2）。

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

1. 查找透明像素旁边的所有不透明像素，将其shortestDistanceToTransparentPixel记录为 1 ，然后将所有这些像素添加到BSP树中
2. 对于形状内的每个像素（您将通过alpha测试），找到最近的像素并计算精确距离（将像素添加到BSP树）。