Flutter 可以縮放拖拽的圖片

摘要： 在pub上面找了下，沒有發現一個效果跟微信一樣的支援縮放拖拽效果的image，所以就自己擼了一個，之前寫過Flutter 什麼功能都有的Image，於是就在這個上面新增了這個功能。 主要功能： 縮放拖拽 在PageView裡面縮放拖拽 支援縮放拖拽 ...

在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 IOC架構設計

加群Android IOC架構設計領取獲取往期Android高階架構資料、原始碼、筆記、視訊。高階UI、效能優化、架構師課程、NDK、混合式開發（ReactNative+Weex）微信小程式、Flutter全方面的Android進階實踐技術，群內還有技術大牛一起討論交流解決問題。