Соедините элементы с одним и тем же классом, используя canvas

Question

Я работаю над таблицей с наборами чисел.

каждый набор имеет одно число с классом «exist», потому что они присутствуют в первом столбце.

То, что я пытаюсь сделать, это соединить эти числа в столбце с помощью строки canvas.

Мне удается получить их позицию, используя offset, но я не знаю, как это реализовать.

Надеюсь, ты меня понимаешь.

Спасибо.

Образец результата

$('table tbody tr').each(function(k, x) {
  $(this).find('td:first-child .rw').each(function(t, u) {
    const n = $(this).text().trim();
    var rw = Array.from(n.toString()).map(Number);
    var $this = $(this);

    for (var i = 0; i < n.length; i++) {
      var char = n.charAt(i);
      var d = $("table tbody tr:eq(" + k + ") td:eq(" + (i + 1) + ") div.rw:eq(" + t + ")");
      d.find("div:eq(" + char + ")").addClass("exist");
    }
  });
});


var canvas = document.getElementById('canvasLines');
var ctx = canvas.getContext('2d');
var Point = function(x,y){
 this.x = x;
 this.y = y;
}

function drawLine(stPoint, endPoint,color){
  ctx.beginPath();
  ctx.moveTo(stPoint.x,stPoint.y);
  ctx.lineTo(endPoint.x,endPoint.y);
  ctx.strokeStyle = color;
  ctx.stroke();
  ctx.closePath();
}

$('table tbody tr td:nth-child(2) .rw div.exist').each(function(i, el) {
    var ex =  $(this).offset();
  
    drawLine(new Point(ex.top,ex.left),new Point(ex.top,ex.left),'red');       

});

table{
	width: 100%;
	border-collapse: collapse;
}
table, td, th{
  border: 1px solid #dadce8;
  text-align: center;
} 

th:first-child, td:first-child{
  width: 50px;
}
th,td{
  width: 180px;
}
.rw div{
  width: 10%;
  float: left;
  line-height: 24px;
}
td:first-child{
  padding-top: 3px;
}
td:first-child .rw{
  height: 24px;
}
td:nth-child(n+2):nth-child(-n+6).rw{
  padding-top: 3px;
  height: 30px;
}
td .rw div.exist{
  background-color: green;
  border-radius: 100px;
  color: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>numbers</th>
      <th>1st</th>
      <th>2nd</th>
      <th>3rd</th>
      <th>4th</th>
      <th>5th</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="rw">
          98371
        </div>
        <div class="rw">
          09827
        </div>
        <div class="rw">
          18276
        </div>
        <div class="rw">
          76591
        </div>
        <div class="rw">
          09832
        </div>
      </td>
      <td>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
      </td>
      <td>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
      </td>
      <td>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
      </td>
      <td>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
      </td>
      <td>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="rw">
          12312
        </div>
        <div class="rw">
          89271
        </div>
        <div class="rw">
          53919
        </div>
        <div class="rw">
          53201
        </div>
        <div class="rw">
          09832
        </div>
      </td>
      <td>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
      </td>
      <td>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
      </td>
      <td>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
      </td>
      <td>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
      </td>
      <td>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

<canvas id="canvasLines" width="600" height="150"></canvas>

Answer 1

Я приведу пример для вас здесь. Это может сделать то, что вы хотите.

Просто изменил его позже, в зависимости от того, что вам нужно / code / css и многое другое. :)

HTML

<canvas id="myCanvas" width="500" height="1000">
<table class="table" style="border-collapse: collapse;border:1px solid #ccc;">
<tr>
    <th>DATA 1</th>
    <th>DATA 2</th>
</tr>
<tr>
    <td>
       <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div class="active">3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
    </td>
    <td>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div class="active">7</div>
          <div>8</div>
          <div>9</div>
        </div>
    </td>
</tr>
<tr>
    <td>
       <div class="rw">
          <div>0</div>
          <div class="active">1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
    </td>
    <td>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div class="active">3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
    </td>
</tr>
<tr>
    <td>
       <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div class="active">8</div>
          <div>9</div>
        </div>
    </td>
    <td>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div class="active">5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
    </td>
</tr>
<tr>
    <td>
       <div class="rw">
          <div class="active">0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
    </td>
    <td>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div class="active">9</div>
        </div>
    </td>
</tr>
<tr>
    <td>
       <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div class="active">6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
    </td>
    <td>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div class="active">5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
    </td>
</tr>
<tr>
    <td>
       <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div class="active">9</div>
        </div>
    </td>
    <td>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div class="active">2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
    </td>
</tr>
</table>
</canvas>

JAVASCRIPT

var c = $("#myCanvas");
var ctx = c.get(0).getContext("2d");
var txt = c.html();
var sty = $('style').text();

var c_h = c.height();
var c_w = c.width();

var pt1 = new Array();
var pt2 = new Array(); 
var fix = 0; // dirty solution for different/gap because of padding/margin or border that have pixel (px). Not too great. but still can do its work. :D

ctx.strokeStyle="red";
$("tr",c).each(function(m,n){

    var temp = "";

    if(m !== 0){ // Skip HEADER (TH)
        if(m === 1){ // 1st row only store the offset. Not create stroke yet
            $("td",this).each(function(x,y){
                pt1.push($(".active",this).offset()); // Store the offset for each td that have active class;
            });
        }else{ // after 1st row, create stroke - from and to

            if(pt2.length){
                temp = pt2;
                pt2 = [];
            }
            else{
                temp = pt1;
                pt1 = [];
            }

            $("td",this).each(function(x,y){
                pt2.push($(".active",this).offset()); // Store the offset for each td that have active class;
            });

            for(var q=0; q<$("td",this).length; q++){
                ctx.beginPath();
                ctx.moveTo(temp[q].left, temp[q].top+fix); // From point (active) 1
                ctx.lineTo(pt2[q].left,pt2[q].top+fix); // To point (active) 2 
                ctx.stroke();
            }
        }

    }

    fix += 3; // dirty solution for different/gap because of padding/margin or border that have pixel (px). Not too great. but still can do its work. :D
});

/*
    Make table as a image type.
*/
var data = "<svg xmlns='http://www.w3.org/2000/svg' width='"+c_w+"' height='"+c_h+"'>" +
             "<foreignObject width='100%' height='100%'>" +
               "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:20px'>"+
               "<style type='text/css'>"+sty+"</style>" +
                    txt +
               "</div>" +
             "</foreignObject>" +
           "</svg>";
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);
};
img.src = url;

Рабочий пример JSFiddle: http://jsfiddle.net/synz/4La50o1j/

Answer 2

Вы можете попробовать этот подход. Сначала найдите позицию вашего div с классом «Существовать». Использование

 var cont = $('.exist');
 var pos0 = $(cont).position();
 var x0 = pos0.left,
    y0 = pos0.top,
    x1 = pos1.left,
    y1 = pos1.top;

Тогда у тебя будут твои координаты. После этого используйте следующую функцию

   line(x0, y0, x1, y1);


function line(x, y, x1, y1) {
    var a = $("<div class='line'>");


    a.css({
        top: y,
        left: x,
        width: Math.sqrt((x1-x)*(x1-x) + (y1 - y)*(y1 - y)),
        transform: 'rotate('+Math.atan2((y1-y),(x1-x))+'rad)'
    });
    cont.append(a);
}

Вы должны зациклить этот код, чтобы рисовать линии. Попробуйте поиграться с этим. Вы должны запустить этот код после рендеринга вашего холста.