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

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