效果图
具体的效果：
左右一一对应，连线，连续点一侧的按钮是切换选中的按钮。
思路：
1、用dom实现点的状态的改变
2、把点的状态化成具体的数据
3、通过canvas划线
代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>连线</title>
<style type="text/css">
ul,ol,li{
margin:0;
padding:0;
list-style: none;
}
.box{
display: flex;
justify-content: space-between;
position: relative;
}
.box ul{
width: 100px;
height: 300px;
/*border:1px solid #aaa;*/
}
.box ul li{
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: space-between;
}
.box ul li div{
width: 60px;
height: 100px;
background-color: #f4f4f4;
text-align: center;
line-height: 100px;
}
.box ul li i{
width: 10px;
height: 10px;
box-sizing: border-box;
border: 1px solid #000;
}
.box ul li.active i{
background-color: #000;
}
#myCanvas{
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
top:0;
left: 0;
z-index: -1;
}
</style>
</head>
<body>
<div class="box">
<ul class="left">
<li data-sort='1'>
<div>1</div>
<i></i>
</li>
<li data-sort='2'>
<div>2</div>
<i></i>
</li>
<li data-sort='3'>
<div>3</div>
<i></i>
</li>
</ul>
<ul class="right">
<li data-sort='1'>
<i></i>
<div>1</div>
</li>
<li data-sort='2'>
<i></i>
<div>2</div>
</li>
<li data-sort='3'>
<i></i>
<div>3</div>
</li>
</ul>
<canvas id="myCanvas"></canvas>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
var leftArr = [];
var rightArr = [];
var lineArr = [];
var c=document.getElementById("myCanvas");
c.width = $(".box").width();
c.height = $(".box").height();
var ctx=c.getContext("2d");
//点击左侧
$(".left li").click(function(){
if($(this).hasClass('active')){
//如果已经被选中，有两种情况，一种是没有连线，一种是已经连线了
var l_index = leftArr.indexOf($(this).attr("data-sort"));//被选中的左侧的下标
var r_sort = rightArr[l_index];//左侧下标对应右侧的值
if(r_sort){
//如果存在，证明已经连线了
$(".right li").eq(r_sort-1).removeClass('active');
leftArr.splice(l_index,1);
rightArr.splice(l_index,1);
//划线
drawLine();
}else{
//如果不存在，证明没有连线
leftArr.splice(l_index,1);
}
$(this).removeClass('active');
}else{
leftArr.push($(this).attr("data-sort"));
$(this).addClass('active');
//如果没有被选中，有两种情况，一种是它是第二个点（选中就连线完成），另外一种是它是第一个点（开始连线）。
if(rightArr.length==leftArr.length){
//是第二个点
//划线
drawLine();
}else if(rightArr.length+2==leftArr.length){
//切换
$(".left li").eq(leftArr[leftArr.length-2]-1).removeClass('active');
leftArr.splice(leftArr.length-2,1);
}
}
})
//点击右侧
$(".right li").click(function(){
if($(this).hasClass('active')){
//如果已经被选中，有两种情况，一种是没有连线，一种是已经连线了
var r_index = rightArr.indexOf($(this).attr("data-sort"));//被选中的右侧的下标
var l_sort = leftArr[r_index];//右侧下标对应左侧的值
if(l_sort){
//如果存在，证明已经连线了
$(".left li").eq(l_sort-1).removeClass('active');
leftArr.splice(r_index,1);
rightArr.splice(r_index,1);
//划线
drawLine();
}else{
//如果不存在，证明没有连线
rightArr.splice(r_index,1);
}
$(this).removeClass('active');
}else{
//如果没有被选中，有两种情况，一种是它是第二个点（选中就连线完成），另外一种是它是第一个点（开始连线）。
rightArr.push($(this).attr("data-sort"));
$(this).addClass('active');
if(rightArr.length==leftArr.length){
//是第二个点
//划线
drawLine();
}else if(rightArr.length==leftArr.length+2){
//切换
$(".right li").eq(rightArr[rightArr.length-2]-1).removeClass('active');
rightArr.splice(rightArr.length-2,1);
}
}
})
function drawLine(){
var _x = $(".box").offset().left;
var _y = $(".box").offset().top;
lineArr = [];
$.each(leftArr, function(i,d) {
var dom_l = $(".left li[data-sort='"+d+"']").find('i');
var dom_r = $(".right li[data-sort='"+rightArr[i]+"']").find('i');
lineArr[i] = {};
lineArr[i].left = {};
lineArr[i].right = {};
lineArr[i].left.x = dom_l.offset().left - _x;
lineArr[i].left.y = dom_l.offset().top - _y;
lineArr[i].right.x = dom_r.offset().left - _x;
lineArr[i].right.y = dom_r.offset().top - _y;
});
console.log(lineArr);
ctx.clearRect(0,0,c.clientWidth,c.clientHeight);
for(let i=0;i<lineArr.length;i++){
ctx.beginPath();
ctx.lineCap="round";
ctx.strokeStyle = "red";
ctx.lineWidth = "1";
ctx.moveTo(lineArr[i].left.x+5,lineArr[i].left.y+5);
ctx.lineTo(lineArr[i].right.x+5,lineArr[i].right.y+5);
ctx.stroke();
}
}
</script>
</html>
网友评论