Connect Elements With Same Class Using Canvas

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

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


functionline(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.

Solution 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

<canvasid="myCanvas"width="500"height="1000"><tableclass="table"style="border-collapse: collapse;border:1px solid #ccc;"><tr><th>DATA 1</th><th>DATA 2</th></tr><tr><td><divclass="rw"><div>0</div><div>1</div><div>2</div><divclass="active">3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div></div></td><td><divclass="rw"><div>0</div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><divclass="active">7</div><div>8</div><div>9</div></div></td></tr><tr><td><divclass="rw"><div>0</div><divclass="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><divclass="rw"><div>0</div><div>1</div><div>2</div><divclass="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><divclass="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><divclass="active">8</div><div>9</div></div></td><td><divclass="rw"><div>0</div><div>1</div><div>2</div><div>3</div><div>4</div><divclass="active">5</div><div>6</div><div>7</div><div>8</div><div>9</div></div></td></tr><tr><td><divclass="rw"><divclass="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><divclass="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><divclass="active">9</div></div></td></tr><tr><td><divclass="rw"><div>0</div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><divclass="active">6</div><div>7</div><div>8</div><div>9</div></div></td><td><divclass="rw"><div>0</div><div>1</div><div>2</div><div>3</div><div>4</div><divclass="active">5</div><div>6</div><div>7</div><div>8</div><div>9</div></div></td></tr><tr><td><divclass="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><divclass="active">9</div></div></td><td><divclass="rw"><div>0</div><div>1</div><divclass="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 = newArray();
var pt2 = newArray(); 
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 toif(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>";
varDOMURL = self.URL || self.webkitURL || self;
var img = newImage();
var svg = newBlob([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/