# JavaScript图形库

JavaScript图形库

VisualSW

http://www.walterzorn.com/scripts/wz_jsgraphics.zip

<?xml:namespace prefix = v ns = "urn:schemas-microsoft-com:vml" /><?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

/*

=====================================================================================

======================================================================

*/

var LineColor="#000000";

var LineWidth=3;

var ArrowBegin=true;

var ArrowEnd=true;

/*

======================================================================

*/

/*

======================================================================

======================================================================

*/

this.setArrowWidth = function(x)

{

}

this.setArrowAngle = function(x)

{

x=x>90?45:x;

x=x<0?45:x;

}

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.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;

//起点中点

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;

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;

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;

TextX=beginX+20;

TextY=beginY;

this.drawString(beginText,TextX,TextY);

}

<HTML>

<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">

<body>

</body>

</HTML>

This program is free software;

you can redistribute it and/or modify it under the terms of the

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.

See the GNU General Public License

at http://www.gnu.org/copyleft/gpl.html for more details.

• 本文已收录于以下专栏：

## JavaScript图形库

JavaScript图形库 Web技术中文网 2005年7月11日阅读:813次 　       在WEB开发中，当我们需要在WEB页面上绘制一些图形的时候，就比较困难了，最近的开发中碰到了些需要在客...
• lcfgaoyong
• 2006年05月10日 21:13
• 631

## JavaScript图表和图形库

JavaScript图表和图形库就是一个简单创建图表和图形的工具。现在互联网上有许多五花八门的JavaScript图表和图形库，帮助开发者们更好的创建web应用的图表和图形。在这篇文章中，小编将为大家...
• hou549135295
• 2015年10月17日 23:18
• 761

## Javascript实现统计图形库

http://www.highcharts.com/推出javascript实现各种统计图形，柱状图，饼形图，线性图，Excel能够实现的基本都能实现，而且是动态的，鼠标移到统计图上，有相应数据输出，...
• jjeggplant4000
• 2009年12月07日 16:14
• 1154

## javascript 简单图形库

• Free_Wind22
• 2008年03月08日 15:48
• 646

## VS2015配置EGE图形库

• PYPARA
• 2016年09月02日 21:46
• 2621

## javascript 矢量图形库

http://www.walterzorn.com/   其中包含了几个非常有用的javascript 函数库。
• xinyueyuli
• 2006年04月30日 15:12
• 1259

## 开源Javascript图形库[转]

• jjjjj102310253
• 2009年11月24日 14:14
• 1949

## c++入门之一：EGE图形库介绍与配置（VS2013、DEVCPP）

c++学习的方式方法很多，本片文章主要是介绍EGE图形库、为DEVCPP和VS2013配置，为之后的c++入门学习做准备。 本笔记主要从以下几个方面来讲解 1、ege图形库的简介 2、配置准备 3、e...
• u013872561
• 2015年06月10日 08:51
• 6250

## 几种开源图形相关的库的总结

• coy_wang
• 2010年01月17日 14:56
• 1742

## C＃图形库

1。iTextSharp (iTextSharp) 是在.NET 平台中用C#完全实现的iText 开源Java类库。iText#这个库可以让你轻松的生成PDF文件。它实现为一个程序集。 来源: ht...
• chengbd
• 2005年08月17日 19:38
• 1678

举报原因： 您举报文章：JavaScript图形库 色情 政治 抄袭 广告 招聘 骂人 其他 (最多只允许输入30个字)