Ame's blog Ame's blog
首页
  • 前端核心

    • HTML
    • CSS
    • JavaScript
    • Web API接口
    • TypeScript
    • 浏览器
    • UI库
    • 前端框架
    • 前端工具库
  • 也许是后端

    • node
  • 学习笔记

    • 暂时为空
UI
  • 编译原理
  • 网络
  • 计算机组成
  • 数据结构与算法
  • 操作系统原理
  • 设计模式
  • 数据库
  • 面试
关于
  • 网站
  • 前端通用资源
  • Vue资源
  • React资源
  • Node资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Ame

做一个懂UI的前端工程师
首页
  • 前端核心

    • HTML
    • CSS
    • JavaScript
    • Web API接口
    • TypeScript
    • 浏览器
    • UI库
    • 前端框架
    • 前端工具库
  • 也许是后端

    • node
  • 学习笔记

    • 暂时为空
UI
  • 编译原理
  • 网络
  • 计算机组成
  • 数据结构与算法
  • 操作系统原理
  • 设计模式
  • 数据库
  • 面试
关于
  • 网站
  • 前端通用资源
  • Vue资源
  • React资源
  • Node资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • vis-network中文文档

  • fabricJS中文文档

  • paperJS中文文档

    • paperJS 关于
    • paperJS 特点
    • paperJS 下载
    • paperJS 入门
    • paperJS 几何
    • paperJS 路径
    • paperJS 交互
      • 创建鼠标工具
        • 我的第一个鼠标工具
        • 鼠标处理函数
        • 事件对象
        • 线条工具示例
      • 键盘交互
        • 接收按键事件
        • 事件对象
        • 检查按键是否按下
        • 辅助按键
        • 享受按键的乐趣
  • pixiJS教程

  • spritejs

  • 数据可视化
  • paperJS中文文档
Ame
2020-06-11

paperJS 交互

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

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

# 创建鼠标工具

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

# 我的第一个鼠标工具

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

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

// 当用户在视图中点击鼠标时,函数会立刻被调用
function onMouseDown(event) {
    // 在鼠标位置处给路径添加一个段:
    myPath.add(event.point);
}
1
2
3
4
5
6
7
8
9

# 鼠标处理函数

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!');
}
1
2
3
4
5
6
7
8
9
10
11

# 事件对象

鼠标处理函数接收一个事件对象,其中包含有关鼠标事件的信息,例如鼠标的当前位置(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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

请注意:

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

# 键盘交互

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!';
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

请注意:

按住键时会连续触发 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);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 辅助按键

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

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

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

例如,如果我们想使用 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);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 享受按键的乐趣

以下示例会在运行时创建路径,并在按下 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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
编辑 (opens new window)
上次更新: 2021/03/31, 14:03:00
paperJS 路径
spritejs占位文章

← paperJS 路径 spritejs占位文章→

最近更新
01
TypeScript类型定义
03-20
02
Typescript
03-19
03
常用兼容IE或增强浏览器的库
03-09
更多文章>
Theme by Vdoing | Copyright © 2020-2021 Ame | MIT License | 鲁ICP备18003274号-2
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式