服务器之家：专注于VPS、云服务器配置技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - Android - Flutter实现可以缩放拖拽的图片示例代码

Flutter实现可以缩放拖拽的图片示例代码

2022-10-20 14:00Android技术干货分享 Android

这篇文章主要给大家介绍了关于利用Flutter实现可以缩放拖拽的图片的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Flutter具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧

前言

在pub上面找了下，没有发现一个效果跟微信一样的支持缩放拖拽效果的image，所以就自己撸了一个，之前写过Flutter 什么功能都有的Image，于是就在这个上面新增了这个功能。

主要功能：

  • 缩放拖拽
  • 在PageView里面缩放拖拽

支持缩放拖拽

Flutter实现可以缩放拖拽的图片示例代码

用法

1.将extended_image的mode参数设置为ExtendedImageMode.Gesture

2.设置GestureConfig

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ExtendedImage.network(
  imageTestUrl,
  fit: BoxFit.contain,
  //enableLoadState: false,
  mode: ExtendedImageMode.Gesture,
  gestureConfig: GestureConfig(
   minScale: 0.9,
   animationMinScale: 0.7,
   maxScale: 3.0,
   animationMaxScale: 3.5,
   speed: 1.0,
   inertialSpeed: 100.0,
   initialScale: 1.0,
   inPageView: false),
 )

GestureConfig 参数说明

参数 描述 默认值
minScale 缩放最小值 0.8
animationMinScale 缩放动画最小值，当缩放结束时回到minScale值 minScale * 0.8
maxScale 缩放最小值 5.0
animationMaxScale 缩放动画最大值，当缩放结束时回到maxScale值 maxScale * 1.2
speed 缩放拖拽速度，与用户操作成正比 1.0
inertialSpeed 拖拽惯性速度，与惯性速度成正比 100
cacheGesture 是否缓存手势状态，可用于Pageview中保留状态，使用clearGestureDetailsCache方法清除 false
inPageView 是否使用ExtendedImageGesturePageView展示图片 false

实现过程

这一个功能比较简单，参考了官方的gestures demo，将缩放的Scale和Offset转换了为了图片最后显示的区域，具体代码在最后绘制图片的时候，将gestureDetails转换为对应的图片显示区域。

Flutter实现可以缩放拖拽的图片示例代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
bool gestureClip = false;
 if (gestureDetails != null) {
 destinationRect =
  gestureDetails.calculateFinalDestinationRect(rect, destinationRect);
 
 ///outside and need clip
 gestureClip = outRect(rect, destinationRect);
 
 if (gestureClip) {
  canvas.save();
  canvas.clipRect(rect);
 }
 }

rect 是整个图片在屏幕上的区域，destinationRect图片显示区域(会根据BoxFit的不同而所不同)，通过gestureDetails的calculateFinalDestinationRect方式，计算出最终显示区域。

让缩放的过程看起来流畅

1.根据缩放点相对图片的位置对缩放点作为中心点进行缩放

2.如果Scale小于等于1.0的时候，按照图片的中心点进行缩放的，而当大于1.0并且图片已经铺满区域的时候按照1来执行

3.当图片是那种长宽相差很大的时候，进行缩放的时候，将首先沿着比较长的那边进行中心点缩放，直到图片铺满区域之后，按照1来执行

4.当进行缩放操作的时候，不进行移动操作

1，2，3对应代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Offset _getCenter(Rect destinationRect) {
 if (!userOffset && _center != null) {
  return _center;
 }
 
 if (totalScale > 1.0) {
  if (_computeHorizontalBoundary && _computeVerticalBoundary) {
  return destinationRect.center * totalScale + offset;
  } else if (_computeHorizontalBoundary) {
  //only scale Horizontal
  return Offset(destinationRect.center.dx * totalScale,
    destinationRect.center.dy) +
   Offset(offset.dx, 0.0);
  } else if (_computeVerticalBoundary) {
  //only scale Vertical
  return Offset(destinationRect.center.dx,
    destinationRect.center.dy * totalScale) +
   Offset(0.0, offset.dy);
  } else {
  return destinationRect.center;
  }
 } else {
  return destinationRect.center;
 }
 }

4对应代码,当details.scale==1.0，说明是一个移动操作，否则为了一个缩放操作

?
1
2
3
4
5
6
7
void _handleScaleUpdate(ScaleUpdateDetails details) {
 ...
 var offset =
  ((details.scale == 1.0 ? details.focalPoint : _startingOffset) -
   _normalizedOffset * scale);
 ...
 }

获取到了图片的中心点之后，我们再根据Scale等到图片的整个区域

