Flutter - 如何在CustomPainter中缩放和绘制覆盖在图像上？

Question

我正在尝试在自定义画笔上绘制图像。 我正在使用Flutter CustomPainter视频中的示例，这是我目前的进展情况。我可以在图像中绘制，但是我无法缩放图像。如何在手势操作下缩放图像并在图像上绘制？ 我宁愿不使用任何软件包。

Container(
            height: double.infinity,
            width: double.infinity,
            color: Colors.black87,
            child: FittedBox(
              child: GestureDetector(
                onScaleStart: _scaleStartGesture,
                onScaleUpdate: _scaleUpdateGesture,
                onScaleEnd: (_) => _scaleEndGesture(),
                child: SizedBox(
                    height: _image.height.toDouble(),
                    width: _image.width.toDouble(),
                    child: CustomPaint(
                      willChange: true,
                      painter: ImagePainter(
                        image: _image,
                        points: points 
                      ),
                    ),
                  ),
                ),
              ),
          ),

- Zero Live

---

使用InteractiveViewer https://api.flutter.dev/flutter/widgets/InteractiveViewer-class.html。它已经与Flutter捆绑在一起了。 - Axel

如何在Transform.Scale上扭曲您的图像小部件，并使用相同的GestureDetector控制比例值。 - Mohammed Alfateh

IconButton 用于缩放只能进行一维缩放。它不能提供所需的自由度，以便缩放到图像的某个部分并在该部分上工作。 - Zero Live

我尝试过了，但全局位置没有相应地改变。而且，缩放到特定部分并进行绘制是可以的，但在缩小画布点时不会缩小。最好的情况是我能够使用InteractiveViewer进行缩放和普通的GestureDetector进行绘制。 - Zero Live

InteractiveViewer 内部的源代码使用 Transform 和 GestureDetector 来实现缩放效果。如果您认为 InteractiveViewer 中的缩放效果已经足够了，我建议您查看它是如何实现的。 - yellowgray

Answer 1

合并 LongPressDraggable 或 Draggable 和 GestureDetector 的 onScaleUpdate；

onScaleUpdate: (s) {
             
                    if (!(s.scale == 1 && s.rotation == 0)) {
                      controller
                        ..setImageRotate(s.rotation)
                        ..setImageScale(s.scale)
                        ..setImageOffset(s.focalPoint);
                      setState(() {
                        message = controller.selectedController.toString();
                      });
                   
                  }
                },

控制器类;

final StreamController<ImageController> _controllerStreamController =
      StreamController<ImageController>.broadcast();
  Stream<ImageController> get controllerTypeStream =>
      _controllerStreamController.stream;

  double rotateSync;
  void setImageRotate(double rotate) {
    if (selectedController == null) {
       rotateSync = rotate;
      _controllerStreamController.sink.add(this);
    }
  }

  Offset offset;
  void setImageOffset(Offset rotate) {
    if (selectedController == null) {
      offset = rotate;
      _controllerStreamController.sink.add(this);
    }
  }
  double scaleSync;    
  void setImageScale(double scale) {
    if (selectedController == null) {
      scaleSync = scale;
      _controllerStreamController.sink.add(this);
    }
  }

    

然后在'Stack'小部件中设置图像小部件;

Stack -> GestureDetector -> Draggable -> Transform.scale -> Transform.translate -> Tranform.rotate -> SizedBox(ImageWidget)

- Mehmet Yaz

---

我现在正在将图像转换为UI.Image。所以我想我不需要stack。我也不需要旋转。在缩放时，目前存在两个问题。

1. 缩放后的图像超出了边界。
2. 我找不到缩放焦点。

- Zero Live