Flutter PhotoView - вращение вокруг точки между пальцами - PullRequest
Новая
       50

Flutter PhotoView - вращение вокруг точки между пальцами

1 голос
/ 01 августа 2020

Я использую PhotoView (https://pub.dev/packages/photo_view) для демонстрации карты, сохраненной в формате gif. Мне нужна возможность масштабировать и вращать. Мой код: 

class MapView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PhotoView(
      imageProvider: AssetImage("assets/maps/my_map.gif"),
      enableRotation: true,
      backgroundDecoration: BoxDecoration(
        color: Colors.white,
      ),
    );
  }
}

Проблема в том, что картинка повернута относительно центра картинки, что неудобно. Я хочу, чтобы вращение происходило примерно в точке между двумя пальцами, выполняющими жест вращения (как в обычных приложениях с картами). Я не нашел в документации PhotoView информации о том, как это исправить.

Надеюсь на вашу поддержку.

Мой последний код (с использованием matrix_gesture_detector ): 

class MapView extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _MapViewState();
}

class _MapViewState extends State<MapView> {
  Matrix4 transform;

  @override
  void initState() {
    super.initState();
    transform = Matrix4.identity();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: MatrixGestureDetector(
        onMatrixUpdate: (m, tm, sm, rm) {
          setState(() {
            transform = m;
          });
        },
        child: Transform(
          transform: transform,
          child: Image.asset("assets/maps/my_map.gif"),
        ),
      ),
    );
  }
}

1 Ответ

0 голосов
/ 01 августа 2020

Так что в Photo View я не могу найти ничего, что могло бы помочь вам в этом, поэтому используйте вместо него этот пакет. Матричный детектор жестов будет работать именно так, как вы хотите.

Пример кода: 

class Test extends StatefulWidget {
@override
_TestState createState() => _TestState();
}

class _TestState extends State<Test> {

 Matrix4 transform;
 @override
 void initState() {
 super.initState();
 transform = Matrix4.identity();
 }

 @override
 Widget build(BuildContext context) {
    return Scaffold(
    body: Container(
       width: MediaQuery.of(context).size.width,
       height: MediaQuery.of(context).size.height,
       child: MatrixGestureDetector(
         onMatrixUpdate: (m, rs, ry, rx){
           setState(() {
             transform = m;
       });
      },
      child: Container(
        transform: transform,
        height: 200,
        width: 200,
        color: Colors.blue,
      ),
    ),
  ),
   );
}

}

Вы можете поместить в контейнер все, что захотите, в вашем случае украшение Image.

...