Flutter 可以缩放拖拽的图片,apk优化工具

本文介绍了在Flutter中实现图片可缩放拖拽的详细过程,包括如何让缩放过程流畅、处理边界计算以及实现缩放回弹和拖拽惯性效果。同时讨论了在PageView中集成这种功能时遇到的手势冲突问题,并提供了解决方案。
摘要由CSDN通过智能技术生成

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方式,计算出最终显示区

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值