Verbinden von Bildern mit Linien

Question

Ich habe versucht, zwei Paare mit Zeilen Quiz übereinstimmen. Ich habe einige Bilder auf der linken Seite und einige Bilder auf der rechten Seite, und ich muss sie mit den Zeilen verbinden, wenn Sie auf ein Bildpaar klicken. Es sollte für jede Kombination funktionieren, wenn ich zum Beispiel auf Bild 1 auf der linken und Bild 3 auf der rechten Seite klicke, sollten sie mit der Linie verbunden werden. Wenn ich dann erneut auf Bild 1 rechts und Bild 2 links klicke, sollte die vorherige Zeile gelöscht werden und die neue zwischen diesen beiden Bildern erstellt werden. HTML-Schnipsel:

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>

schaffe ich eine Linie zwischen zwei Bildern zu machen (von Klasse A bis Klasse b), und es ist immer genau berechnet auf der rechten Winkel, aber ich kann es scheint nicht so zu funktionieren, wie ich es oben beschrieben habe. Irgendwelche Ideen? Vielen Dank.

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

können Sie ein Flag-Variablen verwenden, und wenn Sie auf ein Bild von der rechten Seite, die rechte Flagvariable gesetzt wahr und tun mit der anderen das gleiche zu sein.

Dann in Ihrer Funktion überprüfen drawLine nur, wenn die beiden Fahnen wahr ist, dann ziehen die Grenze zwischen a und b und legen Sie die beiden Flag-Variablen zu false sind.

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>