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

发表于 更新于 分类于 本文字数： 1.5k 阅读时长 ≈ 1 分钟

这两天有一项任务，要求我在页面中的表格画一个表头斜线。由于直接在 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>