vml简易画板_4

最新推荐文章于 2024-11-09 21:51:58 发布

anfeng5852

最新推荐文章于 2024-11-09 21:51:58 发布

阅读量101

点赞数

文章标签：数据库

原文链接：http://www.cnblogs.com/Andmm/archive/2009/12/04/1617037.html

版权

/*----------------绘图尺寸输入区域--------------------*/

//直线的输入区域显示
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=\"宋体\" οnclick=\"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=\"宋体\" οnclick=\"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结合的很好，我实在想不出还有什么。

转载于:https://www.cnblogs.com/Andmm/archive/2009/12/04/1617037.html