Flutter PhotoView-围绕手指之间的点旋转 [英] Flutter PhotoView - Rotation about the point between the fingers
问题描述
我正在使用PhotoView( https://pub.dev/packages/photo_view )展示以gif格式保存的地图.我需要缩放和旋转的能力.我的代码:
I am using PhotoView (https://pub.dev/packages/photo_view) to showcase a map saved in gif format. I need the ability to zoom and rotate. My code:
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文档中找到有关如何解决此问题的任何信息.
The problem is that the picture is rotated relative to the center of the picture, which is inconvenient. I want the rotation to be about a point between the two fingers that perform the rotation gesture (as in normal map applications). I have not found any information in the PhotoView documentation on how to fix this.
希望得到您的支持.
我的最终代码(使用 matrix_gesture_detector ):
My final code (using 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"),
),
),
);
}
}
推荐答案
所以我在Photo View中找不到任何可以帮助您实现它的东西,因此请使用而是此包.矩阵手势检测器将完全按照您想要的方式工作.
So there isn't anything I could find in Photo View that will help you achieve it, so use this package instead. Matrix gesture detector will work exactly the way you want.
示例代码:
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,
),
),
),
);
}
}
您可以将任何喜欢的东西放在容器中的装饰图片中.
You can place whatever you like in the container, in your case decoration Image.
这篇关于Flutter PhotoView-围绕手指之间的点旋转的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!