使用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

请找到fork of your 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 没有工作，因为你没有声明一个模块。

我建议您阅读以下内容：The Basics，其中解释了如何构建最小设置。

---

(*) 如果你不小心陷入死循环，警报会给你带来麻烦；此外，您还可以在控制台中打印更多内容。