在rxjs中,如何从takeUntil结束的switchMap中获取最后一个值?
下面是一个典型的rxjs拖放示例:在rxjs中,如何从takeUntil结束的switchMap中获取最后一个值?,rxjs,Rxjs,下面是一个典型的rxjs拖放示例: const drag$ = mousedown$.pipe( switchMap( (start) => { return mousemove$.pipe(map(move => { move.preventDefault(); return { left: move.clientX - start.offsetX, top: move.clientY
const drag$ = mousedown$.pipe(
switchMap(
(start) => {
return mousemove$.pipe(map(move => {
move.preventDefault();
return {
left: move.clientX - start.offsetX,
top: move.clientY - start.offsetY
}
}),
takeUntil(mouseup$));
}));
drag$.subscribe(pos => {
box.style.top = `${pos.top}px`
box.style.left = `${pos.left}px`
});
takeUntil
将取消订阅mouseMove$的内部可观察内容。但是,如果我需要内部可观察的最后一个值,以便在鼠标上对其进行处理,该怎么办?我知道我可以给一个全局临时变量赋值,以达到这个目的,但我正试图避免这种情况
我试图做的更复杂的事情是:
我正在做一个3D游戏,我想实现抓取和投掷。我将其设置为类似于rxjs conanical拖放场景,在该场景中,我订阅一个控制器“挤压”事件,然后切换到另一个可观察到的控制器移动,在该场景中,我“拖动”并将对象重新定位到我手的任何位置,最后我直到释放“挤压”为止,让物体离开
但是还有一件事我需要去实现“扔”这个物体,那就是我需要我的手运动的速度向量,在挤压被释放的那一刻,向这个物体施加一个脉冲力,当我放开它的时候,它就会飞走。可以使用scan
在switchMap
的管道中的每一帧上计算该向量
问题是,take直到
刚刚停止数据流,并且我无法访问scan
累加器中的最后一个值。您可以使用该操作符从另一个可观察对象获取最近的发射。结果是流值的数组,后面是其他可观察对象的最后一次发射:
下面是一个示例。这是一个非常有趣的问题,我猜在发生拖动事件时,您还需要这些值,但也需要在鼠标移动事件发生之前最后发出的值
我认为一种方法是:
const drag$=mousedown$.pipe(
开关图(
(开始)=>{
mousemove$=mousemove$.pipe(
地图(移动=>{
move.preventDefault();
返回{
左:move.clientX-start.offsetX,
顶部:move.clientY-start.offsetY
}
}),
takeUntil(mouseup$),
share(),
);
返回海螺(
//在“mousemove”事件发生时获取它们
mousemove$,
mousemove$.pipe(
减少((acc,crt)=>{/*…*/}),
),
)
}));
reduce
运算符的工作原理与scan
相同,但前者在源完成时将发出累积值
如果您想在两个观察对象中使用相同的扫描
逻辑,那么开关映射
的内部观察对象可以如下所示:
mousemove$=mousemove$.pipe(
地图(移动=>{
move.preventDefault();
返回{
左:move.clientX-start.offsetX,
顶部:move.clientY-start.offsetY
}
}),
扫描((acc,crt)=>{/*…*/}),
takeUntil(mouseup$),
share(),
);
返回海螺(
mousemove$,
mousemove$.pipe(
//当源完成时,它将发出最后发出的值
takeLast(1),
),
)
mouseup$.pipe(
withLatestFrom(drag$)
).subscribe(
([mouseup, drag]) => console.log({drag, mouseup})
);