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

在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); } });

实现的效果是这样: