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.

http://robertwhurst.github.com/KeyboardJS/

KeyboardJS

 

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.

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

时间: 2024-10-12 19:05:09

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

tween.js 用户指南 - 与 Three.js 配合使用的补间动画库

太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. Learning Three.js - Tween.js for Smooth Animation tween.js 用户指南tween.js u

现代前端库开发指南系列(三):从说明文档看库的前世今生

前言 我们在工作中很多时候都要做技术选型,去找寻既能满足自己需求又靠谱的第三方库:在前端开源生态季度繁盛的现状下,只要不是太小众的需求,我们很容易就能找到一堆相关的开源库,那我们具体要怎么做决策呢?我的做法是,先阅读开源库的说明文档让自己有一个感性的认识,然后挑选出其中的两三个库来进行更深入更全面的了解.如此说来,这说明文档是不是就很像我们求职时的简历呢?"简历"关都过不了,何谈"offer"啊! 本文将介绍一个库(即不局限于前端领域)所要具备的说明文档,主要包括

Three.js开发指南---使用three.js的材质(第四章)

材质就像物体的皮肤,决定了几何体的外表,例如是否像草地/金属,是否透明,是否显示线框等 一 材质 THREE.js的材质分为多种,Three.js提供了一个材质基类THREE.Material, 该基类拥有three.js所有材质的公有属性,分为三类:基础属性,融合属性,高级属性 基础属性:ID,name,透明度,是否可见,是否需要刷新等 融合属性:决定了物体如何与背景融合 高级属性:可以控制WEBGL上下文渲染物体的方法,大多数情况下,是不会用这些属性,我们这里不再讨论 1.1 基础属性 属性

现代前端库开发指南系列(二):使用 webpack 构建一个库

前言 在前文中,我说过本系列文章的受众是在现代前端体系下能够熟练编写业务代码的同学,因此本文在介绍 webpack 配置时,仅提及构建一个库所特有的配置,其余配置请参考 webpack 官方文档. 输出产物 构建一个库与构建一个一般应用最大的不同点在于构建完成后输出的产物. 一般应用构建完成后会输出: 一个 html 文件 一个 js 入口 chunk .若干子 chunk 若干 css 文件 若干其它资源,如图片.字体文件等 虽然输出的资源非常多,但实际上所有的依赖.加载关系都已经从 html

JS监听键盘两个组合键的触发

*键盘事件的回调是document.onkeydown函数, 该函数会传入一个Event类型的参数 document.onkeydown = function(e) { //编写事件触发时候的回调函数 } *Evnet事件的具体内容请见W3C文档, 样子是这样的: 具体的网址: http://www.w3school.com.cn/jsref/dom_obj_event.asp *实例应用 需求:当按下Ctrl+Enter键时触发saveComment方法 代码为: document.onkey

现代前端库开发指南系列(一):融入现代前端生态

本系列文章讲什么内容? 本系列文章主要介绍如何在现代前端生态下,创建一个工业级别的库.近几年来,前端工程化.模块化.组件化的大潮铺天盖地而来,在解决以往的架构痛点之余,却又产生了信息过载的问题:我希望通过分享自己的经验,帮助大家少踩坑多出活. 为什么需要开发一个前端库呢? 在项目开发过程中,总有一些功能是相同或类似的,如果你只是单纯地复制粘贴这部分代码,那么恭喜你,假以时日,需求一改,你就只能自尝苦果了. 你说,这还不简单,抽成公共方法公用不就好了吗?对的没错,但请把视野再放广一点:在工作中,我

使用Nodejs创建基本的网站 Microblog--《Node.js开发指南》 3

使用cluster模块 创建cluster.js,调用app.js var cluster = require('cluster'); var os = require('os'); //获取CPU数量 var numCPUs = os.cpus().length; var workers = {}; if(cluster.isMaster) {   //主进程分支   cluster.on('exit', function (worker) {     //当一个工作进程结束时,重启工作进程

电子书 Node.js开发指南.pdf

<图灵原创:Node.js开发指南>首先简要介绍Node.js,然后通过各种示例讲解Node.js的基本特性,再用案例式教学的方式讲述如何用Node.js进行Web开发,接着探讨一些Node.js进阶话题,最后展示如何将一个Node.js应用部署到生产环境中. <图灵原创:Node.js开发指南>面向对Node.js感兴趣,但没有基础的读者,也可供已了解Node.js,并对Web前端/后端开发有一定经验,同时想尝试新技术的开发者参考. 限个人学习使用,不得用于商业用途,请在下载后2

《node.js开发指南》读后感

<node.js开发指南>这部只有180多页的书,我花了一个多月的业余时间算是粗略看完了.中间因为公司项目的加班,中断了几次.大大拖累进度,现在空出来时间,写一点自己的小小感想吧. 先从缺点开始: 我认为最大缺点就是老了.node是一个快速变化的东东,这本书上的内容,在现在的node上出现了很大的分叉.比如,书中提到安装node的时候,使用系统的apt-get或yum工具安装.可是这样安装之后的node.js的终端工具是nodejs,而不是node.这个就导致了一个新的问题,在这本书中的后一节