盧偉冰長文解析K60至尊版 對Redmi有著里程碑式的意義
在今天的Redmi后性能時代戰略發布會結束之后，Redmi總經理盧偉冰又帶來了一篇長文，詳解了為什么 Redmi 要開啟后性能時代？為什么選擇和 MediaTek、Pixelworks 深度合作？以及后性
大家好，我是前端西瓜哥。
快捷鍵操作在圖形編輯器中是很高頻的操作，能讓用戶快速高效地執行特定命令。
那么今天就來學習圖形編輯器是如何做快捷鍵的管理的。
編輯器 github 地址：
https://github.com/F-star/suika
線上體驗：
https://blog.fstars.wang/app/suika/
我們先看看原生的鍵盤事件能否滿足需求。
假設我們需要判斷用戶是否按下了 Ctrl + C（需要精準匹配），如果按下了就執行 copy 方法。
用原生事件，我們要這樣寫：
window.addEventListener('keydown', (e) => { const { ctrlKey, shiftKey, altKey, metaKey } = e; if (ctrlKey && !shiftKey && !altKey && !metaKey && e.code === 'KeyC') { copy(); }})寫法有點繁瑣。我們希望能簡化一下寫法。
一開始我并不太在意快捷鍵綁定的管理，因為復雜度還沒起來，就找了一個輪子 hotkeys-js。
import hotkeys from 'hotkeys-js';hotkeys('ctrl+c', copy);hotkeys-js 是原生事件的一層簡單的封裝，簡化了寫法并提高了可讀性。
如果你的圖形編輯器并不復雜，用一些易用性不錯的快捷鍵庫是不錯的選擇。
原生事件和一些常見的快捷鍵庫可以處理一些簡單的場景，但圖形編輯器的場景往往更復雜。
圖形編輯器還需要的快捷鍵高級能力有：
考慮上面這些功能點，我們來實現這個快捷鍵管理類 KeyBindingManager。
class KeyBindingManager { // 傳入一個入口類對象 Editor，之后需要用到它的變量 constructor(private editor: Editor) {}}一份快捷鍵綁定（keyBinding）由下面幾個部分組成：
key，快捷鍵描述。理論上應該用 "Ctrl+C" 這種字符串來描述，但它實現起來比較麻煩，要解析，要轉換（比如 / 要轉成 Slash 去匹配 event.code）。
所以我換成了一個對象：{ CtrlKey: true, keyCode: 'KeyC' }。不用解析，不用轉換，直接和 event 的屬性對比即可。這個是 精準 匹配，即不能有多余的修飾鍵。
此外，key 也支持傳入數組，這種情況比較少，對應一個行為有多個快捷鍵的情況。比如刪除操作，我們可以傳入 [{ keyCode: 'Delete' }, { keyCode: 'Backspace' }]。
winKey，快捷鍵描述（Windows 特供版）。這個參數是可選的，如果不提供，所有系統都會使用 key 參數。如果提供，且用戶操作系統為 Windows，會使用 winKey，忽略 key。
when，是否滿足上下文。也是可選的。when 是一個方法，可以通過它拿到一些上下文參數，通過這些參數決定返回的布爾值。如果為 true，表示匹配到了，并執行對應的響應行為；如果為 false，沒匹配到，繼續找下一個。when 可不提供，表示永遠滿足條件。
action，快捷鍵匹配后要執行的方法。
TypeScript 類型簽名為：
interface IKeyBinding { key: IKey | IKey[]; winKey?: IKey | IKey[]; when?: (ctx: IWhenCtx) => boolean; action: (e: KeyboardEvent) => void;}interface IKey { ctrlKey?: boolean; shiftKey?: boolean; altKey?: boolean; metaKey?: boolean; // KeyboardEvent['code'] 或 '*'(匹配任何按鍵) keyCode: string;}interface IWhenCtx { isToolDragging: boolean; // 是否在拖拽中（比如移動工具移動圖形中）}我們需要用有序表來根據注冊順序保存 keyBinding 的，這里我選擇用 Map 數據結構，它是一種有序數據結構。
class KeyBindingManager { // 用 Map private keyBindingMap = new Map<number, IKeyBinding>(); private id = 0; //... // 注冊一個快捷鍵 register(keybinding: IKeyBinding) { const id = this.id; this.keyBindingMap.set(id, keybinding); this.id++; return id; } // 注銷快捷鍵 unregister(id: number) { this.keyBindingMap.delete(id); }}注冊方法 register 會返回一個唯一 id，如果需要注銷，需要將這個 id 傳給注銷方法 unregister。
事件的解綁方式有 3 種，這里選擇的是類似 setTimeout 返回一個訂閱 id 的風格。
《事件訂閱的幾種實現風格》
實際上 3 種寫法都沒啥差別，都是要把綁定事件方法返回的結果保存下來，在合適的時機調用解綁方法。
哦對了，還有注冊高優先級快捷鍵的方法：
class KeyBindingManager { // ... // 綁定一個高優先級快捷鍵綁定（會放到 Map 的開頭） registerWithHighPrior(keybinding: IKeyBinding) { const id = this.id; const map = new Map<number, IKeyBinding>(); map.set(id, keybinding); for (const [key, val] of this.keyBindingMap) { map.set(key, val); } this.keyBindingMap = map; this.id++; return id; }}其實就是把這個快捷鍵注冊到 Map 的開頭。
如果你需要更細的粒度，比如低優先級、中優先級、高優先級，那你可以考慮傳多一個優先級枚舉值或一個數值，然后在正確的位置插入。感覺并沒有太多需要用到這種粒度的場景。
然后就是快捷鍵的匹配邏輯：
實現如下：
const isWindows = navigator.platform.toLowerCase().includes('win') || navigator.userAgent.includes('Windows');class KeyBindingManager { // ... // 綁定到原生鍵盤按下事件上 bindEvent() { if (this.isBound) return; this.isBound = true; document.addEventListener('keydown', this.handleAction); } // 找到匹配的 keyBinding，執行其 action private handleAction = (e: KeyboardEvent) => { if ( e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement ) { return; } let isMatch = false; // 生成上下文對象，可根據需要擴充 const ctx: IWhenCtx = { isToolDragging: this.editor.toolManager.isDragging, }; for (const keyBinding of this.keyBindingMap.values()) { // 先看看 when 是否為 true（when 可不提供） if (!keyBinding.when || keyBinding.when(ctx)) { // 如果是 Windows 操作系統，看看 winKey 對不對 if (isWindows) { if (keyBinding.winKey && this.isKeyMatch(keyBinding.winKey, e)) { isMatch = true; } } // 其他操作系統，看 key 是否匹配 else if (this.isKeyMatch(keyBinding.key, e)) { isMatch = true; } } // 匹配 if (isMatch) { e.preventDefault(); keyBinding.action(e); // 執行對應 action（行為） break; // 結束，不繼續遍歷 } } }; private isKeyMatch(key: IKey | IKey[], e: KeyboardEvent): boolean { if (Array.isArray(key)) { return key.some((k) => this.isKeyMatch(k, e)); } if (key.keyCode == '*') return true; const { ctrlKey = false, shiftKey = false, altKey = false, metaKey = false, } = key; return ( ctrlKey == e.ctrlKey && shiftKey == e.shiftKey && altKey == e.altKey && metaKey == e.metaKey && key.keyCode == e.code ); }}類寫好了，看看用法。
刪除快捷鍵的寫法：
const deleteAction = () => { // 刪除選中元素};editor.keybindingManager.register({ // Backspace 或 Delete 都可以刪除 key: [{ keyCode: 'Backspace' }, { keyCode: 'Delete' }], // 只能在沒有發生拖拽的情況下下刪除（比如移動圖形時不能刪除） when: (ctx) => !ctx.isToolDragging, action: deleteAction,});復制快捷鍵的寫法：
const copyHandler = () => { // 復制}editor.keybindingManager.register({ key: { metaKey: true, keyCode: 'KeyC' }, // Windows 環境下的快捷鍵 winKey: { ctrlKey: true, keyCode: 'KeyC' }, action: copyHandler,});本文鏈接：http://www.tebozhan.com/showinfo-26-12425-0.html圖形編輯器開發：快捷鍵的管理
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號