画像を線で結ぶ

Question

私は線のクイズで2つのペアをマッチさせようとしました。私は左の画像と右の画像のカップルがあります。画像のペアをクリックすると、画像をラインで結ぶ必要があります。任意の組み合わせで動作するはずです。たとえば、左の画像1をクリックし、右の画像3をクリックすると、線で結ばれます。次に、右の画像1をもう一度クリックし、左の画像2をクリックすると、前の行が削除され、その2つの画像間の新しい画像が作成される必要があります。 HTMLスニペット：

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');

<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>

私は（クラス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内部次に

はちょうど2つのフラグが真であるならば、aとbの間に線を引くとfalseに2フラグ変数を設定して確認してください。

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

 
function drawLine(a, b, line) { 
 

 
\t if(setLeft && setRight){ 
 
    \t 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(){ 
 
\t $('.leftSide img').removeClass('a'); 
 
\t $(this).addClass('a'); 
 
    setLeft = true; 
 
    new drawLine('.a', '.b', '.line'); 
 
}); 
 
$('.rightSide img').click(function(){ 
 
\t $('.rightSide img').removeClass('b'); 
 
\t $(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>