flutter中手势判断实现图片缩放、拖拽功能

1|0GestureDetector组件

  • 把需要操作的子组件包裹起来,然后监听手势事件
GestureDetector( child: Container( // 除了GestureDetector,还需要Transform.translate和Transform.scale两个组件来控制位置和scale child: Transform.translate( key: imagekey, offset: Offset(dx, dy), child: Transform.scale( scale: picScale, child: Image( image: AssetImage("images/test.png") ) ) ) ), // 在这里监听手势处理 onScaleStart: (d) { // 缩放事件开始前现在这个事件中获取初始坐标 _lastOffset = d.focalPoint; }, // 监听缩放事件和拖拽 onScaleUpdate: (ScaleUpdateDetails details) { // 这里的0.98和1.02控制details.scale的最大最小值,从而控制缩放速度 double tempScale = picScale * details.scale.clamp(0.98, 1.02); double tempDx = dx + details.focalPoint.dx - _lastOffset.dx; double tempDy = dy + details.focalPoint.dy - _lastOffset.dy; // 这里是缩放和拖拽的处理,属于算法层面的东西,我算法不行,写得很乱 // 大概情况就是控制缩放区间为[0.7,3.5],拖拽和缩放时控制图片的位置,不能消失在屏幕,然后还有双指水平滑动会触发缩放的bug解决 if (tempScale <= 3.5 && tempScale >= 1) { if (tempDx.abs() < screenWidth * (tempScale - 1) / 2) { dx = tempDx; } else { dx = dx > 0 ? screenWidth * (tempScale - 1) / 2 - 1 : -(screenWidth * (tempScale - 1) / 2 - 1); } if (tempDy.abs() < screenHeight * (tempScale - 1) / 2) { dy = tempDy; } else { dy = dy > 0 ? screenHeight * (tempScale - 1) / 2 - 1 : -(screenHeight * (tempScale - 1) / 2 - 1); } // details.verticalScale是多指操作时相对垂直平分线移动的距离比例,可用于检测多指平行滑动 if ((1 - details.verticalScale).abs() > 0.28) { picScale = tempScale; } } // 可以缩小到比原图小,但是不能移动 if (tempScale < 1 && tempScale >= 0.7 && (1 - details.verticalScale).abs() > 0.28) { picScale = tempScale; } _lastOffset = details.focalPoint; setState(() {}); // **注意dx,dy和scale都是声明在state里的,一定要setState才会生效** }, // 监听移动事件, 由于onScaleUpdate已经包含了移动,在有onScaleUpdate的情况下不能监听下面两个事件 // onHorizontalDragUpdate: dragEvent, // onVerticalDragUpdate: dragEvent, // 双击事件,处理为还原 onDoubleTap: () { setState(() { picScale = 1.0; dx = 0.0; dy = 0.0; }); } )
  • 但是结果虽然功能都实现了,但是体验不是很好,使用不是很顺畅,大概是我算法的问题,但是总体思路有就行了

__EOF__

本文作者Mizuki
本文链接https://www.cnblogs.com/mizuki-vone/p/16375838.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!
posted @   Mizuki-Vone  阅读(1242)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!
点击右上角即可分享
微信分享提示