Flutter - How to scale and draw over image in custompainter?

user_11306017 0
Viewed 928

I am trying to draw over image on custompainter. I am using the example on flutter custompainter video and here is what I have so far. I can draw in the image but I cannot scale image. How do I scale image on gesture and draw in image? I would prefer not to use any package.

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 
                      ),
                    ),
                  ),
                ),
              ),
          ),
dart flutter
1 Answers

Merge LongPressDraggable or Draggable and GestureDetector's 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();
                      });
                   
                  }
                },

Controller Class ;

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

And than set image widget in 'Stack' widget ;

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

user_145516200
Related