/*----------------绘图尺寸输入区域--------------------*/
//直线的输入区域显示
function inputarea_line()
{
document.all.inputarea.innerHTML="<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">"+
"<tr><td class=\"dtd1\">起点</td>"+
"<td>X<input id=\"input_startX\" type=\"text\" class=\"dtext2\" value=\"0\"/></td>"+
"<td>Y<input id=\"input_startY\" type=\"text\" class=\"dtext2\" value=\"0\"/></td>"+
"<td class=\"dtd1\">终点</td>"+
"<td>X<input id=\"input_endX\" type=\"text\" class=\"dtext2\" value=\"100\"/></td>"+
"<td>Y<input id=\"input_endY\" type=\"text\" class=\"dtext2\" value=\"0\"/></td>"+
"<td class=\"dtd1\">线粗</td>"+
"<td><input id=\"input_strokewidth\" type=\"text\" class=\"dtext2\" value=\"3\"/></td>"+
"<td class=\"dtd1\">箭头</td>"+
"<td>起点<input id=\"arrow_start\" type=\"checkbox\"/>"+
"终点<input id=\"arrow_end\" type=\"checkbox\"/></td>"+
"</tr></table>";
}
//矩形的输入区域显示
function inputarea_rect()
{
document.all.inputarea.innerHTML="<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">"+
"<tr><td class=\"dtd1\">宽度</td>"+
"<td><input id=\"input_width\" type=\"text\" class=\"dtext2\" value=\"100\"/></td>"+
"<td class=\"dtd1\">长度</td>"+
"<td><input id=\"input_height\" type=\"text\" class=\"dtext2\" value=\"100\"/></td>"+
"<td class=\"dtd1\">边框</td>"+
"<td><input id=\"input_strokewidth\" type=\"text\" class=\"dtext2\" value=\"3\"/></td>"+
"<td class=\"dtd1\">有无边框</td>"+
"<td><input id=\"input_isstroke\" type=\"checkbox\"/></td>"+
"<td class=\"dtd1\">是否填充</td>"+
"<td><input id=\"input_isfill\" type=\"checkbox\"/></td>"+
"</tr></table>";
}
//弧线的输入区域显示
function inputarea_arc()
{//0角度在平时的90度角，逆时针画
document.all.inputarea.innerHTML="<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">"+
"<tr><td class=\"dtd1\">宽度</td>"+
"<td><input id=\"input_width\" type=\"text\" class=\"dtext2\" value=\"100\"/></td>"+
"<td class=\"dtd1\">长度</td>"+
"<td><input id=\"input_height\" type=\"text\" class=\"dtext2\" value=\"100\"/></td>"+
"<td class=\"dtd1\">起始角度</td>"+
"<td><input id=\"input_startangle\" type=\"text\" class=\"dtext2\" value=\"0\"/></td>"+
"<td class=\"dtd1\">结束角度</td>"+
"<td><input id=\"input_endangle\" type=\"text\" class=\"dtext2\" value=\"270\"/></td>"+
"<td class=\"dtd1\">边框</td>"+
"<td><input id=\"input_strokewidth\" type=\"text\" class=\"dtext2\" value=\"3\"/></td>"+
"<td class=\"dtd1\">有无边框</td>"+
"<td><input id=\"input_isstroke\" type=\"checkbox\"/></td>"+
"<td class=\"dtd1\">是否填充</td>"+
"<td><input id=\"input_isfill\" type=\"checkbox\"/></td>"+
"</tr></table>";
}
//文本
function inputarea_text()
{
document.all.inputarea.innerHTML="<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">"+
"<tr><td class=\"dtd1\">文本</td>"+
"<td><input id=\"input_text\" type=\"text\" class=\"dtext4\" value=\"显示的文本\"/></td>"+
"<td class=\"dtd1\">字体</td>"+
"<td><input id=\"input_fontname\" type=\"text\" class=\"dtext3\" value=\"宋体\" onclick=\"this.value=showfont()\"/></td>"+
"<td class=\"dtd1\">大小</td>"+
"<td><input id=\"input_fontsize\" type=\"text\" class=\"dtext2\" value=\"12\"/></td>"+
"<td class=\"dtd1\">换行</td>"+
"<td><input id=\"input_iswrap\" type=\"checkbox\"/></td>"+
"</tr></table>";
}
//路径文本
function inputarea_textpath()
{
document.all.inputarea.innerHTML="<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">"+
"<tr><td class=\"dtd1\">文本</td>"+
"<td><input id=\"input_text\" type=\"text\" class=\"dtext4\" value=\"显示的文本\"/></td>"+
"<td class=\"dtd1\">字体</td>"+
"<td><input id=\"input_fontname\" type=\"text\" class=\"dtext3\" value=\"宋体\" onclick=\"this.value=showfont()\"/></td>"+
"<td class=\"dtd1\">大小</td>"+
"<td><input id=\"input_fontsize\" type=\"text\" class=\"dtext2\" value=\"12\"/></td>"+
"<td class=\"dtd1\">缩放</td>"+
"<td><input id=\"input_iszoom\" type=\"checkbox\"/></td>"+
"<td class=\"dtd1\">换行</td>"+
"<td><input id=\"input_iswrap\" type=\"checkbox\"/></td>"+
"</tr></table>";
}
//多边形的输入区域显示
function inputarea_polyline()
{
document.all.inputarea.innerHTML="<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">"+
"<tr><td class=\"dtd1\">新点坐标</td>"+
"<td>X<input id=\"input_newX\" type=\"text\" class=\"dtext2\" value=\"0\"/></td>"+
"<td>Y<input id=\"input_newY\" type=\"text\" class=\"dtext2\" value=\"0\"/></td>"+
"<td class=\"dtd1\">是否闭合</td>"+
"<td><input id=\"input_isclose\" type=\"checkbox\" checked/></td>"+
"<td class=\"dtd1\">边框</td>"+
"<td><input id=\"input_strokewidth\" type=\"text\" class=\"dtext2\" value=\"3\"/></td>"+
"<td class=\"dtd1\">有无边框</td>"+
"<td><input id=\"input_isstroke\" type=\"checkbox\"/></td>"+
"<td class=\"dtd1\">是否填充</td>"+
"<td><input id=\"input_isfill\" type=\"checkbox\"/></td>"+
"</tr></table>";
}
//边框的输入区域显示
function inputarea_stroke()
{
document.all.inputarea.innerHTML="<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">"+
"<td class=\"dtd1\">边框类型</td>"+
"<td><SELECT ID=\"select_dashstyle\" SIZE=\"1\" class=\"dselect1\">"+
"<OPTION VALUE=\"solid\" SELECTED>实心线"+
"<OPTION VALUE=\"dot\">点线"+
"<OPTION VALUE=\"dash\">虚线"+
"<OPTION VALUE=\"dashdot\">虚点线"+
"<OPTION VALUE=\"longdash\">长虚线"+
"<OPTION VALUE=\"longdashdot\">长虚点线"+
"<OPTION VALUE=\"longdashdotdot\">长虚双点线"+
"<OPTION VALUE=\"shortdot\">短点线"+
"<OPTION VALUE=\"shortdash\">短虚线"+
"<OPTION VALUE=\"shortdashdot\">短虚点线"+
"<OPTION VALUE=\"shortdashdotdot\">短虚双点线"+
"</SELECT>"+
"</td>"+
"<td class=\"dtd1\">边框宽度</td>"+
"<td><input id=\"input_strokewidth\" type=\"text\" class=\"dtext2\" value=\"3\"/></td>"+
"<td class=\"dtd1\">边框透明</td>"+
"<td><SELECT ID=\"select_opacity\" SIZE=\"1\" class=\"dselect1\">"+
"<OPTION VALUE=\"0.0\">透明"+
"<OPTION VALUE=\"0.1\">10%"+
"<OPTION VALUE=\"0.2\">20%"+
"<OPTION VALUE=\"0.3\">30%"+
"<OPTION VALUE=\"0.4\">40%"+
"<OPTION VALUE=\"0.5\">50%"+
"<OPTION VALUE=\"0.6\">60%"+
"<OPTION VALUE=\"0.7\">70%"+
"<OPTION VALUE=\"0.8\">80%"+
"<OPTION VALUE=\"0.9\">90%"+
"<OPTION VALUE=\"1.0\" SELECTED>不透明"+
"</SELECT>"+
"</td>"+
"<td class=\"dtd1\">边框连接</td>"+
"<td><SELECT ID=\"select_joinstyle\" SIZE=\"1\" class=\"dselect1\">"+
"<OPTION VALUE=\"round\" SELECTED>圆角"+
"<OPTION VALUE=\"bevel\">倒角"+
"<OPTION VALUE=\"miter\">斜切"+
"</SELECT>"+
"</td>"+
"<td class=\"dtd1\">边框拐角</td>"+
"<td><SELECT ID=\"select_endcap\" SIZE=\"1\" class=\"dselect1\">"+
"<OPTION VALUE=\"flat\">平滑"+
"<OPTION VALUE=\"square\">直角"+
"<OPTION VALUE=\"round\" SELECTED>圆滑"+
"</SELECT>"+
"</td>"+
"</tr></table>";
}
四、图形保存和打印
1、保存，取出div的innerHTML保存在数据库在text字段中。
2、打印,取出txet字段中内容写到页面即可。打印网页。
五、后记
1、未实现<v:group>标记，建议使用，这个对于打印的位置调整及其关键；如果要实现图层功能，那就是必须了，否则图层操作就只能通过z-index遍历了，很不方便；要旋转<v:textbox>旋转，这个也必须。我项目，把绘图和打印尺寸位置调好了，所以偷懒了。
2、关于<v:polyline>标记。用这个标记画图，会发现points你指定后，绘图后，在读出points，会发现它自己在绘图时作了平移，2个pints不一样；而且points绘图强制用pt而不是px,所以换算起来很麻烦。这个问题可能跟<v:polyline>的算法有关。貌似在插入新点时，要计算中点，以这个中点来进行计算其他点坐标，否则必然偏移，所以我程序中用<v:shape>来实现多边形，彻底被打败了。
3、vml结合js可以实现很多动画。大家自己试验下，画个vml的动态圆角按钮相当不错。基本html的元素对象具有的事件vml多可以实现，就当对html一样编程好了。
4、一些小的简单应用效果vml相比svg、flash在许多方面具有很大优势，大家不仿尝试一下。会为你的项目增色不少。
这样简单易用，而且和js结合的很好，我实在想不出还有什么。
三、draw.css
body
{
font-size:12px;
}
.dbutton1
{
border:none;
width:60px;
height:21px;
background:url(../project/drawimage/draw_line.jpg);
cursor:hand;
}
.dbutton2
{
border:none;
width:60px;
height:21px;
background:url(../project/drawimage/draw_rect.jpg);
cursor:hand;
}
.dbutton3
{
border:none;
width:60px;
height:21px;
background:url(../project/drawimage/draw_oval.jpg);
cursor:hand;
}
.dbutton5
{
border:none;
width:60px;
height:21px;
background:url(../project/drawimage/draw_arc.jpg);
cursor:hand;
}
.dbutton6
{
border:none;
width:60px;
height:21px;
background:url(../project/drawimage/draw_text.jpg);
cursor:hand;
}
.dbutton7
{
border:none;
width:60px;
height:21px;
background:url(../project/drawimage/draw_textpath.jpg);
cursor:hand;
}
.dbutton8
{
border:none;
width:60px;
height:21px;
background:url(../project/drawimage/draw_polyline.jpg);
cursor:hand;
}
.dbutton9
{
border:none;
width:60px;
height:21px;
background:url(../project/drawimage/draw_select.jpg);
cursor:hand;
}
.dbutton4
{
border-style:solid;
border-width:1px;
width:60px;
cursor:hand;
height:16px;
background:white;
font-size:10px;
}
.dtext4
{
border-style:solid;
border-width:1px;
font-size:12px;
width:240px;
}
.dtext1
{
border-style:solid;
border-width:1px;
font-size:12px;
width:60px;
}
.dtext2
{
border-style:solid;
border-width:1px;
font-size:12px;
width:30px;
}
.dtext3
{
border-style:solid;
border-width:1px;
font-size:12px;
width:120px;
}
.dtd1
{
padding-left:21px;
font-size:12px;
}
.dselect1
{
font-size:12px;
border-style:solid;
border-width:1px;
width:72px;
}
四、vmldraw.js--画板的画图js
/*----------------全局变量区域--------------------*/
var pen_name=0;//画笔的名称
var pen_color="#000000";//画笔缺省颜色
var pen_strokecolor="#000000"; //画笔边框颜色
var pen_fillcolor="#ffffff";//填充颜色
var pen_strokewidth=3;//画笔的宽度
var pen_top=200;//画笔的初始化点坐标
var pen_left=360;
var obj_zindex=1000*Math.random();//图形图层-id区别(id的构成规则：类型_图层_area_尺寸)(尺寸优先：长（半径），宽,厚)
//需要计算面积的有area_尺寸，其他无
var obj_currentid=null;//图形对象id
var move_flag=false;//是否拖放标志
var zoom_flag=false;//是否缩放标志
var rotate_flag=false;//是否旋转标志
var obj_pathtextid=null;//附加路径文本对象id
var polyline_sx=null;//多边型开始点坐标
var polyline_sy=null;
var polyline_flag=false;//多边型是否继续绘制标志
var polyline_arr=null;//多边型点的坐标数组
var obj_polylineid=null;//正在绘画多边型对象id
var obj_strokeid=null;//画边框对象id
/*-----------字体对话框-----------*/
// cdlCFScreenFonts（屏幕字体）&H1
// cdlCFPrinterFonts（打印机字体）
// cdlCFBoth（既可以是屏幕字体又可以是打印机字体）
// Color:颜色 FontName-字体名字 FontSize-字体大小
// FontBold-粗体 FontItalic-斜体 FontUnderLine-下划线
function showfont()
{
document.all.fontDialog.Flags=257;
document.all.fontDialog.X="300px";
document.all.fontDialog.showfont();
return document.all.fontDialog.fontname;
}
/*---------------颜色选择板--参考别人改写-----------------*/
var ColorHex=new Array('00','33','66','99','CC','FF');
var SpColorHex=new Array('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF');
var current=null;
var colortype=1;
function intocolor(objcolortype)
{
colortype=objcolortype;
var colorTable=''
for (i=0;i<2;i++)
{
for (j=0;j<6;j++)
{
colorTable=colorTable+'<tr height=12>';
colorTable=colorTable+'<td width=11 style="background-color:#000000">';
if (i==0){
colorTable=colorTable+'<td width=11 style="background-color:#'+
ColorHex[j]+ColorHex[j]+ColorHex[j]+'">';
}
else{
colorTable=colorTable+'<td width=11 style="background-color:#'+SpColorHex[j]+'">';
}
colorTable=colorTable+'<td width=11 style="background-color:#000000">';
for (k=0;k<3;k++)
{
for (l=0;l<6;l++)
{
colorTable=colorTable+'<td width=11 style="background-color:#'+
ColorHex[k+i*3]+ColorHex[l]+ColorHex[j]+'">';
}
}//for
}//for
}//for
colorTable='<table width=253 border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-bottom:none;border-collapse: collapse" bordercolor="000000">'
+'<tr height=30><td colspan=21 bgcolor=#cccccc>'
+'<table cellpadding="0" cellspacing="1" border="0" style="border-collapse: collapse">'
+'<tr><td width="3"><td><input type="text" id="DisColor" size="6" disabled style="border:solid 1px #000000;background-color:#ffff00"></td>'
+'<td width="3"><td><input type="text" id="HexColor" size="7" style="border:inset 1px;font-family:Arial;" value="#000000"></td></tr></table></td></table>'
+'<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="000000" onmouseover="doOver()" onmouseout="doOut()" onclick="doclick()" style="cursor:hand;">'
+colorTable+'</table>';
document.all.colorpanel.innerHTML=colorTable;
}
function doOver() {
if ((event.srcElement.tagName=="TD") && (current!=event.srcElement)) {
if (current!=null){current.style.backgroundColor = current._background;}
event.srcElement._background = event.srcElement.style.backgroundColor;
document.all.DisColor.style.backgroundColor = event.srcElement.style.backgroundColor;
document.all.HexColor.value = event.srcElement.style.backgroundColor;
event.srcElement.style.backgroundColor = "white";
current = event.srcElement;
}
}
function doOut() {
if (current!=null) current.style.backgroundColor = current._background;
}
function doclick(){
if (event.srcElement.tagName=="TD"){
if(colortype==1)
{
pen_color=event.srcElement._background;
document.all.color_pen.style.backgroundColor=pen_color;
}
if(colortype==2)
{
pen_strokecolor=event.srcElement._background;
document.all.color_stroke.style.backgroundColor=pen_strokecolor;
}
if(colortype==3)
{
pen_fillcolor=event.srcElement._background;
document.all.color_fill.style.backgroundColor=pen_fillcolor;
}
document.all.colorpanel.innerHTML="";
return event.srcElement._background;
}
}
最近因一项目中用户要求实现简单工程示意图形的绘制和打印功能。于是把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>