как нарисовать линию между точками в javascript

#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-селектор.