vkeyboardhand · 交互式指法教学组件

实例 1 · 键盘实时联动

直接在键盘上打字即可联动 Shift Alt 等组合键 · 也可用鼠标点击键位演示 · 顶部按钮切换主题

代码用法（Code Usage）

<div id="vk-demo"></div>
<script>
  VKeyboardHand.create('#vk-demo', {
    keyboard: './svg/keyboard.svg',
    hand: './svg/hand.svg',
    theme: 'colorful'
  });
</script>

实例 2 · 固定演示按键 Y（关闭键盘监听）

自动演示按键 Y：键盘高亮 + 正确手势（右手食指），不响应真实键盘输入

代码用法（Code Usage）

<div id="vk-demo-2"></div>
<script>
  VKeyboardHand.create('#vk-demo-2', {
    keyboard: './svg/keyboard.svg',
    hand: './svg/hand.svg',
    listenKeyboard: false,  // 关闭键盘监听（键盘事件监听）
    enableClick: false,     // 关闭点击演示，保持固定演示态
    showHandBoth: false,    // 正确手势：只显示按 Y 的右手，隐藏左手
    onReady: function (kb) {
      kb.press('y');        // 演示按键 Y：键盘高亮 + 正确手势（右手食指）
    }
  });
</script>

实例 3 · 连续按键演示 hello（关闭键盘监听）

自动连续演示按键 h e l l o：逐键键盘高亮 + 正确手势（play() API），不响应真实键盘输入

代码用法（Code Usage）

<div id="vk-demo-3"></div>
<script>
  VKeyboardHand.create('#vk-demo-3', {
    keyboard: './svg/keyboard.svg',
    hand: './svg/hand.svg',
    listenKeyboard: false,  // 关闭键盘监听（键盘事件监听）
    enableClick: false,     // 关闭点击演示，保持演示态
    onReady: function (kb) {
      kb.play('hello', { pressTime: 450, gap: 120 });  // 连续演示 hello
    }
  });
</script>