0
344
ViewsDibuja una línea de un elemento a varios elementos al hacer clic
Estoy tratando de dibujar una línea desde un elemento [.identificador] hasta el elemento en el que se hizo clic [serie A, B, C]. Puedo mostrar la línea pero en la otra dirección, no estoy seguro de por qué se muestra en esa dirección. Aquí está mi violín: https://jsfiddle.net/SampathPerOxide/u2afymxs/11/ ¿Alguien puede ayudarme a mostrar una línea entre ".identificador" y el elemento de serie respectivo?
Resultado esperado al hacer clic en una serie: 
al hacer clic en la serie B: 
$('.seriesli').click(function() { function adjustLine(from, to, line) { var fT = from.offsetTop + from.offsetHeight / 2; var tT = to.offsetTop + to.offsetHeight / 2; var fL = from.offsetLeft + from.offsetWidth / 2; var tL = to.offsetLeft + to.offsetWidth / 2; var CA = Math.abs(tT - fT); var CO = Math.abs(tL - fL); var H = Math.sqrt(CA * CA + CO * CO); var ANG = 180 / Math.PI * Math.acos(CA / H); if (tT > fT) { var top = (tT - fT) / 2 + fT; } else { var top = (fT - tT) / 2 + tT; } if (tL > fL) { var left = (tL - fL) / 2 + fL; } else { var left = (fL - tL) / 2 + tL; } if ((fT < tT && fL < tL) || (tT < fT && tL < fL) || (fT > tT && fL > tL) || (tT > fT && tL > fL)) { ANG *= -1; } top -= H / 2; line.style["-webkit-transform"] = 'rotate(' + ANG + 'deg)'; line.style["-moz-transform"] = 'rotate(' + ANG + 'deg)'; line.style["-ms-transform"] = 'rotate(' + ANG + 'deg)'; line.style["-o-transform"] = 'rotate(' + ANG + 'deg)'; line.style["-transform"] = 'rotate(' + ANG + 'deg)'; line.style.top = top + 'px'; line.style.left = left + 'px'; line.style.height = H + 'px'; } adjustLine( document.getElementById('div1'), document.getElementById('div2'), document.getElementById('line') ); }); .identifier { width: 10px; height: 10px; background-color: red; position: absolute; right: 45%; top: 50%; } .series-div { position: absolute; right: 5%; bottom: 30%; } .series-ul li { list-style: none; color: grey; font-size: 1em; font-weight: 600; border: 2px solid grey; display: table; padding: 0.3em 0.1em; text-align: center; margin: 0.5em; cursor: pointer; } #line { position: absolute; width: 2px; margin-top: -1px; background-color: red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="position;relative;"> <div class="identifier" id="div2"></div> <div class="series-div"> <ul class="series-ul"> <li class="seriesli" id="div1">A series</li> <li class="seriesli">B series</li> <li class="seriesli">C series</li> </ul> </div> <div id="line"></div> <img src="https://stat.overdrive.in/wp-content/odgallery/2020/06/57263_2020_Mercedes_Benz_GLS.jpg" class="img-responsive firstcar-detail" style="width: 100%;"> </div>
·
Santiago Trujillo
1 answers
Answer question0
Arreglé tu violín: https://jsfiddle.net/c4ju6a0p/
Cambios de código:
// Get actual position relative to viewport. // See https://stackoverflow.com/a/11396681/117030 fromBCR = from.getBoundingClientRect(); toBCR = to.getBoundingClientRect(); var fT = fromBCR.top + from.offsetHeight / 2; var tT = toBCR.top + to.offsetHeight / 2; // Don't add offsetWidth. This connects to the middle, not the left edge. var fL = fromBCR.left //+ from.offsetWidth / 2; var tL = toBCR.left + to.offsetWidth / 2;- El problema era que la línea se calculaba con una posición incorrecta debido al posicionamiento
relative. Esto se puede ver más claramente cuando se comenta el CSSrelative: https://jsfiddle.net/vust5nxf/ - Además, no agregue
offsetWidthsi desea que la línea vaya al borde izquierdo.
actualización: no noté el fragmento de código ... también apliqué cambios allí. También hice un cambio más:
- Debe pasar el elemento en el que se hizo clic para
adjustLine(), de lo contrario, actualmente la línea se dibuja entre los mismos dos elementos cada vez porque los elementos están codificados con identificadores. - Como nota de estilo: movería la definición de la función
adjustLine()fuera del controlador de clics. Esto hará que el código sea más fácil de leer y la función solo se creará una vez, en lugar de cada vez que se maneje un clic.
adjustLine( this, // Element that was clicked. document.getElementById('div2'), document.getElementById('line') ); $('.seriesli').click(function() { function adjustLine(from, to, line) { // Get actual position relative to viewport. // See https://stackoverflow.com/a/11396681/117030 fromBCR = from.getBoundingClientRect(); toBCR = to.getBoundingClientRect(); var fT = fromBCR.top + from.offsetHeight / 2; var tT = toBCR.top + to.offsetHeight / 2; // Don't add offsetWidth. This connects to the middle, not the left edge. var fL = fromBCR.left //+ from.offsetWidth / 2; var tL = toBCR.left + to.offsetWidth / 2; var CA = Math.abs(tT - fT); var CO = Math.abs(tL - fL); var H = Math.sqrt(CA * CA + CO * CO); var ANG = 180 / Math.PI * Math.acos(CA / H); if (tT > fT) { var top = (tT - fT) / 2 + fT; } else { var top = (fT - tT) / 2 + tT; } if (tL > fL) { var left = (tL - fL) / 2 + fL; } else { var left = (fL - tL) / 2 + tL; } if ((fT < tT && fL < tL) || (tT < fT && tL < fL) || (fT > tT && fL > tL) || (tT > fT && tL > fL)) { ANG *= -1; } top -= H / 2; line.style["-webkit-transform"] = 'rotate(' + ANG + 'deg)'; line.style["-moz-transform"] = 'rotate(' + ANG + 'deg)'; line.style["-ms-transform"] = 'rotate(' + ANG + 'deg)'; line.style["-o-transform"] = 'rotate(' + ANG + 'deg)'; line.style["-transform"] = 'rotate(' + ANG + 'deg)'; line.style.top = top + 'px'; line.style.left = left + 'px'; line.style.height = H + 'px'; } adjustLine( this, // Element that was clicked. document.getElementById('div2'), document.getElementById('line') ); }); .identifier { width: 10px; height: 10px; background-color: red; position: absolute; right: 45%; top: 50%; } .series-div { position: absolute; right: 5%; bottom: 30%; } .series-ul li { list-style: none; color: grey; font-size: 1em; font-weight: 600; border: 2px solid grey; display: table; padding: 0.3em 0.1em; text-align: center; margin: 0.5em; cursor: pointer; } #line { position: absolute; width: 2px; margin-top: -1px; background-color: red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="position;relative;"> <div class="identifier" id="div2"></div> <div class="series-div"> <ul class="series-ul"> <li class="seriesli" id="div1">A series</li> <li class="seriesli">B series</li> <li class="seriesli">C series</li> </ul> </div> <div id="line"></div> <img src="https://stat.overdrive.in/wp-content/odgallery/2020/06/57263_2020_Mercedes_Benz_GLS.jpg" class="img-responsive firstcar-detail" style="width: 100%;"> </div>
·
Santiago Trujillo
Report
Answer question