API 参考
自定义仪表使用 main() 返回 View 树。这里介绍脚本结构、运行接口和绘制组件,并提供各项 API 的入口。
全局对象
CapDrive 在仪表脚本中直接提供以下全局对象,无需导入或自行创建。可以在 main() 中读取它们,用于取得数据、适应显示环境、保存临时状态和输出日志。
| 对象 | 用途与常用访问方式 |
|---|---|
| $data | 驾驶数据。通过 $data.current 读取当前采样,通过 $data.history 读取本次行程最近 30 秒的采样。 |
| $env | 当前仪表的显示环境,包括可用尺寸、主题颜色、单位、语言和显示模式,例如 $env.width、$env.foreground。 |
| $sessionStorage | 当前行程内、当前仪表实例的临时状态。用 get(key) 读取、set(key, value) 保存;结束行程或重新加载仪表时清空。 |
| console | 脚本日志。用 console.log(...)、console.warn(...) 等方法输出数据和诊断信息。 |
$data 和 $env 由 App 更新,是只读输入。每次调用 main() 时读取本次值;修改读取到的数据副本不会改变实际驾驶数据。$ 是对象名称的一部分,直接使用 $env.width,不需要写成函数调用。
定义绘制内容
仪表脚本中的 main() 返回由 JSX 描述的画面。每个 JSX 节点都是一个内置 View,属性控制尺寸、颜色和其他绘制行为,嵌套关系构成最终画面。
下面的完整脚本绘制一个数字和一行单位。VStack 将两个 Text 上下排列,spacing 设置间距,fontSize 设置字号,颜色由当前显示环境提供。
function main() {
return (
<VStack spacing={6}>
<Text fontSize={48} color={$env.foreground}>
78
</Text>
<Text fontSize={14} color={$env.accent}>
km/h
</Text>
</VStack>
);
}
在 JSX 的 {} 中可以使用 JavaScript 表达式。将固定的 78 换成计算结果,即可让文字随输入变化;同样可以把计算结果传给颜色、尺寸或圆弧角度等属性。
$data:驾驶数据
$data.current 的字段来自本仪表的输入标识符。在 仪表设置 → 输入绑定 填写本机值或选择 OBD 参数,齿轮进入 参数配置 管理定义。以下均以对应标识符已经定义为前提。
| 示例访问方式 | 输入定义与返回内容 |
|---|---|
$data.current.speed |
基础速度输入,返回 { value, unit }。 |
$data.current.gForce |
基础 G 值输入,包含 longitudinal、lateral、combined 与单位。 |
$data.current.location |
基础位置输入,包含经纬度与单位。 |
$data.current.elapsed |
基础已记录时长输入,单位为秒。 |
$data.current.recording |
基础记录状态输入,返回布尔值。 |
$data.current.coolant |
OBD 输入,绑定车辆参数后返回 { value, unit } 或 null。 |
$data.current.limit |
数值输入,直接返回数字。 |
$data.current.label |
文本输入,直接返回字符串。 |
$data.current.showUnit |
开关输入,直接返回布尔值。 |
$data.current.style |
选择项输入,返回已选字符串。 |
$data.history 覆盖当前行程最近 30 秒,按从旧到新排列,采样字段与 current 一致;固定输入使用当前配置。窗口可能为空或包含缺测。OBD 的数值可能是映射文字,应先检查类型。零与 null 含义不同。完整输入、单位和历史规则。
$env:显示环境
$env 描述当前这块仪表所在的显示区域。调整卡片尺寸、切换主题或进入 HUD 后,App 会提供更新后的环境。依赖这些值的计算应放在 main() 中。
| 字段 | 含义与用法 |
|---|---|
$env.width、$env.height |
当前仪表可用宽高,单位为屏幕点。可用于计算字号、直径或端点坐标。 |
$env.foreground、$env.accent |
当前主题的文字色和强调色,可直接传给 color、stroke、background 等颜色属性。 |
$env.dark |
是否为深色外观,类型为布尔值。 |
$env.mode |
显示模式,值为 'instruments' 或 'hud'。 |
$env.speedUnit |
当前速度显示单位,值为 'km/h' 或 'mph'。读数自带单位时优先使用读数的 unit。 |
$env.language |
App 当前语言标识,例如 'zh-Hans'。 |
$env.reduceMotion |
系统是否启用了减弱动态效果,可据此调整重复动画。 |
$env.obdDevice |
当前已连接设备的 { id, name },没有已就绪设备时为 null。 |
例如,使用 Math.min($env.width, $env.height) 可以取得适合放置正圆的最大直径,使用 $env.foreground 可以让文字跟随主题。完整显示环境定义。
示例:使用数据与显示环境
在仪表设置中选择速度。下面的脚本读取当前速度,按卡片宽高计算字号,使用主题颜色,并显示读数提供的单位。缺少速度时显示横线;有效的零显示为 0。
function main() {
const speed = $data.current.speed;
const fontSize = Math.min(64, $env.width * 0.25, $env.height * 0.5);
return (
<VStack spacing={6}>
<Text fontSize={fontSize} color={$env.foreground}>
{speed?.value == null ? '—' : Math.round(speed.value)}
</Text>
<Text fontSize={14} color={$env.accent}>
{speed?.unit ?? $env.speedUnit}
</Text>
</VStack>
);
}
数据更新时,下一次调用会使用新的速度;卡片尺寸或主题改变时,字号与颜色使用新的环境值。需要在同一行程中累计峰值等状态,可继续使用 $sessionStorage;需要检查实际输入,可在调试时用 console.log('speed', speed) 输出日志。
画面更新
当前输入、输入定义或显示环境变化时,CapDrive 提供最新的 $data 和 $env,在新的局部作用域执行整个文件,再调用本次定义的 main()。顶层计算也会重新执行,普通变量不会跨次保留。完全相同的输入会跳过;处理中只保留最新的待处理输入。历史窗口维护和内部采样时间变化不会单独触发执行;显式定义的时间输入变化则会。
脚本没有统一固定的频率,实际更新取决于输入和处理耗时。跨次状态使用 $sessionStorage;属性过渡使用 animations,由绘制端独立执行。main() 应同步完成,避免持续循环或阻塞等待。
相关运行接口
- main()
- 脚本入口。读取本次输入,同步返回要绘制的 View、数组或空内容。
- animations
- 为 View 的属性变化设置时长、曲线、重复等过渡行为。
- Color / Gradient
- 构造颜色、HDR 颜色、线性渐变、径向渐变和角度渐变。
- 导入与分享
- 了解仪表包的配置、脚本、资源及导出方式。
绘制组件
通过容器组织画面,再放入文字、图形和数据视图。以下按用途列出全部内置 View;各组件页面说明用法、属性、默认行为和组合示例。
内容
显示读数、单位、图标和图片,或使用带标题的仪表内容区域。
布局
排列多个 View、分配剩余空间,构建横排、竖排、叠放与刻度布局。
HStack从左到右排列子 View,适合图标与数字、数字与单位等横向组合。spacing 设置相邻间距,alignment 设置这一行内的上下或文字基线对齐。
VStack从上到下排列子 View,适合标题、主数字与单位的竖向组合。spacing 设置相邻间距,alignment 设置这一列内的左右对齐。
ZStack把多个 View 叠放在同一区域,适合背景、刻度与中心读数。子 View 按顺序绘制,alignment 设置它们在容器内的共同对齐位置。
Spacer在 Stack 中分配剩余空间,用于把两侧内容推开或为内容预留弹性距离。minLength 设置最小长度,显式 width 或 height 可固定对应方向的大小。
RadialLayout沿圆周分布刻度、数字或符号。radius 控制子 View 中心到布局中心的距离,startAngle 与 sweepAngle 控制分布范围。
RepeatedLayout在裁切窗口中周期性复制一份图案,适合连续移动的刻度和罗盘。period 设置重复间隔,value 与 anchor 确定当前值对齐的位置。
图形
绘制刻度、进度、线条和自定义轮廓,使用背景、描边及角度等属性控制外观。
Rectangle绘制带可选圆角的矩形,用于背景、进度条和边框。background 填充内部,stroke 描边,lineWidth 与 strokePosition 控制描边宽度和位置。
Circle在可用区域内绘制正圆或圆弧,适合环形进度和仪表刻度。直径取宽高中的较小值,startAngle 与 sweepAngle 控制显示范围,整圈闭合时可填充背景。
Ellipse在给定宽高内绘制椭圆或椭圆弧。可通过起始角、扫过角度、填充和描边构成椭圆刻度或装饰轮廓。
Arc按起始角和扫过角度绘制椭圆弧,适合刻度弧线与进度显示。边界由宽高确定,描边可配置宽度、端点和位置,完整闭合时允许背景填充。
Line在本地坐标中的两个端点之间绘制直线。适合指示线、刻度和分隔线,可设置颜色、宽度、虚线与端点样式。
Polyline依次连接一组点绘制折线。closed 可连接末点与首点形成闭合轮廓,并允许填充;坐标使用当前 View 内的点数。
Path通过 move、line、quad、cubic、arc 和 close 等命令构建路径。适合自定义指针、曲线和组合轮廓,可设置填充规则与描边。
组合与材质
为组合内容应用整体特效,或绘制毛玻璃材质表面。
图表与地图
把数据序列绘制成曲线和柱状图,或显示位置与路线。
类型与声明文件
通用类型集中定义尺寸、边距、变换、描边、动画和图表数据等结构。编辑器提供相同 API 的类型提示,也可以下载声明文件供外部编辑器使用。