AreaExpansion by Flutter

こんにちはEveryDaySoft代表の永田です。

packageの紹介

https://github.com/DaisukeNagata/area_expansion

選択範囲を指定し、領域内をトリミングする機能です。

動機

作りはRiverpod、Providerを使用し中身も違う機能をとある案件で作成しました。

その時にロジックの元となるような、なぞった場合の領域の増減を考えたので、

今回作成した機能まで昇華しました。自分が考えたソースコード１行も被っていません。

Flutter案件では、Riverpod と Providerを使用する確率が100%だったので、

自社開発では使用しないパターンで作成しています。

取り組んで良かったこと

Flutterでは出来ない事を一つ知れました。

Flutterでは画像を切り取るような編集をした場合の座標を編集することが、

難しかったです。

具体的には、こちらのpackageで切り取り画像座標の変更を試みましたが、

切り取り後に座標を変更する機能はなかったようです。

https://pub.dev/packages/image

通常の画像は座標x 0,y 0なので、widgetがcenterに指定した場合は真ん中に配置します。

今回の切り取りで発生する事象は、動画のように範囲指定した座標を保持します。

実施したかったことは、動画のように中心に移動することです。

Flutterで画像座標を編集するのが難しいということで、位置、サイズを計算して中心にすることを考えました。

画像化し中心に配置したソースコード

Future<void> _capture(Size deviceSize) async {
  RenderRepaintBoundary boundary =
      _globalKey.currentContext!.findRenderObject() as RenderRepaintBoundary;

  ui.Image image = await boundary.toImage(pixelRatio: 1.0);

  // Convert the image to byte data
  ByteData? byteData = await image.toByteData(format: ui.ImageByteFormat.png);

  // Convert ByteData to Uint8List
  Uint8List pngBytes = byteData!.buffer.asUint8List();

  // original image size
  final Size imageSize = Size(
      deviceSize.width - (widget.rect.left + widget.rect.right),
      deviceSize.height - (widget.rect.top + widget.rect.bottom));

  // Calculate offset to move to center
  final Offset offset = Offset(
    (widget.rect.left).abs(),
    (widget.rect.top).abs(),
  );

  // Calculate the center coordinates of the image.
  Offset imageCenter = Offset(
      offset.dx + imageSize.width / 2, offset.dy + imageSize.height / 2);
  // Calculate the center coordinates of the device
  Offset deviceCenter = Offset(deviceSize.width / 2, deviceSize.height / 2);
  // Calculate an offset to move the image to the center of the device
  Offset moveToCenter = Offset(
      deviceCenter.dx - imageCenter.dx, deviceCenter.dy - imageCenter.dy);
  widget.call(
      pngBytes,
      Rect.fromLTWH(moveToCenter.dx, moveToCenter.dy, imageSize.width,
          imageSize.height));
}

Future<void> _capture(Size deviceSize) async {

// Calculate how much the width should be scaled.
doublewidthScale=deviceSize.width/rect.width;

// Calculates how much the height needs to be scaled.
doubleheightScale=deviceSize.height/rect.height;

// The image is scaled to fit either the width or height of the device, preserving the aspect ratio.
doublescale=widthScale<heightScale?widthScale:heightScale;