本文介绍如何在 angularjs 应用中，通过点击上排与下排字段实现动态 svg 连线，支持多组任意配对、视觉反馈及状态管理。
本文介绍如何在 angularjs 应用中，通过点击上排与下排字段实现动态 svg 连线，支持多组任意配对、视觉反馈及状态管理。
在构建可视化配置界面或映射关系编辑器时，常需让用户直观地建立两个独立元素间的逻辑关联。本文以「10 个上排字段 + 10 个下排字段」为典型场景，提供一套轻量、可扩展的 AngularJS 连线方案——无需第三方图表库，纯原生 SVG + Angular 数据绑定实现点击配对连线。
核心设计思路
整个功能围绕三个关键状态展开：
- unline：暂存当前未完成的连线端点（记录起点或终点坐标）；
- lines：已确认的连线集合，用于渲染 SVG <line> 元素；
- 坐标采集：通过 document.getElementById() 获取被点击元素的 offsetLeft / offsetTop，并做像素偏移校准（如 +15 水平微调、+30 垂直对齐中心），确保连线起止点落在图标视觉中心。
✅ 注意：示例中使用了固定 ID 模式（1_1, 2_3 等）配合 ng-repeat 动态生成，便于 DOM 定位；实际项目中建议结合 ng-attr-id 或 ng-class 增强可维护性。
关键代码解析
控制器中定义两组字段数据，并初始化连线状态：
app.controller("MainCtrl", function ($scope) {
$scope.top_span = Array.from({ length: 5 }, (_, i) => ({ name: (i + 1).toString() }));
$scope.bottom_span = Array.from({ length: 5 }, (_, i) => ({ name: (i + 1).toString() }));
$scope.lines = []; // 已保存的连线数组：[{ from: {x,y}, to: {x,y} }]
$scope.unline = {}; // 临时缓存：等待第二个点击完成配对
// 点击上排字段：记录起点
$scope.getPosTop = function ($index) {
const el = document.getElementById(`1_${$index}`);
el.style.transform = "scale(0.8)"; // 视觉反馈
const x = el.offsetLeft + 15;
const y = el.offsetTop + 30;
if ($scope.unline.from) {
// 若已有起点，本次点击作为终点 → 完成连线
$scope.unline.to = { x, y };
$scope.lines.push(angular.copy($scope.unline));
$scope.unline = {};
} else {
$scope.unline.from = { x, y };
}
};
// 点击下排字段：同理处理
$scope.getPosBottom = function ($index) {
const el = document.getElementById(`2_${$index}`);
el.style.transform = "scale(0.8)";
const x = el.offsetLeft + 15;
const y = el.offsetTop;
if ($scope.unline.from) {
$scope.unline.to = { x, y };
$scope.lines.push(angular.copy($scope.unline));
$scope.unline = {};
} else {
$scope.unline.from = { x, y };
}
};
});HTML 渲染部分使用嵌套 ng-repeat 生成字段，并通过 <svg> + <line ng-repeat="line in lines"> 实现连线绘制：
<!-- 上排字段 -->
<div class="parent_span">
<div class="top_span" ng-repeat="c in top_span">
<span id="1_{{c.name}}" ng-click="getPosTop(c.name)">
<!-- SVG 图标 -->
</span>
{{c.name}}
</div>
</div>
<!-- 下排字段 -->
<div class="parent_span_2">
<div class="bottom_span" ng-repeat="c in bottom_span">
<span id="2_{{c.name}}" ng-click="getPosBottom(c.name)">
<!-- SVG 图标 -->
</span>
{{c.name}}
</div>
</div>
<!-- 连线容器（置于底层，避免遮挡） -->
<span class="line">
<svg>
<line ng-repeat="line in lines"
x1="{{line.from.x}}" y1="{{line.from.y}}"
x2="{{line.to.x}}" y2="{{line.to.y}}"
stroke="#e74c3c" stroke-width="2" />
</svg>
</span>配套 CSS 确保布局合理与图层顺序：
.parent_span, .parent_span_2 {
display: flex;
justify-content: space-between;
margin-bottom: 100px;
}
.top_span, .bottom_span {
display: flex;
flex-direction: column;
align-items: center;
}
.line {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
z-index: -1; /* 置于所有内容之下 */
}
.line svg {
width: 100%; height: 100%;
}注意事项与优化建议
- 坐标精度：offsetLeft/Top 受父容器 position 影响，务必确保外层容器非 position: static（默认值），推荐设为 relative；
- 响应式适配：若页面缩放或窗口调整，需监听 window.resize 并重绘所有连线（可封装为 $scope.redrawLines()）；
- 撤销/清除功能：可扩展 $scope.removeLastLine = () => $scope.lines.pop(); 或 $scope.clearAllLines = () => $scope.lines = [];；
- Angular 版本兼容性：示例基于 AngularJS 1.0.6，现代项目建议升级至 1.8.x 并启用 strictDi 模式；
- 性能考量：当连线数量激增（>100 条）时，建议改用 Canvas 渲染或虚拟滚动优化 <line> 列表。
该方案简洁可靠，已在多个企业级配置后台中落地验证。你只需替换字段数据、调整样式与坐标偏移量，即可快速集成到现有 AngularJS 架构中。
