如何在绘图程序中更响应式地使用RxJS，而非仅作为事件包装器？

我最近在开发一款叫Draw9的实验性绘图程序，核心目标是用Observable来优雅地管理鼠标事件流，让绘图逻辑更清晰。目前已经定义了currentObject$这个Observable，它用来表示当前正在绘制的图形（没有绘制时为null），绘图核心会根据这个流的最新值来完成绘制操作。

事件流的核心实现思路 #

我用三个Observable来串联整个绘图的交互流程：

1. 鼠标按下事件：初始化绘图
   首先监听画布的鼠标左键按下事件，过滤掉右键等其他点击，然后把事件转换成绘图的起始信息：

   const mouseDown$ = fromEvent<MouseEvent>(this.canvas, 'mousedown')
     .filter(e => e.button === 0) // 仅处理左键点击
     .map(e => ({
       x: e.offsetX,
       y: e.offsetY,
       tool: this.selectedTool // 比如当前选择的是矩形、画笔等工具
     }));
   

2. 鼠标移动事件：实时更新图形
   单独的移动事件没意义，需要和按下事件关联起来——只有在鼠标按下后，移动事件才会触发图形更新。这里用switchMap来实现这个关联，并用takeUntil监听鼠标抬起事件，结束当前的绘制流：

   const mouseMove$ = fromEvent<MouseEvent>(this.canvas, 'mousemove');
   const mouseUp$ = fromEvent<MouseEvent>(this.canvas, 'mouseup');
   
   const drawing$ = mouseDown$.pipe(
     switchMap(startInfo => {
       // 根据起始信息创建初始图形对象
       const initialShape = createShape(startInfo.tool, startInfo.x, startInfo.y);
       // 监听移动事件，实时更新图形的结束坐标
       return mouseMove$.pipe(
         map(moveEvent => ({
           ...initialShape,
           endX: moveEvent.offsetX,
           endY: moveEvent.offsetY
         })),
         takeUntil(mouseUp$) // 鼠标抬起时停止当前绘制流
       );
     })
   );
   

3. 关联到currentObject$：驱动绘图核心
   最后把drawing$和currentObject$绑定，让绘图核心能实时响应图形变化：

   this.currentObject$ = drawing$.pipe(
     startWith(null), // 初始状态为无绘制对象
     scan((_, currentShape) => currentShape) // 始终保留最新的图形状态
   );
   
   // 订阅currentObject$，触发绘制
   this.currentObject$.subscribe(shape => {
     this.drawingCore.render(shape);
   });
   

一些优化小技巧 #

• 给鼠标移动事件加debounceTime(10)，避免过于频繁的绘制更新，减轻性能压力
• 处理鼠标移出画布的情况：可以给mouseUp$加上fromEvent(document, 'mouseup')，确保即使鼠标移出画布，抬起时也能正确结束绘制
• 支持不同工具的切换：在createShape里根据选中的工具类型（矩形、圆形、画笔等）生成不同的图形对象结构

内容的提问来源于stack exchange，提问作者Jeffrey Drake