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

总结

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