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

Question

我正在尝试在我的 paper.js 应用程序中启用编辑命令（例如 CTRL+z 用于“撤消”）。

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

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

解决方案 1

使用本机事件对象检查按下了哪个键码以及是否按下了 shiftkey。

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 2

TL;DR：可以使用event.key.charCodeAt(0)检测CTRL+Z等返回的奇怪字符码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"的第一个字符在event.key 返回的字符串"control" 中。为此，您仍然需要使用event.modifiers.control。

Answer 3

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

这应该可行。