vml的简易画图板_1
最近因一项目中用户要求实现简单工程示意图形的绘制和打印功能。于是把vml和svg，包括autocad objectarj复习了一遍。由于系统中要求在ie中绘制保存和打印，所以采用vml和svg，现在把vml的画板相关内容发出来，欢迎提出宝贵意见，共同学习。
一、关于vml学习
1、vml教程--有点简单，入门很好的教材（csdn有下）
2、FlashVml4.5--很不错的东西，提高学习的必备工具，参考了不少，感谢。（推荐）
3、http://www.w3.org/TR/NOTE-VML 所有学习者必看
4、http://www.cnblogs.com/peterzb/archive/2009/07/22/1529021.html 别人的博客。有许多资源可参考
二、画板页面 (plangraph.aspx)
项目环境：vs2005-sqlserver2000
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="plangraph.aspx.cs" Inherits="plangraph" validateRequest="false"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>施工平面图</title>
<script language="JavaScript" type ="text/javascript" src="../jscript/menu.js"></script>
<link type="text/css" href="../css/menu.css" rel="Stylesheet"/>
<link type="text/css" href="../css/content.css" rel="Stylesheet"/>
<link type="text/css" href="../css/draw.css" rel="stylesheet" />
<STYLE>
v\:* { BEHAVIOR: url(#default#VML) }
o\:* { BEHAVIOR: url(#default#VML) }
</STYLE>
<script language="javascript" type="text/javascript" >
function menudisplay(id)
{
var obj=document.getElementById(id);
if(obj.style.display=="block"){
obj.style.display="none";}
else{obj.style.display="block";}
}
</script>
</head>
<body style="background:url(../image/main.jpg);background-repeat:no-repeat;">
<form id="form1" runat="server">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr><td width="242px" valign="top">
<table cellpadding="0" cellspacing="0" width="100%">
<tr><td height="45"></td></tr>
<tr><td style="padding-left:1.2px;"><img src="../image/leftgraph.jpg" /></td></tr>
</table>
<table cellpadding="0" cellspacing="0" style="border-right:#e3efcb 1px solid;
border-left:#e3efcb 1px solid; border-bottom: #ff9933 1px solid;" width="100%">
<tr><td height="6px;"></td></tr>
<tr onclick="menudisplay('draw1')" style="cursor:hand;">
<td align="left" height="18px" style="padding-left:12px;">
<img src="../image/leftlisthead.jpg" /><font color="#1899A7"
style="font-weight:bold;"> 绘图画笔</font></td></tr>
<tr><td height="3px;"></td></tr><tr><td>
<table id="draw1" style="display:block;width:100%;">
<tr><td height="18" style="padding-left:4px;">
<input type="button" id="draw_line" class="dbutton1" title="请输入直线长度，绘制直线图形" onclick=draw_init(1) /></td>
<td height="18" style="padding-left:4px;">
<input type="button" id="draw_rect" class="dbutton2" title="请输入矩形的长和宽，绘制矩形" onclick=draw_init(2) /></td>
<td height="18" style="padding-left:4px;">
<input type="button" id="draw_oval" class="dbutton3" title="请输入圆形长和宽，绘制圆形或椭圆形" onclick=draw_init(3) /></td>
</tr>
<tr><td height="18" style="padding-left:4px;">
<input type="button" id="draw_arc" class="dbutton5" title="请输入弧线开始角度和结束角度，绘制弧线" onclick=draw_init(4) /></td>
<td height="18" style="padding-left:4px;">
<input type="button" id="draw_text" class="dbutton6" title="请输入文本文字和位置相关属性，绘制文本" onclick=draw_init(5) /></td>
<td height="18" style="padding-left:4px;">
<input type="button" id="draw_textpath" class="dbutton7" title="请输入文本文字和路径属性，绘制路径文字" onclick=draw_init(6) /></td>
</tr>
<tr><td height="18" style="padding-left:4px;">
<input type="button" id="draw_polyline" class="dbutton8" title="请输入多边型的相关属性，绘制多边型" onclick=draw_init(7) /></td>
<td height="18" style="padding-left:4px;">
<input type="button" id="draw_select" class="dbutton9" title="请选择对象" onclick=draw_init(8) /></td>
<td height="18" style="padding-left:4px;"></td>
</tr>
</table></td></tr>
</table>
<table cellpadding="0" cellspacing="0" style="border-right:#e3efcb 1px solid;
border-left:#e3efcb 1px solid; border-bottom: #ff9933 1px solid;" width="100%">
<tr><td height="6px;"></td></tr>
<tr onclick="menudisplay('draw2')" style="cursor:hand;">
<td align="left" height="18px" style="padding-left:12px;">
<img src="../image/leftlisthead.jpg" /><font color="#1899A7"
style="font-weight:bold;"> 方案备注</font></td></tr>
<tr><td height="3px;"></td></tr><tr><td>
<table id="draw2" style="display:block;width:100%;">
<tr><td style="padding-left:8px;" colspan="2">
<asp:Label ID="Label7" runat="server" Text="图形标题" CssClass="lbl1"></asp:Label>
</td></tr>
<tr><td style="padding-left:8px;" colspan="2">
<asp:TextBox ID="TextBox1" runat="server" CssClass="txtbox1"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ErrorMessage="图形标题必须填写" Display="None" ControlToValidate="TextBox1" CssClass="lbl"></asp:RequiredFieldValidator>
</td></tr>
<tr><td height="3px"></td></tr>
<tr><td style="padding-left:8px;" colspan="2">
<asp:Label ID="Label2" runat="server" Text="图形类型" CssClass="lbl1"></asp:Label>
</td></tr>
<tr><td style="padding-left:8px;" colspan="2">
<table class="td4"><tr><td>
<asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatColumns="3"
RepeatDirection="Horizontal" CellPadding="0" CellSpacing="0">
</asp:RadioButtonList>
</td></tr></table>
</td></tr>
<tr><td height="3px"></td></tr>
<tr><td style="padding-left:8px;">
<asp:Label ID="Label4" runat="server" Text="比例尺" CssClass="lbl1"></asp:Label>
</td></tr>
<tr><td style="padding-left:8px;">
１：<asp:TextBox ID="TextBox4" runat="server" CssClass="txtbox4" Width="199px" Text="1000"></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidator4" runat="server" ErrorMessage="比例尺不是有效的整数值" ControlToValidate="TextBox4" Display="None" CssClass="lbl" ValidationExpression="^\d*"></asp:RegularExpressionValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ErrorMessage="比例尺必须填写" Display="None" ControlToValidate="TextBox4" CssClass="lbl"></asp:RequiredFieldValidator>
</td></tr>
<tr><td height="3px"></td></tr>
<tr><td style="padding-left:8px;" colspan="2">
<asp:Label ID="Label1" runat="server" Text="图形面积" CssClass="lbl1"></asp:Label>
</td></tr>
<tr><td style="padding-left:8px;" colspan="2">
<asp:TextBox ID="TextBox2" runat="server" CssClass="txtbox1"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="图形面积必须填写" Display="None" ControlToValidate="TextBox2" CssClass="lbl"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator7" runat="server" ErrorMessage="图形面积不是有效的数值" ControlToValidate="TextBox2" Display="None" CssClass="lbl" ValidationExpression="^[-+]?\d*\.?\d*$"></asp:RegularExpressionValidator>
</td></tr>
<tr><td height="3px"></td></tr>
<tr><td style="padding-left:8px;" colspan="2">
<asp:Label ID="Label5" runat="server" Text="图形描述及备注" CssClass="lbl1"></asp:Label>
</td></tr>
<tr><td style="padding-left:8px;" colspan="2">
<asp:TextBox ID="TextBox3" runat="server" CssClass="txtbox1" Rows="6" TextMode="multiLine"></asp:TextBox>
</td></tr>
</table></td></tr></table>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding-left:8px;padding-bottom:6px;" colspan="2">
<asp:Button ID="Button2" runat="server" Text="" CssClass="button8" OnClientClick="writegraphcontent()" OnClick="Button2_Click"/>
<asp:Button ID="Button1" runat="server" Text="" CssClass="button4" OnClientClick="writegraphcontent()" OnClick="Button1_Click"/>
<asp:Button ID="Button6" runat="server" Text="" OnClick="Button6_Click" CssClass="button2" CausesValidation="false"/>
<asp:Button ID="Button3" runat="server" Text="" CssClass="button5" OnClick="Button3_Click"/>
</td>
</tr>
<tr>
<td style="padding-left:12px;padding-bottom:8px;" colspan="2">
<asp:Label ID="lblmessage" runat="server" Text="图形绘制提示信息" ForeColor="red" CssClass="lbl"></asp:Label>
</td>
</tr>
</table>
</td>
<td valign="top">
<table width="96%" style="font-size:12px;">
<tr><td height="14"></td></tr>
<tr><td class="td1">
<asp:Label ID="Label6" runat="server" Text="施工监督->方案平面图"></asp:Label>
</td></tr>
<tr><td><hr size="1" width="100%" color="#e3efcb"/></td></tr>
</table>
<!--图形列表-->
<table height="18px" width="100%">
<tr>
<td>
<div id="graphlist" runat="server"></div>
</td>
</tr>
</table>
<!--绘制区域-->
<table width="100%">
<tr>
<td style="padding-left:16px;">
<div id="grapharea" runat="server" oncontextmenu="return false"
style="width:630px;height:400px;border-style:solid;border-width:1px;overflow:hidden;">
</div>
</td>
<td style="padding-left:3px;width:120px;" valign="top">
<table>
<tr><td>
<input type="button" id="color_pen" class="dbutton4" title="画笔颜色" value="画笔" onclick=intocolor(1) />
</td></tr>
<tr><td>
<input type="button" id="color_stroke" class="dbutton4" title="边框颜色" value="边框" onclick=intocolor(2) />
</td></tr>
<tr><td style="border-bottom-color:#ff9933;border-bottom-style:solid;border-bottom-width:1px;padding-bottom:3px;">
<input type="button" id="color_fill" class="dbutton4" title="填充颜色" value="填充" onclick=intocolor(3) />
</td></tr>
<tr><td>
<input type="button" id="move_up" class="dbutton4" title="上移" value="上移" onclick=move_object(1) />
</td></tr>
<tr><td>
<input type="button" id="move_down" class="dbutton4" title="下移" value="下移" onclick=move_object(2) />
</td></tr>
<tr><td>
<input type="button" id="move_left" class="dbutton4" title="左移" value="左移" onclick=move_object(3) />
</td></tr>
<tr><td style="border-bottom-color:#ff9933;border-bottom-style:solid;border-bottom-width:1px;padding-bottom:3px;">
<input type="button" id="move_right" class="dbutton4" title="右移" value="右移" onclick=move_object(4) />
</td></tr>
<tr><td>
<input type="button" id="move_drag" class="dbutton4" title="拖放" value="拖放" onclick=draw_init(10) />
</td></tr>
<tr><td>
<input type="button" id="draw_zoom" class="dbutton4" title="缩放" value="缩放" onclick=draw_init(11) />
</td></tr>
<tr><td>
<input type="button" id="move_rotate" class="dbutton4" title="旋转" value="旋转" onclick=draw_init(13) />
</td></tr>
<tr><td style="border-bottom-color:#ff9933;border-bottom-style:solid;border-bottom-width:1px;padding-bottom:3px;">
<input type="button" id="draw_delete" class="dbutton4" title="删除" value="删除" onclick=draw_init(12) />
</td></tr>
<tr><td>
<input type="button" id="draw_stroke" class="dbutton4" title="边框效果" value="边框" onclick=draw_init(14) />
</td></tr>
<tr><td>
<input type="button" id="draw_extrusion" class="dbutton4" title="3D立体效果" value="3D立体" onclick=draw_init(15) />
</td></tr>
<tr><td>
</td></tr>
</table>
</td>
</tr>
</table>
<!--尺寸区域-->
<table width="100%">
<tr><td align="left"><hr size="1" width="93%" color="#e3efcb"/></td></tr>
<tr>
<td>
<div id="inputarea"></div>
</td>
</tr>
<tr><td align="left"><hr size="1" width="93%" color="#e3efcb"/></td></tr>
<tr>
<td>
<div id="drawmessage"></div>
</td>
</tr>
<tr><td align="left"><hr size="1" width="93%" color="#e3efcb"/></td></tr>
</table>
</td>
</tr>
</table>
<asp:TextBox CssClass="hidden" id="graphcontent" runat="server"></asp:TextBox>
<asp:ValidationSummary ID="ValidationSummary1" runat="server" HeaderText="输入格式验证提示" ShowMessageBox="true" ShowSummary="false" CssClass="lbl"/>
<!--颜色板-->
<div id="colorpanel" style="position:absolute;z-index:1000;left:636px;top:120px;">
</div>
<!--指北针-->
<div>
<v:Textbox style="Z-INDEX:103;LEFT:921px;POSITION: absolute;TOP:410px;"
print="t" coordsize = "21600,21600" inset="5pt,5pt,5pt,5pt">N
</v:Textbox>
<v:oval style="Z-INDEX: 101; LEFT:908px; WIDTH:50px; POSITION: absolute; TOP:432px; HEIGHT:50px;"
coordsize = "21600,21600" strokecolor = "black" strokeweight = "1.75pt"></v:oval>
<v:polyline style="Z-INDEX: 102; LEFT:934px; POSITION: absolute; TOP:416px;"
points = "0,0,-8pt,31pt,0pt,31pt,0pt,0" filled = "t" fillcolor="#000000"
strokecolor = "black"></v:polyline>
<v:polyline style="Z-INDEX: 102; LEFT:934px; POSITION: absolute; TOP:499px;"
points = "0,0,-8pt,-31pt,0,-31pt,0pt,0" filled = "f"
strokecolor = "black"></v:polyline>
<v:polyline style="Z-INDEX: 102; LEFT:934px; POSITION: absolute; TOP:416px;"
points = "0,0,0,31pt,8pt,31pt,0pt,0" filled = "f"
strokecolor = "black"></v:polyline>
<v:polyline style="Z-INDEX: 102; LEFT:934px; POSITION: absolute; TOP:499px;"
points = "0,0,0pt,-31pt,8pt,-31pt,0pt,0" filled = "t" fillcolor="#000000"
strokecolor = "black"></v:polyline>
</div>
<!--脚本区域-->
<script type="text/javascript" src="../jscript/vmldraw.js" language="javascript"></script>
<!--字体对话框-->
<object classid="clsid:F9043C85-F6F2-101A-A3C9-08002B2F49FB" id="fontDialog" CODEBASE="http://activex.microsoft.com/controls/vb5/comdlg32.cab"></object>
<!--颜色对话框-->
<object classid="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" id="colorDialog"></object>
</form>
</body>
</html>