javascript - Connecting images with lines -
i tried make match 2 pairs lines quiz. have couple of images on left, , couple of images on right, , need connect lines when click on pair of images. should work combinantion, if click example on image 1 on left , image 3 on right, should connected line. if click again on image 1 on right, , image 2 on left, previous line should deleted, , new 1 between 2 images need made. html snippet:
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>i manage make line between 2 images (from class class b), , calculated on right angle, can not make appear work described above. ideas? thanks.
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'); }); you can use flag variables , when click on image right, set right flag variable true , same other.
then inside function drawline check if 2 flags true draw line between a , b , set 2 flag variables false.
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>
Comments
Post a Comment