如何獲取鼠標上的xy坐標的十進制值在Typescript Angular中移動？

Question

我正在從Flash / Flex轉換我的UI，它在Flex UI中保存十進制值。 我必須重用這些值。

我為我的問題創建了一個例子 。 摘抄：

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

我想看看鼠標移動到div上的x和y值的小數精度我該怎么辦？

Answer 1

令我驚訝的是， MouseEvent.offset{X,Y} 應該由雙精度浮點數表示，盡管我從未在野外看到或使用它們：

回報價值

雙浮點值。 早期版本的規范將其定義為整數 。 有關詳細信息，請參閱瀏覽器兼

兼容性圖表聲稱Chrome 56將其內部表示更改為double。

根據對這個問題的評論 ，你可能能夠獲得亞像素分辨率，但這似乎取決於硬件 。 例如，我當前的設置（Windows 10上的簡單1080p Benq LCD顯示器）不提供亞像素分辨率，因此值將作為整數返回。

因此，在移植應用程序時，您必須考慮到這一點，並假設子像素分辨率是漸進增強下提供的功能 - 在看起來很少見的情況下 - 和Math.floor() / .ceil()其他價值觀。

我想你可以通過簡單地在返回值中查找小數來檢測子像素功能（即Number.isInteger(MouseEvent.offsetX) ）。