20240531 FlutterでSVG画像を合成する

1.1K Views

May 31, 24

スライド概要

profile-image

いとーけー@そらかぜ

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

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

3.

所在地:京都市中京区 社員1人=自分

4.

実績 自社 受託 公私合わせて200件ほどのアプリ開発に携わる

5.

iOS / Android / macOS / Windows / サーバ 一人でやってます(デザイン以外)

6.

AI + 天気予報 「そらコーデ」公開!!

7.

Flutterで SVG画像を合成する

8.

やりたいこと

9.

複数の画像を内部で合成して 画像データとして出力したい uint8List ui.Image ui.Image SVG SVGを使うことで 出力先の画像サイズに合わせて柔軟な拡大縮小ができる

10.

画像に関するあれこれ

11.

fl utter/material • Image • よく使われる画像表示Widget • いわゆるImageView的なもの 今回は登場しない

12.

dart:ui • Image • 画像データの本体。バイトデータ。ビットマップ • ui.Imageとして使われる

13.

dart:ui • Picture • • • 一連のグラフィック操作そのもの PictureRecorder • グラフィック操作を記録 • Pictureと対で使う Canvas • 描画領域

14.

vector̲graphics • ベクター画像(SVGなど)を取り扱うパッケージ • PictureInfo • 読み込んだベクター画像をPictureとして保持

15.

本題

16.

ゴール SVG画像(Picture) ui.Image 拡大 ベクター ビットマップ

17.

通常の描画操作 // 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);

18.

ビットマップ確定 // 描画 canvas.drawImage(_image); canvas.drawPicture(_picture); 描画することでビットマップとして確定する

19.

ui.Image ビットマップ ビットマップ確定 drawImage 拡大

20.

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);

21.

Picture ベクター ビットマップ確定 drawPicture 拡大

22.

😱

23.

描画先(Canvas)を 先に拡大

24.

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);

25.

Picture Canvas.scale drawPicture ビットマップ確定

26.

😄

27.

まとめ • ui.Imageとui.Pictureを上手に使いわける • SVG描画するときはCanvasの拡縮を利用 • 「そらコーデ」使ってみてください