【Flutter】BlendModeを比較するためのWebアプリを作った

この記事は約2分で読めます。

BlendModeが難しい

CustomPainterを使って描画するとき、CanvasのdrawImage関数やdrawRect関数にPaintのインスタンスを引数に与えます。Paintのインスタンスによって描画に関する様々な設定を行うことが出きるのですが、その中にblendModeというものがあります。既に描画済みのものに対して新たに描くものをどのようにブレンドするかということを指定出来るのですが、なかなか挙動を把握することが難しいです。公式サイトにも図を含めた説明がありますが、難しい・・・。

そこで、自分でアプリを作っていろいろな画像で比較してみたら理解できるかもと思い、比較用の簡単なアプリを作ってみました。

作ったアプリ

作ったアプリがこちらになります。

画像が2行に渡って描画されていますが、1行目で選択した画像が先に描画され、その後に2行目で選択した画像が描画されます。2行目で選択した画像が描画される際、上部で選択したBlendModeが使用されます。初期値は「None(BlendModeを指定しない)」です。画像はサンプルとして事前に用意してありますが、「Load image…」を押下すると画像を読み込むことも出来ます。読み込んだ画像は必ずアスペクト比1:1で描画されることにご注意ください。

作ってみた結果

事前に用意した画像が微妙なためかまだ理解しきれていませんが、以前よりも分かってきた気がします。もう少し分かってきたら別途記事を書く予定です。

コメント

タイトルとURLをコピーしました