#javascript #html
#javascript #HTML
Вопрос:
я пытаюсь построить линию (граница справа) в таблице, используя код javascript. Мой код
plotPoints(item, index) {
var myElement = document.querySelector("#image-" item "-" index);
(id is id = "image-0-4")
var position = this.getPosition(myElement);
console.log("The image is located at: " position.x ", " position.y);
var first = index 1;
var second = index 2;
var third = index 3;
var testDiv1 = document.getElementById("p1-" item "-" first);
var position1 = this.getPosition(testDiv1);
console.log("The image is located at 1: " position1.x ", " position1.y);
var testDiv2 = document.getElementById("p1-" item "-" second);
var position2 = this.getPosition(testDiv2);
console.log("The image is located at 1: " position2.x ", " position2.y);
var testDiv3 = document.getElementById("p1-" item "-" third);
var position3 = this.getPosition(testDiv3);
console.log("The image is located at 1: " position3.x ", " position3.y);
}
getPosition(el) {
var xPos = 0;
var yPos = 0;
while (el) {
if (el.tagName == "BODY") {
// deal with browser quirks with body/window/document and page scroll
var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
var yScroll = el.scrollTop || document.documentElement.scrollTop;
xPos = (el.offsetLeft - xScroll el.clientLeft);
yPos = (el.offsetTop - yScroll el.clientTop);
} else {
// for all other non-BODY elements
xPos = (el.offsetLeft - el.scrollLeft el.clientLeft);
yPos = (el.offsetTop - el.scrollTop el.clientTop);
}
el = el.offsetParent;
}
return {
x: xPos,
y: yPos
};
}
Я пытаюсь построить линию для соединения одного и того же блока чисел.Используя функцию позиционирования, получите все позиции блоков x и y.
как построить линию между одним и тем же блоком чисел (например, блоком номер 1 для соединения строк каждого столбца)
Комментарии:
1. Почему бы вам не использовать canvas, SVG или WebGL для этой задачи?
2. В какой-то момент имеет смысл использовать <canvas> и нарисовать все вручную.
3. я пытаюсь без холста. используя позицию, пытаюсь нарисовать границу -правильная линия.
4. Прекратите работу с координатами пикселей. Вместо этого представьте координаты сетки в некотором
data-
атрибуте либо в ваших элементах (желтые разделы), либо в окружающих ячейках таблицы. На основе координат сетки выполните итерацию по всем промежуточным номерам строк и установитеborder-right
свойство css для элементов слева от двух соседних столбцов. Вы можете использоватьquerySelector
и подходящий css-селектор.