1

SVGフィルターを使用して、いくつかの複雑なパスにぼやけた「ドロップシャドウ」タイプの効果を作成しています。

<defs>
    <filter id="dropshadow" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
        <feColorMatrix result="hueOut" in="SourceAlpha" type="hueRotate" values="340"/>
        <feColorMatrix result="satOut" in="hueOut" type="saturate" values="3"/>
        <feGaussianBlur in="satOut" stdDeviation="8"/> 
        <feMerge> 
           <feMergeNode/>
           <feMergeNode in="SourceGraphic"/> 
        </feMerge>
    </filter>
</defs>

feColorMatrix試行錯誤の末、上記の値に到達しました。（暗い色から明るい色への非常に美しい色相の変化があります。これは、行列の計算だけでは思いつかなかったでしょう。）基本的に、カラーホイールを340度回転させてから、飽和状態にします。ぼかしの直前に3の値を使用して色を付けます。（以前は仕様がやや不明確でしたが、試行錯誤の結果、1を超える値type="saturate"は画像を飽和させ、1未満の値は画像を不飽和にすることが示されました。）

問題は次のとおりです。大量のパスを反復処理しているため、二重行列演算によってマシンの速度が低下して停止します。頻繁にクラッシュします。

いくつかの行列数学の第一人者は、上記の2つのfeColorMatrixフィルターfeColorMatrixをtype = "matrix"の1つのより効率的なフィルタープリミティブに結合するための数値を計算するのに役立ちますか？スペックの要点はわかりますが、数学の面で頭を悩ませています。

4

1 に答える 1

5

私の経験では、ColorMatrix 操作は非常に高速で、ぼかしは信じられないほど遅いため、これらを組み合わせてもあまり効果が得られないと推測しています。しかし、FWIW、これが結合されたマトリックスです。(これは難しいことではありません - オンラインの行列乗算器はたくさんあります:)

2.5537  -0.61224    0.52246 0   0
-0.4163 1.30776 -0.10754    0   0
0.3037  -0.88224    2.3546  0   0
0   0   0   1   0
0   0   0   0   1

アップデート：

段階的にわかりました。svg フィルターの仕様によると、飽和に相当する行列は次のとおりです。

| R' |     |0.213+0.787s  0.715-0.715s  0.072-0.072s 0  0 |   | R |
| G' |     |0.213-0.213s  0.715+0.285s  0.072-0.072s 0  0 |   | G |
| B' |  =  |0.213-0.213s  0.715-0.715s  0.072+0.928s 0  0 | * | B |
| A' |     |           0            0             0  1  0 |   | A |
| 1  |     |           0            0             0  0  1 |   | 1 |

したがって、これを掛け算する小さな Excel テーブルを作成するだけです。

次に、色相回転の仕様を確認すると、色相回転に相当するマトリックスが次のようになります。

| R' |     | a00  a01  a02  0  0 |   | R |
| G' |     | a10  a11  a12  0  0 |   | G |
| B' |  =  | a20  a21  a22  0  0 | * | B |
| A' |     | 0    0    0    1  0 |   | A |
| 1  |     | 0    0    0    0  1 |   | 1 |

ここで、a00、a01 などの項は次のように計算されます。

| a00 a01 a02 |    [+0.213 +0.715 +0.072]
| a10 a11 a12 | =  [+0.213 +0.715 +0.072] +
| a20 a21 a22 |    [+0.213 +0.715 +0.072]
                        [+0.787 -0.715 -0.072]
cos(hueRotate value) *  [-0.213 +0.285 -0.072] +
                        [-0.213 -0.715 +0.928]
                        [-0.213 -0.715+0.928]
sin(hueRotate value) *  [+0.143 +0.140-0.283]
                        [-0.787 +0.715+0.072]

ラジアンは Excel の三角関数の入力として期待されるため、度からラジアンへの変換 (340 度は約 5.9 ラジアン、つまり 2* pi 未満) を行ってから、結果の行列を Excel で作成します。行列を手で乗算することもできますが、率直に言って、線形代数のクラスを再現したいという大きな欲求はありません。したがって、「行列乗算オンライン」をグーグルで検索し、結果の1ページ目にある行列乗算ツールのいずれかに2つの行列をポップします。そして、そこに行きます。統合されたマトリックス。

簡単 ：-）

于 2012-10-10T04:19:36.200 に答える