使用

import { VirtualControlEditor, type ButtonInfo } from 'virtual-control-editor'

// 最基本使用，聚焦编辑器后，点击键盘按键即可在鼠标位置出现按键
const editor = new VirtualControlEditor(container, editorRatio, false)

• hostElement <HTMLElement> 宿主元素
• containerRatio <number> 编辑器宽高比，会根据宿主元素的宽进行计算
• showGuideLine <boolean> 是否展示网格辅助线，默认为 true
• keyboardButtonShape <string> 按键默认形状，值为 ellipse 或 rect，默认为 ellipse
• bgRatio <number> 背景图（流）像素比，默认与 containerRatio 一致
• combineCount <number> 支持组合键的数量，默认为 2

事件订阅

editor.events.on('focus', ({ ids, type, content, code }) => {
  // 聚焦按键
})
editor.events.on('blur', () => {
  // 失焦
})
editor.events.on('add', (id, type) => {
  // 新增按钮
})
editor.events.on('remove', (id, type) => {
  // 移除按钮
})

新增鼠标按钮

// 鼠标左键
editor.assistant.appendMouseLeftButton(offsetX, offsetY, width, height, opacity, imageSrc)
// 鼠标右键
editor.assistant.appendMouseRightButton(offsetX, offsetY, width, height, opacity, imageSrc)
// 鼠标中键
editor.assistant.appendMouseScrollWheelButton(offsetX, offsetY, width, height, opacity, imageSrc)
// 摇杆，最后一个参数是摇杆的样式图片以及遥感底部的样式图片
editor?.assistant.appendJoystick(JoystickType, offsetX, offsetY, width, height, opacity, [
  string,
  string,
])

初始化数据

const data = [
  {
    xPercent: 0.23625,
    yPercent: 0.150093808630394,
    widthPercent: 0.125,
    heightPercent: 0.18761726078799248,
    codes: null,
    showName: '',
    schemeKeys: 'scroll-wheel',
    aspectRatio: 1,
    srcList: [],
    type: 30,
    opacity: 0.8,
    anchor: 'screen',
    shape: 'ellipse',
  },
] as ButtonInfo[]

editor.assistant.initData(data)

更改键盘按键形状

editor.changeShpae(shape, ids)

获取最终数据

editor.snapshot(): ButtonInfo[]

移动按钮位置，相对于整个容器的坐标

editor.moveTo(id, x, y)

覆盖原始按钮样式

• srcList 是一组 base64数组
• Joystick 支持两张，第一张是底盘图片，第二张是摇杆图片
• 其余按钮只按照第一张去绘制

editor.drawImageToButton(id, ...srcList)

键盘按钮添加描述

editor.editContent(id, content)

更改按钮透明度

• rate 透明度范围 0 - 1

editor.updateOpacity(id, rate)

更改按钮大小

• rate 大小为 0 - 1，相对于宽度的比例

editor.updateSize(id, rate)

更改形状

• 形状为：rect 或 ellipse，ids非必传，默认全部

editor.changeShape(shape, ids)

移除按钮

editor.removeButton(id)

移除所有按钮

editor.removeAll()

展示或隐藏辅助线

editor.showOrHideGuideLine(showOrHide)

更改canvas容器大小比例

editor.updateRatio(ratio, width?: number)

销毁

editor.destroy()

结果类型 ButtonInfo

interface ButtonInfo {
  xPercent: number // 相对于流播放可视区域的 x 轴的百分比
  yPercent: number // 相对于流播放可视区域的 y 轴的百分比
  widthPercent: number // 相对于流可视区域宽度的百分比
  heightPercent: number // 相对于流可视区域高度的百分比
  codes: number | null // 键盘 keyCode
  combination: number[] // 组合键，是键盘 keyCode 的集合
  showName: string | null
  schemeKeys: string | null
  aspectRatio: number
  type: KeyboardKeyType
  opacity: number
  srcList: string[]
  anchor: 'screen' | 'graphics'
  shape: KeyboardButtonShape
}