使用鼠标和键盘与 Paper.js 项目进行交互的教程。

• 创建鼠标工具
• 鼠标工具事件
• 使用鼠标向量
• 键盘交互

创建鼠标工具

本教程介绍了创建 Paper.js 工具的不同方法，从而使用户可以通过鼠标进行交互。

我的第一个鼠标工具

我们从一个非常简单的工具示例开始，它在脚本执行时会创建一个空路径，并在你单击鼠标时给路径添加段：

// 脚本执行时，立即创建一个新路径
var myPath = new Path();
myPath.strokeColor = 'black';

// 当用户在视图中点击鼠标时，函数会立刻被调用
function onMouseDown(event) {
    // 在鼠标位置处给路径添加一个段：
    myPath.add(event.point);
}

鼠标处理函数

Paper.js 可以为通过鼠标产生的不同行为提供鼠标处理程序。你可以使用这些鼠标处理程序生成不同类型的工具，这些工具有不同的方式来响应鼠标交互和移动。

注意

请注意：在JavaScript中，函数是代码块，写在其它 script 区域时只有调用它们时才会执行。 处理函数是在某个事件发生时由 Paper.js 调用的函数。

要查看何时调用了这些不同的处理函数，请将以下代码复制粘贴到新的 JavaScript 文件中，执行它并与 Paper.js 工具交互：

function onMouseDown(event) {
    console.log('You pressed the mouse!');
}

function onMouseDrag(event) {
    console.log('You dragged the mouse!');
}

function onMouseUp(event) {
    console.log('You released the mouse!');
}

事件对象

鼠标处理函数接收一个事件对象，其中包含有关鼠标事件的信息，例如鼠标的当前位置（event.point），按下鼠标的位置（event.downPoint），鼠标事件的压力（ event.pressure）等等。

提示

鼠标工具事件 (opens new window)教程中详细介绍了事件对象的属性。

线条工具示例

这是一个绘制线条的简单工具。线条的起点是你单击时的位置，最后一个点是你释放鼠标时的位置。

试着在下面点击，拖动和释放：

// 定义一个空变量，使两个鼠标处理函数都能访问到
var myPath;

function onMouseDown(event) {
	// 鼠标按下时，给 myPath 创建一个新路径
	// 给路径的第一个段设置坐标位置和黑色笔划
	myPath = new Path();
	myPath.strokeColor = 'black';
	myPath.add(event.point);
}

function onMouseUp(event) {
	// 鼠标释放时，给线条的最后一个段设置新的坐标位置
	myPath.add(event.point);
}

请注意：

这个工具与第一个示例之间的区别在于，每次单击鼠标时都会创建一个新路径，并在释放鼠标时结束路径。

键盘交互

Paper.js 中你能以两种方式与键盘进行交互：你可以监听按键事件并响应这些事件，或者你可以随时检查指定键的状态，以检查是否按下了键。本教程具体解释了这两种方法。

接收按键事件

要获取有关按键的信息，请在脚本中定义onKeyDown或onKeyUp处理函数。

下面的示例中，我们通过创建文本项并修改内容，来给用户提供哪个键被按下/释放的反馈：

// 在视图中心创建一个居中的文本项：
var text = new PointText({
    point: view.center,
    content: 'Click here to focus and then press some keys.',
    justification: 'center',
    fontSize: 15
});

function onKeyDown(event) {
    // 当键被按下，设置文本项的内容：
    text.content = 'The ' + event.key + ' key was pressed!';
}

function onKeyUp(event) {
    // 当键释放，设置文本项的内容：
    text.content = 'The ' + event.key + ' key was released!';
}

请注意：

按住键时会连续触发 onKeyDown 事件。

事件对象

上面的示例使用 event.key 属性来查看按下了哪个键。 事件对象包含几个描述按键事件的属性：

event.key：按下的键。

event.character：按键生成的字符。 例如，当按下 shift 和 a 时，将显示大写的 A。

event.type：按键事件的类型，'keydown' 或 'keyup'。

检查按键是否按下

要检查当前是否按下了某个键，我们可以使用Key.isDown(key)函数。

下面的示例中，我们创建一个路径，并在用户拖动鼠标时向路径添加段。 当拖动时按下 'a' 键，我们将最后添加的段移到鼠标的位置，而不是添加新的段。

var path;
function onMouseDown(event) {
    path = new Path();
    path.strokeColor = 'black';
    path.add(event.point);
}

function onMouseDrag(event) {
    if(Key.isDown('a')) {
        // 如果 'a' 键按下，
        // 移动最后一个段点到鼠标的位置：
        path.lastSegment.point = event.point;
    } else {
        // 如果键没被按下，在鼠标的位置添加一个段：
        path.add(event.point);
    }
}

辅助按键

传递给鼠标事件处理程序（如 onMouseDown）的事件对象还包含有关按下哪些辅助按键的信息。 辅助按键是不直接产生字符的键：capsLock，command，control，option，shift。

event.modifiers 属性是一个对象，提供不同辅助按键的布尔值。 例如，要检查 shift 键是否关闭，您可以执行以下操作：

function onMouseDrag(event) {
    if (event.modifiers.shift) {
        // 当 shift 键按下时执行某些操作
    }
}

例如，如果我们想使用 shift 键，达到和上面示例脚本的相同效果：

var path;
function onMouseDown(event) {
    path = new Path();
    path.strokeColor = 'black';
    path.add(event.point, event.point);
}

function onMouseDrag(event) {
    if(event.modifiers.shift) {
        // 如果 'shift' 键按下，
        // 移动最后一个段点到鼠标的位置：
        path.lastSegment.point = event.point;
    } else {
        // 如果键没被按下，在鼠标的位置添加一个段：
        path.add(event.point);
    }
}

享受按键的乐趣

以下示例会在运行时创建路径，并在按下 wasd 中的一个键时在对应按键方向上给路径添加段点。

单击下面的视图，使其获得键盘焦点并按下 wasd 中的一个键。

//线的起始点
var position = new Point(100, 100);

// 当键按下时移动的距离：
var step = 10;

var path = new Path();
path.strokeColor = 'black';
path.add(position);

function onKeyDown(event) {
    if(event.key == 'a') {
        position.x -= step;
    }

    if(event.key == 'd') {
        position.x += step;
    }

    if(event.key == 'w') {
        position.y -= step;
    }

    if(event.key == 's') {
        position.y += step;
    }
    path.add(position);
}