用线连接图像

Question

我尝试用线测验进行两对匹配。我左边有几个图像，右边有几个图像，当你点击一对图像时我需要用线连接它。它应该适用于任何组合，所以如果我点击左边的图像1和右边的图像3，它们应该用线连接。然后，如果我再次单击右侧的图像1和左侧的图像2，则应删除前一行，并且需要在这两个图像之间创建新的行。 Html片段：

＆＃13;

＆＃13;

function lineDistance(x, y, x0, y0){
    return Math.sqrt((x -= x0) * x + (y -= y0) * y);
};

function drawLine(a, b, line) {
  var pointA = $(a ).offset();
  var pointB = $(b).offset();
  var pointAcenterX = $(a).width() / 2;
  var pointAcenterY = $(a).height() / 2;
  var pointBcenterX = $(b).width() / 2;
  var pointBcenterY = $(b).height() / 2;
  var angle = Math.atan2(pointB.top - pointA.top, pointB.left - pointA.left) * 180 / Math.PI;
  var distance = lineDistance(pointA.left, pointA.top, pointB.left, pointB.top);

 // Set Angle
  $(line).css('transform', 'rotate(' + angle + 'deg)');


  // Set Width
  $(line).css('width', distance + 'px');
                  
  // Set Position
  $(line).css('position', 'absolute');
  if(pointB.left < pointA.left) {
    $(line).offset({top: pointA.top + pointAcenterY, left: pointB.left + pointBcenterX});
  } else {
    $(line).offset({top: pointA.top + pointAcenterY, left: pointA.left + pointAcenterX});
  }
}
new drawLine('.a', '.b', '.line');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question">
  <div id="old" class="left_side one_half svg left">
    <a href="#" data-number="1"><img class="a" src="assets/svg/Kerze.svg"></a>
    <a href="#" data-number="2"><img src="assets/svg/Telefon.svg"></a>
    <a href="#" data-number="3"><img src="assets/svg/Schreibmaschine.svg"></a>
    <a href="#" data-number="4"><img src="assets/svg/TV_old.svg"></a>
    <a href="#" data-number="5"><img src="assets/svg/Zeitstopper.svg"></a>
    <a href="#" data-number="6"><img src="assets/svg/Besen.svg"></a>
    <a href="#" data-number="7"><img src="assets/svg/Waschen.svg"></a>
  </div>
  <div class="left_side one_half svg right">
    <a href="#" data-letter="NS"><img src="assets/svg/Iwatch.svg"></a>
    <a href="#" data-letter="RT"><img src="assets/svg/Laptop.svg"></a>
    <a href="#" data-letter="TE"><img src="assets/svg/Staubsauger.svg"></a>
    <a href="#" data-letter="IN"><img src="assets/svg/Waschmaschine.svg"></a>
    <a href="#" data-letter="EI"><img src="assets/svg/TV_new.svg"></a>
    <a href="#" data-letter="AL"><img src="assets/svg/Gluehbirne.svg"></a>
    <a href="#" data-letter="BE"><img class="b" src="assets/svg/Iphone.svg"></a>
    <div class="line"></div>  
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我设法在两个图像之间画一条线（从a类到b类），并且它总是被计算为完全正确的角度，但我不能让它看起来像我上面描述的那样工作。有任何想法吗？感谢。

Answer 1

var setLeft = false, setRight = false;
$('.leftSide img').click(function(){
    $('.leftSide img').removeClass('a');
    $(this).addClass('a');
  setLeft = true;
  new drawLine('.a', '.b', '.line');
});
$('.rightSide img').click(function(){
    $('.rightSide img').removeClass('b');
    $(this).addClass('b');
  setRight = true;
  new drawLine('.a', '.b', '.line');
});

您可以使用标志变量，当单击右侧的图像时，将右侧标志变量设置为true并对另一个变量执行相同操作。

然后在函数drawLine内部检查两个标志是否为真，然后在a和b之间画线，并将两个标志变量设置为false。 / p>

function lineDistance(x, y, x0, y0){
    return Math.sqrt((x -= x0) * x + (y -= y0) * y);
};

function drawLine(a, b, line) {

	if(setLeft && setRight){
  	setLeft = false;
    setRight = false;
    var pointA = $(a).offset();
    var pointB = $(b).offset();
    console.log(pointA);
    console.log(pointB);
    var pointAcenterX = $(a).width() / 2;
    var pointAcenterY = $(a).height() / 2;
    var pointBcenterX = $(b).width() / 2;
    var pointBcenterY = $(b).height() / 2;
    var angle = Math.atan2(pointB.top - pointA.top, pointB.left - pointA.left) * 180 / Math.PI;
    var distance = lineDistance(pointA.left, pointA.top, pointB.left, pointB.top);

   // Set Angle
    $(line).css('transform', 'rotate(' + angle + 'deg)');


    // Set Width
    $(line).css('width', distance + 'px');

    // Set Position
    $(line).css('position', 'absolute');
    if(pointB.left < pointA.left) {
      $(line).offset({top: pointA.top + pointAcenterY, left: pointB.left + pointBcenterX});
    } else {
      $(line).offset({top: pointA.top + pointAcenterY, left: pointA.left + pointAcenterX});
    }
  }
}
//new drawLine('.a', '.b', '.line');
var setLeft = false, setRight = false;
$('.leftSide img').click(function(){
	$('.leftSide img').removeClass('a');
	$(this).addClass('a');
  setLeft = true;
  new drawLine('.a', '.b', '.line');
});
$('.rightSide img').click(function(){
	$('.rightSide img').removeClass('b');
	$(this).addClass('b');
  setRight = true;
  new drawLine('.a', '.b', '.line');
});

.left{
  float:left;
}
.right{
  float:right;
}
.one_half{
  width:40%;
}
img{
  max-width:100%;
}
.line{
  background: red;
  height:1px;
}
.question{
  position: relative;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question">
  <div id="old" class="left_side one_half svg left leftSide">
    <a href="#" data-number="1"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
    <a href="#" data-number="2"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
    <a href="#" data-number="3"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
    <a href="#" data-number="4"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
    <a href="#" data-number="5"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
    <a href="#" data-number="6"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
    <a href="#" data-number="7"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
  </div>
  <div class="left_side one_half svg right rightSide">
    <a href="#" data-letter="NS"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
    <a href="#" data-letter="RT"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
    <a href="#" data-letter="TE"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
    <a href="#" data-letter="IN"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
    <a href="#" data-letter="EI"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
    <a href="#" data-letter="AL"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
    <a href="#" data-letter="BE"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
    <div class="line"></div>  
  </div>
</div>