html - 如何在 Dart 中通过鼠标单击 HTML5 画布获得 X 和 Y？

Question

我在网页上有一个 HTML5 画布。当用户单击画布时，我想获取相对于画布的 X 和 Y 坐标。我想在 Dart 中执行此操作。

Answer 1

此答案已过时，请参阅上面已接受的答案

创建一个简单的 Point 类：

class Point {
  final int x;
  final int y;

  Point(this.x, this.y);
}

导入 dart:html 库：

import 'dart:html';

第一步，获取画布的客户端边界矩形：

Point clientBoundingRect;
Future<html.ElementRect> futureRect = ctx.canvas.rect;

futureRect.then((html.ElementRect rect) {
  clientBoundingRect = new Point(rect.bounding.left, rect.bounding.top);
});

接下来，定义从窗口到画布的偏移算法。

Point getXandY(e) {
    num x =  e.clientX - clientBoundingRect.x;
    num y = e.clientY - clientBoundingRect.y;
    return new Point(x, y);
}

接下来，将单击事件处理程序附加到画布：

ctx.canvas.on.click.add((e) {
    click = getXandY(e);
});

Answer 2

如果 getBoundingClientRect 现在 Dart 有同步版本，你就不用再使用异步版本了。

var clientRect = ctx.canvas.getBoundingClientRect();

ctx.canvas.on.click.add((e) {
  var x = e.clientX - clientRect.left;
  var y = e.clientY - clientRect.top;
});

MouseEvent 中还有“offsetX”和“offsetY”getter，它们做同样的事情，但我不确定这些字段是否会永远存在，因为它们不在标准中。