[Delphi] ぼかし(すりガラス)効果をつける

ぼかし / すりガラス効果

最近流行ってる？こういう↓ぼかしかかった画像を僕もやりたい！Delphiで！

ちなみにこの画像は Discord でスポイラーをつけた場合の画像

Delphi の Effect を使った実装

TBlurEffect だけの実装

ウェブだと CSS 使って blur エフェクトをかけてるらしいのでマネして TBlurEffect をかけてみましたが…それだけだと上手く行きませんでした！

TBlurEffect の Softness に指定した値（ここでは 8 を指定）のグリッド状になってしまいます (Softness のデフォルト値が 0.3 なのでこんなに大きな値を指定するとは思ってない可能性があります)。

拡大画像

TBlurEffect を多段にした実装

グリッド状に見える部分も TBlurEffect でぼかしてあげればグリッドが解らなくなるので、TBlurEffect を２度がけします。
また、大体のぼかし効果では全体が白っぽくなるので（すりガラスなので）TRectangle を置いて Fill の値を #80ffffff ぐらいにしてあげます。

これらを実装すると、こんな見た目になります。

そして、目のマークをクリックするとこう！

ネコチャンでした！

当然 Android と macOS, iOS でも動きます。
でも微妙に違って特にモバイルだと少し見えすぎなので、もう１段 Blur をかけたり、Rectangle のα値を上げたりした方が良いかも知れないです。

構造と各コントロールのプロパティとコード

構造

プロパティの値

Layout1.Align = Contents
Image1.Align = Contents

// Layout1 用 BlurEffect
BlurEffect1.Softness = 2

// Image1 用 BlurEffect
BlurEffect2.Softness = 8

// 画像全体を白っぽくする Rectangle
Rectangle2.Align = Contents
Rectangle2.Fill.Color = $80ffffff
Rectangle2.Stroke.Kind = None

目ボタンのクリックイベントは下記の通りで、エフェクトと Rectangle2 を非表示にして Button1 自身も非表示にしています。

procedure TForm1.Button1Click(Sender: TObject);
begin
  BlurEffect1.Enabled := False;
  BlurEffect2.Enabled := False;
  Rectangle2.Visible := False;

  Button1.Visible := False;
end;

おわりに

これで簡単にそれっぽいぼかし画像になりました！
これでネタばれを表現したり課金しないと観れないとか 18 禁！とかそういうの作り放題！