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>
数据图表
能很好的做出线图，柱状图，饼状图等
矢量地图等等
分享到：
相关推荐
JavaScript，作为Web开发中的重要脚本语言，可以与VML结合，实现动态的、交互式的流程图绘制。 在JavaScript中，VML主要通过DOM（Document Object Model）操作来实现，可以创建VML元素，设置其属性，以及响应用户的...
在本案例中，"asp.net+vml流程图代码"指的是利用ASP.NET技术和VML（Vector Markup Language）来创建流程图的一种编程实践。VML是一种标记语言，允许在网页上绘制矢量图形，尤其适合在不支持SVG（Scalable Vector ...
EXT 和 VML 是在网页中实现图形界面的两种技术，特别是在创建流程图等可视化元素时。EXT 是一个基于 JavaScript 的富客户端应用框架，提供了一系列组件和工具，用于构建交互式的 Web 应用程序。而 VML（Vector ...
基于EXT vml的流程图的实现
使用vml封装的流程图控件，颜色大写可自动控制。
在这个"vml开发的流程图"项目中，我们可以看到开发者使用JavaScript与VML结合来创建动态和交互式的流程图。 JavaScript是Web开发中的脚本语言，它负责增加网页的动态功能和交互性。在描述中提到的“javascript+vml...
"vml-rose流程图"是一个使用VML技术实现的流程图示例，用于在Web环境中展示流程或工作流的过程。在本项目中，我们可能找到了一个用于绘制类似Rose UML类图的流程图工具或代码库。 在描述中提到的"基于vml的web绘图...
VML做流程图UI层的javascript
实现了vml+html中显示的，并解决了ie浏览器兼容的问题，代码直接运行便好用
通过查看这些文件，我们可以深入理解HTML和VML如何协同工作来呈现定制的工作流程图。 总之，HTML+VML工作流程结合了HTML的网页结构和VML的矢量图形能力，使得开发者能够创建出具有动态效果和交互性的复杂网页应用。...
本项目名为“流程图编辑器--js oop vml”，意味着它是一个基于JavaScript实现的对象导向编程（OOP）项目，使用了Vector Markup Language（VML）来绘制流程图。下面将详细介绍这个项目可能涉及的关键知识点。 **1. ...
vml曲线走势图vml曲线走势图vml曲线走势图vml曲线走势图vml曲线走势图vml曲线走势图vml曲线走势图vml曲线走势图vml曲线走势图vml曲线走势图vml曲线走势图vml曲线走势图vml曲线走势图vml曲线走势图vml曲线走势图vml...
ASP VML走势图是一种基于ASP（Active Server Pages）技术，并结合VML（Vector Markup Language）来创建动态曲线图表的方法。这种技术常用于Web应用中，以便在网页上展示数据的实时变化或者历史趋势，如股票市场、...
在本实例中，我们将深入探讨如何使用VML来实现画流程图。 流程图是一种可视化表示流程或工作流的工具，它通过各种形状和连接线来展示步骤、决策和流程的流向。VML为绘制这些元素提供了丰富的功能，包括线条、矩形、...
它允许开发者通过编程方式控制图形的每一个细节，如线条、形状、颜色和填充。在HTML文件中嵌入VML代码，可以实现动态交互的地图效果，比如点击特定区域弹出信息框，或者通过JavaScript进行更复杂的交互操作。 在...
### 二、VML图形元素 1. **矩形与圆形**：`<rect>`元素用于绘制矩形，`<oval>`元素用于绘制椭圆或圆形，可以通过调整宽高比例来实现。 2. **线条与曲线**：`<line>`绘制直线，`<polyline>`绘制多边形，`...
在"VML.rar_DEMO_VML_vml API_vml包含哪些图_vml教程"这个压缩包中，我们可以期待获取关于VML的基本知识、实例、API介绍以及可能的一些示例图形。以下是一些关于VML的关键知识点： 1. **VML结构**：VML基于XML，...
将输出在页面上的vml图 导出到excel 中的矢量图 可在excel中编辑
VML使用XML语法，通过`<v:shape>`标签定义形状，如矩形，可以用来绘制柱状图的每个柱子。属性包括`id`、`style`、`coordsize`、`path`等，其中`path`用于定义图形的路径，`fillcolor`和`strokecolor`分别设置填充色...