分享到:

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

关于Bresenham算法可以参考维基百科布雷森漢姆直線演算法词条。

下面直接贴代码吧。

javascript

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

<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>