通过javascript 框架 Jquery 实现跨浏览器 画直线 斜线等线段

在web界面上面画直线和斜线一直都是一个很麻烦的事情,之前大部分实现这个效果都是借助Vml等方式去做的,这种方式画出来的斜线有一个问题,就是没办法做到浏览器兼容,因此,我想了另一种方式在实现这个效果.

首先,我们知道Vml的实现思路是得到2个点的坐标,然后把他们连起来,组成一个线段,那么我这个方法也是这么想的,我得到2个点的坐标之后,不用vml这些工具,而是把他们之间的距离用很多个点来渲染出来,具体的步骤如下:

1.得到2个点的坐标($left,$top,endleft,endtop)

2.通过这2个点的坐标计算他们之间的距离

3.每隔一点距离增加一个div,每一个div都用来表示一个点

实现思路的代码如下:

$div.toggle(function(event) {
				var $divs = $("<div style="background-color: red;z-index: 2"></div>");
				$left = event.clientX;
				$top = event.clientY;
				$divs.css("left",event.clientX);
				$divs.css("top",event.clientY);
				$divs.css("height","2px");
				$divs.css("width","2px");
				$divs.css("position","absolute");
				$div.append($divs);
			},function(event) {
				var endleft = event.clientX;
				var endtop = event.clientY;
				var tops = $top;
				for(var i = $left;i<=endleft;i++) {
					
					var $divs = $("<div style="background-color: red;z-index: 2"></div>");
					$divs.css("left",i);
					tops += 1;
					$divs.css("top",tops);
					$divs.css("height","2px");
					$divs.css("width","2px");
					$divs.css("position","absolute");
					$div.append($divs);
				}
			});

实现的效果是这样:

当然,这只是一个思路,用来看看效果就行了,用的时候,还需要根据实际情况修改

最后声明,本文章为杜仁栋在csdn原创,请转载的时候注明,谢谢