画布式 AI 交互节点编排与动态连线体验将大语言模型与多模态工具串联为复杂工作流时传统的线性聊天窗口显得捉襟见肘。画布式Canvas-based交互成为承载复杂 AI Agent 编排的标准形态。用户在无限画布上自由拖拽模型节点、提示词模板、知识库检索器以及条件分支器节点之间以动态贝塞尔曲线相互咬合。要在 Web 端实现丝滑、精准且支持数百个复杂节点的编排体验核心在于解决视图变换矩阵、贝塞尔连线数学解算、吸附判定以及 DOM 与渲染图层的性能平衡。视口矩阵与坐标映射无限画布的基石是仿射变换Affine Transformation。画布的缩放Zoom与平移Pan通过一个变换矩阵[scale, 0, 0, scale, translateX, translateY]来表达。任何鼠标交互例如点击、拖拽连线、框选触发的事件坐标均来自浏览器视口坐标系Screen Coordinates必须经过逆矩阵转换才能得到画布内部真实的全局坐标Canvas World Coordinatesexport interface ViewportTransform { x: number; y: number; zoom: number; } export class CoordinateTransformer { constructor(private transform: ViewportTransform) {} // 屏幕坐标转画布世界坐标 screenToWorld(screenX: number, screenY: number, containerRect: DOMRect): { x: number; y: number } { const relativeX screenX - containerRect.left; const relativeY screenY - containerRect.top; return { x: (relativeX - this.transform.x) / this.transform.zoom, y: (relativeY - this.transform.y) / this.transform.zoom, }; } // 画布世界坐标转屏幕坐标 worldToScreen(worldX: number, worldY: number, containerRect: DOMRect): { x: number; y: number } { return { x: worldX * this.transform.zoom this.transform.x containerRect.left, y: worldY * this.transform.zoom this.transform.y containerRect.top, }; } }缩放时以当前鼠标指针为锚点进行缩放而不是以画布左上角为中心export function calculateZoomAroundPoint( currentTransform: ViewportTransform, pointerScreenX: number, pointerScreenY: number, containerRect: DOMRect, zoomDelta: number, minZoom 0.2, maxZoom 2.5 ): ViewportTransform { const nextZoom Math.min(Math.max(currentTransform.zoom * (1 zoomDelta), minZoom), maxZoom); const ratio nextZoom / currentTransform.zoom; const mouseRelX pointerScreenX - containerRect.left; const mouseRelY pointerScreenY - containerRect.top; const nextX mouseRelX - (mouseRelX - currentTransform.x) * ratio; const nextY mouseRelY - (mouseRelY - currentTransform.y) * ratio; return { x: nextX, y: nextY, zoom: nextZoom }; }三次贝塞尔连线的几何生成与正切控制节点之间的连线绝不能是生硬的直线。通常采用三次贝塞尔曲线Cubic Bézier Curve并在出入锚点处提供水平外延的切线控制点使线条如流水般自然舒展。当起点在终点右侧或存在大角度倒折时简单的固定控制点偏移量会导致连线扭曲打结。我们需要根据起止点的曼哈顿距离与相对夹角动态调整控制点偏移距离export interface Point { x: number; y: number; } export function generateSmoothBezierPath( source: Point, target: Point, sourcePosition: left | right right, targetPosition: left | right left ): string { const dx target.x - source.x; const dy target.y - source.y; const distance Math.sqrt(dx * dx dy * dy); // 基础控制点横向伸展距离 let curvature Math.max(Math.abs(dx) * 0.5, 40); if (dx 0 sourcePosition right targetPosition left) { // 终点在起点左侧倒折路径加大控制点外延以形成平滑环形绕行 curvature Math.max(Math.abs(dx) * 0.6 Math.abs(dy) * 0.2, 80); } const p1x sourcePosition right ? source.x curvature : source.x - curvature; const p1y source.y; const p2x targetPosition left ? target.x - curvature : target.x curvature; const p2y target.y; return M ${source.x} ${source.y} C ${p1x} ${p1y}, ${p2x} ${p2y}, ${target.x} ${target.y}; }动态吸附与磁吸半径判定在拖拽连线过程中若要求用户必须精确把鼠标点到 10px 的锚点中心交互体验会极度生硬。磁吸机制通过空间查询算法在鼠标移动到目标锚点一定范围如 24px 阈值内时自动将连线终点“吸附”并锁定至目标锚点同时触发锚点的微光放大状态。export interface Anchor { id: string; nodeId: string; type: input | output; position: Point; dataType: string; } export function findSnapAnchor( cursorWorldPos: Point, anchors: Anchor[], sourceAnchor: Anchor, snapRadius 24 ): Anchor | null { let closestAnchor: Anchor | null null; let minDistanceSq snapRadius * snapRadius; for (const anchor of anchors) { // 排除同节点、同向入入/出出以及类型不兼容的锚点 if (anchor.nodeId sourceAnchor.nodeId || anchor.type sourceAnchor.type) { continue; } if (sourceAnchor.dataType ! any anchor.dataType ! any sourceAnchor.dataType ! anchor.dataType) { continue; } const dx anchor.position.x - cursorWorldPos.x; const dy anchor.position.y - cursorWorldPos.y; const distSq dx * dx dy * dy; if (distSq minDistanceSq) { minDistanceSq distSq; closestAnchor anchor; } } return closestAnchor; }渲染分层与混合架构选型节点内部往往包含丰富的 UI 元素输入框、下拉菜单、富文本预览器、运行状态指示灯等。如果完全用 Canvas 绘制节点内部将陷入重造 DOM 轮子的泥潭如果全部使用 DOM 渲染连线与节点当节点数量破百、频繁缩放时重绘与合成层爆炸会导致严重掉帧。最优实践是“DOM 节点 SVG/Canvas 连线”的双层分治架构底层SVG/Canvas负责渲染网格背景、所有贝塞尔连线、流动粒子光效以及拖拽时的临时连接线。顶层DOM Transform Container挂载所有节点的 DOM 结构通过transform: translate3d(x, y, 0) scale(z)单一矩阵统管内部节点依靠绝对定位布局。视口裁剪Viewport Culling当节点脱离可视区域时动态为其应用content-visibility: auto或将其从 DOM 树卸载仅保留虚拟位置占位。画布式 AI 编排交互的精髓在于“举重若轻”。将高维的逻辑流转化为直观的拓扑图背后的几何计算与坐标映射越精准用户的编排手感就越轻盈流畅。
