本文介绍一种使用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和位置。
...
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);
});
读者福利
Android架构师的门槛,有没有免费学习资料?
有Android开发3-5年基础,希望突破瓶颈,成为架构师的小伙伴,可以加入Android高级架构群;1007478004,免费提供视频和资料,一起学习,相互讨论。