vml是什么,大家自己baidu、google
vml.zip
下圖為用vml在IE瀏覽器下實現的效果圖
ellipserVML.js
//點的對象:
function point(x0,y0)
{
this.x = x0;
this.y = y0;
//向量的模
this.r = Math.sqrt(this.x*this.x+this.y*this.y);
//反余弦函數，反函數的返回數值的單位都為弧度（比如 PI弧度=180度），其中余弦函數cos = x/r
var alfa = Math.acos(this.x/this.r);
if (this.y >= 0) {
alfa = alfa;
} else {
alfa = 2*Math.PI-alfa;
}
//向量的傾角(弧度)
this.alfaR = alfa;
//向量的傾角(角度)
this.alfaD = alfa*180/Math.PI;
}
//畫線條
//id：對象ID；from：起點；to：終點；strokeweight：線條磅數；txt:標注；dashstyle：線條樣式；arrow1：起點鼠標樣式；arrow2：終點鼠標樣式
function lineing(id,from,to,strokeweight,strokecolor,txt,dashstyle,arrow1,arrow2) {
this.id = id;
this.from = from;
this.to = to;
if (strokeweight==undefined)
{
strokeweight = "1";
}
if (strokecolor==undefined)
{
strokecolor = "#00F";
}
//dashstyle= Solid,ShortDash,ShortDot,ShortDashDot,ShortDashDotDot,Dot,Dash,LongDash,DashDot,LongDashDot,LongDashDotDot
if (dashstyle==undefined)
{
dashstyle = "solid";
}
//arrow=None,Block,Classic,Diamond,Oval,Open
if (arrow1==undefined)
{
arrow1 = "";
}
if (arrow2==undefined)
{
arrow2 = "Classic";
}
if (txt==undefined)
{
txt = "";
}
this.strokeweight = strokeweight;
this.strokecolor = strokecolor;
this.dashstyle = dashstyle;
this.startarrow = arrow1;
this.endarrow = arrow2;
this.txt = txt;
//設置線條的長度
this.length = getlinelen;
//畫線
this.draw = drawline;
}
//取得線段的長度:
function getlinelen()
{
if ((this.from.x == this.to.x) && (this.from.y == this.to.y))
{
return 0;
} else
{
return Math.sqrt((this.from.x-this.to.x)*(this.from.x-this.to.x)+(this.from.y-this.to.y)*(this.from.y-this.to.y));
}
}
//畫線函數
function drawline()
{
var str = "";
//畫線條
str = str +"<v:line id=line"+this.id+" style='position:absolute;left:0;top:0;z-index:2' ";
str = str +" from='"+this.from.x+","+this.from.y+"'";
str = str +" to='"+ this.to.x +","+ this.to.y +"' ";
str = str +" strokeweight='"+this.strokeweight+"px;' strokecolor='"+this.strokecolor+"'> ";
str = str +" <v:stroke dashstyle='"+this.dashstyle+"' startarrow='"+this.startarrow+"' endarrow='"+this.endarrow+"' /> ";
str = str +"</v:line>";
//畫線條文字
if(this.txt != "")
{
//因為水平線或垂直線輸出的文本只有一條線，所以讓坐標偏移1個像素；
if(this.from.x == this.to.x)
{
this.to.x += 1;
}
if(this.from.y == this.to.y)
{
this.to.y += 1;
}
str = str +"<v:line style='position:absolute;left:0;top:0;z-index:3;' from='"+this.from.x+","+this.from.y+"'";
str = str +" to='"+ this.to.x +","+ this.to.y +"'>";
str = str + " <v:path textpathok='t'/>";
str = str + " <v:textpath id=linetext"+this.id+" style='font-size:12px;' on='t' fitpath='f' string='" +this.txt+"' />";
str = str +"</v:line>";
}
document.write(str);
}
// 畫橢園:
function ellipsering(id,x0,y0,ra,rb,filled,fillcolor,stroked,strokecolor,strokeweight,rotation,txt, url)
{
if(id == '')
{
id = txt;
url = '';
}
this.id = id;
this.x = x0;
this.y = y0;
this.ra = ra;
this.rb = rb;
this.eleft = x0-ra;
this.etop = y0-rb;
this.ewidth = 2*ra;
this.eheight = 2*rb;
this.filled = filled;
this.fillcolor = fillcolor;
this.stroked = stroked;
this.strokecolor = strokecolor;
this.strokeweight = strokeweight;
this.rotation = rotation;
this.txt = txt;
if (url==undefined)
{
url = "";
}
this.url = url;
this.draw = drawEllipser;
}
//畫橢圓函數
function drawEllipser()
{
var str = "";
str = str +"<v:oval id="+this.id+" ";
str = str +" style='position:absolute; ";
str = str +" left:"+this.eleft+";top:"+this.etop+";width:"+this.ewidth+";height:"+this.eheight+"; ";
str = str +" rotation:"+this.rotation+"fd;z-index:1' ";
//str = str +" onmousedown='down1(this);'";
str = str +" filled='"+this.filled+"' fillcolor="+this.fillcolor+" stroked='"+this.stroked+"' strokecolor="+this.strokecolor+" ";
str = str +" strokeweight="+this.strokeweight+"> ";
str = str +" <v:fill type='gradient' color2='white' angle='180'></v:fill>";
str = str +" <v:stroke dashstyle='solid'/>";
//str = str +" <v:TextBox inset='0,0,0,0'><p style='font-size:12px;' align=center>"+this.txt+"</p></v:TextBox>";
str = str + " <div style='font-size:12px; text-align:center; width:"+this.ewidth+"px; height:"+this.eheight+"px; line-height:"+this.eheight+"px;overflow:hidden;' title='" + this.txt +"'>";
if(this.url == '')
str = str + top(this.txt,6);
else
str = str + "<a href='" + this.url + "' target='_blank'>" + top(this.txt,6) + "</a>";
str = str + " </div>";
//str = str + " <div style='font-size:12px; text-align:center; width:100%; height:100%; line-height:100%;overflow:hidden;'>"+this.txt+"</div>";
str = str +"</v:oval>";
document.write(str);
}
//橢圓a,b中心連線，除橢圓a部分線條:
function DisPnt(a,b)
{
var ab = new point(b.x-a.x,b.y-a.y);
var x2 = a.x + a.ra * Math.cos(ab.alfaR);
var y2 = a.y + a.rb * Math.sin(ab.alfaR);
return new point(x2,y2);
}
//畫兩橢圓間的連接線(不是通過圓心，而是通過圓周)
//一個橢圓a，另一個橢圓b
function Line2Cir(id,a,b,clr,txt)
{
a1 = new DisPnt(a,b);
b1 = new DisPnt(b,a);
var lab1 = new lineing(id,a1,b1,1,clr,txt);
lab1.draw();
return;
}
//截取str字符串前num個字符串
function top(str, num)
{
if(str.length > num)
str = str.substring(0, num-1)+'…';
return str;
}
ellipserVML2.js
var R=25, marginTop = 50, levelSpan = 100, maxWidth = 800, curZoom=1;
var qyUrl = "qy.jsp?DM=";
var personUrl = "person.jsp?IDCard=";
function paintRelations(){
this.pNodes = new Array(); // 節點信息
this.levels = new Array(); // 層信息
this.lines = new Array(); // 連線信息
this.draw = drawPic; // 畫圖
//id:對象ID；name:顯示文本；ntype：0表示個人，1表示企業；level：顯示在第幾層；isnormal：是否有問題；
this.addPNode = function (id,name,ntype, level,isnormal)
{
//如果ID為空，則將ID置為NAME
if(id == "")
{
id = name;
}
for(var j=0; j<this.pNodes.length; j++)
{
if(this.pNodes[j].id == id)
return;
}
var pnode = new Object();
pnode.id = id;
pnode.name = name;
pnode.ntype = ntype;
pnode.level = level;
pnode.isnormal = isnormal;
var i = 0;
for(i=0; i<this.levels.length; i++)
{
if(this.levels[i].level == level)
{
this.levels[i].nodeArr = this.levels[i].nodeArr + "," + this.pNodes.length;
break;
}
}
if(i == this.levels.length)
{
var levelObj = new Object();
levelObj.level = level;
levelObj.nodeArr = "" + this.pNodes.length;
this.levels[this.levels.length] = levelObj;
}
//零層節點不加鏈接，id=name的節點也不加鏈接
if(id == name || level==0)
pnode.url = '';
else if(pnode.ntype == 1)
pnode.url = qyUrl+id;
else
pnode.url = personUrl+id;
//添加橢圓對象至節點
//pnode.ellipser = obj;
this.pNodes[this.pNodes.length] = pnode;
}
//id1:對象1ID；name1:對象1name；id2:對象2ID；name2:對象2name；d：方向； txt：標注；
this.addLine = function(id1, name1, id2, name2, d, txt)
{
//如果ID為空，則將ID置為NAME
if(id1 == "")
{
id1 = name1;
}
if(id2 == "")
{
id2 = name2;
}
var lineObj = new Object();
var obj1, obj2;
for(var j=0; j<this.pNodes.length; j++)
{
if(this.pNodes[j].id == id1)
obj1 = this.pNodes[j];
if(this.pNodes[j].id == id2)
obj2 = this.pNodes[j];
}
if(d == undefined)
{
d = 0;
}
if(d == 0)
{
lineObj.from = obj1;
lineObj.to = obj2;
}
else
{
lineObj.from = obj2;
lineObj.to = obj1;
}
lineObj.txt = txt;
this.lines[this.lines.length] = lineObj;
}
}
//畫線函數
function Line2Node(i, a, b, txt)
{
Line2Cir(i,a.ellipser,b.ellipser,"#777", txt);
}
//畫圖
function drawPic()
{
//根據層，畫所有的節點
for(var j=0; j<this.levels.length; j++)
{
var level = this.levels[j].level;
var levelNodeArr = this.levels[j].nodeArr.split(",");
var y = marginTop + levelSpan * level;
for(var i=0; i<levelNodeArr.length; i++)
{
var pnode = this.pNodes[levelNodeArr[i]];
var x = maxWidth*(i+1)/(levelNodeArr.length+1);
var ra = R;
if(pnode.ntype == 1)//如果是企業，則用橢圓顯示
{
ra = 3*R/2;
}
var rb = R;
var filledColor = "#00ff00";
if(pnode.isnormal == 0) //有問題企業或個人
{
filledColor = "#ff0000";
}
var obj = new ellipsering(pnode.id, x, y, ra, rb, "t",filledColor, "t", "#FF0000",-1,"0,0", pnode.name, pnode.url);
obj.draw();
//添加橢圓對象至節點
pnode.ellipser = obj;
}
}
//畫所有的連線
for(var j=0; j<this.lines.length; j++)
{
var lineObj = this.lines[j];
Line2Node(j, lineObj.from, lineObj.to, lineObj.txt)
}
}
//放大縮小函數
function zoom(val)
{
var zoomval = 0.1;
if(val=="zoomin")
{
zoomval = 1-zoomval;
}
else
{
zoomval = 1+zoomval;
}
curZoom = curZoom*zoomval;
var obj = document.getElementById("group1");
obj.coordsize = 800/curZoom+","+800/curZoom;
for(var i=0;i<document.all.tags("div").length;i++)
{
var swidth = document.all.tags("div").item(i).style.width;
var dwidth = swidth.substring(0, swidth.length-2);
document.all.tags("div").item(i).style.width = (dwidth*zoomval) + "px";
var sheight = document.all.tags("div").item(i).style.height;
var dheight = sheight.substring(0, sheight.length-2);
document.all.tags("div").item(i).style.height = (dheight*zoomval) + "px";
document.all.tags("div").item(i).style.lineHeight = (dheight*zoomval) + "px";
document.all.tags("div").item(i).style.fontSize= (12*curZoom) + "px";
}
for(var i=0; i<a.lines.length; i++)
{
var obj = document.getElementById("linetext"+i);
obj.style.fontSize= (12*curZoom) + "px";
}
}
test.html
<html xmlns:v>
<style>
v\:*{behavior:url(#default#VML);}
</style>
<script language='javascript' type="text/javascript" src="ellipserVML.js"></script>
<script language='javascript' type="text/javascript" src="ellipserVML2.js"></script>
<body>
<div id="tt"></div>
<table width="800" cellpadding="0" cellspacing="0" border="1" align="center">
<tr>
<td>
<v:group id="group1" style="width:800; height:800;" coordsize="800,800">
<script>
var a = new paintRelations();
//id:對象ID；name:顯示文本；ntype：0表示個人，1表示企業；level：顯示在第幾層；isnormal：是否有問題；
a.addPNode("aa", "張三", 0, 0, 0);
a.addPNode("bb", "企業B", 1, 1, 0);
a.addPNode("oo", "企業C", 1, 1, 0);
a.addPNode("dd", "企業D", 1, 1, 0);
a.addPNode("ee", "李四", 0, 2, 1);
a.addPNode("ff", "企業F", 1, 2, 1);
a.addPNode("gg", "王五", 0, 2, 1);
a.addPNode("xx", "root", 0, 3, 2);
a.addPNode("mm", "child", 0, 4, 2);
//id1:對象1ID；name1:對象1name；id2:對象2ID；name2:對象2name；d：方向； txt：標注；
a.addLine("aa", "張三", "bb", "企業B", 0, "投資");
a.addLine("aa", "張三", "oo", "企業C", 0, "投資");
a.addLine("aa", "張三", "dd", "企業D", 0, "法人");
a.addLine("oo", "張三", "ff", "企業D", 0, "法人");
a.addLine("bb", "企業", "ee", "李四", 0, "投資");
a.addLine("bb", "企業", "ff", "企業F", 0, "投資");
a.addLine("dd", "企業", "gg", "企業F", 0, "投資");
a.addLine("dd", "企業", "gg", "企業F", 0, "投資");
a.addLine("xx", "企業", "mm", "企業F", 0, "理財");
a.addLine("ee", "企業", "mm", "企業F", 0, "理財");
a.addLine("ff", "企業", "xx", "企業F", 0, "理財");
a.addLine("xx", "企業", "mm", "企業F", 0, "理財");
a.addLine("gg", "企業", "mm", "企業F", 0, "理財");
a.addLine("dd", "企業", "ff", "李四", 0, "投資");
a.draw();
</script>
</v:group>
</td>
</tr>
</table>
<center>
<input type="button" name="zoominBut" value="縮小" onclick="zoom('zoomin');"/><input type="button" name="zoomoutBut" value="放大" onclick="zoom('zoomout');"/>
</center>
</body>
</html>
vml.zip