3

rxjsで遊んでいます。とても良いと思いますが、理解するのに本当に時間がかかりました。これは私が解決できない小さなものなので、洞察を探しています。

touchstart/touchmove/touchend ごとに {id:, x:x, y:y, t:t, current_pointers: } を持つオブジェクトをパラメーターとして持つマルチタッチ インターフェイスを考えてみましょう。

そのポインターに対して touchmove または touchup が発生しない限り、1500 ミリ秒後に各ダウンポインターのイベントをトリガーするオブザーバブルが必要です。

ワンタッチの場合は簡単です。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 に答える