Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ColorFiltered で カメラフィルタを実装する

ColorFiltered で カメラフィルタを実装する

2023/06/05 YOUTRUST x ゆめみ Flutter LT会
https://yumemi.connpass.com/event/284933/

kumamotone

June 05, 2023
Tweet

More Decks by kumamotone

Other Decks in Programming

Transcript

  1. ColorFiltered で
    カメラフィルタを実装する
    2023/06/05 YOUTRUST x ゆめみ Flutter LT会
    @kumamo_tone

    View Slide

  2. @kumamo_tone
    2020 Flutter の学習をし始める
    2021 カメラフィルターアプリ CapsCamera リリース
    2022 株式会社Hataluck and Person(副業)で
        Flutterアプリの技術選定、設計など
    2023 株式会社YOUTRUSTに入社 ←New!
    @@@https://twitter.com/kumamo_tone
    YOUTRUST
    https://youtrust.jp/users/kumamo_tone

    View Slide

  3. CapsCamera
    ● 青色のカメラフィルターアプリ
    ● カメラの映像にリアルタイムで
    フィルターをかけることができる
    ● 個人の依頼で作った
    ※Android

    View Slide

  4. 経緯
    ● 何故青色のカメラフィルターアプリ?
    ○ アイドルグループのファン有志で、
    アイドルの誕生日を祝うためにアプリを作る
    という企画
    ○ 祝われる方に以下の要素があるらしい
    ■ フィルムカメラが好き
    ■ イメージカラーが青
    ● その他の機能
    ○ ステッカーをデコする機能がある
    ○ 作成した画像のダウンロード、シェア

    View Slide

  5. ライブラリ検討
    ● photo_filters
    ○ https://pub.dev/packages/photofilters
    ○ ◯ WidgetにImageを渡すだけで
    フィルター画面のUIが構築できる
    ○ ◯ 最初から使える
    フィルターが多数用意されている
    ○ △ 撮影中にリアルタイムで
    フィルターする機能の example がない
    ○ △ 青系のフィルターがあんまり青くなく、うま
    くカスタマイズできなかった

    View Slide

  6. 最終的に採用した案
    ColorFiltered(
    colorFilter: ColorFilter.matrix(filters[selectedFilterIndex]),
    child: CameraAwesome( … ),
    ),
    ● 標準のWidget `ColorFiltered` で囲むだけ

    View Slide

  7. ColorFiltered の基本的な使い方
    ColorFiltered(
    colorFilter: const ColorFilter.mode(
    Colors.red,
    BlendMode.color,
    ),
    child: Image.network(
    'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
    ),
    ),
    ● colorFilter に ColorFilter.mode() を追加する
    ○ 第1引数: 色
    ○ 第2引数: モード

    View Slide

  8. ColorFiltered.mode の例
    Colors.red,
    BlendMode.multiply
    Colors.red,
    BlendMode.screen
    Original

    View Slide

  9. ColorFilter.matrix
    ● 行列を使ってRGB+Aの値を変化させる
    ○ さらに微妙な色合いの変化をつけたいとき
    ● どの色味をどのくらい変化させるか指定することができる
    https://api.flutter.dev/flutter/dart-ui/ColorFilter/ColorFilter.matrix.html

    View Slide

  10. ColorFilter.matrix の例
    Gのみ + alpha (0, 0.1, 1)
    0, 1, 0, 0, 0,
    0, 1, 0, 0.1, 0,
    0, 1, 0, 1, 0,
    0, 1, 0, 1, 0,
    Inverted
    -1, 0, 0, 0, 255,
    0, -1, 0, 0, 255,
    0, 0, -1, 0, 255,
    0, 0, 0, 1, 0,
    Original
    1, 0, 0, 0, 0,
    0, 1, 0, 0, 0,
    0, 0, 1, 0, 0,
    0, 0, 0, 1, 0,

    View Slide

  11. matrix 作成の補助ツール
    ● SVG Color Matrix Mixer
    ○ https://fecolormatrix.com/
    ● 行列を入力するとリアルタイムに
    フィルター結果を見ることができる
    Webツール
    ● ノンプログラマでも使える
    ○ 色味の微調整を人にお願いできる
    (共同制作者が協力的な場合)

    View Slide

  12. まとめ
    ● カメラフィルターアプリを作った
    ● 色味を変えるのは標準の ColorFiltered ウィジェットでできる
    ● 詳細に色味を指定したいときは ColorFilter.matrix を使うと良い
    ● matrix の確認に使える SVG Color Matrix Mixer という Webツールがある

    View Slide