3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

FlutterでCanvasで作った図形をビットマップ画像に変換する

Last updated at Posted at 2021-01-25

FlutterでGoogleMapを使用するためのパッケージ google_maps_flutter を設定するにあたり、マーカーを独自に設定する必要がありました。
ビットマップイメージに変換する事に馴染みがなく、思いのほか手こずったので、共有したいと思います。

使用しているツールのバージョン
  • Dart SDK version: 2.10.4
  • Flutter version: 1.22.5
  • google_maps_flutter: ^1.0.6
やりたいこと
  • Canvasで作った図形をマーカーとして表示したい
難しかったこと
  • Canvasで作った図形は、マーカーとして直接指定できない
  • GoogleMapに渡すには、画像データに変換する必要がある
main.dart
import 'dart:ui' as ui;

// Canvasの図形をビットマップにして返す
Future<BitmapDescriptor> getMarker() async {

  // Canvasの命令をレコーディングするPictureRecorderを宣言
  final ui.PictureRecorder pictureRecorder = ui.PictureRecorder();
  
  // Canvasにレコーダーを設定
  final Canvas canvas = Canvas(pictureRecorder);
  
  // 塗り潰しを設定
  final Paint paint = Paint()
    ..isAntiAlias = true
    ..color = Colors.orange
    ..strokeWidth = 1.0
    ..style = PaintingStyle.fill;

  // 図形を描いていく
  var path = Path();
  path.moveTo(xxx, xxx);
  path.lineTo(xxx, xxx);
  .......
  canvas.drawPath(path, paint);

  // レコーディング完了、Imageに変換
  final image = await pictureRecorder.endRecording().toImage(xxx, xxx);
  // PNGのバイトデータに変換
  final data = await image.toByteData(format: ui.ImageByteFormat.png);
  // バイトの配列に変換
  final Uint8List bytes = data.buffer.asUint8List();
  // バイトをビットマップに変換
  return BitmapDescriptor.fromBytes(markerIcon);
}

BitmapDescriptor は google_maps_flutter に定義されているクラスで、マーカーの定義クラスです。

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?