VML入门
2009-04-09 19:59
239 查看
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head >
<title>vmlGIS学习</title>
<style>
v\:* { Behavior: url(#default#VML) }
</style>
</head>
<body onselectstart="return false;" oncontextmenu="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;"
onclick="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;" onclick="clearAll()"/>
<input type="button" value="保存到C盘" style="border:solid 2px #ffbbbb;background:#FFFFFF;color:red;" onclick="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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- vml入门教程
- vml入门教程
- IE里面的画笔---VML(Vector Markup Language)入门之一
- vml 入门学习
- VML极道教程(二) VML入门
- IE里面的画笔---VML(Vector Markup Language)入门之二
- VML语言入门【转】
- VML 入门1
- IE里面的画笔---VML(Vector Markup Language)入门之三
- VML入门 － 用我们的画笔绘多彩世界
- VML编程之------VML语言入门《VML极道教程》原著:沐缘华
- Vml:美洲豹系列教程之一(vml入门基础)
- VML语言入门 - 如何编写、保存、运行VML程序
- VML极道教程(二) VML入门
- VML编程之------VML语言入门《VML极道教程》原著:沐缘华
- VML语言入门【转】
- vml入门教程 【转】
- MDT 2013 从入门到精通之SQL Configure And Verify
- nginx 正则表达式匹配入门篇
- Apache Spark DataFrames入门指南：创建DataFrame(2)