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

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

前言

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

主要功能：

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

支持缩放拖拽

用法

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

2.设置GestureConfig


 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转换为对应的图片显示区域。

 


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对应代码


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，说明是一个移动操作，否则为了一个缩放操作


void _handleScaleUpdate(ScaleUpdateDetails details) {
 ...
 var offset =
  ((details.scale == 1.0 ? details.focalPoint : _startingOffset) -
   _normalizedOffset * scale);
 ...
 }

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


 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.如果需要将区域限制在边界内部


 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;

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


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的回弹动画将以最后的缩放中心点为中心进行缩放，这样缩放动画才看起来舒服一些


 //true: user zoom/pan
 //false: animation
 final bool userOffset;
 Offset _getCenter(Rect destinationRect) {
 if (!userOffset && _center != null) {
  return _center;
 }

在PageView里面缩放拖拽

用法

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


 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的操作是怎么做到了，直到看到源码才知道这么个东西，源码真是个好东西。


 void _handleDragDown(DragDownDetails details) {
  //print(details);
  _gestureAnimation.stop();
  assert(_drag == null);
  assert(_hold == null);
  _hold = position.hold(_disposeHold);
 }

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

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


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)，并且根据惯性让图片在范围内继续惯性滑动。


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小组有更好的方案。

总结

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

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！

相关文档推荐

Android Flutter图片处理之高斯模糊的实现
AndroidFlutter图片处理之高斯模糊的实现 目录 ImageFilter 横向模糊 垂直模糊 xy轴同时模糊 用法 BackdropFilter ImageFiltered 区别 ImageFilter 在Flutter中,使图片模糊有2种方式,这2种方式都需要配合ImageFilter.blur()使用. factory ImageFilter.blur({ double sigmaX = 0.0, double
前端开发编程语言数据库服务器系统/运维网络/安全移动开发建站教程网站运营
html vue validate adobe dreamweaver hbuilder vscode aptana editor dedecms ckeditor 编辑器 过滤 规则 织梦 图片本地化 模板 缩略图 图集 图片删除 ajax 瀑布流 无限下拉 cms 判断 sql 清除 tag 文档数 angularjs2 按钮 切换效果 vue3 thinkphp yii2 css 项目列表 li go Beego Buffalo Echo Gin Iris Revel 百度云 虚拟主机 pbootcms 伪静态 框架 排序 数据库 对象 字段 sql语句 php 字符串 分割 D3.js bootstrap 函数 svg selectAll 织梦cms 关键词 解析 采集 长度限制 日期 正则表达式