在web页面上画图的JS类

　　网上已经有很多这样的代码了，但我下载了几份，由于我一直用VC，感觉网上的代码都不适合我的习惯，因此，自己封装了一个类TFChart（我的网名叫 童方 嘛 TF是首写拼音，至于Chart是随便起的名字，不知道用什么名好了，或许按我的习惯起名为TFWebDC会更好些吧）总之，算是完成了我的类，也用于项目中，我这算是1.0版吧。欢迎大家批评指正，更欢迎进行多次开发，并发布出来与大家分享。

　　原理：ＪＳ操作ＶＭＬ　ＤＯＭ

　　用法：代码复制后，存为TFChart.js后，在其他页面引用

　　下面是类的原码：

///
// TFChart JS操作VML绘图类 1.0
// 作者：童方
// 2009年8月

// 注：用的时候带上我的信息吧，可以把你的信息加在前面:)
///
// 属性：
//  LineColor   线段颜色，默认值：#000000
//  FillColor    填充颜色，默认值：#FFFFFF
//  LineWidth    线段宽度，默认值：1px
//  Stroke_Enabled  是否改变线段样式(true/false)，默认值 false
//  Stroke_StartArrow  线段起始标志
//  Stroke_EndArrow  线段结束标志
//  Stroke_Style  线段类型 = "Solid";
//  Shadow_Enabled  是否允许显示阴影 = false;
//  Shadow_Color   阴影颜色 = "#888888";
//  Shadow_Type   阴影类型 = "single"; // single,double,emboss,perspective
//  Shadow_Offset  阴影偏移区域 = "5px,5px";
//  Font_Name   字体 = "宋体";
//  Font_Size   字号 = "14px";
//  Font_Bold   粗体字 = false;
//  Font_UnlderLine  下划线 = false;
//  Font_Italic   斜体字 = false;
//  Font_Color   文字颜色 = "#000000";
//  Text_Align   文本对齐方式 = "center"; // left,right,center,justify,inherit
///
// 方法：
//  InitChart(Pannel, width, height);     初始化，必须先调用此函数
//  ClearChart();          清除内容至初始化时
//  MoveTo(x, y);          将当前位置移动到x,y处
//  LineTo(x, y, id);         从当前位置至x,y画一条线，画线后，当前位置为x,y
//  DrawLine(Points, id);        根据点序列画一条线
//  Rectangle(left, top, width, height, text, id);  根据给字left,top,width,length画一矩形，并指定矩形内文本
//  RoundRect(left, top, width, height, text, id);  根据给字left,top,width,length画一圆角矩形，并指定圆角矩形内文本
//  TextOut(x, y, cx, cy, text, id);     输出文字
//  DrawImage(Url, x, y, cx, cy, id);     在指定区域画出Url给出的图象
//  Arc(left, top, width, height, StartAngle, EndAngle, id); 画一弧线
//  Ellipse(left, top, width, height, filled, id);  在指定区域画一椭圆
///

