Skip to content

基于你提供的 InteractionController 和 MA 渲染器插件代码,我对整个数据流进行了更完整的描述,涵盖交互控制链路与插件化渲染的具体实现。


图表核心模块数据流全览

图表核心模块的数据流由数据输入渲染主循环交互控制布局更新插件系统五个维度构成。核心设计思想是:this.data 作为唯一数据源;draw() 只读不写,通过 requestAnimationFrame 合并渲染请求;交互由 InteractionController 统一接管;具体绘制委托给 RendererPluginManager


关键数据结构

数据说明
KLineData[]原始 K 线数据,由外部传入。
VisibleRange当前可视窗口内的数据索引范围 {start, end}
KLinePositions每根 K 线在逻辑像素下的起始 x 坐标数组。
Viewport视口元数据,包含尺寸、dprscrollLeft 等。
RenderContext不可变的渲染上下文,聚合了单次绘制所需的所有只读信息。
PaneSpec[]窗格配置的声明式描述(id, ratio, visible)。

1. 数据输入流

外部注入数据后,触发状态重置、交互状态清理、插件通知,并调度渲染。

交互重置细节interaction.reset() 会清空所有交互状态,包括:

  • 拖拽状态 (isDragging, dragStartX/Y, scrollStartX)
  • 十字线状态 (crosshairPos, crosshairIndex, crosshairPrice)
  • Hover 状态 (hoveredIndex, hoveredMarkerId, hoveredCustomMarker)
  • 缓存几何数据 (kLinePositions, visibleRange, kWidthPx)

2. 渲染主循环 (draw)

渲染流程先计算视口与坐标,构建上下文,再分发给各窗格与插件。每次绘制结束时,setKLinePositions 会将最新的几何数据回传给交互控制器以供下一帧 hover 检测使用。


3. 交互控制流

InteractionController 统一处理鼠标、触屏、滚轮事件,内部通过统一的 updateHoverFromPoint 完成十字线吸附、Marker 命中检测、Tooltip 防溢出定位等核心逻辑。

3.1 按下/移动/抬起事件分发总览
3.2 updateHoverFromPoint 核心 hover 检测链
3.3 缩放交互详细流程
3.4 价格轴平移

4. 布局数据流

任何布局变更都会触发窗格重新计算与渲染器尺寸更新。


5. 插件系统与 MA 渲染器实例

5.1 插件注册与渲染流程
5.2 MA 渲染器内部数据流

createMARendererPlugin 返回的插件对象实现了 RendererPlugin 接口。它的 draw 方法接收 RenderContext 中由核心计算好的 kLinePositionsrangeyAxis 等,通过 yAxis.priceToY() 完成价格到画布坐标的转换,并使用 alignToPhysicalPixelCenter 确保像素对齐。

5.3 MA 插件缓存生命周期

设计特点

  • 单一数据源this.data 是唯一的数据源,所有读取都通过 getData() 进行。
  • 渲染与数据分离draw() 为纯读取过程,数据变更必须通过专用方法(如 updateData)。
  • RAF 合并scheduleDraw() 利用 requestAnimationFrame 合并同一帧内的多次渲染请求。
  • 插件化渲染:核心只负责坐标、范围的计算与状态管理,具体绘制委托给 RendererPluginManager 处理。MA 渲染器作为典型实现,通过共享的 RenderContext 获取只读几何数据,内部维护独立缓存。
  • 交互统一接管InteractionController 集中处理所有输入事件,通过 hitTest 两层机制(量价标记 → 自定义标记 → K 线十字线)实现精确的 hover 检测,并利用从渲染循环回传的 kLinePositions 数组提升性能。
  • 坐标系统解耦:渲染插件通过逻辑像素坐标 (kLinePositions + priceToY) 计算,再统一做物理像素对齐 (alignToPhysicalPixelCenter),确保跨设备清晰度一致。