Attualmente sto cercando di disegnare una linea diagonale tra l'angolo in basso a destra di un div nell'angolo in alto a destra di un altro. Se possibile, mi piacerebbe farlo senza jQuery. È possibile?Come tracciare una linea tra due div?
questo non funzionerà con IE8 o al di sotto a causa delle limitazioni 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;
}
Modifica (per o thers con lo stesso problema):
Se è necessario, ad esempio, creare una linea da due angoli che non sono il div in basso a destra in alto a destra e, andare a questa sezione del codice:
// 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;
dove si vede + off1.width e + off1.height, ciò significa che il codice sta calcolando la posizione della parte inferiore o destra del div. Rimuovere lo + off1.width o lo + off1.height per ottenere la sinistra o la parte superiore del div.
EDIT aggiornato a una funzione getOffset più standard. Se vuoi diventare veramente anale probabilmente dovresti anche aggiungere document.documentElement.client [Left/Top] e camminare sull'albero offsetParent, ma penso che getBoundingClientRect() e window.page [X/Y] Offset siano sufficienti per un esempio come questo
è una soluzione perfetta per evitare completamente le librerie, anche se è un problema che non funziona in IE. – lincolnk
La funzione getOffset sembra essere difettosa in quanto non ha funzionato con una serie di div sovrapposte posizionate in modo assoluto. Ho sostituito get offset con le funzioni offset/altezza/larghezza jQuery e questo ha funzionato. return {top: $ (el) .offset(). Top, left: $ (el) .offset(). Left, width: $ (el) .width(), height: $ (el) .height() }; –
Soluzione semplice e perfetta! – Prasanna
Si sta utilizzando un'immagine come bordo inferiore per tale classe di divisione fuori dalla domanda? Se la tua linea diagonale deve sempre avere la stessa taglia/colore, ecc ... questa sarebbe un'opzione non jQuery che potresti usare.
Penso che questo sia più un commento che una risposta, penso che tu abbia già abbastanza reputazione per pubblica commenti –
escluso jquery non equivale a escludere del tutto il javascript. – lincolnk
C'è un modo per farlo senza jQ.
1x1px punti dalla posizione iniziale alla posizione finale utilizzando la pendenza del loop.
Quali browser si desidera supportare? Dove sono posizionati questi div in relazione tra loro? – gilly3
Hai problemi specifici con cui hai problemi? in caso contrario, ti rimanderò a http://stackoverflow.com/questions/6278152/drawing-a-line-between-two-draggable-divs che sembra la stessa domanda con l'aggiunta di elementi trascinabili, che puoi ignorare. – lincolnk
Usa SVG per disegnare linee ... È molto più facile ... http://stackoverflow.com/a/35493651/5947203 – Ani