在 paper.js 中检测 ctrl+z(和其他控制组合)
Detecting ctrl+z (and other control combos) in paper.js
我正在尝试在我的 paper.js 应用程序中启用编辑命令(例如 CTRL+z for 'undo').
检测单个字母键效果很好,我可以检测鼠标事件期间按住的修饰键,但我在编写检测 CTRL 组合的事件处理程序时遇到问题和字母键。
基于 the examples given by fabric.js,我期望的是一个看起来像这样的密钥处理程序:
function onKeyDown(event) {
if (event.key == 'z' && event.modifiers.control){
//do a thing!
}
}
然而,这是行不通的!奇怪的是,条件块永远不会触发。为了对此进行调查,我编写了以下诊断处理程序...
function onKeyDown(event) {
console.log(event.key);
console.log(event.modifiers.control);
}
... 并尝试了各种键盘输入并获得了一些有趣的结果:
CTRL 仅键
Key: control
Control: true
z 仅键
Key: z
Control: false
z 按住 CTRL
键
Key:
Control: true
这些结果表明 event.key
返回的字符串会有所不同,具体取决于在键入另一个键时是否按住控制修饰符。这里发生了一些奇怪的事情!
基于此,如何检测同时按下这两个键?
TL;DR:可以使用event.key.charCodeAt(0)
检测CTRL+[=48返回的奇怪字符代码=]Z 和其他 CTRL+ 组合键。
事实证明,CTRL+z组合是special.
在这种情况下返回的密钥...
z 键同时按住 control
Key:
Control: true
... 看起来像一个空字符串,因为传递给事件处理程序的键码对应于特殊的 CTRL+z组合,这会导致无法打印的字符。
为了检测这个特殊字符,我修改了诊断处理程序...
function onKeyDown(event){
console.log("Key: " + event.key);
console.log("Control: " + event.modifiers.control);
console.log("KeyCode: " + event.key.charCodeAt(0));
}
...并测试了与之前相同的键盘组合:
仅 CTRL 键
Key: control
Control: true
KeyCode: 99
z 仅键
Key: z
Control: false
KeyCode: 122
z 按住 CTRL
键
Key:
Control: true
KeyCode: 26
这意味着可以使用这样的事件处理程序检测特殊的 CTRL 组合键:
function onKeyDown(event) {
if (event.key.charCodeAt(0) == 26){ // detect the special CTRL-Z code
// do a thing!
}
}
需要注意的是,这种方法不能单独检测控制键,因为 99
不是 CTRL 的字符,而是 CTRL 的字符"c"
,event.key
返回的字符串"control"
中的第一个字符。为此,您仍然需要使用 event.modifiers.control
.
这里有一些普通的 Javascript 解决方案可以帮助您:
解决方案 1
使用本机事件对象检查按下了哪个键码以及是否按下了 shiftkey。
function handleKeyDown(evt) {
if (evt.which === 90 && evt.shiftKey) {
// do a thing!
}
};
解决方案 2
保留一个全局变量来检测是否按下了 shift 键,并在您的按键处理程序中使用它。您还需要使用 keyup 事件处理程序重置它。
var shiftKeyDown = false;
function handleKeyDown(evt) {
if (evt.which === 17) {
shiftKeyDown = true;
} else if (evt.which === 90 && shiftKeyDown) {
// do a thing!
}
};
function handleKeyUp(evt) {
if (evt.which === 17) {
shiftKeyDown = false;
}
};
function onKeyDown(event) {
if (event.event.ctrlKey && event.key == "z") {
//do something
}
}
这应该有效。
我正在尝试在我的 paper.js 应用程序中启用编辑命令(例如 CTRL+z for 'undo').
检测单个字母键效果很好,我可以检测鼠标事件期间按住的修饰键,但我在编写检测 CTRL 组合的事件处理程序时遇到问题和字母键。
基于 the examples given by fabric.js,我期望的是一个看起来像这样的密钥处理程序:
function onKeyDown(event) {
if (event.key == 'z' && event.modifiers.control){
//do a thing!
}
}
然而,这是行不通的!奇怪的是,条件块永远不会触发。为了对此进行调查,我编写了以下诊断处理程序...
function onKeyDown(event) {
console.log(event.key);
console.log(event.modifiers.control);
}
... 并尝试了各种键盘输入并获得了一些有趣的结果:
CTRL 仅键
Key: control
Control: true
z 仅键
Key: z
Control: false
z 按住 CTRL
键Key:
Control: true
这些结果表明 event.key
返回的字符串会有所不同,具体取决于在键入另一个键时是否按住控制修饰符。这里发生了一些奇怪的事情!
基于此,如何检测同时按下这两个键?
TL;DR:可以使用event.key.charCodeAt(0)
检测CTRL+[=48返回的奇怪字符代码=]Z 和其他 CTRL+ 组合键。
事实证明,CTRL+z组合是special.
在这种情况下返回的密钥...
z 键同时按住 control
Key:
Control: true
... 看起来像一个空字符串,因为传递给事件处理程序的键码对应于特殊的 CTRL+z组合,这会导致无法打印的字符。
为了检测这个特殊字符,我修改了诊断处理程序...
function onKeyDown(event){
console.log("Key: " + event.key);
console.log("Control: " + event.modifiers.control);
console.log("KeyCode: " + event.key.charCodeAt(0));
}
...并测试了与之前相同的键盘组合:
仅 CTRL 键
Key: control
Control: true
KeyCode: 99
z 仅键
Key: z
Control: false
KeyCode: 122
z 按住 CTRL
键 Key:
Control: true
KeyCode: 26
这意味着可以使用这样的事件处理程序检测特殊的 CTRL 组合键:
function onKeyDown(event) {
if (event.key.charCodeAt(0) == 26){ // detect the special CTRL-Z code
// do a thing!
}
}
需要注意的是,这种方法不能单独检测控制键,因为 99
不是 CTRL 的字符,而是 CTRL 的字符"c"
,event.key
返回的字符串"control"
中的第一个字符。为此,您仍然需要使用 event.modifiers.control
.
这里有一些普通的 Javascript 解决方案可以帮助您:
解决方案 1
使用本机事件对象检查按下了哪个键码以及是否按下了 shiftkey。
function handleKeyDown(evt) {
if (evt.which === 90 && evt.shiftKey) {
// do a thing!
}
};
解决方案 2
保留一个全局变量来检测是否按下了 shift 键,并在您的按键处理程序中使用它。您还需要使用 keyup 事件处理程序重置它。
var shiftKeyDown = false;
function handleKeyDown(evt) {
if (evt.which === 17) {
shiftKeyDown = true;
} else if (evt.which === 90 && shiftKeyDown) {
// do a thing!
}
};
function handleKeyUp(evt) {
if (evt.which === 17) {
shiftKeyDown = false;
}
};
function onKeyDown(event) {
if (event.event.ctrlKey && event.key == "z") {
//do something
}
}
这应该有效。