14-处理用户输入

1.9　处理用户输入

到目前为止，还没有涉及任何用户输入。用户点击圆不会有任何变化。同样地，拖拽圆也没有任何效果。接下来将设计一些用户交互，比如，让用户来决定从哪里开始画圆。

用户输入是具有异步特征的（时间不受控制），那么如何恰当并顺畅地处理它们显得尤为重要。异步事件有个特点：执行时间完全不受控制。用户点击鼠标就是一个异步事件：猜测不到用户在想什么，也不知道他们什么时候会点击。当然也可以给他们的点击做出提示，但这取决于他们何时点击或者是否真的点击了。用户输入引发的异步事件通常具有直观的表现，但在后面的章节中，所学习到的异步事件就不是那么的直观了。

Paper.js使用一个tool对象来处理用户输入。如果觉得那个名字不是很表意，说明读者确实是一个优秀的程序员：必须承认，作者也不知道Pager.js的开发人员为什么使用这个术语^[4]。那么为了更好地理解，不妨在意识里将“tool”转化为“user input tool”。使用下面的代码替换掉绘制网格布局的代码：

var tool = new Tool();
tool.onMouseDown = function(event) {
   var c = Shape.Circle(event.point.x, event.point.y, 20);
   c.fillColor = 'green';
};

这段代码的第一行创建了一个tool对象。有了tool对象之后，可以给它绑定一个事件处理器。这里给它绑定了一个叫onMouseDown的事件处理器。只要用户点击了鼠标，onMouseDown事件处理器就会被调用，这是需要弄明白的一个关键点。之前编写的代码会立即执行：只要刷新页面，绿色的圆就会自动出现。但此时已经发生了变化：即便圆会显示出来，也是在单击画布后，而且每单击一次屏幕上只会出现一个绿色的圆。这是因为function(event)紧跟的花括号中的代码有一个执行条件：用户在画布上单击了鼠标。

事件处理器做了两件事情：在用户点击鼠标的时候执行代码，以及告诉鼠标点击的位置。鼠标点击的位置信息存储在参数event的point属性中，event.point有两个属性：x和y，它们能确定鼠标点击的位置。

其实还可以少写一些代码，直接将参数event的point属性传给圆（代替单独传入x, y坐标值）：

var c = Shape.Circle(event.point, 20);

上述代码突出了JavaScript一个非常重要特征：它能自动识别传入的变量。在之前的例子中，如果参数是三个数字，JavaScirpt会把它们分别当做x、y坐标值和半径来处理。如果只有两个参数，JavaScript就认为它们分别是point对象和半径。关于这点我们在第6章和第8章有更多的讲解。