Angular (Javascript) как контролировать скорость события мыши? - PullRequest
Новая
       33

Angular (Javascript) как контролировать скорость события мыши?

0 голосов
/ 30 мая 2019

Я пытаюсь нарисовать на холсте, используя событие перемещения мыши

Вы можете увидеть рабочую демонстрацию на этом blitzy Я вызываю эту функцию при перемещении мыши, чтобы нарисовать прямоугольник 

 updateDraw(e: MouseEvent) {

    this.previousCoordinates = this.currentCoordinates;
    this.currentCoordinates = HelloComponent.getCoordinatesOnCanvas(this.canvas.nativeElement, e);
    if (this.drawingMode) {
      HelloComponent.createShape(this.shapes, this.ctx, this.startCoordinates,
        this.currentCoordinates, this.previousCoordinates, true);
      this.endCoordinates = this.currentCoordinates;
    }
  }

Проблема в том, что если я слишком быстро перемещаю мышь, я получаю несколько прямоугольников (я предполагаю, что прозрачный прямоугольник не работает, поскольку движение мыши слишком быстрое), как этого избежать, должно бытьтолько 1 прямоугольник в 1 перетаскивании?

enter image description here

Редактировать: Я хочу иметь возможность рисовать более 1 прямоугольника, здесьЯ отслеживаю и очищаю предыдущие координаты 

  private static createShape(shape: Shapes, context: CanvasRenderingContext2D,
    start: Coordinates, end: Coordinates, prev: Coordinates,
    dotted: boolean) {

    context.clearRect(start.x, start.y, (prev.x - start.x), (prev.y - start.y));

1 Ответ

1 голос
/ 30 мая 2019

StackBlitz

Объяснение:

У вас правильная идея, проблема в том, что область, в которую вы отправляете clearRect, на самом деле не включаетграницы.Согласно документации (выделено),

Метод CanvasRenderingContext2D.strokeRect () Canvas 2D API рисует заштрихованный прямоугольник ( обведено )в соответствии с текущим стилем штрихов и другими настройками контекста.

Итак, чтобы очистить границу, вам нужно учитывать ширину границы при попытке ее очистить. 

const borderWidth = 1;
const x = Math.min(start.x, prev.x) - borderWidth;
const y = Math.min(start.y, prev.y) - borderWidth;
const width = Math.abs(start.x - prev.x) + (2 * borderWidth);
const height = Math.abs(start.y - prev.y) + (2 * borderWidth);

context.clearRect(x, y, width, height);
...