?
1
2
3
4
5
6
7
Rect _getDestinationRect(Rect destinationRect, Offset center) {
final double width = destinationRect.width * totalScale;
final double height = destinationRect.height * totalScale;
 
return Rect.fromLTWH(
 center.dx - width / 2.0, center.dy - height / 2.0, width, height);
}

拖拽边界的计算

1.计算是否需要计算限制边界

2.如果需要将区域限制在边界内部

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
if (_computeHorizontalBoundary) {
 //move right
 if (result.left >= layoutRect.left) {
 result = Rect.fromLTWH(0.0, result.top, result.width, result.height);
 _boundary.left = true;
 }
 
 ///move left
 if (result.right <= layoutRect.right) {
 result = Rect.fromLTWH(layoutRect.right - result.width, result.top,
  result.width, result.height);
 _boundary.right = true;
 }
}
 
if (_computeVerticalBoundary) {
 //move down
 if (result.bottom <= layoutRect.bottom) {
 result = Rect.fromLTWH(result.left, layoutRect.bottom - result.height,
  result.width, result.height);
 _boundary.bottom = true;
 }
 
 //move up
 if (result.top >= layoutRect.top) {
 result = Rect.fromLTWH(
  result.left, layoutRect.top, result.width, result.height);
 _boundary.top = true;
 }
}
 
_computeHorizontalBoundary =
 result.left <= layoutRect.left && result.right >= layoutRect.right;
 
_computeVerticalBoundary =
 result.top <= layoutRect.top && result.bottom >= layoutRect.bottom;

缩放回弹效果以及拖拽惯性效果

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
void _handleScaleEnd(ScaleEndDetails details) {
 //animate back to maxScale if gesture exceeded the maxScale specified
 if (_gestureDetails.totalScale > _gestureConfig.maxScale) {
  final double velocity =
   (_gestureDetails.totalScale - _gestureConfig.maxScale) /
    _gestureConfig.maxScale;
 
  _gestureAnimation.animationScale(
   _gestureDetails.totalScale, _gestureConfig.maxScale, velocity);
  return;
 }
 
 //animate back to minScale if gesture fell smaller than the minScale specified
 if (_gestureDetails.totalScale < _gestureConfig.minScale) {
  final double velocity =
   (_gestureConfig.minScale - _gestureDetails.totalScale) /
    _gestureConfig.minScale;
 
  _gestureAnimation.animationScale(
   _gestureDetails.totalScale, _gestureConfig.minScale, velocity);
  return;
 }
 
 if (_gestureDetails.gestureState == GestureState.pan) {
  // get magnitude from gesture velocity
  final double magnitude = details.velocity.pixelsPerSecond.distance;
 
  // do a significant magnitude
  if (magnitude >= minMagnitude) {
  final Offset direction = details.velocity.pixelsPerSecond /
   magnitude *
   _gestureConfig.inertialSpeed;
 
  _gestureAnimation.animationOffset(
   _gestureDetails.offset, _gestureDetails.offset + direction);
  }
 }
 }

唯一注意的是Scale的回弹动画将以最后的缩放中心点为中心进行缩放，这样缩放动画才看起来舒服一些

