3

一直在玩 rxjs。我觉得它真的很好,但我确实花了一些时间来理解它。这是一个我无法解决的小问题,所以我正在寻找一些见解。

考虑一个多点触控界面,对于每个 touchstart/touchmove/touchend,您将拥有一个具有 {id:, x:x, y:y, t:t, current_pointers: } 的对象作为参数

我想要一个可观察的,它会在 1500 毫秒后为每个向下指针触发一个事件,除非该指针发生 touchmove 或 touchup。

对于单次触摸,它很简单,您只需 takeUntil touch move 或 touchup,但是当指针的 id 在链中的第一个可观察对象内时,您将如何使用 takeUntil 呢?

4

1 回答 1

3

它有助于展平触摸阵列,以便您可以单独处理触摸。这是使用 Rx-jQuery 绑定的基本思想。我没有测试它,所以它可能有点错误:

var flattenTouches = function (ev) {
    return ev.changedTouches.map(function(t) { return { ev: ev, touch: t }; });
};
var starts = $element.bindAsObservable("touchstart")
    .selectMany(function (ev) { return Rx.Observable.fromArray(flattenTouches(ev)); });
var moves = $element.bindAsObservable("touchmove")
    .selectMany(function (ev) { return Rx.Observable.fromArray(flattenTouches(ev)); })
    .publish().refCount(); // to prevent multiple subscriptions
var ends = $element.bindAsObservable("touchend")
    .selectMany(function (ev) { return Rx.Observable.fromArray(flattenTouches(ev)); })
    .publish().refCount(); // to prevent multiple subscriptions

var moveOrEnds = Rx.Observable.mergeObservable(moves, ends);
var timer = Rx.Observable.timer(1500);

var longpresses = starts
    .selectMany(function (start) {
        var thisPointerMovesOrEnds = movesOrEnds.where(function(t) {
            return t.touch.identifier === start.touch.identifier;
        });
        return timer
            .takeUntil(thisPointerMovesOrEnds)
            .select(start);
    });

longpresses.subscribe(function (t) {
    console.log("longpress", t.touch.pageX, t.touch.pageY, t.touch.identifier);
});
于 2013-10-18T17:35:10.460 回答