/*----------------绘图尺寸输入区域--------------------*/
//直线的输入区域显示
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结合的很好，我实在想不出还有什么。