JavaScript图形库

原创 2004年05月21日 14:33:00

JavaScript图形库

VisualSW

       WEB开发中,当我们需要在WEB页面上绘制一些图形的时候,就比较困难了,最近的开发中碰到了些需要在客户端绘制图形,比如三角形、椭圆等。好在现在有互联网,到Google一搜,呵呵,还真不少,就这样,找到了一个很好的JavaScriptDhtml的图形库,真的很好,不由得感慨老外开发的专业,^_^,好了,我们就去看看吧。

这位老外Walter Zorn的网址是http://www.walterzorn.com,很好的JavaScript的网站,很强的说。

这次用到的是WEB直接绘图功能,到这个地址下载

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" />CSDN_Dev_Image_2004-5-201533010.png

强吧,呵呵!

页面上的帮助文档很强,不用我来解释了吧。

我在这个上面做了一点点开发,呵呵,大家也可以根据自己的需要开发新的函数哈;

增加了一个方法:带箭头的直线

首先添加一些参数:

/*

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

功能:带箭头直线参数

作者:申旺

日期:<?xml:namespace prefix = st1 ns = "urn:schemas-microsoft-com:office:smarttags" />2004/04/15

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

*/

var LineColor="#000000";

var LineWidth=3;

var ArrowHeadWidth=5;

var ArrowHeadAngle=15/180*Math.PI;//弧度

var ArrowBegin=true;

var ArrowEnd=true;

 

/*

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

*/

 

 

然后添加绘制带箭头直线的函数,可以设置箭头的有无,文字,箭头的角度等

/*

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

功能:绘制带箭头直线

作者:申旺

日期:2004/04/15

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

*/

    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>

 

CSDN_Dev_Image_2004-5-201533012.png

可以看到效果还是很好的,只是有一个问题,因为绘制线的时候,线的宽度内部实现上是用正方形实现的,所有当线宽了之后,会在头尾发现不理想的地方,如图。

 

这位老兄真的满强的,还有其他的类库,

比如:层的东东,可以随便托放,图片可是缩放,隐藏等,new就是被我拖大的哈。

CSDN_Dev_Image_2004-5-201533014.png

提示栏,呵呵,比我那篇文章里面的功能强多了哈:

CSDN_Dev_Image_2004-5-201533016.png

还有更强的,在线函数绘制图形,哈哈!

感觉WEB都像CS程序了。

CSDN_Dev_Image_2004-5-201533018.png

最好的是,这么好的冬冬是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.

See the GNU General Public License

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

好了,呵呵,快去看看哈!

 

35款 JavaScript 图形图表库

图表是数据图形化的表示,通过形象的图表来展示数据,比如条形图,折线图,饼图等等。可视化图表可以帮助开发者更容易理解复杂的数据,提高生产的效率和 Web 应用和项目的可靠性。   在这篇文章中,我...
  • zhihui1017
  • zhihui1017
  • 2015年11月18日 14:57
  • 1116

10款强大的JavaScript图表图形插件推荐

来自:http://www.iteye.com/news/24535 上有很多用于绘制图表图形的免费JavaScript插件和图表库,这类插件大量出现的原因,一是人们不再依赖于Flash,二是浏览器...
  • shanzhizi
  • shanzhizi
  • 2015年12月02日 14:02
  • 3060

用ArcGIS API for JavaScript在地图上绘制圆多边形

问题描述:     借助Arcgis的Api在地图上绘制圆与多边形,查看Api的两个类Circle和Polygon      Api地址:https://developers.arcgis.com...
  • wangwuyilove
  • wangwuyilove
  • 2015年09月07日 20:40
  • 10777

收集的几个开源Javascript图形库,非常不错.

转自:http://www.cnblogs.com/webgis8/articles/1516639.html  因为Google Map项目的需要,最近一直在寻求相关的Javasc...
  • dsjlzh
  • dsjlzh
  • 2012年02月02日 16:58
  • 440

【 随笔 】 JavaScript 图形库的流行度调查

2014年可以说是 JavaScript 最风光的一年,成为上升最快的语言,在 Github 上最受关注的前10个仓库中,有7个是基于 JavaScript 开发的,数不胜数的函数库可适应于各种需求。...
  • lzhlzz
  • lzhlzz
  • 2015年02月02日 21:42
  • 2306

JavaScript图表和图形库

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

#4JavaScript图形库

JavaScript_DOM编程艺术
  • lp15203883326
  • lp15203883326
  • 2017年07月09日 22:06
  • 72

javascript 基于数据文档的图形库---d3

位置: https://github.com/mbostock/d3/wiki/Gallery 1       D3简介 D3.js是一个用来操作基于数据的文档的javascript库,D3...
  • zzz_781111
  • zzz_781111
  • 2013年07月10日 10:10
  • 969

html5图形库fabric.js实现二叉树

node body { position:absolute; } pre { margin-left: 15px !important } #po...
  • wan318
  • wan318
  • 2016年01月05日 18:34
  • 4407

业余土制:轻量级图形库 PixelLib

简述:2D抗锯齿,矢量制图,快速图形图像变换,64种不同的像素格式,色彩空间变换,SSE2/MMX优化,纯软件实现,纯C代码。 地址:http://code.google.com/p/pixelli...
  • skywind
  • skywind
  • 2011年03月11日 19:33
  • 3632
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript图形库
举报原因:
原因补充:

(最多只允许输入30个字)