Как получить десятичные значения координат XY на мышь Move в Typescript Angular?

Question

Я конвертирую свой пользовательский интерфейс из Flash / Flex, и он сохраняет значения в десятичном виде в пользовательском интерфейсе Flex. Я должен повторно использовать эти значения.

Я создал пример для моей проблемы. Выдержки:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'hello',
  template: `<div (mousemove)="showXY($event)"></div>`,
  styles: [`div { border: 1px solid black; height: 500px; width: 500px }`]
})
export class HelloComponent {
  @Input() name: string;

  x: number;
  y: number;
  showXY(e: MouseEvent) {
    this.x = e.offsetX;
    this.y = e.offsetY;
    console.log('x: ', this.x, 'y: ', this.y);
  }
}

Я хочу видеть десятичную точность значений x и y при наведении мыши на элемент div, как я могу это сделать?

Answer 1

К моему удивлению, MouseEvent.offset{X,Y} - это , предполагается, что должны быть представлены числами с плавающей запятой двойной точности, хотя я никогда не видел и не использовал их в дикой природе:

Возвращаемое значение

A double значение с плавающей запятой.Ранние версии спецификации определяли это как integer .Подробности см. В разделе совместимости браузера.

В таблице совместимости утверждается, что Chrome 56 и далее изменил свое внутреннее представление на двойное.

Согласно комментариям к этому вопросу вы можете получить субпиксельное разрешение, но, похоже, оно зависит от аппаратного обеспечения .Например, моя текущая настройка (простой ЖК-монитор Benq 1080p в Windows 10) не обеспечивает субпиксельного разрешения, поэтому значения возвращаются в виде целых чисел.

Так что вам придется учитывать это при переносе приложенияи предположим, что субпиксельное разрешение является функцией, предлагаемой при прогрессивном улучшении - в некоторых случаях это выглядит довольно редко - и Math.floor() / .ceil() ваши значения в противном случае.

Полагаю, вы могли обнаружить субэффектПиксельная способность путем простого поиска десятичного значения в возвращаемом значении (т. е. Number.isInteger(MouseEvent.offsetX)).