html - 在 Dart 中如何通过鼠标点击 HTML5 Canvas 获得 X 和 Y？

Question

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

Answer 1

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

创建一个简单的 Point 类:

class Point {
  final int x;
  final int y;

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

导入 dart:html 库:

import 'dart:html';

第一步，获取 Canvas 的客户端边界矩形:

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

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

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

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

接下来，将点击事件处理程序附加到 Canvas :

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