Flutter 图片编辑板(二) 拖动位置和对齐线应用
需求:图片或文字可以在编辑板上随意拖动,当即将到达边缘或者中间位置时,磁吸到目的位置上,并出对齐线。
面临的技术问题和方案:
1. 如何判断已经快到达对齐线。
图片经过缩放后,事件响应区域会发生变化,所以需要事实的更新事件区域。然后根据事件区域所在位置,和上中下的三对对齐线做比较判断。
2. translate到对齐线的位置。
不要用translate()方法,这个方法是原有基础上在位移,这样很容易对不齐。 用setRawTranslate()方法,设置最终的位置。因为对齐线的位置是知道的。经过这种方式,手指抬起时,对齐线对应的位置是不会偏移的。但是另外一个方向依旧会偏移,所以同样需要先找到期望位置,再把拉回来。这里在手指抬起来时,需要把针对对齐线的偏移置零。
3. 抬手指时抖动,导致位置偏移。
问题根源:由于系统控件(Interactiveviewer)摩擦系数的作用缺陷,导致抬手指时产生的抖动,引起图片几个像素的偏移。interactionEndFrictionCoefficient是设置摩擦系数的, 把设置到最大kDrag = 1e-200。 理论上可以解决抖动的问题但是不行。另外,手指快速移一下就不会飞走了。
解决方案是,记录手指移动时产生的事件坐标点, 最多纪录十个。
在滑动时,每个事件的间隔通常都在几十个毫秒之间。通常用户在需要精确选位置时,手指抬起前会停顿一下。加上每个事件的发生都带有时间戳。利用这个现象和条件。就可以推算出手指静止时的事件坐标点(目前是间隔100毫秒)。从而计算出正确的位置偏移, 把图像拉回到用户希望的位置。