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)"

你的插件没有用，因为你没有宣布一个模块。

我建议你阅读：The Basics，它解释了如何构建最小设置。

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

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

1 个答案: