通過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原創,請轉載的時候註明,謝謝