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を記録し、このピクセルに使用される値 (+1) に等しい候補shortestDistanceToTransparentPixelを使用して、周囲のすべてのピクセルをopenListに追加します。

これでアルゴリズムのアイデアが得られました。注意すべき重要な点がいくつかあります。

  • これは、シェイプ バーストの単純な概算にすぎません。
  • 対角線のピクセルから Sqrt(2) の距離で、openList に対角線を追加したいのです。

正確な Shape-Burst グラデーションの取得に関して。

  1. 透明ピクセルの隣にあるすべての不透明ピクセルを見つけ、それらshortestDistanceToTransparentPixelを1として記録し、それらのピクセルをすべて BSP ツリーに追加します。
  2. シェイプ内の各ピクセル (アルファ経由で既にテスト済み) について、最も近いピクセルを見つけて正確な距離を計算します (ピクセルを BSP ツリーに追加します)。
于 2012-09-12T14:22:15.147 に答える