rxjs를 사용하여 멀티 터치 장시간 이벤트 감지

Question

rxjs를 가지고 놀았습니다. 나는 그것을 정말로 좋아한다. 그러나 정말로 그것 주위에 나의 머리를 알아들을 약간의 시간이 걸렸다. 여기 제가 해결할 수없는 작은 문제가 있습니다. 그래서 나는 통찰력을 찾고 있습니다. {: X, Y : Y, t : t, current_pointers : ID :, X}

싶습니다 각각 touchstart /하는 TouchMove/touchend와 객체를 PARAMS 당신이 것을위한 곳

는 멀티 터치 인터페이스를 고려 touchmove 또는 touchup이 해당 포인터에 대해 발생하지 않는 한 1500ms 후 각 다운 포인터에 대한 이벤트를 트리거하는 관찰 가능 개체입니다.

단 한번의 터치의 경우 터치가 이동하거나 터치 업 할 때까지 걸릴 수 있지만 포인터의 ID가 체인의 첫 번째 관찰 가능 범위 내에있는 경우 takeUntil을 어떻게 사용합니까?

Answer 1

터치 배열을 평평하게하면 터치를 개별적으로 처리 할 수 ​​있습니다. 다음은 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); 
});