在paper.js中检测ctrl + z（和其他控制组合）

Question

我尝试在paper.js应用程序中启用编辑命令（例如 CTRL + z 用于＆＃39;撤消＆＃39;）。

检测单个字母键效果很好，我可以检测鼠标事件期间保存的修饰键，但是我在编写检测 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

按住 CTRL

按下

z 键

Key: 
Control: true

这些结果表明event.key返回的字符串是不同的，具体取决于在键入另一个键时是否按住控制修饰符。这里发生了一些奇怪的事情！

基于此，我怎样才能同时检测到这两个键被按下？

Answer 1

TL; DR ：您可以使用event.key.charCodeAt(0)来检测 CTRL + Z 和其他<返回的奇怪字符代码kbd> CTRL +组合键。

事实证明， CTRL + z 组合为special。

在这种情况下返回的密钥......

按住控件

z 键

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

按住 CTRL

按下

z 键

 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 的字符，而是"c"的字符。 ，"control"返回的字符串event.key中的第一个字符。为此，您仍然希望使用event.modifiers.control。

Answer 2

以下是一些可以帮助您的香草Javascript解决方案：

解决方案1 ​​

使用本机事件对象检查按下了哪个键代码以及Shift键是否已关闭。

function handleKeyDown(evt) {
    if (evt.which === 90 && evt.shiftKey) {
        // do a thing!
    }
};

解决方案2

保持一个全局变量，用于检测shift键是否已关闭并在keydown处理程序中使用它。您还需要使用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;
    }
};

Answer 3

function onKeyDown(event) {
if (event.event.ctrlKey && event.key == "z") {
    //do something
   }
}

这应该有效。