vml的简易画板_2
三、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;
}
}