function TFChart()
{
 this.Pannel = null;
 this.PannelHtml = "";
 this.Init = false;
 
 this.LastPoint = "0,0";
 this.LineColor = "#000000";
 this.FillColor = "#FFFFFF";
 this.LineWidth = "1px";
 this.Stroke_Enabled = false;
 this.Stroke_StartArrow = "";
 this.Stroke_EndArrow = "";
 this.Stroke_Style = "Solid";
 
 this.Shadow_Enabled = false;
 this.Shadow_Color = "#888888";
 this.Shadow_Type = "single"; // single,double,emboss,perspective
 this.Shadow_Offset = "5px,5px";
 
 this.Font_Name = "宋体";
 this.Font_Size = "14px";
 this.Font_Bold = false;
 this.Font_UnlderLine = false;
 this.Font_Italic = false;
 this.Font_Color = "#000000";
 
 this.Text_Align = "center"; // left,right,center,justify,inherit

 this.InitChart = TFChart_Init;
 this.ClearChart = TFChart_Clear;
 this.MoveTo = TFChart_MoveTo;
 this.LineTo = TFChart_LineTo;
 this.DrawLine = TFChart_DrawLine;
 this.Rectangle = TFChart_Rectangle;
 this.RoundRect = TFChart_RoundRect;
 this.TextOut = TFChart_TextOut;
 this.DrawImage = TFChart_DrawImage;
 this.Arc = TFChart_Arc;
 this.Ellipse = TFChart_Ellipse;
}
function TFChart_Init(Pannel, width, height)
{
 if(this.Init == true)
  return;
 this.Pannel = Pannel;
 var LC = this.LineColor;
 var FC = this.FillColor;
 this.LineColor = "#FFFFFF";
 this.FillColor = "#FFFFFF";
 this.Rectangle(0, 0, width, height, "");
 this.LineColor = LC;
 this.FillColor = FC;
 this.PannelHtml = this.Pannel.innerHTML;
 this.Init = true;
}
function TFChart_Clear()
{
 if(this.Init == false)
  return;
 this.Pannel.innerHTML = this.PannelHtml;
}
function TFChart_MoveTo(x, y)
{
 if(this.Init == false)
  return;
 this.LastPoint = x.toString() + "," + y.toString();
}
function TFChart_LineTo(x, y, id)
{
 if(this.Init == false)
  return;
 if(id == undefined)
  id = "";
 var CurrentPoint = x.toString() + "," + y.toString();
 var strLine = "<v:line";
 strLine += " from=/""+this.LastPoint+"/"";
 strLine += " to=/""+CurrentPoint+"/"";
 strLine += " style=/"position:absolute;/"";
 strLine += " strokecolor=/""+this.LineColor+"/"";
 strLine += " strokeweight=/""+this.LineWidth+"/"";
 if(id != "")
  strLine += " id=/""+id+"/"";
 if(this.Stroke_Enabled == false)
 {
  strLine += "/>";
 }
 else
 {
  strLine += ">/n";
  strLine += "<v:Stroke";
  if(this.Stroke_Style != "")
   strLine += " dashstyle=/""+this.Stroke_Style+"/"";
  if(this.Stroke_StartArrow != "")
   strLine += " StartArrow=/""+this.Stroke_StartArrow+"/"";
  if(this.Stroke_EndArrow != "")
   strLine += " EndArrow=/""+this.Stroke_EndArrow+"/"";
  strLine += "/>/n";
  strLine += "</v:line>";
 }
 this.LastPoint = CurrentPoint;
 this.Pannel.innerHTML += strLine;
// var newLine = document.createElement(strLine);
// document.getElementById("group1").insertBefore(newLine);
}
function TFChart_DrawLine(Points, id)
{
 if(this.Init == false)
  return;
 if(id == undefined)
  id = "";
 var i;
 var strLine = "";
 strLine += "<v:PolyLine";
 strLine += " filled=/"false/"";
 strLine += " Points=/"";
 for(i=0; i<Points.length; i++)
 {
  strLine += Points[i];
  strLine += " ";
 }
 this.LastPoint = Points[Points.length-1];
 strLine += "/"";
 strLine += " style=/"position:absolute;/"";
 strLine += " strokecolor=/""+this.LineColor+"/"";
 strLine += " strokeweight=/""+this.LineWidth+"/"";
 if(id != "")
  strLine += " id=/""+id+"/"";
 if(this.Stroke_Enabled == false)
 {
  strLine += "/>";
 }
 else
 {
  strLine += ">/n";
  strLine += "<v:Stroke";
  if(this.Stroke_Style != "")
   strLine += " dashstyle=/""+this.Stroke_Style+"/"";
  if(this.Stroke_StartArrow != "")
   strLine += " StartArrow=/""+this.Stroke_StartArrow+"/"";
  if(this.Stroke_EndArrow != "")
   strLine += " EndArrow=/""+this.Stroke_EndArrow+"/"";
  strLine += "/>/n";
  strLine += "</v:PolyLine>";
 }
 this.Pannel.innerHTML += strLine;
}
function TFChart_Rectangle(left, top, width, height, text, id)
{
 if(this.Init == false)
  return;
 if(id == undefined)
  id = "";
 if( text == undefined)
   text = "";
 var strRect = "";
 strRect = "<v:Rect";
 strRect += " style=/"position:absolute;left:"+left+"px;top:"+top+"px;width:"+width+";height:"+height+"px;/"";
 strRect += " strokecolor=/""+this.LineColor+"/"";
 strRect += " fillcolor=/""+this.FillColor+"/"";
 strRect += " strokeweight=/""+this.LineWidth+"/"";
 if(id != "")
  strRect += " id=/""+id+"/"";
 if(this.Shadow_Enabled == false && text == "")
 {
  strRect += "/>";
 }
 else
 {
  strRect += ">";
  if(this.Shadow_Enabled == true)
  {
   strRect += "<v:shadow on=/"T/" type=/""+this.Shadow_Type+"/" color=/""+this.Shadow_Color+"/" offset=/""+this.Shadow_Offset+"/"/>";
  }
  if(text != "")
  {
   strRect += "<v:TextBox inset=/"5pt,5pt,5pt,5pt/"";
   strRect += " style=/"font-family:"+this.Font_Name+";font-size:"+this.Font_Size+";color:"+this.Font_Color+";";
   if(this.Font_Bold)
   {
    strRect += "font-weight:bold;";
   }
   if(this.Font_Italic)
   {
    strRect += "font-style:italic;";
   }
   if(this.Font_UnlderLine)
   {
    strRect += "text-decoration:underline;";
   }
   strRect += "text-align:"+this.Text_Align+";";
   strRect += "/">";
   strRect += text;
   strRect += "</v:TextBox>";
  }
  strRect += "</v:Rect>";
 }
 this.Pannel.innerHTML += strRect;
}
function TFChart_RoundRect(left, top, width, height, text, id)
{
 if(this.Init == false)
  return;
 if(id == undefined)
  id = "";
 if( text == undefined)
   text = "";
 var strRect = "";
 strRect = "<v:RoundRect"; 
 strRect += " style=/"position:absolute;left:"+left+"px;top:"+top+"px;width:"+width+";height:"+height+"px;/"";
 strRect += " strokecolor=/""+this.LineColor+"/"";
 strRect += " fillcolor=/""+this.FillColor+"/"";
 strRect += " strokeweight=/""+this.LineWidth+"/"";
 if(id != "")
  strRect += " id=/""+id+"/"";
 if(this.Shadow_Enabled == false && text == "")
 {
  strRect += "/>";
 }
 else
 {
  strRect += ">";
  if(this.Shadow_Enabled == true)
  {
   strRect += "<v:shadow on=/"T/" type=/""+this.Shadow_Type+"/" color=/""+this.Shadow_Color+"/" offset=/""+this.Shadow_Offset+"/"/>";
  }
  if(text != "")
  {
   strRect += "<v:TextBox inset=/"5pt,5pt,5pt,5pt/"";
   strRect += " style=/"font-family:"+this.Font_Name+";font-size:"+this.Font_Size+";color:"+this.Font_Color+";";
   if(this.Font_Bold)
   {
    strRect += "font-weight:bold;";
   }
   if(this.Font_Italic)
   {
    strRect += "font-style:italic;";
   }
   if(this.Font_UnlderLine)
   {
    strRect += "text-decoration:underline;";
   }
   strRect += "text-align:"+this.Text_Align+";";
   strRect += "/">";
   strRect += text;
   strRect += "</v:TextBox>";
  }
  strRect += "</v:RoundRect>";
 }
 this.Pannel.innerHTML += strRect;
}
function TFChart_TextOut(x, y, cx, cy, text, id)
{
 if(this.Init == false)
  return;
 if( text == undefined)
   return;
 if(text == "")
 {
  return;
 }
 if(id == undefined)
  id = "";
 var strText = "";
 strText += "<v:TextBox inset=/"5pt,5pt,5pt,5pt/"";
 strText += " style=/"position:absolute;font-family:"+this.Font_Name+";font-size:"+this.Font_Size+";word-break:break-all;color:"+this.Font_Color+";";
 if(this.Font_Bold)
 {
  strText += "font-weight:bold;";
 }
 if(this.Font_Italic)
 {
  strText += "font-style:italic;";
 }
 if(this.Font_UnlderLine)
 {
  strText += "text-decoration:underline;";
 }
 strText += "text-align:"+this.Text_Align+";";
 strText += "left:"+x+"px;";
 strText += "top:"+y+"px;";
 strText += "width:"+cx+"px;";
 strText += "height:"+cy+"px;";
 strText += "/"";
 if(id != "")
  strText += " id=/""+id+"/"";
 strText += ">";
 strText += text;
 strText += "</v:TextBox>";
 this.Pannel.innerHTML += strText;
}
function TFChart_DrawImage(Url, x, y, cx, cy, id)
{
 if(this.Init == false)
  return;
 if(id == undefined)
  id = "";
 var strImage = "<v:image src=/""+Url+"/" style=/"position:absolute;left:"+x+"px;top:"+y+"px;width:"+cx+"px;height:"+cy+"px/"";
 if(id != "")
  strImage += " id=/""+id+"/"";
 strImage += "/>";
 this.Pannel.innerHTML += strImage;
}
function TFChart_Arc(left, top, width, height, StartAngle, EndAngle, id)
{
 if(this.Init == false)
  return;
 if(id == undefined)
  id = "";
 var strArc = "<v:arc style=/"left:"+left+";width:"+width+";position:absolute;top:"+top+";height:"+height+"/" startangle=/""+(StartAngle+90).toString()+"/" endangle=/""+(90-EndAngle).toString()+"/"  strokecolor=/""+this.LineColor+"/" strokeweight=/""+this.LineWidth+"/"";
 if(id != "")
  strArc += " id=/""+id+"/"";
 if(this.Stroke_Enabled == false)
  strArc += "/>";
 else
 {
  strArc += ">/n";
  strArc += "<v:Stroke";
  if(this.Stroke_Style != "")
   strArc += " dashstyle=/""+this.Stroke_Style+"/"";
  if(this.Stroke_StartArrow != "")
   strArc += " StartArrow=/""+this.Stroke_StartArrow+"/"";
  if(this.Stroke_EndArrow != "")
   strArc += " EndArrow=/""+this.Stroke_EndArrow+"/"";
  strArc += "/>/n";
  strArc += "</v:arc>";
 }
 this.Pannel.innerHTML += strArc;
}
function TFChart_Ellipse(left, top, width, height, filled, id)
{
 if(this.Init == false)
  return;
 if(id == undefined)
  id = "";
 var strEllipse = "<v:oval style=/"left:"+left+";top:"+top+";width:"+width+";height:"+height+";/" fillcolor=/""+this.FillColor+"/" strokecolor=/""+this.LineColor+"/" strokeweight=/""+this.LineWidth+"/"";
 if(filled == false)
  strEllipse += "filled=/"false/"";
 if(id != "")
  strEllipse += " id=/""+id+"/"";
 if(this.Stroke_Enabled == false)
  strEllipse += "/>";
 else
 {
  strEllipse += ">/n";
  strEllipse += "<v:Stroke";
  if(this.Stroke_Style != "")
   strEllipse += " dashstyle=/""+this.Stroke_Style+"/"";
  strEllipse += "/>/n";
  strEllipse += "</voval>";
 }
 this.Pannel.innerHTML += strEllipse;
}

 

