VML勾画流程图(二)VML编程
VML勾画流程图(二)VML编程
official document location:
http://www.w3.org/TR/NOTE-VML
中文教程
http://www.itlearner.com/code/vml/index.html
脚本动态生成VML
主页面用vml.html，里面只定义了group元素，并定义了勾画rect的javascript方法
数据页面用的iframe了页面readData.jsp进来，里面通过调用javascript来画rect，页面代码如下：
vml.html内容如下：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>动态创建VML</title>
</head>
<STYLE>
v\:* {
BEHAVIOR: url(#default#VML)
}
</STYLE>
<script language="JavaScript">
function createPoint(x,y,v)
{
var strElement="<v:rect title='"+v+"' style='top:"+x+";left:"+y+";width:100;height:100'></v:rect>";
var newPoint = document.createElement(strElement);
group1.insertBefore(newPoint);
}
</script>
<body>
<v:group ID="group1" style="WIDTH:200px;HEIGHT:200px;"
coordsize="200,200">
</v:group>
<iframe src="vml/readData.jsp" name="data" style="display: none"></iframe>
</body>
</html>
readData.jsp目前我是写死的，其实javascript里面的内容，可以根据数据库的数据来生成：
<script>
self.parent.createPoint(10,10,"第一方形");
self.parent.createPoint(50,50,"第二方形");
self.parent.createPoint(150,150,"第三方形");
</script>
放大缩小VML
放大和缩小不会改变VML的画质，动态改变大小，只需要改变coordsize的值就行了。改造的放大缩小代码如下：
readData.jsp没有变化，vml.html如下：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>动态创建VML</title>
</head>
<STYLE>
v\:* {
BEHAVIOR: url(#default#VML)
}
</STYLE>
<script language="JavaScript">
function createPoint(x,y,v)
{
var strElement="<v:rect title='"+v+"' style='top:"+x+";left:"+y+";width:120;height:30px'></v:rect>";
var newPoint = document.createElement(strElement);
group1.insertBefore(newPoint);
}
var xx=1000;
var yy=1000;
function zoom(h)
{
group1.coordsize=xx/h+","+yy/h;
group1.title="现在是"+h+"倍图";
}
var dragapproved=false;
var x=y=0;
function move()
{
if(event.button==1 && dragapproved){
var sx=group1.style.posLeft+event.clientX-x;
var sy=group1.style.posTop +event.clientY-y;
x=event.clientX;
y=event.clientY;
group1.style.posLeft=sx;
group1.style.posTop =sy;
}
return false
}
function drags()
{
if(event.button!=1) return
dragapproved=true;
x=event.clientX;
y=event.clientY;
document.onmousemove=move;
}
documentonselectstart=new Function("self.event.returnValue=false");
document.onmousedown=drags;
</script>
<body>
<v:group ID="group1" style="WIDTH:200px;HEIGHT:200px;"
coordsize="200,200">
</v:group>
<br />
<button onclick="zoom(1)">放大 1倍</button><br />
<button onclick="zoom(2)">放大 2倍</button><br />
<button onclick="zoom(3)">放大 3倍</button><br />
<button onclick="zoom(4)">放大 4倍</button><br />
<button onclick="zoom(5)">放大 5倍</button><br />
<button onclick="zoom(6)">放大 6倍</button><br />
<button onclick="zoom(7)">放大 7倍</button><br />
<button onclick="zoom(8)">放大 8倍</button><br />
<button onclick="zoom(9)">放大 9倍</button><br />
<button onclick="zoom(10)">放大10倍</button><br />
<iframe src="vml/readData.jsp" name="data" style="display: none"></iframe>
</body>
</html>
给VML增加事件
当鼠标放到圆上，就跟随鼠标运动，当单击事件发生时，就停止运动，demo.html如下：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style>
v\:* {behavior: url(#default#VML);}
</style>
</head>
<body>
<v:oval id="circle" style="position:relative;width:100;height:80;" onmouseover="move()" fillcolor=red />
<script>
var canmove=false;
function move()
{
circle.style.position="absolute";
canmove=true;
document.onmousemove=new Function("if(canmove){circle.style.posLeft=event.x;circle.style.posTop=event.y;}");
}
document.onclick=new Function("canmove=false");
</script>
</body>
</html>
数据图表
能很好的做出线图，柱状图，饼状图等
矢量地图等等
official document location:
http://www.w3.org/TR/NOTE-VML
中文教程
http://www.itlearner.com/code/vml/index.html
脚本动态生成VML
主页面用vml.html，里面只定义了group元素，并定义了勾画rect的javascript方法
数据页面用的iframe了页面readData.jsp进来，里面通过调用javascript来画rect，页面代码如下：
vml.html内容如下：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>动态创建VML</title>
</head>
<STYLE>
v\:* {
BEHAVIOR: url(#default#VML)
}
</STYLE>
<script language="JavaScript">
function createPoint(x,y,v)
{
var strElement="<v:rect title='"+v+"' style='top:"+x+";left:"+y+";width:100;height:100'></v:rect>";
var newPoint = document.createElement(strElement);
group1.insertBefore(newPoint);
}
</script>
<body>
<v:group ID="group1" style="WIDTH:200px;HEIGHT:200px;"
coordsize="200,200">
</v:group>
<iframe src="vml/readData.jsp" name="data" style="display: none"></iframe>
</body>
</html>
readData.jsp目前我是写死的，其实javascript里面的内容，可以根据数据库的数据来生成：
<script>
self.parent.createPoint(10,10,"第一方形");
self.parent.createPoint(50,50,"第二方形");
self.parent.createPoint(150,150,"第三方形");
</script>
放大缩小VML
放大和缩小不会改变VML的画质，动态改变大小，只需要改变coordsize的值就行了。改造的放大缩小代码如下：
readData.jsp没有变化，vml.html如下：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>动态创建VML</title>
</head>
<STYLE>
v\:* {
BEHAVIOR: url(#default#VML)
}
</STYLE>
<script language="JavaScript">
function createPoint(x,y,v)
{
var strElement="<v:rect title='"+v+"' style='top:"+x+";left:"+y+";width:120;height:30px'></v:rect>";
var newPoint = document.createElement(strElement);
group1.insertBefore(newPoint);
}
var xx=1000;
var yy=1000;
function zoom(h)
{
group1.coordsize=xx/h+","+yy/h;
group1.title="现在是"+h+"倍图";
}
var dragapproved=false;
var x=y=0;
function move()
{
if(event.button==1 && dragapproved){
var sx=group1.style.posLeft+event.clientX-x;
var sy=group1.style.posTop +event.clientY-y;
x=event.clientX;
y=event.clientY;
group1.style.posLeft=sx;
group1.style.posTop =sy;
}
return false
}
function drags()
{
if(event.button!=1) return
dragapproved=true;
x=event.clientX;
y=event.clientY;
document.onmousemove=move;
}
documentonselectstart=new Function("self.event.returnValue=false");
document.onmousedown=drags;
</script>
<body>
<v:group ID="group1" style="WIDTH:200px;HEIGHT:200px;"
coordsize="200,200">
</v:group>
<br />
<button onclick="zoom(1)">放大 1倍</button><br />
<button onclick="zoom(2)">放大 2倍</button><br />
<button onclick="zoom(3)">放大 3倍</button><br />
<button onclick="zoom(4)">放大 4倍</button><br />
<button onclick="zoom(5)">放大 5倍</button><br />
<button onclick="zoom(6)">放大 6倍</button><br />
<button onclick="zoom(7)">放大 7倍</button><br />
<button onclick="zoom(8)">放大 8倍</button><br />
<button onclick="zoom(9)">放大 9倍</button><br />
<button onclick="zoom(10)">放大10倍</button><br />
<iframe src="vml/readData.jsp" name="data" style="display: none"></iframe>
</body>
</html>
给VML增加事件
当鼠标放到圆上，就跟随鼠标运动，当单击事件发生时，就停止运动，demo.html如下：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style>
v\:* {behavior: url(#default#VML);}
</style>
</head>
<body>
<v:oval id="circle" style="position:relative;width:100;height:80;" onmouseover="move()" fillcolor=red />
<script>
var canmove=false;
function move()
{
circle.style.position="absolute";
canmove=true;
document.onmousemove=new Function("if(canmove){circle.style.posLeft=event.x;circle.style.posTop=event.y;}");
}
document.onclick=new Function("canmove=false");
</script>
</body>
</html>
数据图表
能很好的做出线图，柱状图，饼状图等
矢量地图等等