Flex的组合键监听功能实现

最近在用Flex做一个绘图软件，需要实现复制/黏贴/删除图形的功能，一般用户习惯于使用Ctrl+C/Ctrl+V来复制黏贴，使用Delete键来删除，删除功能容易做，监听Stage的键盘按下事件就可以了，但监听Ctrl+C/V 对Flex来说成为了问题，因为Flex的监听机制，一旦按下了Ctrl键就监听不到其他键按下的事件了，即按下了Ctrl后Flex无法检测到其他键按下。要想实现Ctrl+C/V组合键，只能通过JS来监听了。

这涉及到2个问题：

1.Flex和JS的通信。

2.html页面的焦点。因为焦点在swf上时js无法监听到任何事件，所以当我们需要监听复制/黏贴事件时，需要把页面焦点设置为window。

代码如下：

Flex部分代码(类名KeyboardManager.as)：

initialize()函数的参数stage是Applicatoin的舞台，KeyboradManager.as类初始化时调用这个函数。

ExternalInterface.addCallback("name",func);语句的意思是，当js使用Applicatoin.name语句时，Flex端就调用函数func。说简单些就是为js的注册一个回调函数func。

private var keysDown:Object = new Object(); ??? ?// 已按下的键的队列

public function initialize( stage:Stage ) : void {
	ExternalInterface.addCallback("keyDown",onKeyDown);
  	ExternalInterface.addCallback("keyUp",onKeyUp);
	stage.addEventListener(KeyboardEvent.KEY_DOWN,swfKeyDown);
}

public function onKeyDown( keyCode:uint ) : void {
?? ???  keysDown[keyCode] = true;?? ?
?? ??? ?checkKeyRole(keyCode);
?}
?? ??? ?
?public function onKeyUp( keyCode:uint ) : void {
?? ??? if (keyCode in keysDown) {
?? ???      delete keysDown[keyCode];
?? ??? }
}

public function swfKeyDown( e:KeyboardEvent ) : void {
?? ??? ??? ?var focus:Object = mx.core.Application.application.focusManager.getFocus();
?? ??? ??? ?
?? ??? ??? ?if( e.keyCode == Keyboard.CONTROL ){
?? ??? ??? ??? ?//当焦点在输入框时用户可能需要复制/黏贴文本,所以不向js发送获取焦点请求。js获取焦点后会拦截键盘输入使windows的复制黏贴功能失效。
?? ??? ??? ??? ?if( !(focus is TextInput) ){
?? ??? ??? ??? ??? ?ExternalInterface.call("setFocus");
?? ??? ??? ??? ?}?? ?
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ?onKeyDown(e.keyCode);
?? ??? ??? ?}else if( e.keyCode == Keyboard.DELETE ){
?? ??? ??? ??? ?onKeyDown(e.keyCode);
?? ??? ??? ?}
 }

/**
 * 检测按下的键是否有快捷键功能
 */
private function checkKeyRole(keyCode:uint) : void {
?? ??? ??? ?switch(keyCode){
?? ??? ??? ??? ?case Keyboard.C:
?? ??? ??? ??? ??? ?if(isDown(Keyboard.CONTROL)){
?? ??? ??? ??? ??? ??? ?//TODO：复制图形
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?break;
?? ??? ??? ??? ?case Keyboard.V:
?? ??? ??? ??? ??? ?if(isDown(Keyboard.CONTROL)){
?? ??? ??? ??? ??? ??? //TODO：黏贴图形
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?break;
?? ??? ??? ??? ?case Keyboard.DELETE:
?? ??? ??? ??? ??? ?//TODO：删除图形
?? ??? ??? ??? ??? ?break;?? ??? ??? ??? ?
?? ??? ??? ?}
}

/*
 * 判断某颗键有没有按下
 */
public function isDown(keyCode:uint):Boolean {
?? ??? ??? ?return Boolean(keyCode in keysDown);
}

js代码：

document.onkeydown = func，即为html页面添加键盘监听事件

${application}.name(arg)，即调用Flex端注册的回调函数，${application}是Flex编译生成的swf的名字。

document.onkeydown = onKeyDown;
document.onkeyup = onKeyUp;
           	
 function onKeyDown(){
	var code = window.event.keyCode;
	${application}.keyDown(code);
}
			
function onKeyUp(){
	var code = window.event.keyCode;
	${application}.keyUp(code);
}
			
function setFocus(){
	window.focus();
}

我们从swfKeyDown函数开始跟踪一下组合键监听的思路。

1.当用户有键盘动作时，首先被swfKeyDown函数捕获到（因为此时页面的焦点必然在swf上）。

2.swfKeyDown捕获到键盘事件后判断按下的是什么键，如果是delete键，则不需要使用js监听组合键，直接调用onKeyDown函数做相应处理。

3.如果按下的Ctrl键，判断此时swf系统的焦点，如果焦点在TextInput组件上，则用户肯定是要复制文字，我们不做处理。当系统焦点没有在TextInput组件上而用户按下了Ctrl 键，那他必然需要复制图形，这时候我们调用js的函数setFoces()将焦点置回html页面，这时候js的键盘监听生效了。

4.swfKeyDown函数调用onKeyDown函数，swfKeyDown将Ctrl键放入键队列keysDown.

5.当用户再次按下C/V键时，被js的onKeyDown函数捕获，然后调用Flex端的onKeyDown函数

6.onKeyDown调用checkKeyRole函数，带有参数 keyCode

7.checkKeyRole根据keyCode判断此时用户按下的键是C/V，然后调用isKeyDown()判断Ctrl键是否被按下

8.若isKeyDown返回true，则做复制/黏贴图形的操作；若isKeyDown返回false，则不做任何操作。