Вопрос:

Плавное отслеживание движений мыши с помощью наблюдаемых

angular rxjs

9 просмотра

1 ответ

25 Репутация автора

Я использую этот код, чтобы использовать перетаскивание, анимация квадрата выделения не такая плавная, как у выбора перетаскивания в Windows или OSX, я не уверен, почему это так, но я думаю, что это может быть делать с fromEvent(). Можно ли сделать это более плавным путем переопределения значения по умолчанию fromEvent()или использования таймера с помощью чего-то вроде setTimeout () для проверки и обновления позиции мыши каждые x миллисекунд, а не так, как это используется по умолчанию в EventEvent?

Я отслеживаю положение мыши, используя наблюдаемое:

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>
Автор: doe Источник Размещён: 11.08.2019 07:47

Ответы (1)


0 плюса

12418 Репутация автора

Не уверен, что это то, что вы ищете.

Время отката

Использование оператора debouncetime или debounce решит вашу проблему сглаживания, он не будет вызывать функцию или выполняться callbackдо желаемого времени.

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();
      });

демонстрация

Автор: Amit Chigadani Размещён: 11.08.2019 08:22
Вопросы из категории :
32x32