IE下使用JavaScript画直线

因为项目的需求,需要在客户端绘制直线,以达到2点连线的情况。首先想到的就是使用JS了。百度里面Google了下,用JS画直线可以实现,但问题比较大,最简单的就是使用IE的VML画直线,在非IE下基本上都是使用HTML5画直线或形状。

先看下下面的例子

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"><!--这里需要引入vml-->
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
    v\:*{behavior:url(#default#VML);}/*这里需要定义样式,IE8下有所改变,下文提到*/
</style>
</head>
<body>
<v:line
from='200,200' <!--说是直线,实际上是线段,通过2个点来确定直线,这里是始点-->
to='600,100' <!--指定线段的终点-->
style='position:absolute;z-index:8'> <!--CSS样式-->
<v:stroke EndArrow="Classic"/><!--这里指定终点的样式,Classic就是箭头-->
</v:line>
</body>
</html>

测试上面的代码,放在IE下浏览,应该看到了一条带箭头的直线。看了上面的注释,应该多少了解一点。这里是使用的纯HTML方式画的直线。

什么是VML

VML的全称是Vector Markup Language(矢量可标记语言),矢量的图形,意味着图形可以任意放大缩小而不损失图形的质量,这在制作地图上有很大用途。在VML里面,标记使用的是XML扩张,需要一个namespace(命名空间),你可以使用惯用的“v”作为命名空间。VML不仅可以用来画直线,对于矩形、圆形、图像等都可以简单的实现。具体的可以参考下面的几个文档:

VML基本概念:http://www.cnblogs.com/zr824946511/archive/2010/02/25/1673520.html

VML中文手册:http://www.itlearner.com/code/vml/(须使用IE访问,否则不能看到实例效果)

特别的IE8+

jucelin也是刚刚能基本实现画直线的效果,可测试时发现IE8下面居然一片空白,百度里面Google了一下,发现IE8对VML进行了修改,所以蛋疼的问题又出来了。本来不同内核的浏览器下实现方式就不同,不同的IE还有不同的设计要求。伤不起。。。

IE8修改的地方:E文 http://ajaxian.com/archives/the-vml-changes-in-ie-8

译文:http://www.cnblogs.com/mingle/archive/2009/10/18/1585651.html

JS实现画直线

既然在IE8+下会有不同的设计方法,那么在写的时候也一起加上吧。实际上JS实现比较简单,下面是jucelin写的一段,贴出来分享下,希望得到高手的指导。

<html xmlns:v= "urn:schemas-microsoft-com:vml ">
<head>
<title>IE下使用JavaScript画直线-Power by jucelin</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<style>
v\:*{behavior:url(#default#VML);}
</style>
<script language="javascript">
function showline(){
	var v=document.createElement("<v:line></v:line>");
	var t=document.createElement("v:Stroke");
	//v.style="z-index:5;position:absolute;left:200;top:200";
	v.to="150,100";
	v.from="0,0"
	v.strokecolor="red";
	v.strokeweight="2px";
	t.EndArrow="Classic";
	v.appendChild(t);
	document.getElementById("id1").appendChild(v);
}
</script>
</head>
<body onLoad="showline()">
<div id="id1">
<!-- 上面的JS就是根据下面这段代码原型写的
	<v:line style="z-index:5;position:absolute;left:200;top:200" to= "0,150" strokecolor= "red" strokeweight= "2px">
	<v:Stroke dashstyle="shortdot" endarrow='classic'/>
	</v:line>
-->
</div>
<div style="font-size:22px; z-index:99">
<span style="z-index:100">123</span><span style="color:green; z-index:101; margin-left:-15px;">好</span>
</div><
</body></html>

为了使IE8下有效果,就在上面的代码上加了下面的一句话,以强制IE8+下显示IE7下的效果

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

上面的代码在IETest中测试通过,非IE下无效果(虽然知道不能实现,但还是抱着一点运气,呵呵)。

上面的代码中我还注释掉了一段代码,v.style在设置之后会提示找不到属性,jucelin现在不明白到底怎么回事。另外测试上面的代码还发现了奇怪的问题,我并没设置直线的style,而它的z-index属性仍然是最高的,而且<div id=”id1″>的position的属性是absolute。

再修改<div id=”id1″>的CSS属性

<div id="id1" style=" background:#000000; border:10px solid #000;">

显示的就是上面图2 的内容,具体是意义,其实也只是证实上一段的内容。

非IE浏览器下实现JS画直线

今天test到现在其实也就测试了IE下的,非IE下的基本上都是说通过HTML5来实现,具体的可以参考下面的一些文档:

在Firefox下画直线:http://www.cnblogs.com/youring2/archive/2009/07/25/1530862.html

HTML5教程:http://www.w3school.com.cn/html5/index.asp

HTML5绘图元素Canvas的使用说明:http://www.w3school.com.cn/html5/html_5_canvas.asp
上面提供的代码jucelin在chrome11.0,Firefox3.0,Opera11.52下均测试可以,因为这些浏览器都已经支持HTML5了,IE8目前还不支持HTML5的全部元素,希望IE9众望所归。

使用jQuery画直线

既然上面讨论了不同的浏览器有不同的设计方式,特别是蛋疼的IE,那么大虾们肯定会想到兼容所有的代码,jucelin首先想到的就是jQuery,呵呵,主要是jQuery可以解决很多兼容性的问题。

这里也不多说,因为我也还没研究,发现很多的插件很强大,如果只是用来画直线,都有点大材小用了。有时间的朋友可以参考下面写jQuery插件,我也会再看看,俺只要画直线,呵呵。

10 jQuery Drawing Plugins:http://www.jquery4u.com/plugins/10-jquery-drawing-plugins/

写在最后的话

1. 痛恨IE9之前的版本,因为它很蛋疼。

2. 在找资料的时候看到有点人提供了纯JS的方式,其实就是画点成线的原理来画“直线”,这样的方式很容易理解,写起来也比较简单,但关键是效率比较低,如果直线很长,就会很明显的增加IE的劳动量,用户体验很差。这个方法只能说在短距离,直线数目少的情况下考虑使用。

3. IE独有的VML很强大,使用起来速度一流,但多版本的设计确实让设计者很头疼。如果产品只是在IE下使用,jucelin还是推荐使用VML画直线。

4. 突然突然突然发现IETest和DW8有冲突,为了测试IE8下效果,电脑死机了2次,泪奔啊。。。

本文固定链接: https://jucelin.com/draw-line-by-js-in-ie.html | Jucelin

该日志由 jucelin 于2011年11月23日发表在 前端设计 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: IE下使用JavaScript画直线 | Jucelin
关键字: , , , , , ,

IE下使用JavaScript画直线:沙发还在为你留着呢!!

发表评论

您必须 [ 登录 ] 才能发表留言!

更多