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

durendong

在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原创,请转载的时候注明,谢谢