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

杜仁栋

于 2010-12-15 14:59:00 发布

阅读量6.4k

点赞数

分类专栏： jquery javascript 文章标签： javascript 浏览器 jquery 框架 function div

本文链接：https://blog.csdn.net/durendong/article/details/6077701

版权

本文介绍了一种使用JavaScript框架jQuery在web界面上实现跨浏览器画直线和斜线的方法。通过获取两个点的坐标，计算它们之间的距离，并在每个间隔点处创建一个div来模拟线段。代码示例展示了如何在鼠标点击和释放事件中动态创建div以绘制线条。此方法避免了Vml等不兼容所有浏览器的问题。

摘要由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 =