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

Question

我正在尝试在我的 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 返回的字符串会有所不同，具体取决于在键入另一个键时是否按住控制修饰符。这里发生了一些奇怪的事情！

基于此，如何检测同时按下这两个键？

Answer 1

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.

Answer 2

这里有一些普通的 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;
    }
};

Answer 3

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

这应该有效。

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

Detecting ctrl+z (and other control combos) in paper.js

javascript

keyevent

undo

paperjs

ctrl

解决方案 1

解决方案 2