VML入门

最新推荐文章于 2012-05-31 23:01:53 发布
最新推荐文章于 2012-05-31 23:01:53 发布
阅读量1.1k 收藏
点赞数
分类专栏： web前段技术 JavaScript 文章标签： function 图形 javascript 工具 behavior html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zwseaman/article/details/4060477
版权 

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head >
    <title>vmlGIS学习</title>
    <style>
	 v\:* { Behavior: url(#default#VML) }
	</style>
</head>
<body onselectstart="return false;" οncοntextmenu="return false;" >
<div id="info"></div>
<div>
<div style="color:#ff6666">工具栏：单击选择相应的图形</div>
<!--------------------------- 工具栏 start ----------------->
 <v:group id="toolbar" coordorigin="0,0" coordsize="400,800" style="width:200px;height:30px;position:relative;"
    οnclick="selectShape()">
  <v:roundRect style="position:relative;width:800px;height:800px;">
     <v:stroke color="#ffbbbb" weight="2px" arcsize="0.8"/>
     <v:fill color="#ffeeee" opacity="0.8"/>
  </v:roundRect>
  <v:line from="20,100" to="20,700" style="position:relative;" strokeColor="red" strokeWeight="2px" />
  <v:polyline points="40,100 40,700 55,250" style="position:relative;" strokeColor="red" strokeWeight="2px"/>
  <v:rect style="position:relative;width:30;height:600;left:70;top:100;">
     <v:stroke color="#ff0000" weight="2px"/>
     <v:fill color="#ffeeee" opacity="0.8"/>
  </v:rect>
  <v:roundRect style="position:relative;width:30;height:600;left:120;top:100;">
     <v:stroke color="#ff0000" weight="2px" />
     <v:fill color="#ffeeee" opacity="0.8"/>
  </v:roundRect>
 <v:oval style="position:relative;width:50;height:600;left:160;top:100;">
     <v:stroke color="#ff0000" weight="2px" />
     <v:fill color="#ffeeee" opacity="0.8"/>
  </v:oval>
 </v:group>
 <div style="display:inline;padding:10px;height:20px;">
    <input type="button" value="清除" style="border:solid 2px #ffbbbb;background:#FFFFFF;color:red;" οnclick="clearAll()"/>
	<input type="button" value="保存到C盘" style="border:solid 2px #ffbbbb;background:#FFFFFF;color:red;" οnclick="saveAll()"/>
	文件名
	<input id="filename" type="text" value="demo" style="border:solid 2px #ffbbbb;background:#FFFFFF;color:red;" />

</div>
 <!------------------------ 工具栏 end -------------------->
 <!------------------------- 画板 start ------------------->
 <v:group id="map" coordorigin="0,0" coordsize="800,500" style="width:800px;height:500px;position:relative;left:0px;top:0px">
  <!-- 线 -->
  <v:line id="line" from="0,0" to="20,700" style="position:relative;display:none;">
     <v:stroke opacity="0.5" Color="red" Weight="2px"/>
  </v:line>
  <!-- 折线 -->
  <v:polyline id="polyline" points="0,0" style="position:relative;display:none;" strokeColor="red" strokeWeight="2px"/>
  <!-- 方形 -->
  <v:rect id="rect" style="position:relative;display:none;">
     <v:stroke color="#ff0000" weight="2px"/>
     <v:fill color="#ffeeee" opacity="0.8"/>
  </v:rect>
  <!-- 圆角方形 -->
  <v:roundRect id="roundrect" style="position:relative;display:none;">
     <v:stroke color="#ff0000" weight="2px" />
     <v:fill color="#ffeeee" opacity="0.8"/>
  </v:roundRect>
  <!-- 圆形 -->
 <v:oval id="oval" style="position:relative;display:none;">
     <v:stroke color="#ff0000" weight="2px" />
     <v:fill color="#ffeeee" opacity="0.8"/>
  </v:oval>
 </v:group>
 <!------------------- 画板 end ---------------------->
</div>  
<script language="javascript" type="text/javascript">
  var $ = function(o){
      return document.getElementById(o);
  };
  var shapeTag  = 'line';
  var weight = '2px';
  var color  = '#000000';
  var mouseDown = false;
  var shapeList = new Array();
  var shiftDown = false;
  var lineList = new Array();
  var polyStart = true;
  var startX,startY;//鼠标按下的初始坐标
  window.onload = function(){
	  //画板背景
	  var rectStr =  ' <v:roundRect style="position:relative;width:800px;height:800px;z-index:2"'
		  rectStr += ' strokeColor="#ffaaaa" strokeweight="2px" arcsize="0.02">'
		  rectStr += ' <v:fill color="red" opacity="0.1"/>'
		  rectStr += ' </v:roundRect>'
	  $('map').insertAdjacentHTML('beforeEnd', rectStr);
	  var newShape = {};
	  $('map').attachEvent('onmousedown',function(){
		  if(window.event.button == '1'){
			  mouseDown = true;
		      initShape($(shapeTag),window.event);
		  }
	  });
	  $('map').attachEvent('onmousemove',function(){
		  if(mouseDown)drawShape($(shapeTag),window.event);
	  });
	  $('map').attachEvent('onmouseup',function(){
		  mouseDown = false;
		 $('map').appendChild(creatNewShape($(shapeTag),window.event)); 
	  });
	  document.attachEvent('onkeydown',function(){
		  //alert(event.keyCode);
		  if( event.keyCode == "16")shiftDown = true;
	  });
	  document.attachEvent('onkeyup',function(){
		  //alert(event.keyCode);
		  shiftDown = false;
	  });
  };
  var selectShape = function(){
      shapeTag = event.srcElement.tagName;
  };
  
  var initShape = function(o,e){
      switch(o.tagName.toLowerCase()){
	      case 'line':
              o.from = e.offsetX+','+e.offsetY;
			  o.to   = e.offsetX+','+e.offsetY;
		      break;
		  case 'rect':
		  case 'roundrect':
		  case 'oval':
		      with(o.style){
				 left = e.offsetX;
				 top  = e.offsetY;
				 width = 0;
				 height = 0;
		         startX = parseInt(left);
				 startY = parseInt(top);
			 }
			  break;
   	      case 'polyline':
		         o = $('line');
				 if(polyStart == true){
				    polyStart = false;
                    o.from = e.offsetX+','+e.offsetY;
			        o.to   = e.offsetX+','+e.offsetY;

				 }else{
				    var line = document.createElement('v:line');
					line.from = o.from;
					line.to = o.to;
					line.strokeWeight = o.strokeWeight;
					lineList.push(line);
					$('map').appendChild(line);
				 }
			     
			  break;
	  }
      o.style.display = 'block';
  };
  var drawShape = function(o,e){
     if(mouseDown){
		 switch(o.tagName.toLowerCase()){
			 case 'line':
				 o.to = e.offsetX +','+ e.offsetY ;
				 break;
			 //  画圆形和方形的方向判断
			 case 'rect':
             case 'roundrect':
			     calcCoordinate(o,e);
				 o.style.width = Math.abs(e.offsetX - startX);
				 o.style.height  = Math.abs(e.offsetY - startY);
				 break;
             case 'oval':
			     calcCoordinate(o,e);
				 //如果按下了shift键则表示画圆形
				 if(shiftDown){ 
					 var tempX = Math.abs(e.offsetX - startX);
					 var tempY = Math.abs(e.offsetY - startY);
				     if(tempX > tempY ){
					     o.style.width = tempX;
				         o.style.height  = tempX;
					 }else{
					     o.style.width = tempY;
				         o.style.height  = tempY;
					 }
					 
				 }else{
				     o.style.width = Math.abs(e.offsetX - startX);
				     o.style.height  = Math.abs(e.offsetY - startY);
				 }			     
				 break;
		     case 'polyline':
			     o = $('line');
                 o.to = e.offsetX +','+ e.offsetY ;
			     break;
		 }   
	 }
	 //内部公用函数，计算形状的顶点坐标(left,top属性)
	 function calcCoordinate(o,e){
       //  第一象限 
				 if(e.offsetX > startX && e.offsetY < startY){
					 o.style.left = startX;
					 o.style.top  = e.offsetY;
				 }
				 //  第二象限
				 else if(e.offsetX > startX && e.offsetY > startY){
				     o.style.left = startX;
					 o.style.top  = startY;
				 }
				 //  第三象限
				 if(e.offsetX < startX && e.offsetY > startY){
					 o.style.left = e.offsetX;
					 o.style.top  = startY;
				 }
				 //  第四象限
				 else if(e.offsetX < startX && e.offsetY < startY){
					 o.style.left = e.offsetX;
					 o.style.top  = e.offsetY;
				 }
     }
  };
  
  /*---------------------------------------------------------------------
         新建的图形必须放在画板下面，否则鼠标的onmouseover事件会被干扰 
   ---------------------------------------------------------------------*/
  var creatNewShape = function(o,e){
	 o.style.display = 'none';
	 var shape = document.createElement('v:'+o.tagName);
	 switch(o.tagName.toLowerCase()){
	     case 'line':
			 shape.from = o.from ;
			 shape.to = o.to;
			 break;
		 case 'rect':
		 case 'roundrect':
		 case 'oval':
			 with(shape.style){
				 left = o.style.left;
				 top  = o.style.top;
				 width = o.style.width;
				 height = o.style.height;
			 }
			 break;
		 case 'polyline':
		     polyStart = true;
             
			 break;
	 }
	 shape.strokeWeight   = weight;
	 shape.strokeColor    = color;
	 //新建的图形放在画板背景下面
	 shape.style.zIndex   = '1';
     shape.innerHTML = '<v:fill opacity="0.1"/>';
	 //新建的图形对象存放在shapeList中
	 shapeList.push(shape);
     //------------清除全局变量值-----------//   
	 startX = 0;
	 startY = 0;
     return shape;
  };
//清空画板
var clearAll = function(){
    var map = $('map');
	for(var i=0,l=shapeList.length;i<l;i++ ){
	    map.removeChild(shapeList[i]);
	}
	//清空数组，mootools的方法
	shapeList.length = 0;
}
//保存所有内容
var saveAll = function(){
	var fso = new ActiveXObject("Scripting.FileSystemObject");
	var f = fso.OpenTextFile("C:\\" +$('filename').value+ ".html", 2, true);
	//当前页面内容保存到本地
	//f.Write(document.documentElement.outerHTML);
	var str = '<html xmlns:v="urn:schemas-microsoft-com:vml">';
	    str += '<head><title>我的图画</title><style>v\\:* { Behavior: url(#default#VML)}</style></head>';//注意这里要两个反斜杠
		str += '<body>';
		str += '<v:group id="map" coordorigin="0,0" coordsize="800,500" style="width:800px;height:500px;position:relative;">';
	    str += $('map').innerHTML;
		str += ' </v:group>';
		str += '</body>';
	f.Write(str);
	f.Close();
	fso = f = void(0);
	
}

</script>
</body>
</html>

 

vivi沧海月明
关注
专栏目录
VML入门到精通（例子）
03-26
在"VML入门到精通（例子）"这个主题中，我们将深入探讨VML的基础知识和实际应用。这个资源可能是由一系列教程或示例组成，帮助初学者理解并掌握VML技术。 **1. VML基础** - **语法结构**：VML使用XML语法，每个...
vml入门,vml入门
02-24
VML，全称为Vector Markup Language，是一种用于在网页上绘制矢量图形的标记语言。它在HTML中嵌入，允许开发者创建复杂的图形、图表、图像以及其他视觉元素，并且这些元素能够在任何分辨率下保持清晰，因为它们是...
关于VML一些用法的注意事项
大道废
09-19 2040
这一段时间来写了大量的vml代码,期间遇到了无数与vml特性有关的变态事项,特此记录,以备忘.1. svg是天堂. 当你用过svg后,再用vml.就会感觉VML就素那地狱一样的存在.一边号称着支持css,另一边,连fillcolor这样的属性都不能用css来定义.2.v:group的coordsize缺省不是与v:group的大小一样的,它缺省为1000x1000.所以不要被说明给骗了.
VML 入门
wangpingjing的博客
03-28 114
http://www.itlearner.com/code/vml/
vml入门教程
哈利路亚的收藏夹
03-26 1192
什么是vml? VML相当于IE里面的画笔，能实现你所想要的图形，而且结合脚本，可以让图形产生动态的效果。VML是微软1999年9月附带IE5.0发布的，在我认为， VML其实是Word和HTML结合的产物。可以将Word文档另存为HTML，其中的文本和图片可以很容易的转换，但如果是手绘制的图形在以往的IE里面就无法解释了，如果都转换成图形文件又不太现实。于是微软把Word里面的图形控件结合到IE
vml入门教程 【转】
weixin_33950035的博客
07-17 75
什么是vml? VML相当于IE里面的画笔，能实现你所想要的图形，而且结合脚本，可以让图形产生动态的效果。VML是微软1999年9月附带IE5.0发布的，在我认为， VML其实是Word和HTML结合的产物。可以将Word文档另存为HTML，其中的文本和图片可以很容易的转换，但如果是手绘制的图形在以往的IE里面就无法解释了，如果都转换成图形文件又不太现实。于是微软把Word里面的图形控件结合到IE...
vml 入门学习
xcl119xcl的专栏
01-19 711
 vml入门学习【转贴】2007年01月09日 星期二 15:57转自http://www.cublog.cn/u/15867/showart_124110.html       VML相当于IE里面的画笔，能实现你所想要的图形，而且结合脚本，可以让图形产生动态的效果。VML是微软1999年9月附带IE5.0发布的， 在我认为， VML其实是Word和HTML结合的产物。可以
VML 入门1
yuanxiaogang的专栏
04-18 685
VML是The Vector Markup Language的缩写。参考网站MSDN：http://msdn.microsoft.com/workshop/author/vml/shape/introduction.aspW3C：http://www.w3.org/TR/NOTE-VML首先需要在 标签中加上如下引用xmlns:v="urn:schemas-microsoft-com:vm
VML极道教程(二) VML入门
学无止境
06-01 553
VML入门
vml入门三大步
congyu3046的博客
04-07 96
第一步：在html标签中加入xmlns，如下所示：第二步：加入下面的标签，如下：v:* {behavior:url(#default#VML);} o:* { behavior:url(#default#VML);}第三步：在之...
【转】vml入门教程
weixin_30399055的博客
06-01 55
什么是vml? VML相当于IE里面的画笔，能实现你所想要的图形，而且结合脚本，可以让图形产生动态的效果。VML是微软1999年9月附带IE5.0发布的，在我认为， VML其实是Word和HTML结合的产物。可以将Word文档另存为HTML，其中的文本和图片可以很容易的转换，但如果是手绘制的图形在以往的IE里面就无法解释了，如果都转换成图形文件又不太现实。于是微软把Word里面的图形控件结合到IE...
VML入门教程：快速掌握与实践
VML（Vector Markup Language）入门教程是一个针对初级...VML入门教程注重实践和基础巩固，通过实际操作和理解标记间的关联性，帮助学员逐步建立起对VML语言的扎实基础，以便在未来能够灵活运用到网页设计和开发中。
JS 复制页面源代码和复制页面内容
zwSeaman的专栏
01-11 3269
页面上有这样一个div，现在采用两种方式复制div中的内容：1  复制源代码window.clipboardData.setData("text",document.getElementById("div1").innerHTML)2  复制显示内容var obj = document.getElementById("div1"); var rng = document.body.createTextRange(); rng.moveToElementText(obj); rng.select();
Asp.net Ajax WebService开发文档
zwSeaman的专栏
02-11 2979
 Asp.net Ajax WebService开发文档基础使用1         新建一个解决方案，右键解决方案名称选择“添加—新建网站”，新建一个asp.net 网站WebSite1，右键Website1，选择“添加新项—Web服务”，添加一个Web服务WebService1。则在跟目录下生成WebService1.asmx，App_Code文件夹中生成WebService1.cs
广度优先算法 (BFS) js Demo
zwSeaman的专栏
05-20 2574
BFS算法原理：从起始点开始，分别考察距离起始点为1,2,3...的点，直到找到结束点，或者考察完整个可达区域依然没有找到结束点。 实现方法：首先将起点加入队列，判断当前点是否为终点，若否，则取起点的四个方向的点加入队列（一般四方位考察顺序为下右上左），依次类推，直到队列为空或找到终点。 效果如下，如有发现错误欢迎批评指正： 起点和终点： 点击设置障碍： 搜索路径：
深度优先算法(DFS) js Demo
zwSeaman的专栏
05-22 2464
展示效果如下图： DFS算法就像老鼠走迷宫：朝着一个方向走到不能走，然后转向继续走，若3个方向都是是障碍，那么回到上一个位置转向···，直到找到出口，或者走完所有可能的路未找到出口。深度优先算法属于盲目搜索，无法保证搜索到的路径为最短路径。 算法实现基本思路为：把所有可能的路径看做一个从根节点出发的树形结构，从出发点开始，依次递归考察每个节点的连通性，直到找到终点或者搜索完整棵树。 核心
IE，FF下JS闭包的资源释放差异
zwSeaman的专栏
05-31 1876
做了一个简单测试验证js 闭包对资源占用情况，代码如下： function justFN(){ var str = "1M string here"; window.setTimeout(function(){ debugger;//此处为断点 var s = str;//此处对str对象进行引用 },2000); } justFN();然后分别在Firefox 和 IE9中运
用Ajax保持session的新鲜度
zwSeaman的专栏
04-08 1794
       最近在做一个项目，是基于在老系统下添加新的模块，原系统要求登入系统，有权限判断，而新添加的不需要且新添加的模块中使用到了很多原系统的包含文件，其中有session的权限判断；如果页面长时间不刷新，那么session会丢失，程序将会跳转到登陆---这个是不容许的！      如何解决呢？      将session设置为无限期？没有试过的方法！      让页面每隔一段时间
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值