效果圖
具體的效果：
左右一一對(duì)應(yīng)，連線，連續(xù)點(diǎn)一側(cè)的按鈕是切換選中的按鈕透葛。
思路：
1、用dom實(shí)現(xiàn)點(diǎn)的狀態(tài)的改變
2卿樱、把點(diǎn)的狀態(tài)化成具體的數(shù)據(jù)
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");
//點(diǎn)擊左側(cè)
$(".left li").click(function(){
if($(this).hasClass('active')){
//如果已經(jīng)被選中，有兩種情況殿如，一種是沒有連線贡珊，一種是已經(jīng)連線了
var l_index = leftArr.indexOf($(this).attr("data-sort"));//被選中的左側(cè)的下標(biāo)
var r_sort = rightArr[l_index];//左側(cè)下標(biāo)對(duì)應(yīng)右側(cè)的值
if(r_sort){
//如果存在，證明已經(jīng)連線了
$(".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');
//如果沒有被選中门岔，有兩種情況，一種是它是第二個(gè)點(diǎn)（選中就連線完成）烤送，另外一種是它是第一個(gè)點(diǎn)（開始連線）寒随。
if(rightArr.length==leftArr.length){
//是第二個(gè)點(diǎn)
//劃線
drawLine();
}else if(rightArr.length+2==leftArr.length){
//切換
$(".left li").eq(leftArr[leftArr.length-2]-1).removeClass('active');
leftArr.splice(leftArr.length-2,1);
}
}
})
//點(diǎn)擊右側(cè)
$(".right li").click(function(){
if($(this).hasClass('active')){
//如果已經(jīng)被選中，有兩種情況帮坚，一種是沒有連線妻往，一種是已經(jīng)連線了
var r_index = rightArr.indexOf($(this).attr("data-sort"));//被選中的右側(cè)的下標(biāo)
var l_sort = leftArr[r_index];//右側(cè)下標(biāo)對(duì)應(yīng)左側(cè)的值
if(l_sort){
//如果存在，證明已經(jīng)連線了
$(".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{
//如果沒有被選中讯泣，有兩種情況，一種是它是第二個(gè)點(diǎn)（選中就連線完成）阅悍，另外一種是它是第一個(gè)點(diǎn)（開始連線）好渠。
rightArr.push($(this).attr("data-sort"));
$(this).addClass('active');
if(rightArr.length==leftArr.length){
//是第二個(gè)點(diǎn)
//劃線
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>
