1. 技术文章
  2. Connect elements with same class using canvas

Connect elements with same class using canvas

由 ▼魔方 西西 提交于 2019-12-24 21:33:07

问题


I'm working on a table that has sets of numbers.

every set has one number with class 'exist' because the are present on the first column.

What I'm trying to do is, to connect those numbers per column using canvas line.

I manage to get their position using offset but don't know how to implement it.

Hope you understand me.

Thanks.

Sample Result

$('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>

回答1:


You can try this approach. First get position of your div with class 'exist'. Using 

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

Then You will have your co-ordinates. After that use following function 

   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);
}

You must loop this code in order to draw lines. Try Playing around with this. You must run this code after your canvas is rendered.




回答2:


I make some example for you here. This can do something like you want it.

Just modified it later according what you need/code/css and more. :)

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 working example : http://jsfiddle.net/synz/4La50o1j/



来源：https://stackoverflow.com/questions/52049745/connect-elements-with-same-class-using-canvas

标签
javascript
jquery
canvas
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!