Question

我正在尝试在custompainter上绘制图像。我正在flutter custompainter video上使用示例，这是到目前为止的内容。我可以绘制图像，但无法缩放图像。如何在手势上缩放图像并绘制图像？我不希望使用任何包装。

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

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

然后在“堆栈”小部件中设置图像小部件；

堆栈-> GestureDetector->可拖动-> Transform.scale-> Transform.translate-> Tranform.rotate-> SizedBox（ImageWidget）

Flutter-如何在custompainter中缩放和绘制图像？

1 个答案: