Flutter - Как масштабировать и рисовать поверх изображения в custompainter?

#flutter #dart

#флаттер #dart

Вопрос:

Я пытаюсь нарисовать поверх изображения в custompainter. Я использую пример из видео 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 
                      ),
                    ),
                  ),
                ),
              ),
          ),

1. Используйте InteractiveViewer api.flutter.dev/flutter/widgets/InteractiveViewer-class.html . Он поставляется в комплекте с flutter.

2. Я сделал. Если я использую interactiveViewer, я не могу использовать жесты панорамирования, потому что жесты панорамирования перемещают масштабные изображения по осям и не записывают жест. Кроме того, у меня уже есть gesturedetector, и вложение двух детекторов жестов уже является большим нет-нет. Ignorepointer также не помог.

3. Как насчет изменения вашего виджета изображения в Transform.Scale и управления значением масштаба с помощью того же GestureDetector, который вы используете.

4. почему вы не пытаетесь использовать кнопки значков для каждого масштабирования и рисования, не лучший способ?

5. Кнопка IconButton для масштабирования будет иметь только одномерное масштабирование. Это не дает большой свободы, необходимой для увеличения части изображения и работы над этим.

Ответ №1:

Объединить LongPressDraggable или Draggable и onScaleUpdate от GestureDetector;

 onScaleUpdate: (s) {
             
                    if (!(s.scale == 1 amp;amp; 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 -> GestureDetector -> Перетаскиваемый -> Transform.scale -> Transform.translate -> Transform.rotate -> SizedBox(ImageWidget)

1. Я конвертирую изображение в ui.image прямо сейчас. Так что мне не нужен стек, я думаю. Мне также не нужен поворот. При масштабировании прямо сейчас возникают две проблемы. 1. Масштабированное изображение выходит за рамки. 2. Я не могу найти масштабную фокусную точку.