Actualmente estoy tratando de dibujar una línea diagonal entre la esquina inferior derecha de un div a la esquina superior derecha de otro. Si es posible, me gustaría hacerlo sin jQuery. es posible?¿Cómo dibujar una línea entre dos divs?
Esto no va a funcionar con Internet Explorer 8 o por debajo debido a las limitaciones de CSS.
function getOffset(el) {
var rect = el.getBoundingClientRect();
return {
left: rect.left + window.pageXOffset,
top: rect.top + window.pageYOffset,
width: rect.width || el.offsetWidth,
height: rect.height || el.offsetHeight
};
}
function connect(div1, div2, color, thickness) { // draw a line connecting elements
var off1 = getOffset(div1);
var off2 = getOffset(div2);
// bottom right
var x1 = off1.left + off1.width;
var y1 = off1.top + off1.height;
// top right
var x2 = off2.left + off2.width;
var y2 = off2.top;
// distance
var length = Math.sqrt(((x2-x1) * (x2-x1)) + ((y2-y1) * (y2-y1)));
// center
var cx = ((x1 + x2)/2) - (length/2);
var cy = ((y1 + y2)/2) - (thickness/2);
// angle
var angle = Math.atan2((y1-y2),(x1-x2))*(180/Math.PI);
// make hr
var htmlLine = "<div style='padding:0px; margin:0px; height:" + thickness + "px; background-color:" + color + "; line-height:1px; position:absolute; left:" + cx + "px; top:" + cy + "px; width:" + length + "px; -moz-transform:rotate(" + angle + "deg); -webkit-transform:rotate(" + angle + "deg); -o-transform:rotate(" + angle + "deg); -ms-transform:rotate(" + angle + "deg); transform:rotate(" + angle + "deg);' />";
//
// alert(htmlLine);
document.body.innerHTML += htmlLine;
}
Editar (para o tros con el mismo problema):
Si es necesario, por ejemplo, crear una línea de dos esquinas que no son la parte superior derecha y divs abajo a la derecha, vaya a esta sección del código:
// bottom right
var x1 = off1.left + off1.width;
var y1 = off1.top + off1.height;
// top right
var x2 = off2.left + off2.width;
var y2 = off2.top;
donde ve + off1.width y + off1.height, eso significa que el código está calculando la posición de la parte inferior o derecha del div. Elimine + off1.width o + off1.height para obtener la parte superior o izquierda del div.
EDIT actualizado a una función getOffset más estándar. Si quieres obtener realmente anal, probablemente también deberías agregar document.documentElement.client [Left/Top] y recorrer el árbol offsetParent, pero creo que getBoundingClientRect() y window.page [X/Y] Offset son suficientes para un ejemplo como este.
que es una solución ordenada para evitar las bibliotecas por completo, aunque es una lástima que no funcionará en IE. – lincolnk
La función getOffset parece defectuosa, ya que no funcionó con un montón de divs superpuestos absolutamente posicionados. Reemplacé get offset con las funciones jQuery offset/height/width y funcionó. return {top: $ (el) .offset(). Arriba, izquierda: $ (el) .offset(). Left, ancho: $ (el) .width(), height: $ (el) .height() }; –
¡Solución simple y perfecta! – Prasanna
¿Está usando una imagen como borde inferior para esa clase de div sin la pregunta? Si su línea diagonal siempre tiene que ser del mismo tamaño/color, etc., sería una opción no jQuery que podría usar.
Creo que esto es más un comentario que una respuesta, creo que ya tienes suficiente reputación para publicar comentarios –
excluyendo jquery no es lo mismo que excluir Javascript por completo. – lincolnk
Hay una forma de hacerlo sin jQ.
1x1px puntos desde la posición de inicio hasta el final usando la pendiente en el circuito.
¿Qué navegadores quieres mantener? ¿Dónde están estos divs posicionados en relación el uno con el otro? – gilly3
¿Tiene problemas específicos con los que tiene problemas? si no, lo referiré a http://stackoverflow.com/questions/6278152/drawing-a-line-between-two-draggable-divs que parece la misma pregunta con la adición de elementos arrastrables, que usted puede ignorar. – lincolnk
Usar SVG para dibujar líneas ... Es mucho más fácil ... http://stackoverflow.com/a/35493651/5947203 – Ani