提问人：Saravanan Thangadurai 提问时间：7/20/2023 更新时间：7/21/2023 访问量：22
当两个字段单击时，如何用连接线链接两个字段。在angularJs中
how to link two fields with a connecting line when the two fields clicked.... in angularJs
问：
我在上边有 10 个字段，在下边有 10 个字段，当我点击两个字段（一个上字段和一个下字段）时，我需要两个字段用一行连接，需要用 angularJs 中的一行连接所有一对字段。
我需要所有上部字段都用一条连线与底部字段连接。我单击向上一个字段和底部一个字段以连接该行...它出现在所有领域......这是一个点击事件。在angularJS中。
答：
0赞
Saravanan Thangadurai
7/21/2023
#1
var app = angular.module("plunker", []);
app.controller("MainCtrl", function ($scope) {
$scope.top_span = [
{
name: "1",
},
{
name: "2",
},
{
name: "3",
},
{
name: "4",
},
{
name: "5",
},
];
$scope.bottom_span = [
{
name: "1",
},
{
name: "2",
},
{
name: "3",
},
{
name: "4",
},
{
name: "5",
},
];
$scope.lines = [];
$scope.unline = {};
// console.log("line", $scope.lines);
// console.log("unline", $scope.unline);
$scope.getPosTop = function ($index) {
let element = document.getElementById(`1_${$index}`);
element.style.transform = "scale(0.8)";
let x = element.offsetLeft;
let y = element.offsetTop;
// console.log("Element X1: " + x);
// console.log("Element Y1: " + y);
if ($scope.unline["from"]) {
return (
($scope.unline["to"] = { x: x + 15, y: y + 30 }), $scope.clearLine()
);
} else {
$scope.unline["from"] = { x: x + 15, y: y + 30 };
}
// console.log("line", $scope.lines);
// console.log("unline", $scope.unline);
};
$scope.getPosBottom = function ($index) {
let element = document.getElementById(`2_${$index}`);
element.style.transform = "scale(0.8)";
let x = element.offsetLeft;
let y = element.offsetTop;
// console.log("Element X2: " + x);
// console.log("Element Y2: " + y);
if ($scope.unline["from"]) {
$scope.unline["to"] = { x: x + 15, y: y };
} else {
return ($scope.unline["from"] = { x: x + 15, y: y });
}
// console.log("line", $scope.lines);
// console.log("unline", $scope.unline);
$scope.clearLine();
};
$scope.clearLine = function () {
$scope.lines.push($scope.unline);
$scope.unline = {};
};
});.parent_span {
display: flex;
margin-bottom: 100px;
justify-content: space-between;
}
.parent_span_2 {
display: flex;
justify-content: space-between;
}
.top_span {
display: flex;
flex-direction: column;
align-items: center;
}
.bottom_span {
display: flex;
flex-direction: column;
align-items: center;
}
.line {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
.line svg {
width: 100%;
height: 100%;
}<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJs</title>
<link rel="stylesheet" href="style.css" />
<script
data-require="[email protected]"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"
></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<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 fill="#000000" height="30px" width="30px" viewBox="0 0 490 490">
<path
d="M0,0v490h490V0H0z M430.1,332.9h-87.5v50.9h-33.1v50.9H180.4v-50.6h-33.1v-51.3H59.9v-278h46.7v66.5h38.5V54.8h40.8v66.5
h38.5V54.8h40.8v66.5h38.5V54.8h40.8v66.5H383V54.8h46.7v278.1L430.1,332.9L430.1,332.9z"
/></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 fill="#000000" height="30px" width="30px" viewBox="0 0 490 490">
<path
d="M0,0v490h490V0H0z M430.1,332.9h-87.5v50.9h-33.1v50.9H180.4v-50.6h-33.1v-51.3H59.9v-278h46.7v66.5h38.5V54.8h40.8v66.5
h38.5V54.8h40.8v66.5h38.5V54.8h40.8v66.5H383V54.8h46.7v278.1L430.1,332.9L430.1,332.9z"
/></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}}"
style="stroke: rgb(255, 0, 0); stroke-width: 2"
/>
</svg>
</span>
</body>
</html>
评论