?
1
2
3
4
5
6
7
//true: user zoom/pan
//false: animation
final bool userOffset;
Offset _getCenter(Rect destinationRect) {
if (!userOffset && _center != null) {
 return _center;
}

在PageView里面缩放拖拽

Flutter实现可以缩放拖拽的图片示例代码

用法

1.使用

ExtendedImageGesturePageView展示图片

2.设置GestureConfig的inPageView 为Ture

GestureConfig 参数说明

 

参数 描述 默认值
inPageView 是否使用ExtendedImageGesturePageView展示图片 false

 

实现过程

手势冲突

这个场景需要关注的是手势的冲突问题，PageView里面是有水平或者垂直的手势的，会跟onScaleStart/onScaleUpdate/onScaleEnd有冲突。

最开始想的是手势应该有冒泡，是不是可以我监听到了之后，不像上冒泡，这样可以阻止PageView里面的滑动行为，最后结论是没有方法能阻止冒泡。

关于手势，大家可以看看拉面小姐姐关于手势的文章，神奇的竞技场概念。。

既然不能阻止手势冒泡，那么我就直接不让你能滚动了，然后全部的手势都交给我，我来处理。

首先我看了下PageView关于滚动的源码，直接指向最终ScrollableState里面的代码，在setCanDrag方法里面根据是否可以Drag，准备了水平/垂直的手势。

把ScrollableState里面关于水平垂直滚动处理的代码拿出来，我创建了一个属于extended_image专门的extended_image_gesture_page_view,属性跟PageView一样只是没法设置physics，

因为强制设置为了NeverScrollableScrollPhysics

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Widget result = PageView.custom(
 scrollDirection: widget.scrollDirection,
 reverse: widget.reverse,
 controller: widget.controller,
 childrenDelegate: widget.childrenDelegate,
 pageSnapping: widget.pageSnapping,
 physics: widget.physics,
 onPageChanged: widget.onPageChanged,
 key: widget.key,
);
 
result = RawGestureDetector(
 gestures: _gestureRecognizers,
 behavior: HitTestBehavior.opaque,
 child: result,
);

然后我们通过RawGestureDetector来注册_gestureRecognizers（水平/垂直的手势）。

关于_gestureRecognizers，我之前一直好奇PageView里面有个手hold的操作是怎么做到了，直到看到源码才知道这么个东西，源码真是个好东西。

?
1
2
3
4
5
6
7
void _handleDragDown(DragDownDetails details) {
 //print(details);
 _gestureAnimation.stop();
 assert(_drag == null);
 assert(_hold == null);
 _hold = position.hold(_disposeHold);
}

到达边界滚动上下一个图片

有了之前缩放拖拽的基础，这部分就比较简单了。如果到达边界就是用默认代码去操作PageView，否则就控制Image进行拖拽操作

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
void _handleDragUpdate(DragUpdateDetails details) {
  // _drag might be null if the drag activity ended and called _disposeDrag.
  assert(_hold == null || _drag == null);
  var delta = details.delta;
 
  if (extendedImageGestureState != null) {
   var gestureDetails = extendedImageGestureState.gestureDetails;
   if (gestureDetails != null) {
    if (gestureDetails.movePage(delta)) {
     _drag?.update(details);
    } else {
     extendedImageGestureState.gestureDetails = GestureDetails(
       offset: gestureDetails.offset +
         delta * extendedImageGestureState.imageGestureConfig.speed,
       totalScale: gestureDetails.totalScale,
       gestureDetails: gestureDetails);
    }
   } else {
    _drag?.update(details);
   }
  } else {
   _drag?.update(details);
  }
 }

拖拽惯性效果

在DragEnd的时候，我们需要注意下处理下惯性。

当图片是放大状态而且水平或者垂直能够滑动的时候，我们需要_drag停止下来，以防止直接滑动到上一个或者下一个图片
DragEndDetails(primaryVelocity: 0.0)，并且根据惯性让图片在范围内继续惯性滑动。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
void _handleDragEnd(DragEndDetails details) {
  // _drag might be null if the drag activity ended and called _disposeDrag.
  assert(_hold == null || _drag == null);
 
  var temp = details;
 
  if (extendedImageGestureState != null) {
   var gestureDetails = extendedImageGestureState.gestureDetails;
 
   if (gestureDetails != null && gestureDetails.computeHorizontalBoundary ||
     gestureDetails.computeVerticalBoundary) {
    //stop
    temp = DragEndDetails(primaryVelocity: 0.0);
 
    // get magnitude from gesture velocity
    final double magnitude = details.velocity.pixelsPerSecond.distance;
 
    // do a significant magnitude
    if (magnitude >= minMagnitude) {
     Offset direction = details.velocity.pixelsPerSecond /
       magnitude *
       (extendedImageGestureState.imageGestureConfig.inertialSpeed);
 
     if (widget.scrollDirection == Axis.horizontal) {
      direction = Offset(direction.dx, 0.0);
     } else {
      direction = Offset(0.0, direction.dy);
     }
 
     _gestureAnimation.animationOffset(
       gestureDetails.offset, gestureDetails.offset + direction);
    }
   }
  }
 
  _drag?.end(temp);
 
  assert(_drag == null);
 }

整个extended_image的缩放和拖拽功能就介绍完毕了，再吐槽下这个手势，用起来真不舒服，希望Flutter小组有更好的方案。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对服务器之家的支持。

原文链接：https://www.jianshu.com/p/e2c1f50f2b9a

  • 拖拽
  • 缩放
  • Flutter

    • 延伸 · 阅读

    精彩推荐
    最近更新
    编辑推荐
    阅读排行
    热门标签
    触点轨迹 　 PopupWindow 　 descendantFocusability 　 Andorid 　 退出程序 　 触屏震动 　 响应接口 　 自定义标题 　 图片居中 　 程序退出 　 binder 　 图片翻转动画 　 横竖屏切换 　 适配 　 dialog 　 preferenceactivity 　 SharedPreferences 　 MultiDex 　 tablelayout 　 RadioGroup 　 颜色编辑器 　 OnCreate 　 ImageView 　 Gallery 　 缩放动画 　 TextView 　 asynctask 　 Notification 　 NotificationManager 　 RelativeLayout 　
    © 2019-2022 服务器之家(www.tuohang.net) 版权所有关于我们联系我们版权申明网站地图