检测纸张中的 ctrl+z(和其他控制组合.js

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

本文关键字：其他 控制 组合 js 张中 ctrl+z 检测      更新时间：2023-09-26

我正在尝试在我的论文.js应用程序中启用编辑命令（例如 CTRL+z 表示"撤消"）。

检测

单个字母键效果很好，我可以检测鼠标事件期间持有的修饰键，但我在编写检测 CTRL 和字母键组合的事件处理程序时遇到问题。

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

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

这里有几个普通的Javascript解决方案应该可以帮助你：

解决方案 1

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

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;
    }
};

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

事实证明，CTRL+z 组合很特别。

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

按住控制时的 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 .

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

这应该有效。

相关文章：