Question

我正在创建一个绘图程序作为实验，我想使用observable来管理事件流。

可在此处找到整个项目：https://github.com/madebyjeffrey/Draw9/

基本上我正在做的是定义一个currentObject $来定义一个正在进行的绘图（或null），并让绘图内核在调用时绘制它。

管理事件的方式来自3个观察点：

        fromEvent<MouseEvent>(this.canvas, 'mousedown')
            .filter(e => e.button === 0)
            .map(e => <[number, number]>[e.offsetX, e.offsetY])
            .map(pos => new PartialLine(pos, pos))
            .subscribe(line => this.currentObject$.next(line));

        fromEvent<MouseEvent>(this.canvas, "mousemove")
            .filter(() => this.currentObject$.value !== null)
            .map(e => <[number, number]>[e.offsetX, e.offsetY])
            .map(pos => new PartialLine(this.currentObject$.value.head, pos))
            .subscribe(line => this.currentObject$.next(line));

        fromEvent<MouseEvent>(this.canvas, "mouseup")
            .filter(() => this.currentObject$.value !== null)
            .map(e => <[number, number]>[e.offsetX, e.offsetY])
            .map(pos => {
                const line = this.currentObject$.value.toLine();
                line.tail = pos;
                return line;
            })
            .subscribe(line => {
                this.currentObject$.next(null);
                this.kernel.addPrimitive(line);
       });

在这段代码中我发现的一些事情就是如何将内容转移到每行的currentObject $，最后它修改内核以添加完成的对象。

这只是对正常事件的奇特包装，看起来它并没有真正利用反应式编程。

我想知道是否有一种方法可以将这个东西完全集成到一个管道中，如果有一种方法可以使用不可变对象来保持事物更“实用”，那就更好了。

我对RxJs比较陌生，我在Angular中为http请求做了一个比switchMap更花哨的事情。

我怎样才能更“反应”地使用rxjs而不仅仅是作为事件的包装？

0 个答案: