2.9K Views
May 31, 24
スライド概要
Flutterで SVG画像を合成する 2024.5.31 Mobile Act OSAKA #13 itok@そらかぜ
itok@そらかぜ • いとうけい(itok) • の中の人 • モバイルアプリエンジニア 兼 CEO • 副業でフリーランス的 • https://itok.jp/, https://sorakaze.co.jp/, @itokjp
所在地:京都市中京区 社員1人=自分
実績 自社 受託 公私合わせて200件ほどのアプリ開発に携わる
iOS / Android / macOS / Windows / サーバ 一人でやってます(デザイン以外)
AI + 天気予報 「そらコーデ」公開!!
Flutterで SVG画像を合成する
やりたいこと
複数の画像を内部で合成して 画像データとして出力したい uint8List ui.Image ui.Image SVG SVGを使うことで 出力先の画像サイズに合わせて柔軟な拡大縮小ができる
画像に関するあれこれ
fl utter/material • Image • よく使われる画像表示Widget • いわゆるImageView的なもの 今回は登場しない
dart:ui • Image • 画像データの本体。バイトデータ。ビットマップ • ui.Imageとして使われる
dart:ui • Picture • • • 一連のグラフィック操作そのもの PictureRecorder • グラフィック操作を記録 • Pictureと対で使う Canvas • 描画領域
vector̲graphics • ベクター画像(SVGなど)を取り扱うパッケージ • PictureInfo • 読み込んだベクター画像をPictureとして保持
本題
ゴール SVG画像(Picture) ui.Image 拡大 ベクター ビットマップ
通常の描画操作 // PictureRecorder初期化 final ui.PictureRecorder recorder = ui.PictureRecorder(); // Canvas初期化 final Canvas canvas = Canvas(recorder); // 描画 canvas.drawImage(_image); canvas.drawPicture(_picture); // Picture生成 final ui.Picture picture = await recorder.endRecording(); // ui.Image生成 final ui.Image image = picture.toImage(width, height);
ビットマップ確定 // 描画 canvas.drawImage(_image); canvas.drawPicture(_picture); 描画することでビットマップとして確定する
ui.Image ビットマップ ビットマップ確定 drawImage 拡大
SVG描画 // SVG読み込み final pictureInfo = await vg.loadPicture(SvgAssetLoader(asset), null); final ui.Picture _picture = pictureInfo.picture final ui.PictureRecorder recorder = ui.PictureRecorder(); final Canvas canvas = Canvas(recorder); // 描画 → ビットマップ確定 canvas.drawPicture(_picture); final ui.Picture picture = await recorder.endRecording(); final ui.Image image = picture.toImage(width, height);
Picture ベクター ビットマップ確定 drawPicture 拡大
😱
描画先(Canvas)を 先に拡大
SVG描画(改) // SVG読み込み final pictureInfo = await vg.loadPicture(SvgAssetLoader(asset), null); final ui.Picture _picture = pictureInfo.picture final ui.PictureRecorder recorder = ui.PictureRecorder(); final Canvas canvas = Canvas(recorder); // 画像のスケール canvas.scale(xScale, yScale); // 描画 → ビットマップ確定 canvas.drawPicture(_picture); final ui.Picture picture = await recorder.endRecording(); final ui.Image image = picture.toImage(width, height);
Picture Canvas.scale drawPicture ビットマップ確定
😄
まとめ • ui.Imageとui.Pictureを上手に使いわける • SVG描画するときはCanvasの拡縮を利用 • 「そらコーデ」使ってみてください