本文介绍一种使用Rxjava实现图片交互操作的方法。支持单指拖动，双指旋转缩放，效果如下：

自定义View

首先自定义TrsImageView继承ImageView，设置ScaleType为Matrix，我们使用矩阵计算最终的translate, rotate和scale。

public class TrsImageView extends ImageView {public TrsImageView(Context context) {super(context);init();}private void init() {Matrix matrix = new Matrix();setScaleType(ScaleType.MATRIX);setImageMatrix(matrix);}
}
复制代码

创建touch事件Observable

用create方法创建Observable，只考虑单指和双指的情况，用share操作符使Observable可以被多次订阅。自定义Event类，保存触摸事件id和位置。

    private void init() {...Observable<Event> touchStream = Observable.create((ObservableEmitter<Event> emitter) -> {setOnTouchListener((v, event) -> {int pointerCount = event.getPointerCount();if (pointerCount == 1) {Event e = new Event();e.action = event.getActionMasked();e.p1 = new Vector(event.getX(), event.getY());emitter.onNext(e);} else if (pointerCount == 2) {Event e = new Event();e.action = event.getActionMasked();e.p1 = new Vector(event.getX(0), event.getY(0));e.p2 = new Vector(event.getX(1), event.getY(1));emitter.onNext(e);}return true;});}).share();}
复制代码

使用filter操作符获取不同触摸事件的Observable

    private void init() {...Observable<Event> pointer1Down = touchStream.filter(e -> e.action == MotionEvent.ACTION_DOWN);Observable<Event> pointer2Down = touchStream.filter(e -> e.action == MotionEvent.ACTION_POINTER_DOWN);Observable<Event> pointerMove = touchStream.filter(e -> e.action == MotionEvent.ACTION_MOVE);Observable<Event> pointer2Up = touchStream.filter(e -> e.action == MotionEvent.ACTION_POINTER_UP);Observable<Event> pointer1Up = touchStream.filter(e -> e.action == MotionEvent.ACTION_UP);}
复制代码

计算位移、旋转和缩放

首先考虑单指拖动的操作流程：

手指按下 -> 手指移动 -> 手指抬起
复制代码

我们用两次相邻的手指移动的位移去移动图片，计算方法如下：

Observable<Vector> delta1 = Observable.combineLatest(pointerMove, pointerMove.skip(1), (prev, cur) -> prev.p1.subtract(cur.p1));
复制代码

完整流程代码如下：

pointer1Down.flatMap(e -> delta1.takeUntil(pointer1Up)).subscribe(v -> {matrix.postTranslate(v.x, v.y);setImageMatrix(matrix);});
复制代码

再来考虑双指操作流程：

第二个手指按下 -> 手指移动 -> 第二个手指抬起
复制代码

同样，我们用两次相邻的手指移动计算图片的位移、旋转和缩放，定义类Delta保存这些值

Observable<Delta> delta2 = Observable.combineLatest(pointerMove, pointerMove.skip(1), (prev, cur) -> {Delta delta = new Delta();delta.center = cur.center();delta.translate = prev.center().subtract(cur.center());delta.scale = prev.length() / cur.length();delta.rotate = cur.vector().angle(prev.vector());return delta;
});
复制代码

完整流程代码如下：

pointer2Down.flatMap(e -> delta2.takeUntil(pointer2Up)).subscribe(d -> {matrix.postTranslate(d.translate.x, d.translate.y);matrix.postRotate(d.rotate, d.center.x, d.center.y);matrix.postScale(d.scale, d.scale, d.center.x, d.center.y);setImageMatrix(matrix);});
复制代码

第二个手指按下的时候，单指拖动流程应该停止，第二个手指抬起的时候，单指拖动流程应该重新开始。所以我们需要修改单指拖动流程的实现：

pointer1Down.mergeWith(pointer2Up).flatMap(e -> delta1.takeUntil(pointer1Up).takeUntil(pointer2Down)).subscribe(v -> {matrix.postTranslate(v.x, v.y);setImageMatrix(matrix);});
复制代码

完整代码见这里。