Angular 可观测的平滑鼠标移动跟踪

我用这段代码来使用拖放选择，选择方块的动画不像Windows或OSX的拖放选择那样平滑，我不知道为什么会这样，但我认为这可能与

fromEvent（）

有关。是否可以通过覆盖默认值

fromEvent（）

或使用计时器（如setTimeout（））每隔x毫秒检查和更新鼠标位置，而不是使用fromEvent的默认值，使其更平滑

更新：我认为这是因为使用mousemove检查鼠标位置太慢，因为如果我快速移动鼠标，并且鼠标离开组件，那么鼠标的最后位置不在组件的边缘，因此我需要以某种方式提高mousemove检查的速率

我正在使用一个可观察的工具跟踪鼠标位置：

this.mouseMoveSubscription = fromEvent(this.elementRef.nativeElement, 'mousemove')
        .subscribe((e: MouseEvent) => {
            this.dragSelectEnd.left = e.clientX - this.elementRef.nativeElement.offsetLeft;
            this.dragSelectEnd.top = e.clientY - this.elementRef.nativeElement.offsetTop;
            this.updateHighlightSelector();
        });

并使用以下内容在页面上呈现：

<div class="highlight-selection"
  *ngIf="highlightSelectorActive"
  [style.left.px]="highlightSelector.left"
  [style.top.px]="highlightSelector.top"
  [style.height.px]="highlightSelector.height"
  [style.width.px]="highlightSelector.width"></div>

---

不确定这是否是您要找的

去盎司时间

使用or运算符可以解决平滑问题，在需要的时间之前，它不会调用该函数或执行

回调

import { debounceTime } from 'rxjs/operators';
fromEvent(elementRef.nativeElement, 'mousemove')
    .pipe(debounceTime(1000))
    .subscribe((e: MouseEvent) => {
             this.dragSelectEnd.left = e.clientX - this.elementRef.nativeElement.offsetLeft;
             this.dragSelectEnd.top = e.clientY - this.elementRef.nativeElement.offsetTop;
             this.updateHighlightSelector();
      });

---

使用CSS translateX translateY，相对定位总是滞后的。这不仅仅是x，y位置，还有宽度和高度的变化。我会用什么来做呢？这不是滞后的，transform无法解决问题。如果发射速度太快，你可以看看下面的答案。这不会减少对鼠标移动的检查，我想增加它，使它更平滑。但我不确定这是否会让事情变得更顺利。