无法使用局部坐标在 canvas 上绘制矩形 - Flutter

Question

我有 2 个屏幕。

在第一个屏幕上，我从网络上加载了一张图片，并让我的用户在图片上绘制了一个矩形。我在 GestureDetector 中使用来自 onPanStart 和 onPanUpdate 回调的本地位置。我正在保存开始和结束偏移值。

final taggableImage = GestureDetector(
  onPanStart: (DragStartDetails details){
    provider.updateRectangleStart(details.localPosition);
  },
  onPanUpdate: (DragUpdateDetails details ){
    provider.updateRectangleEnd(details.localPosition);
  },
  child: CustomPaint(
    foregroundPainter: provider.drawRect,
    child: image,
  ),
);

首屏绘制矩形截图：

现在我想在新屏幕中再次加载图像，并根据我之前保存的偏移值将矩形重新绘制到图像上。但是矩形总是出现在错误的位置，有时甚至出现在图像之外。

下面是我如何根据保存的偏移值重新绘制矩形。

final image = CustomPaint(
  foregroundPainter:  DrawRectangleService(provider.selectedDetection?.detectionRect ?? Rect.zero),
  child: FittedBox(
    fit: BoxFit.fill,
    child: CachedNetworkImage(
      placeholder: (context, url) => loadingWidget("Loading image"),
      imageUrl: imageURL,
    ),
  ),
);

重绘矩形时的截图问题：如何使用我在第一个屏幕上保存的偏移值在第二个屏幕上重绘图像上的矩形。

Answer 1

将您的坐标转换为双倍，在 0 到 1 的范围内，将宽度和高度除以图像小部件的原始宽度和高度，在新屏幕上将它们乘以图像小部件的新宽度和高度。

无法使用局部坐标在 canvas 上绘制矩形 - Flutter

Trouble drawing rectangle on a canvas using local coordinates- Flutter

flutter

flutter-canvas