使用canvas连接具有相同类的元素
我正在制作一组包含数字的表格。
每个集都有一个数字，类’存在’，因为它存在于第一列。
我要做的是，使用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; }
numbers 1st 2nd 3rd 4th 5th 98371 09827 18276 76591 09832 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 12312 89271 53919 53201 09832 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9
你可以尝试这种方法。 首先通过“存在”类来获得div的位置。 运用
var cont = $('.exist'); var pos0 = $(cont).position(); var x0 = pos0.left, y0 = pos0.top, x1 = pos1.left, y1 = pos1.top;
然后你将有你的坐标。 之后使用以下function
line(x0, y0, x1, y1); function line(x, y, x1, y1) { var a = $(""); 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); }
您必须循环此代码才能绘制线条。 试着玩这个。 渲染canvas后必须运行此代码。
我在这里为你做一些例子。 这可以做你想要的事情。
稍后根据您的需要/ code / css等修改它。 🙂
HTML
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 = ""; 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/