使用rxjs检测多点触控长按事件 [英] detecting multitouch longpress event using rxjs

问题描述

一直在玩rxjs。我发现它真的很棒，但它真的花了一些时间来解决它。
这是一个我无法解决的问题，所以我正在寻找一些见解。

Been playing around with rxjs. I find it really good, but it really took some time to get my head around it. Here's a little one I can't solve, so I'm looking for some insight.

考虑一个多点触控界面，每个touchstart / touchmove / touchend你可以使用{id：，x：x，y：y，t：t，current_pointers：}

Consider a multitouch interface where for each touchstart/touchmove/touchend you would have as params an object with {id:, x:x, y:y, t:t, current_pointers: }

我想要一个可以触发的可观察对象1500 ms后每个向下指针的事件，除非触发了该指针触摸或触摸。

I would like an observable that would trigger an event for each down pointer after 1500 ms unless touchmove or touchup happens for that pointer.

对于单次触摸它很简单，你只需要进行触摸移动或触摸，但是当指针的id在链中的第一个observable中时，你将如何使用takeUntil？

For a single touch it's straightforward, you would just takeUntil touch move or touchup, but how would you use takeUntil when the id of the pointer is within the first observable in the chain ?

推荐答案

它有助于扁平化触摸阵列，以便您可以单独处理触摸。这是使用Rx-jQuery绑定的基本思想。我没有对它进行测试，因此可能有点儿错误：

It helps to flatten the touches array so you can treat the touches individually. Here's the basic idea, using the Rx-jQuery bindings. I've not tested it so it might be a bit buggy:

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);
});

这篇关于使用rxjs检测多点触控长按事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！