Плавное отслеживание движений мыши с помощью наблюдаемых
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
Вопросы из категории :
- angular Как я могу проверить, какую версию Angular я использую?
- angular AngularJS: Как очистить параметры запроса в URL?
- angular угловой: переключить текст кнопки на основе логического значения в модели
- angular Угловое 2: Обязательно ли использовать скобки / квадратные скобки?
- angular Что означает @ (в знаке) в последнем примере TypeScript (предположительно v1.5)?
- angular Угловое значение привязки 2.0 к стилю
- angular В наличии генератор йомен для Angular 2
- angular Угловой провайдер для NameService
- angular Как использовать jQuery с Angular?
- angular Как заставить FileReader работать с Angular2?
- rxjs Ожидание асинхронной операции в onNext из RxJS Observable
- rxjs Как я могу подписаться на обещание, используя rx.js?
- rxjs Что такое «callback hell» и как и почему RX решает его?
- rxjs Реактивное программирование - RxJS против EventEmitter в Node.js
- rxjs RxJS: Как не подписаться на начальное значение и / или неопределенное?
- rxjs Как я могу заставить одну наблюдаемую последовательность RxJS ждать, пока другая завершит выполнение, прежде чем начать излучение?
- rxjs Как загрузить изображения асинхронно с RxJs и выполнить метод, когда все загружено
- rxjs RxJS - сделать счетчик с сбросом без сохранения состояния?
- rxjs Объединение наблюдаемых, когда оба изменяются одновременно
- rxjs RxJS: Как бы я "вручную" обновил Observable?