20240531 FlutterでSVG画像を合成する

Flutterで SVG画像を合成する 2024.5.31 Mobile Act OSAKA #13 itok@そらかぜ

itok@そらかぜ • いとうけい（itok） • の中の人 • モバイルアプリエンジニア 兼 CEO • 副業でフリーランス的 • https://itok.jp/, https://sorakaze.co.jp/, @itokjp

• http://itok.jp/

所在地：京都市中京区 社員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の拡縮を利用 • 「そらコーデ」使ってみてください