河伯特高

HerbertGao 个人主页

利用JQuery和Bresenham直线算法画Table表头斜线

这两天有一项任务,要求我在页面中的表格画一个表头斜线。由于直接在 backgroud 里添加图片的方式在本次项目中行不通,所以只好转向其它方式画线。

关于 Bresenham 算法可以参考维基百科布雷森漢姆直線演算法词条。
下面直接贴代码吧。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
$(function() {
fn();
});

$(window).resize(function() {
fn();
});

function bresenham(x0, y0, x1, y1) {
var px = [];
var y = y0;
var m = Math.round((Math.abs(y1 - y0) / (x1 - x0)) * 100) / 100;
var dely = 0;
for (var j = 0, i = x0; i <= x1; i++, j++) {
px[j] = [i, y];
dely += m;
if (dely >= 0.5) {
y = y + 1;
dely -= 1;
}
}
return px;
}

function fn() {
var ret = [];
var numWidth = $("#oblique").width();
var numLeft = $("#oblique").offset().left;
var numTop = $("#oblique").offset().top;
var arr = bresenham(numLeft, numTop, numLeft + numWidth, numTop + 80);
var x, y;
for (var i = 0; i < arr.length; i++) {
x = arr[i][0];
y = arr[i][1];
ret.push(
' <div style="width:1px;height:1px;font-size:0;background-color:black;position:absolute;left:' +
x +
"px;top:" +
y +
'px"> </div>'
);
}
$("#obliquebox").html(ret.join(""));
}

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table width="100%" style="BORDER-COLLAPSE: collapse">
<tr>
<td width="20%" id="oblique" style="border-bottom: none;">
<div id="obliquebox"></div>
<div>
<div align="right">
A
</div>
<div align="left">
B
</div>
</div>
</td>
</tr>
</table>

欢迎关注我的其它发布渠道