使用 Angularjs 在画布上捕获鼠标单击坐标

Question

我是angularjs和canvas的新手。我试图做的是在用户首先单击的屏幕上的点画一个圆圈。对于随后的每次单击，捕获坐标，在第二次单击点绘制另一个圆，并用贝塞尔曲线连接两者。如果第二次点击的 y 坐标高于/低于第一次点击，则两个圆必须通过 s 型贝塞尔曲线连接。如果两者具有相同的 y 坐标，则需要用直线连接。所有后续圆圈都连接到第一个圆圈。

我似乎甚至无法从第一部分开始。这是我的代码。

<canvas  ng-click="addOnClick($event)" id="canvas1" width="600" height= "600"></canvas>

这是捕获点击的代码

$scope.doClick = function(event){
    var x = event.x;
    var y = event.y;
    var offsetX = event.offsetX;
    var offsetY = event.offsetY;
    alert(x, y, offsetX, offsetY);
};

但是当我点击画布时，似乎什么也没发生。有人可以帮我开始吗？

Answer 1

请找到一个 plunk 的分支，它打印了您想要在控制台中捕获的内容（如果您真的喜欢警报，您也可以提醒它，但我建议改用控制台）（*）

---

我定义了一个名为 plunker 的模块：

var app = angular.module('plunker', []);
app.controller('MainController', function($scope) {...});

然后在控制器中：

var x = event.clientX;
var y = event.clientY;

和您的 html：

ng-click="doClick($event)"

---

您的 plunk 不起作用，因为您没有声明模块。

我建议您阅读以下内容：基础知识，它解释了如何构建最小设置。

---

（*） 如果您不小心遇到无限循环，警报会给您带来麻烦;此外，您可以在控制台中打印更多内容。