Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ColorFiltered で カメラフィルタを実装する
Search
kumamotone
June 05, 2023
Programming
1
340
ColorFiltered で カメラフィルタを実装する
2023/06/05 YOUTRUST x ゆめみ Flutter LT会
https://yumemi.connpass.com/event/284933/
kumamotone
June 05, 2023
Tweet
Share
More Decks by kumamotone
See All by kumamotone
YOUTRUSTでやった技術発信まとめ
kumamotone
0
120
Integration Test で パフォーマンス計測する
kumamotone
0
330
VSCodeから一発でProxymanを起動する
kumamotone
0
410
スワイプで閉じれる画像ビューアを作る
kumamotone
1
530
Swift Regex Builder
kumamotone
1
460
SwiftUI の @State, @ObservedObject, @EnvironmentObject
kumamotone
4
900
5分でわかる Kotlin Contracts
kumamotone
2
1.1k
しくみから理解するSwiftUI
kumamotone
5
2.2k
SwiftUI を理解するために必要な Swift 5.1 の新機能 (some View編)
kumamotone
11
3.8k
Other Decks in Programming
See All in Programming
Timeline エディター拡張入門
yucchiy
0
460
TypeScript Custom GitHub Action Development Tips
peaceiris
5
870
TypeScriptコードの漸進的改善 / Progressive Improvement of TypeScript Code
medley
1
460
Good first issues of TypeProf
mame
4
940
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
380
Go製Webアプリケーションのエラーとの向き合い方大全、あるいはやっぱりスタックトレース欲しいやん / Kyoto.go #50
utgwkk
6
2k
2024 コーディング研修
ckazu
2
680
FoodGram
iseruuuuu
0
230
スタックトレース始めてみた
kuro_kurorrr
5
1.2k
“Seeing Like a Programmer”—Resiliency, Limits, and Moral Hazards in Software Engineering (LambdaConf 2024)
chriskrycho
0
440
HonoのRPCで真の型安全が欲しかった
kosei28
1
170
Deep Dive into React Stream/Serialize
mugi_uno
4
880
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
67
14k
Thoughts on Productivity
jonyablonski
60
3.9k
GraphQLとの向き合い方2022年版
quramy
33
13k
Making the Leap to Tech Lead
cromwellryan
125
8.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
39
2.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
1
130
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.7k
The Pragmatic Product Professional
lauravandoore
26
5.9k
Code Review Best Practice
trishagee
56
15k
Building Your Own Lightsaber
phodgson
100
5.7k
Web Components: a chance to create the future
zenorocha
306
41k
BBQ
matthewcrist
80
8.8k
Transcript
ColorFiltered で カメラフィルタを実装する 2023/06/05 YOUTRUST x ゆめみ Flutter LT会 @kumamo_tone
@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
CapsCamera • 青色のカメラフィルターアプリ • カメラの映像にリアルタイムで フィルターをかけることができる • 個人の依頼で作った ※Android
経緯 • 何故青色のカメラフィルターアプリ? ◦ アイドルグループのファン有志で、 アイドルの誕生日を祝うためにアプリを作る という企画 ◦ 祝われる方に以下の要素があるらしい ▪
フィルムカメラが好き ▪ イメージカラーが青 • その他の機能 ◦ ステッカーをデコする機能がある ◦ 作成した画像のダウンロード、シェア
ライブラリ検討 • photo_filters ◦ https://pub.dev/packages/photofilters ◦ ◯ WidgetにImageを渡すだけで フィルター画面のUIが構築できる ◦
◯ 最初から使える フィルターが多数用意されている ◦ △ 撮影中にリアルタイムで フィルターする機能の example がない ◦ △ 青系のフィルターがあんまり青くなく、うま くカスタマイズできなかった
最終的に採用した案 ColorFiltered( colorFilter: ColorFilter.matrix(filters[selectedFilterIndex]), child: CameraAwesome( … ), ), •
標準のWidget `ColorFiltered` で囲むだけ
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引数: モード
ColorFiltered.mode の例 Colors.red, BlendMode.multiply Colors.red, BlendMode.screen Original
ColorFilter.matrix • 行列を使ってRGB+Aの値を変化させる ◦ さらに微妙な色合いの変化をつけたいとき • どの色味をどのくらい変化させるか指定することができる https://api.flutter.dev/flutter/dart-ui/ColorFilter/ColorFilter.matrix.html
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,
matrix 作成の補助ツール • SVG Color Matrix Mixer ◦ https://fecolormatrix.com/ •
行列を入力するとリアルタイムに フィルター結果を見ることができる Webツール • ノンプログラマでも使える ◦ 色味の微調整を人にお願いできる (共同制作者が協力的な場合)
まとめ • カメラフィルターアプリを作った • 色味を変えるのは標準の ColorFiltered ウィジェットでできる • 詳細に色味を指定したいときは ColorFilter.matrix
を使うと良い • matrix の確認に使える SVG Color Matrix Mixer という Webツールがある