`

客户端用javascript来画图

wz_jsgraphics 
阅读更多

  • 序：在 www.sitepoint.com 上看了 Simon 的一篇 BLOG ，引导我去了一个很棒的 Web 开发站点 http://www.walterzorn.com/ ，并在那里获得了一个仅用 DHTML 和 Javscript 技术开发的一个高性能的矢量图形库 wz_jsgraphics.js （感谢 Walter Zorn 开发了这个图形库），使用它就可以在你的网页上画出漂亮的矢量图形了。进入这个图形库的介绍页面 http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm ，映入眼帘的是折线、多边形、圆等常见的一些几何图形，起初我以为不过是一些图片罢了，当我看到这行小字 These are not image files. Shapes & text have been dynamically drawn with wz_jsgraphics.js 后，并细细阅读了关于它的说明后，才意识到除了VML 和 SVG可以在 网页上绘制显示矢量图形，仅用DHTML 和 Javascript 同样可以做到这一切！是不是觉得很吃惊呢？(双击一下这个文档，看看放大后的矢量图形吧)，ok!废话少说，下面我将详细介绍一下这个图形库。

    ★ 总览 (overview)

    该图形库使用了 DHTML 和 Javascript 技术，它可以画线，圆，椭圆，折线，多边形，矩形。对于一个不太了解 Javascript 的人来说使用这个图形库也是非常容易的，另外，使用这个图形库画出的图形是完全被优化到像素级的！

    ★ 浏览器的兼容性

    Linux 系统 :
    Browsers with Gecko-Engine (Mozilla, Netscape 6+, Galeon), Konqueror 3.0.3 ( 非常慢 ), Netscape 4, Opera 5 and 6.

    Windows 系统 :
    Gecko-Browsers, IE 4, 5 and 6, Netscape 4, Opera 5, 6 and 7.

    说明：如果在网页全部加载完成后，使用这个矢量图形库进行绘制，在 Opera 版本 7 以前的浏览器中不会执行， Netscape 版本 4 也不会执行。相反，当 HTML 页面正在被解析时， 使用这个图形库进行绘制是全部浏览器均能做到的。

    ★ 怎样使用这个矢量图形库？

    1 ．包含这个库

    插入下面的代码到你的 html 文件的开头部分（在 <head> 和 </head> 之间）：

    		 

    <script type="text/javascript" src="wz_jsgraphics.js"></script>

    		 

    2 ．使用层（ div 或 layer ）作为画布（ canvases ）
    如果是当页面正被载入时，直接在 html 页面中绘制，那么这个步骤不是必须的。

    如果在页面加载完成后绘制，应该设置几个具有绝对坐标的层，作为你的画布，每一个层应该有一个唯一的 id:
    <div id="myCanvas" style="position:relative;height:250px;width:100%;"></div>
    ...
    <div id="anotherCanvas" style="position:relative;height:100px;width:300px;"></div>

    		 

    3 ．下载并保存这个图形库

    到这个地址 http://www.walterzorn.com/scripts/wz_jsgraphics.zip 下载，将解压后的 wz_jagraphics.js 与你的 html 文件放至相同的目录中，如果你的 wz_jagraphics.js 与 html 文件处于不同的目录下，记得在 src=”wz_jsgraphics.js” 中指示 wz_jagraphics.js 的相对路径。

    		 

    ★ 怎样使用这个矢量图形库中的绘制函数？

    1 ． 创建一个 jsGraphics 对象

    a) 在页面完全载入后绘制：

    （这种方式不会在 Netscape 版本 4 和 Opera 版本小于 7 的浏览器中执行）

    还记得前面用 div 元素创建的画布吗？看下面的示例， 需要为 div 创建相应的 jsGraphics 对象，这些代码必须插入到相关的 div 元素结束标志 </div> 后面， 但必须在 </body> 的前面， div 元素的 id 作为 new jsGraphics(); 的构造参数，像下面这样：

    <script type="text/javascript">
    <!--

    var jg = new jsGraphics("myCanvas");

    //-->
    </script>

    如果有多个 div 元素，每一个 div 都需要有它自已的 jsGraphics 对象：

    <script type="text/javascript">
    <!--

    var jg = new jsGraphics("myCanvas");
    var jg2 = new jsGraphics("anotherCanvas");

    //-->
    </script>

    		 

    b ）在页面载入的时候绘制
    （在 Netscape 4 和 Opera 5/6 可以执行）

    只需要将构造参数设为空：

    		 

    <script type="text/javascript">
    <!--

    var jg_doc = new jsGraphics();

    //-->
    </script>

    你可以选择 jg,jg2 或 jg_doc 其它的变量名，只要不违反 Javascript 的命名规则就可以。

    		 
       

    2. 图形绘制函数

    为确保所有浏览器能正确执行， 这里选择页面载入时进行绘制，即上文的 b 方式

    一旦产生这些图形对象（在这个示例中 jg, jg2 或 jg_doc ），就可以使用它来调用绘制图形的方法。由图形对象所绘制的图形将会在相关的 div 元素上显示（采用上文 a 方式构造图形对象）：

    		 

    <script type="text/javascript">
    <!--
    function myDrawFunction()
    {
    jg_doc.setColor("#00ff00"); // 选择绿色
    jg_doc.fillEllipse(100, 200, 100, 180); // 坐标点相对于文档 (document)
    jg_doc.setColor("maroon");
    jg_doc.drawPolyline(new Array(50, 10, 120), new Array(10, 50, 70));
    jg_doc.paint(); // 注意：直接在文档上绘制，而不与某个 div 关联 ,

    jg.setColor("#ff0000"); // 选择红色
    jg.drawLine(10, 113, 220, 55); // 坐标点相对于 div 元素 "myCanvas"
    jg.setColor("#0000ff"); // 选择蓝色
    jg.fillRect(110, 120, 30, 60);
    jg.paint();

    jg2.setColor("#0000ff"); // 选择蓝色
    jg2.drawEllipse(10, 50, 30, 100);
    jg2.drawRect(400, 10, 100, 50);
    jg2.paint();
    }

    var jg_doc = new jsGraphics(); // 直接在文档上绘制
    var jg = new jsGraphics("myCanvas");
    var jg2 = new jsGraphics("anotherCanvas");

    myDrawFunction();

    //-->
    </script>

    		 

    开始画时应首先选择画笔颜色，否则，画笔的颜色取默认值－黑色。坐标值作为绘制图形方法的参数，如果采用上文的 a 方式构造图形对象，那么坐标值是相对于 div 元素的左上角的。每一个画布（图形对象），它的 paint 方法必须被显示的调用以产生 html 格式的图形，否则，在你的屏幕上什么都不会发生。

    		 


    函数名（方法） 示例代码（用 jg 图形对象）

    setColor( "#HexColor" );
    指定画笔颜色，一旦设置后，这个颜色会一直保留，直到下一次再重新指定画笔颜色，这个颜色值可以类似于 html 中的 #rrggbb 颜色表示，用名称表示颜色也可以，例如：“ maroon ”

    jg.setColor("#ff0000");

    or with identical result

    jg.setColor("red");

    setStroke( Number );
    指定画笔采用的线厚度，这个厚度一旦被设置，会一直保留，直到下一次重新指定一，默认厚度是 1px.
    要设置点划线型，需要传 Stroke.DOTTED 参数，点划线型同样适用于矩形，多边型，折线和椭圆。

    jg.setStroke(3);

    or

    jg.setStroke(Stroke.DOTTED);

    drawLine( X1, Y1, X2, Y2 );
    画线。从第一个坐标点到第二个坐标点，线的厚度由 setStroke 设置。

    jg.drawLine(20,50,453,40);

    drawPolyline( Xpoints, Ypoints );
    一条折线是一系列线段的集合， Xpoints 和 Ypoints 是每个点的 x 坐标和 y 坐标的数组集合，必须像下面这样声明：

    var Xpoints = new Array(x1,x2,x3,x4,x5);
    var YPoints = new Array(y1,y2,y3,y4,y5);

    var Xpoints = new Array(10,85,93,60);
    var YPoints = new Array(50,10,105,87);
    jg.drawPolyline(Xpoints,Ypoints);

    drawRect( X, Y, width, height );

    一个矩形的外边线。参照左上角的坐标点，并指定矩形的宽度和高度。

    jg.drawRect(20,50,70,140);

    fillRect( X, Y, width, height );

    填充矩形，参照左上角的坐标点，并指定矩形的宽度和高度。

    jg.fillRect(20,50,453,40);

    drawPolygon( Xpoints, Ypoints );
    多边形。 Xpoints 和 Ypoints 是每个点的 x 坐标和 y 坐标的数组集合，必须像下面这样声明：

    var Xpoints = new Array(x1,x2,x3,x4,x5);
    var YPoints = new Array(y1,y2,y3,y4,y5);

    如果始点和终点末被指定，多边线将会自动闭合。

    var Xpoints = new Array(10,85,93,60);
    var Ypoints = new Array(50,10,105,87);
    jg.drawPolygon(Xpoints, Ypoints);

    Instead of Xpoints and Ypoints you may use another name provided it follows the rules for variable names.

    fillPolygon( Xpoints, Ypoints );

    填充矩形。参数作用见 drawPolygon()

    jg.fillPolygon(new Array(10,85,93,60), new Array(50,10,105,87));

    drawEllipse( X, Y, width, height );

    画椭圆边线。参照椭圆的外接矩形， x 和 y 是这个外接矩形的左上角坐标

    jg.drawEllipse(20,50,70,140);
    or
    jg.drawOval(20,50,70,140);

    fillEllipse( X, Y, width, height );
    填充椭圆。参数见 drawEllipse()

    jg.fillEllipse(20,50,71,141);
    or
    jg.fillOval(20,50,71,141);

    drawString( "Text", X, Y );

    写文本至由 x 和 y 坐标指定的位置。不同于 Java ，坐标值是第一行文本的左上角坐标值。如果文本中包含有 HTML 标记将被转义，举个例子：

    "Some Text<br>more Text" 会被转义为两行


    setFont( "font-family", "size+unit", Style );
    在 drawString() 之前调用。指定字体，大小，样式，字体和大小可以是与 HTML 中指示的一样，至于样式，可以使用的有：
    Font.PLAIN 默认样式，非粗体和斜体
    Font.BOLD 粗体
    Font.ITALIC 斜体

    它们可以结合使用

    jg.setFont("arial","15px",Font.BOLD);
    jg.drawString("Some Text",20,50);

    drawImage( "src", X, Y, width, height );
    在指定的位置画图像， ”src” 参数指定图像所在路径， width 和 height 参数允许调整图像宽高。

    jg.drawImage("friendlyDog.jpg", 20,50,100,150);

    paint();
    必须显示调用，才能真正在 html 页面上画图形，不推荐每隔一段（每画一个图形）就调用一次。

    像下面这样的调用应该避免 :
    jg.drawEllipse(0, 0, 100, 100);
    jg.paint();
    jg.drawLine(200, 10, 400, 40);
    jg.paint();
    ...

    像下面这样的调用性能会很高 :
    jg.drawEllipse(0, 0, 100, 100);
    jg.drawLine(200, 10, 400, 40);
    /*... 还有其它画的方法 ... */
    jg.paint(); // 最后调用 paint()

    jg.paint();

    clear();

    与图形对象关联的 div 画布中的图形被清除（在 div 中不是由这个图形对象创建的内容是不会被改变的）

    jg.clear();

    setPrintable( true );

    默认情况下，打印这些图形是不太可行的，因为浏览器的默认打印设置中会关闭打印背景，调用 setPrintable() ，并设置参数为 true ，将重置图形为可打印的（至少在 Mozilla/Netscape 6+ and IE 中）  
分享到：
| Spring IDE安装及使用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JavaScript画图画图画图画图画图

    在"JavaScript画图画图画图画图画图"这个主题中，我们主要关注的是使用JavaScript来实现图形绘制的功能。JavaScript提供了多种方法来创建、操作和展示图形，这包括基本的绘图API以及更高级的库，如Canvas API和SVG。...

    javascript画图

    总结一下，JavaScript画图主要依赖HTML5的Canvas API，通过创建和操作绘图环境，可以绘制各种图形，包括但不限于箭头和圆圈。熟练掌握这些技术，可以让你在网页开发中创建出丰富的交互式用户体验。在学习过程中，...

    难得javascript画图源码

    在这个"难得的JavaScript画图源码"项目中，开发者利用VML来实现工作流的动态绘制。工作流是一种描述任务和决策之间关系的流程模型，常用于业务流程管理、软件设计等领域。动态定义意味着用户可以在运行时创建、修改...

    Javascript画图js包

    JavaScript画图库，如标题所示的"Javascript画图js包"，是一种用于在网页上创建图形和图表的工具。在Web开发中，这种库通常基于HTML5的Canvas元素，允许开发者利用JavaScript动态生成视觉效果。在给定的描述中提到了...

    WEB画图(java)

    Java提供了多种方式来实现Web画图，包括使用Java Applets、JavaFX以及通过HTML5 Canvas API与JavaScript交互。下面将详细探讨这些知识点。 1. **Java Applets**： Java Applets是早期Java Web应用的一种形式，允许...

    K线图画图最强大的javascript脚本

    在IT行业中，特别是在Web开发领域，用JavaScript来绘制K线图可以实现动态交互，为用户带来更直观的体验。 "K线图画图最强大的javascript脚本"这个资源显然是为了帮助开发者创建高效的K线图绘制功能。JavaScript是一...

    wz_jsgraphics.js javascript 画图

    在JavaScript画图的场景中，Ajax可以用来异步地获取数据，然后将数据转化为图形显示在Canvas上，实现动态的可视化效果。 "asp"和"c#"是两种服务器端编程语言，ASP.NET（通常与C#一起使用）提供了一个强大的框架来...

    JQ JS javascript 截图功能 画图功能

    JavaScript是一种轻量级的解释型编程语言，主要用于网页和网络应用的客户端脚本。它能够改变HTML元素、处理事件、执行异步通信、创建动画效果等。jQuery是一个流行的JavaScript库，简化了DOM操作、事件处理和Ajax...

    页面画图ASP.NET 画图

    在ASP.NET中，可以结合JavaScript和Ajax技术实现动态画图，用户交互后立即更新画布。例如，当用户点击按钮时，服务器端生成新的绘图并返回到客户端。 8. **WebControl扩展** 如果需要自定义控件来实现更复杂的...

    javascript 画图资料

    在"新建文件夹 (2)"这个压缩包中，可能包含了使用JavaScript画图的实例代码、教程或者特定库的用法说明。通过学习和研究这些内容，开发者可以提升自己在JavaScript图形编程方面的技能，创建出更具吸引力和功能性的...

    画图，引用页面

    2. 在客户端JavaScript代码中获取Canvas元素，然后利用`getContext('2d')`获取2D渲染上下文。 3. 使用渲染上下文提供的方法（如`fillRect`, `strokeRect`, `drawImage`等）进行绘图操作。 4. 如果需要动态生成图形，...

    一个非常实用的WEB画图控件

    在画图控件中，可能通过AJAX将用户在客户端绘制的图形实时同步到服务器，保存或与其他用户共享。 4. **事件监听和处理**：为了实现交互性，控件会监听用户的鼠标和触摸动作，如点击、拖动、释放等，并根据这些事件...

    利用Office Visio工具画图的程序

    总结来说，"利用Office Visio工具画图的程序"涉及了ASP.NET C#的服务器端开发、客户端交互、以及Visio的编程接口使用。开发这样的应用程序需要综合运用多种技术，并且要注意解决由此带来的挑战，如服务器端的无头...

    js 画图 例子

    本文将深入探讨如何使用JavaScript进行画图，包括基础概念、常用库以及实例解析。 一、HTML5 Canvas API 在JavaScript中，HTML5的Canvas API是实现动态图形绘制的基础。它提供了一系列的方法和属性，允许开发者通过...

    兼容FireFox 用javascript写的一个画图函数

    本文将详细介绍一个兼容Firefox的JavaScript画图函数，该函数通过使用`&lt;div&gt;`元素来实现绝对定位的点绘图，从而实现在多种浏览器中的兼容性。 #### 二、核心概念与技术背景 1. **JavaScript**： - JavaScript是一...

    js画图工具

    JavaScript是一种强大的客户端脚本语言，常用于增强网页的交互性和动态性，而jQuery作为JavaScript的一个轻量级库，简化了DOM操作，事件处理和动画效果，因此是实现画图功能的理想选择。 【描述】中提到的"jquery...

    js画图作的五子棋程序，不用一个图片，所有图型都用js画出来的

    在JavaScript中，我们可以使用Canvas API来实现类似画布的绘图功能。Canvas是一个HTML5元素，提供了一个可编程的2D图形接口，允许开发者直接在网页上绘制图形。在这个五子棋程序中，开发者可能定义了一系列函数，...

    js画图代码

    在“js画图代码”这个主题中，我们主要探讨的是如何使用JavaScript来实现图形绘制功能，使用户可以直接在浏览器上进行画图操作。 在浏览器上画图，最常用的库是HTML5的Canvas API。Canvas提供了一个二维绘图上下文...

    asp.net画图工具

    在ASP.NET中，可以通过JavaScript库如Fabric.js或Paper.js来操作Canvas元素，这些库提供了丰富的API，可以帮助我们在服务器端生成的页面上实现复杂的画图功能。 2. JavaScript与AJAX：为了实现画图工具的实时交互性...

Magicbox
Global site tag (gtag.js) - Google Analytics