使用示例：

 

把上面的TFChart类代码存为TFChart.js

把下面代码存为Demo.htm

注意：放到同一目录，然后打开Demo.htm，查看运行结果哦：）

 

<html xmlns:v="urn:schemas-microsoft-com:vml">
<STYLE>
v/:* { Behavior: url(#default#VML) }
</STYLE>
<head>
<title>VML Test</title>
<script type="text/JavaScript" src="TFChart.js"></script>
<script type="text/JavaScript">
 var L = new TFChart();
function Draw()
{
 L.ClearChart();
 L.InitChart(document.getElementById("group1"), 800, 600);
 
 L.Shadow_Enabled = true;
 L.Shadow_Color = "#888888";
 L.Shadow_Type = "single";
 L.Shadow_Offset = "10px,10px";
 L.FillColor = "#CCFFFF";
 L.LineColor = "#000000";
 L.RoundRect(500, 100, 200, 100, "Hello");
 
 L.LineColor = "#0000FF";
 L.MoveTo(100, 100);
 L.LineTo(200, 100);
 L.LineTo(200, 200);
 L.LineTo(100, 200);
 L.LineTo(100, 100);
 L.LineColor = "#FF0000";
 L.MoveTo(200, 300);
 L.LineTo(150, 350);
 L.LineTo(200, 400);
 L.LineTo(250, 350);
 L.LineTo(200, 300);
 
 var Points = new Array();
 Points[0] = "300,50";
 Points[1] = "300,100";
 Points[2] = "350,100";
 Points[3] = "350,150";
 Points[4] = "400,150";
 Points[5] = "400,200";
 L.LineColor = "#FF00FF";
 L.LineWidth = 1;
 L.Stroke_Enabled = true;
 L.Stroke_Style = "Dot";
 L.Stroke_StartArrow = "Oval";
 L.Stroke_EndArrow = "Classic";
 L.DrawLine(Points);
 
 L.Font_Name = "黑体";
 L.Font_Bold = true;
 L.Font_Size = 20;
 L.Font_Color = "#FFF000";
 L.TextOut(300, 400, 100, 50, "你好啊，嘿嘿", "TextDemo");
 L.MoveTo(300, 390);
 L.LineTo(300, 410);
 
 L.DrawImage("http://shfhere.t3j4.com/images/baidu.gif", 300, 500, 200, 50);
 L.Stroke_Enabled = true;
 L.LineWidth = 3;
 L.Stroke_Style = "Solid";
 L.Stroke_StartArrow = "Oval";
 L.Stroke_EndArrow = "Classic";
 L.Arc(100, 100, 100, 50, 0, 270);
 L.Stroke_Style = "Dot";
 L.Ellipse(300, 100, 100, 50, false, "ell");
}

function Test()
{
 document.getElementById("ell").strokeweight = 1;
 document.getElementById("ell").strokecolor = "#3333FF";
 document.getElementById("ell").stroke.dashstyle = "solid";
 document.getElementById("TextDemo").innerHTML = "测试";
}

</script>
</head>
<body>
<input type="button" value="Test" name="Test" id="Test" οnclick="javascript:Draw();">
<input type="button" value="Test1" name="Test1" id="Test" οnclick="javascript:Test();">
<v:group ID="group1" style="position:absolute;LEFT:200px; TOP:60px;WIDTH:800px;HEIGHT:600px;" coordsize = "800,600"></v:group>
<textarea id="Text1"></textarea>
</body>
</html>