В настоящее время я пытаюсь провести диагональную линию между нижним правом углом одного div в верхнем правом углу другого. Если возможно, я хотел бы сделать это без jQuery. Возможно ли это?
Как нарисовать линию между двумя div?
Ответ 1
Это не будет работать с IE8 или ниже из-за ограничений 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;
}
- Формула расстояния
- Поиск центра двух точек.
- Поиск угла между двумя точками
- Преобразование CSS: Повернуть
- Смещение элемента HTML [Ширина | Высота | В начало | Влево]
Изменить (для других с той же проблемой):
Если вам нужно, например, создать строку из двух углов, которые не являются верхними правыми и нижними правыми div, перейдите в этот раздел кода:
// 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;
где вы видите + off1.width
и + off1.height
, это означает, что код вычисляет положение нижней или правой части div. Удалите + off1.width
или + off1.height
, чтобы получить левую или верхнюю часть div.
EDIT обновлена до более стандартной функции getOffset. Если вы хотите получить действительно анал, вам, вероятно, также придется добавить document.documentElement.client [Left/Top] и пройти дерево offsetParent, но я думаю, что getBoundingClientRect() и window.page [X/Y] Смещение достаточно для пример, подобный этому.
Ответ 2
Существует способ сделать это без jQ.
- Найдите позицию ваших divs с помощью смещения.
- Найти наклон
- нарисуйте
1x1px
точки от начала до конца с помощью наклона в вашем цикле.
Ответ 3
Используется ли изображение как нижняя граница для этого div-класса? Если ваша диагональная линия всегда должна быть того же размера/цвета и т.д., Это будет вариант без jQuery, который вы могли бы использовать.