JavaScript图形库的详细介绍
JavaScript图形库的详细介绍
JavaScript图形库
VisualSW
在WEB开发中，当我们需要在WEB页面上绘制一些图形的时候，就比较困难了，最近的开发中碰到了些需要在客户端绘制图形，比如三角形、椭圆等。好在现在有互联网，到Google一搜，呵呵，还真不少，就这样，找到了一个很好的JavaScript＋Dhtml的图形库，真的很好，不由得感慨老外开发的专业，^_^，好了，我们就去看看吧。
这位老外Walter Zorn的网址是http://www.walterzorn.com，很好的JavaScript的网站，很强的说。
这次用到的是WEB直接绘图功能，到这个地址下载
http://www.walterzorn.com/scripts/wz_jsgraphics.zip
我们来看看效果：
强吧，呵呵！
页面上的帮助文档很强，不用我来解释了吧。
我在这个上面做了一点点开发，呵呵，大家也可以根据自己的需要开发新的函数哈；
增加了一个方法：带箭头的直线
首先添加一些参数：
/*
=====================================================================================
功能：带箭头直线参数
作者：申旺
日期：
======================================================================
*/
var LineColor="#000000";
var LineWidth=3;
var ArrowHeadWidth=5;
var ArrowHeadAngle=15/180*Math.PI;//弧度
var ArrowBegin=true;
var ArrowEnd=true;
/*
======================================================================
*/
然后添加绘制带箭头直线的函数，可以设置箭头的有无，文字，箭头的角度等
/*
======================================================================
功能：绘制带箭头直线
作者：申旺
日期：
======================================================================
*/
this.setArrowWidth = function(x)
{
ArrowHeadWidth = x;
}
this.setArrowAngle = function(x)
{
x=x>90?45:x;
x=x<0?45:x;
ArrowHeadAngle = x*Math.PI/180;
}
this.setLineWidth = function(x)
{
LineWidth=x;
}
this.setLineColor = function(x)
{
LineColor=x;
}
this.setArrowBegin = function(x)
{
ArrowBegin=x;
}
this.setArrowEnd = function(x)
{
ArrowEnd=x;
}
this.drawArrowHeadLine = function(beginX,beginY,endX,endY)
{
this.setColor(LineColor);
this.setStroke(LineWidth);
var dx,dy;
dx=Math.abs(beginX-endX);
dy=Math.abs(beginY-endY);
var LineSlope;//直线斜率(弧度)
LineSlope=Math.atan(dx/dy);
//求出中距每点的坐标
var tmpLine;
tmpLine=(LineWidth+ArrowHeadWidth)/(2*Math.sin(ArrowHeadAngle));
//起点中点
var BeginCenterX;
var BeginCenterY;
//终点中点
var EndCenterX;
var EndCenterY;
if(ArrowBegin)
{
//绘制起点三角形
//Begin
BeginCenterX=beginX+tmpLine*Math.sin(LineSlope);
BeginCenterY=beginY+tmpLine*Math.cos(LineSlope);
//定义起点三角形的三个顶点
var BeginX1,BeginY1;
var BeginX2,BeginY2;
var BeginX3,BeginY3;
BeginX1=beginX;
BeginY1=beginY;
BeginX2=beginX-tmpLine*Math.sin(ArrowHeadAngle-LineSlope);
BeginY2=beginY+tmpLine*Math.cos(ArrowHeadAngle-LineSlope);
BeginX3=beginX+tmpLine*Math.sin(ArrowHeadAngle+LineSlope);
BeginY3=beginY+tmpLine*Math.cos(ArrowHeadAngle+LineSlope);
var XBeginpoints = new Array(BeginX1,BeginX2,BeginX3);
var YBeginpoints = new Array(BeginY1,BeginY2,BeginY3);
this.fillPolygon(XBeginpoints, YBeginpoints);
//End
}
else
{
BeginCenterX=beginX;
BeginCenterY=beginY;
}
if(ArrowEnd)
{
//绘制终点三角形
//Begin
EndCenterX=endX-tmpLine*Math.sin(LineSlope);
EndCenterY=endY-tmpLine*Math.cos(LineSlope);
//定义终点三角形的三个顶点
var EndX1,EndY1;
var EndX2,EndY2;
var EndX3,EndY3;
EndX1=endX;
EndY1=endY;
EndX2=endX-tmpLine*Math.sin(ArrowHeadAngle+LineSlope);
EndY2=endY-tmpLine*Math.cos(ArrowHeadAngle+LineSlope);
EndX3=endX+tmpLine*Math.sin(ArrowHeadAngle-LineSlope);
EndY3=endY-tmpLine*Math.cos(ArrowHeadAngle-LineSlope);
var XEndpoints = new Array(EndX1,EndX2,EndX3);
var YEndpoints = new Array(EndY1,EndY2,EndY3);
this.fillPolygon(XEndpoints, YEndpoints);
//End
}
else
{
EndCenterX=endX;
EndCenterY=endY;
}
//绘制中心线
this.drawLine(BeginCenterX,BeginCenterY,EndCenterX,EndCenterY);
}
this.drawFlowLine = function(beginX,beginY,endX,endY,beginText,endText)
{
var TextX;
var TextY;
this.drawArrowHeadLine(beginX,beginY,endX,endY);
TextX=beginX+20;
TextY=beginY;
this.drawString(beginText,TextX,TextY);
}
下面我们来看看效果：
测试代码：
<HTML>
<HEAD>
<title>DHTML JavaScript Tooltips</title>
<script language="javascript" src="./Graphics.js"></script>
<script language="javascript">
var jg = new jsGraphics();
jg.setArrowWidth(4);
jg.setArrowAngle(20);
jg.setLineWidth(2);
jg.setLineColor("Blue");
jg.drawFlowLine(10,10,200,200,"Line1");
jg.setLineColor("Red");
jg.setArrowBegin(false);
jg.drawFlowLine(110,10,300,200,"Line2","End");
jg.setLineColor("Green");
jg.setArrowBegin(true);
jg.setArrowEnd(false);
jg.drawFlowLine(210,10,400,200,"","Line3");
jg.setArrowEnd(true);
jg.setArrowAngle(15);
jg.drawFlowLine(310,10,500,200,"","Line4");
jg.setArrowAngle(30);
jg.drawFlowLine(410,10,600,200,"","Line5");
jg.setLineWidth(10)
jg.drawFlowLine(410,10,600,200,"","Line5");
jg.setStroke(10)
jg.drawLine(10,300,400,500);
jg.paint();
</script>
<meta http-equiv="expires" content="0">
</HEAD>
<body>
</body>
</HTML>
可以看到效果还是很好的，只是有一个问题，因为绘制线的时候，线的宽度内部实现上是用正方形实现的，所有当线宽了之后，会在头尾发现不理想的地方，如图。
这位老兄真的满强的，还有其他的类库，
比如：层的东东，可以随便托放，图片可是缩放，隐藏等，new就是被我拖大的哈。
提示栏，呵呵，比我那篇文章里面的功能强多了哈：
还有更强的，在线函数绘制图形，哈哈！
感觉WEB都像CS程序了。
最好的是，这么好的冬冬是free的，GNU：
This program is free software;
you can redistribute it and/or modify it under the terms of the
GNU General Public License as published by the Free Software Foundation;
either version 2 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY;
without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.