Question

我需要使用鼠标拖动来实现背景偏移功能，与普通拖动实现相比，具有挑战性的部分是保持每个拖动行为累积的总偏移量这是我想出的解决方案

let xOffset = 0 //not able to fit this state into Observable stream
const drag$ =
    mousedown$
        .switchMap(({ point: mousedown }) => {
            return mousemove$
                .map(({ point: mousemove }) => mousemove[0] - mousedown[0])
                .do((deltaX) => {
                    chart.transform({ x: deltaX + xOffset })
                })
                .takeUntil(mouseup$)
                .takeLast(1)
        })
        .scan((x, y) => x + y)
        .do(x => xOffset = x)

问题在于我采用了一个全局变量的优势来跟踪总偏移量，而rxjs的理念是什么，在没有全局的情况下实现这一目标的任何方法都可以实现这一点？

Answer 1

最后，我想出了解决方案

const dragBG$ = mousedown$
    .switchMapTo(mousemove$
        .pairwise()
        .map(([[x1], [x2]]) => x2 - x1)
        .takeUntil(mouseup$)
    )
    .scan((x, y) => x + y)
    .do((x) => {
        chart.transform({ x })
    })

关键是不要比较mousedown和mousemove。通过这样做，永远不会积累价值。相反，计算两个mousemove的delta

如何使用rxjs在没有全局变量的情况下累积拖动偏移量

1 个答案: