3dcat 键鼠映射逻辑 - Jim的独立博客

1749 字

9 分钟

3dcat 键鼠映射逻辑

2023-08-14

前端

/

键鼠映射

名词释义#

按键 === 控件

数据结构#

1
type Solution = {
2
  showButton: boolean // 是否默认开启显示
3
  showAlias: boolean // 是否原键盘字符隐藏
4
  landscape: SolutionData[] // 横屏数据
5
  portrait: SolutionData[] // 竖屏数据
6
  landscapeButtonSize?: ButtonSizeType // 横屏时控件大小（初版开发时横竖屏需支持分别设置，当前版本改为统一设置）
7
  portraitButtonSize?: ButtonSizeType // 竖屏时控件大小（横竖屏设置情况同上）
8
}
9
type SolutionData = {
10
  type: ScreenDataType
11
  value: SolutionValue
12
}
13
type SolutionValue = {
14
  pos: [number, number] // 坐标，百分比
15
  value: number[]。// keyCode 值
16
  width?: number // 控件宽度，px
17
  height: number // 控件高度，px
18
  shape?: SolutionShape // 控件形状（当前为统一的粒度设置，初版开发时支持以单个控件为粒度的设置）
19
  alias?: string // 控件说明，只支持键盘类型数据
20
}
21
export enum ButtonSizeType {
22
  Small = 1,
23
  Middle,
24
  Large,
25
  Custom, // 自定义
26
}
27
export enum ScreenDataType {
28
  Normal = 1, // 键盘
29
  UDLR, // 带方向键摇杆
30
  WASD, // 带 WASD 摇杆
31
  Joystick, // 无文字标识摇杆Ï
32
  Mouse, //
33
}
34
export enum SolutionShape {
35
  Rectangle = 1, // 直角矩形
36
  Circle, // 圆角矩形
37
}

键盘#

每个控件设置前需点击屏幕
只支持最多两个控件的控件组合
只支持/src/constants/keycode-map.ts 里的 KeycodeMap 变量支持的控件。
以 keyCode 属性保存键盘的值
不支持重复设置控件，比如说多个 s 键或多个 a + b 键
控件宽度由内容撑开，渲染到屏幕后再获取控件元素宽度属性 clientWidth 将其赋值到 SolutionValue 的 width 属性上
区分左右 Shift、Ctrl、Alt 控件，keyCode 属性的值以/src/constants/keycode-map.ts 里定义的六个常量的值为准
不支持 Mac 端 command 、option 控件
成功设置后会自动进行边界检测，若超出边界则自动弹回至控件设置区域内，产品侧考虑取消该特性
控件有控件说明时，会自动撑开高度，最多支持 4 个字符
只有键盘类型控件有控件说明

鼠标#

左右键设置逻辑为一起设置，一起删除
中键为单独设置，单独删除
每种控件只能设置一个，不能设置多个
成功设置后会自动进行边界检测，若超出边界则自动弹回至控件设置区域内，产品侧考虑取消该特性

摇杆#

每种摇杆只能设置一个，不能设置多个
成功设置后会自动进行边界检测，若超出边界则自动弹回至控件设置区域内，产品侧考虑取消该特性

预设方案#

控件类型横竖屏方案为分别设置
控件同步功能只同步类型、数量，不同步控件大小、控件说明、控件形状
如当前方案有控件被改动过，控件大小的值自动改为自定义
预设方案的增删查改，产品特性层面不作改动，各搞各的
3dcat 侧旧数据的处理，自行开发适配器以适配斗龙云侧方案的数据结构

misc#

3dcat 侧不少逻辑代码的处理都可归为「边界逻辑判断」、「在画布区域点击后未设置具体键盘类型控件的值就进行其它的操作」，可考虑去除或优化该部分逻辑。
是否考虑键盘及鼠标类型控件宽度为固定值，即取消「撑开」的特性

SDK 端#

流程及流程图#

旧版的 sdk 是在 launcher 那里调接口，再实例化控件，
新版的 sdk 是在其他 UI launcher 调接口，再实例化 launcher -> 控件

1
sequenceDiagram
2
title: 3dcat-键鼠映射流程
3
autonumber
4
3DCAT前台管理 ->> + 3DCAT后端服务 : 设置键鼠映射数据（VirtualGlobalType）
5
推流页 ->> + 3DCAT后端服务 : 获取应用数据
6
3DCAT后端服务 -->> - 推流页 : 包含VirtualGlobalType
7
推流页 ->> 推流页 : 实例化live-cat
8
live-cat ->> live-cat : 清洗键鼠映射数据、位置、样式计算、默认值填充(virtual-data-repository.ts)
9
live-cat ->> live-cat : 渲染键鼠映射控制器

1
interface VirtualGlobalType {
2
  resolutionRatio: string
3
  buttonSize: ButtonSizeType
4
  showButton: boolean
5
  showAlias: boolean
6
  landscape: VirtualDataType[]
7
  portrait: VirtualDataType[]
8
}

横竖屏#

需要读取 core 中的 orientationLock 属性，自动旋转全部算为横屏。否则以终端容器方向为主。
受： 1、手机系统层面的屏幕锁定功能 2、应用是否处于全屏状态 3、当前应用的自动全屏开关是否开启影响。
当处于应用处于全屏状态时，为横屏；
当不处于全屏状态时，若屏幕锁定功能未开启，则随手机当前陀螺仪检测状态来显示横竖屏控件；
另外，当自动全屏开关开启时，在应用初始化时，点击屏幕会自动进入全屏状态（此时也就是显示横屏控件）。

键盘#

单键
组合键（目前最高支持两个键值）
分常规组合键及非常规组合键
常规组合键：其中一个键带 ctrl、shift、alt、(n/c/s)lock，另一个键是除这几个键之外的其它键，这个时候是在一个 Comine 事件中发送的；检测两个键值中的 alt、shift 等功能键的布尔值，同步更新 Keyboard 实例化字段，并轮训发送两个键值。
非常规组合键：比如 a + z，则视为两个 Single 事件，分开发送

鼠标#

仅用于鼠标左中右键状态切换。若未映射鼠标，屏幕触发事件（手指点击拖动等）将默认为鼠标左键。
额外处理：改变 RunningState fakeTouchType 类型

1
class Keyboard {
2
  constructor(
3
    private keycode: number,
4
    private alt: boolean,
5
    private shift: boolean,
6
    private ctrl: boolean,
7
    private nlock: boolean,
8
    private clock: boolean,
9
    private slock: boolean,
10
    private down: boolean,
11
  ) { }
12
}

摇杆#

三种摇杆前端均支持全向摇杆（假全方向，实际是 WASD 摇杆，只是与 WASD 摇杆有 UI 差异）
节点机端支持全方位，demo 已跑通，当在双手柄（左右手柄）操作时，需将左右两个手柄的实时操作数据放到同一个数据结构下再进行节点端的发送，否则会出现后发送手柄的操作数据覆盖前发送手柄的操作数据

1
enum JoyStickType {
2
  'ONLY_HANDLE',
3
  'TEXT_HANDLE',
4
  'DIRECTION_HANDLE',
5
}
6

7
{
8
  [JoyStickType.ONLY_HANDLE]: {
9
    topKeycode: 87,
10
    rightKeycode: 68,
11
    bottomKeycode: 83,
12
    leftKeycode: 65,
13
  },
14
  [JoyStickType.TEXT_HANDLE]: {
15
    topKeycode: 87,
16
    rightKeycode: 68,
17
    bottomKeycode: 83,
18
    leftKeycode: 65,
19
  },
20
  [JoyStickType.DIRECTION_HANDLE]: {
21
    topKeycode: 38,
22
    rightKeycode: 39,
23
    bottomKeycode: 40,
24
    leftKeycode: 37,
25
  },
26
}
27

28
class Keyboard {
29
  constructor(
30
    private keycode: number,
31
    private alt: boolean,
32
    private shift: boolean,
33
    private ctrl: boolean,
34
    private nlock: boolean,
35
    private clock: boolean,
36
    private slock: boolean,
37
    private down: boolean,
38
  ) { }
39
}

样式#

与编辑器端不同，是两套独立开发的控件，UI 有差异，控件内排版大致相同

预设方案#

3dcat 侧旧数据的处理，自行开发适配器以适配斗龙云侧方案的数据结构

Todo#

全方向摇杆（单机单并发）

支持左右两个摇杆
支持两个摇杆同步数据

1
 class GamepadInput {
2
  constructor(
3
    private gamepadType: GamepadType = GamepadType.GamepadXbox,
4
    private gamepadUser: number = 0,
5
    private buttons: number,
6
    private leftTrigger: number,
7
    private rightTrigger: number,
8
    private leftThumbX: number,
9
    private leftThumbY: number,
10
    private rightThumbX: number,
11
    private rightThumbY: number,
12
  ) { }
13
}