时间戳

首页 > 解决方案 > Flutter PhotoView - 围绕手指之间的点旋转

flutter - Flutter PhotoView - 围绕手指之间的点旋转

问题描述

我正在使用 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"),
        ),
      ),
    );
  }
}

标签： flutterdartrotationgesture

解决方案

所以我在照片视图中找不到任何可以帮助您实现它的东西，所以请改用 这个包。矩阵手势检测器将完全按照您想要的方式工作。

示例代码：

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

}

您可以在容器中放置您喜欢的任何东西，在您的案例装饰图像中。

推荐阅读