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

Question

我在网页上有一个HTML5画布。当用户点击画布时，我想获得相对于画布的X和Y坐标。我想在达特这样做。

Answer 1

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

创建一个简单的Point类：

class Point {
  final int x;
  final int y;

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

导入dart：html库：

import 'dart:html';

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

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

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

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做同样的事情，但我不确定这些字段是否会永远存在，因为它们不在标准中。

如何通过鼠标点击Dart中的HTML5画布获得X和Y？

2 个答案:

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