0

我正在尝试在 Dart 中创建一个新对象，然后单击鼠标。

4

2 回答 2

2

offset您可以使用属性获取 X 和 Y 坐标。有关更多信息，您可以查看文档。您的代码应如下所示：

镖：

import 'dart:html';

void main() {
  document.onClick.listen(findCoordinates);
}

void findCoordinates(evt) {
  querySelector('#hello').text = "x: " + evt.offset.x.toString() + " y: " + evt.offset.y.toString();
/// here you can create a whatever object you like
}

HTML：

<!DOCTYPE html>
<html>
<head>
<title>Page</title>
</head>
<body>
<h1 id="hello">This is a Heading</h1>
</body>
</html>
于 2019-12-05T00:40:07.313 回答
0

正如 Stefan 提到的，该offset属性将为您提供 X 和 Y 坐标。

假设你想创建一个鼠标点击的图像，你可以尝试这样的事情：

镖：

import 'dart:html';

void main() {
  querySelector('.imgContainer').onClick.listen(addImage);
}

void addImage(MouseEvent me) {
  DivElement imgContainer = querySelector('.imgContainer');
  ImageElement img = ImageElement()
    ..src = "https://dartpad.dev/dart-192.png"
    ..className = "dartLogo"
    ..style.left = "${me.offset.x - 25}px"
    ..style.top = "${me.offset.y - 25}px";
  imgContainer.append(img);
}

HTML：

<!DOCTYPE html>
<html>
  <head>
    <title>Dart Logo on Click</title>
  </head>
  <body>
    <div class="imgContainer"></div>
  </body>
</html>

CSS：

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: white;
}

.dartLogo {
  position: absolute;
  width: 50px;
}

.imgContainer {
  width: 100%;
  height: 100%;
}

这是一个实时的 DartPad.dev 示例：创建鼠标单击的图像

于 2019-12-05T02:44:36.580 回答