KeyboardJS 开发指南 - 与 Three.js 配合使用的捕捉键盘组合键库-阿里云开发者社区

开发者社区> 悟静> 正文

KeyboardJS 开发指南 - 与 Three.js 配合使用的捕捉键盘组合键库

简介: KeyboardJS 开发指南 - 与 Three.js 配合使用的捕捉键盘组合键库 太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循“署名-非商业用途-保持一致”创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS、Android、Html5、Arduino、pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作。
+关注继续查看

KeyboardJS 开发指南 - 与 Three.js 配合使用的捕捉键盘组合键库

太阳火神的美丽人生 (http://blog.csdn.net/opengl_es)

本文遵循“署名-非商业用途-保持一致”创作公用协议

转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS、Android、Html5、Arduino、pcDuino否则,出自本博客的文章拒绝转载或再转载,谢谢合作。



A JavaScript library for binding keyboard combos without the pain of key codes and key combo conflicts.


KeyboardJS

Endorse Flattr This

KeyboardJS is a easy to use keyboard wrapper. It features support for the following:

  • Advanced key combos - Support for advanced combos with ordered stages.
  • Key combo overlap prevention - Prevents against bindings with shorter combos firing when another binding with a longer combo, sharing the same keys, has already been executed.
  • Macro keys - Support for adding vurtual keys backed by a key combo instead of a physical key.
  • Keyboard locales - Support for multiple locales. Comes with US locale.

Examples

Key Binding

KeyboardJS.on('a', function() {
    console.log('you pressed a!');
});

*** User presses 'a'
>>> 'you pressed a!'
*** User releases 'a'

Key Combo Binding

KeyboardJS.on('ctrl + m', function() {
    console.log('ctrl m!');
});

//note the user can press the keys in any order
*** User presses 'ctrl' and 'm'
>>> 'ctrl m!'
*** User releases 'ctrl' and 'm'

Ordered Combo Binding

KeyboardJS.on('ctrl > m', function() {
    console.log('ctrl m!');
});

*** User presses 'ctrl'
*** User presses 'm'
>>> 'ctrl m!'
*** User releases 'ctrl' and 'm'

//if the keys are pressed in the wrong order the binding will not be triggered
*** User presses 'm'
*** User presses 'ctrl'

*** User releases 'm' and 'ctrl'

Overlap Prevention

KeyboardJS.on('ctrl > m', function() {
    console.log('ctrl m!');
});
KeyboardJS.on('shift + ctrl > m', function() {
    console.log('shift ctrl m!');
});

*** User presses 'ctrl'
*** User presses 'm'
>>> 'ctrl m!'
*** User releases 'ctrl' and 'm'

//note that shift ctrl m does not trigger the ctrl m binding
*** User presses 'shift' and 'ctrl'
*** User presses 'm'
>>> 'shift ctrl m!'
*** User releases 'shift', 'ctrl' and 'm'

Methods

KeyboardJS.on

Usage
KeyboardJS.on(string keyCombo[, function onDownCallback[, function onUpCallback]]) => object binding

Binds any key or key combo. See 'keyCombo' definition below for details. The onDownCallback is fired once the key or key combo becomes active. The onUpCallback is fired when the combo no longer active (a single key is released).

Both the onDownCallback and the onUpCallback are passed three arguments. The first is the key event, the second is the keys pressed, and the third is the key combo string.

Returned

Returns an object containing the following methods.

  • clear() - Removes the key or key combo binding.
  • on() - Allows you to bind to the keyup and keydown event of the given combo. An alternative to adding the onDownCallback and onUpCallback.

KeyboardJS.activeKeys

Usage
KeyboardJS.activeKeys() => array activeKeys

Returns an array of active keys by name.

KeyboardJS.clear

Usage
KeyboardJS.clear(string keyCombo)

Removes all bindings with the given key combo. See 'keyCombo' definition for more details.

Please note that if you are just trying to remove a single binding should use the clear method in the object returned by KeyboardJS.on instead of this. This function is for removing all binding that use a certain key.

KeyboardJS.clear.key

Usage
KeyboardJS.clear.key(string keyCombo)

Removes all bindings that use the given key.

KeyboardJS.locale

Usage
KeyboardJS.locale([string localeName]) => string localeName

Changes the locale keyboardJS uses to map key presses. Out of the box KeyboardJS only supports US keyboards, however it is possible to add additional locales via KeyboardJS.locale.register().

KeyboardJS.locale.register

Usage
KeyboardJS.locale.register(string localeName, object localeDefinition)

Adds new locale definitions to KeyboardJS.

KeyboardJS.macro

Usage
KeyboardJS.macro(string keyCombo, array keyNames)

Accepts a key combo and an array of key names to inject once the key combo is satisfied.

KeyboardJS.macro.remove

Usage
KeyboardJS.macro.remove(string keyCombo)

Accepts a key combo and clears any and all macros bound to that key combo.

KeyboardJS.key.name

Usage
KeyboardJS.key.name(number keyCode) => array keyNames

Accepts a key code and returns the key names defined by the current locale.

KeyboardJS.key.code

Usage
KeyboardJS.key.code(string keyName) => number keyCode

Accepts a key name and returns the key code defined by the current locale.

KeyboardJS.combo.parse

Usage
KeyboardJS.combo.parse(string keyCombo) => array keyComboArray

Parses a key combo string into a 3 dimensional array.

  • Level 1 - sub combos.
  • Level 2 - combo stages. A stage is a set of key name pairs that must be satisfied in the order they are defined.
  • Level 3 - each key name to the stage.

KeyboardJS.combo.stringify

Usage
KeyboardJS.combo.stringify(array keyComboArray) => string KeyCombo

Stringifys a parsed key combo.

Definitions

keyCombo

A string containing key names separated by whitespace, >+, and ,.

examples
  • 'a' - binds to the 'a' key. Pressing 'a' will match this keyCombo.
  • 'a, b' - binds to the 'a' and 'b' keys. Pressing either of these keys will match this keyCombo.
  • 'a + b' - binds to the 'a' and 'b' keys. Pressing both of these keys will match this keyCombo.
  • 'a + b, c + d' - binds to the 'a', 'b', 'c' and 'd' keys. Pressing either the 'a' key and the 'b' key, or the 'c' and the 'd' key will match this keyCombo.

localeDefinitions

An object that maps keyNames to their keycode and stores locale specific macros. Used for mapping keys on different locales.

example
{
    "map": {
        "65": ["a"],
        "66": ["b"],
        ...
    },
    "macros": [
        ["shift + `", ["tilde", "~"]],
        ["shift + 1", ["exclamation", "!"]],
        ...
    ]
}

Language Support

KeyboardJS can support any locale, however out of the box it just comes with the US locale (for now..,). Adding a new locale is easy. Map your keyboard to an object and pass it to KeyboardJS.locale.register('myLocale', {/localeDefinition/}) then call KeyboardJS.locale('myLocale').

If you create a new locale please consider sending me a pull request or submit it to the issue tracker so I can add it to the library.

Credits

I made this to enable better access to key controls in my applications. I'd like to share it with fellow devs. Feel free to fork this project and make your own changes.






版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
AngularJS开发指南06:表达式
表达式是类似Javascript的代码片段,通常在绑定中用到,写在双大括号中如{{表达式}}。表达式是用$parse方法来处理的。
692 0
带你读《Three. js开发指南: 基于WebGL和HTML5在网页上渲染 3D图形和动画(原书第3版)》之一:使用Three.js创建你的第一个三维场景
本书将介绍如何直在浏览器中创建漂亮的3D场景和动画,并且充分发挥WebGL和现代浏览器的潜能。首先介绍基本概念和基础组件,然后通过逐渐扩展示例代码逐步深讲解更多高级技术。在本书中读者将学到如何从外部加载3D模型和具有真实效果的材质纹理、学习使用Three.js提供的摄像机组件来实现在3D场景中飞行和走动、如何将HTML5视频和画布作为材质贴在3D模型表面。此外还将学习变形动画和骨骼动画,甚至还会涉及在场景中使用物理模拟的方法,例如重力、碰撞检测等等。
3321 0
Mac下Sublime Text3配置Python开发环境
设置Sublime Text的语法为python View -> syntax ->python 设置编译环境(默认python版本2.7) Tools -> Build System -> Python 添加编译环境python3.
2336 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
12076 0
纯键盘开发实战(Mouseless Programming)
作为一个践行Mouseless Programming的开发者,来谈谈自己在日常工作中是如何做到「几乎」不用鼠标的。 在说具体的「技巧」之前,先聊一聊纯键盘开发的几个原则: 1. **动机**, 动机要单纯,纯键盘开发不是为了耍酷, 你的动机应该是提高「效率」:) 2. **键盘只是工具,思想才是关键**, 代码和问题先想清楚再下手,想清楚远比写的快重要! 3. **键盘不要经
1780 0
《Lua游戏开发实践指南》一1.3为什么使用Lua
本节书摘来华章计算机《Lua游戏开发实践指南》一书中的第1章 ,第1.3节,(美)Paul SchuytemaMark Manyen著 田剑译 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1598 0
使用Express3.0实现<Node.js开发指南>中的微博系统
特别说明:本实例仅在windows xp sp3系统下测试通过(其它系统未经过测试)。 这本书,之前有评论过,但之前并不清楚express2.x与3.x会有如此大的差异,导致在写例子的过程中痛苦不已。
815 0
+关注
悟静
从事软件行业近二十年
690
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载