- 浏览: 129347 次
- 性别:
- 来自: 安徽
文章分类
-
序:在 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 中)
发表评论
-
JS强制换行
2013-04-18 15:38 1253$(function() { $(".wor ... -
Window.ShowModalDialog使用手册
2012-08-08 14:13 1149原文引自:http://www.cnblogs.com/ ... -
form序列化成json串
2012-07-18 21:18 1230;(function($){ /** * 依赖jq ... -
JS 四舍五入
2012-07-18 15:25 834原文引自:http://www.cnblogs.com/zon ... -
My97DatePicker使用
2011-07-14 20:23 1577My97DatePicker IE6下遇到的问题: In ... -
jQuery Datepicker 日期选择插件
2011-07-04 17:21 3879在Web开发中,总会遇到 ... -
JavaScript中对象的构造方法
2011-05-31 13:13 775第一种方式: 工厂方法 ... -
为textarea 增加 maxlength 属性
2011-05-07 09:36 935為 textarea 增加 maxlength 屬性 o 如 ... -
正则表达式非法字符验证[1]
2011-05-07 09:30 2633正则表达式用于字符串 ... -
正则表达式非法字符验证[2]
2011-05-07 09:25 3039// 判断输入是否是一个 ... -
js replaceAll
2011-05-07 09:18 1105String.prototype.replaceAll = ... -
怎样阻止超链接跳转
2011-05-06 12:16 1567在用 <a href="" oncl ... -
js浮点运算bug的解决办法
2011-05-06 12:15 1104一、事件 最近在做项目的管理费,在客户端用j ...
相关推荐
9款很棒的网页绘制图表JavaScript框架脚本1.FlotFlot...它可在客户端即时绘制并生成各种图形。重要的是它使用简便(还有很多可选的设置)、吸引人的视觉 效果和交互功能,如图表缩放和鼠标跟踪等。该javascript框架适用
在画图工具中 ,在服务器端直接生成图片的又不美观又缺乏互动性,而在客户端用JavaScript生成的图片还是稍欠美感和互动性,所以最好看又最互动的报表方案应该是Flash报表方案了,这是官网最新的amChart包,里面包含 ...
1.2 大于0的整数 (用于传来的ID的验证) 1.3 负整数的验证 1.4 整数不能大于iMax 1.5 整数不能小于iMin 2、时间类 2.1 短时间,形如 (13:04:06) 2.2 短日期,形如 (2003-12-05) 2.3 长时间,形如 ...
1.2 大于0的整数 (用于传来的id的验证) 1.3 负整数的验证 1.4 整数不能大于imax 1.5 整数不能小于imin 2、时间类 2.1 短时间,形如 (13:04:06) 2.2 短日期,形如 (2003-12-05) 2.3 长时间,形如 ...
1.2 大于0的整数 (用于传来的ID的验证) 1.3 负整数的验证 1.4 整数不能大于iMax 1.5 整数不能小于iMin 2、时间类 2.1 短时间,形如 (13:04:06) 2.2 短日期,形如 (2003-12-05) 2.3 长时间,形如 (2003-12-05...
毕竟自己画的嘛哈哈哈[]~( ̄▽ ̄)~* ),不过也有一些不合理的地方(底部播放条没有进度条,音乐和歌单详情界面没有返回按钮(通过鼠标右键后者esc/Backspace返回)),鼠标侧键返回太过习惯了,画图时完全没考虑过这个...
ampie_1.6.4.1在画图工具中 ,在服务器端直接生成图片的又不美观又缺乏互动性,而在客户端用JavaScript生成的图片还是稍欠美感和互动性,所以最好看又最互动的报表方案应该是Flash报表方案了,这是官网最新的amChart...
1.2 大于0的整数 (用于传来的id的验证) 1.3 负整数的验证 1.4 整数不能大于imax 1.5 整数不能小于imin 2、时间类 2.1 短时间,形如 (13:04:06) 2.2 短日期,形如 (2003-12-05) 2.3 长时间,形如 ...
自由素描使用 WebSockets 和 node.js 的 HTML5 实时协作绘图 这是一个支持多用户的... 它是用 CoffeeScript 编写的,被解析成 javascript 客户端。 并且服务器端是使用 ws 库通过 javascript 和 node js 进行编程的。
jsPDF 是一个使用Javascript语言生成PDF的开源库。你可以在Firefox插件,服务端脚本或是浏览器脚本中使用它。 客户端Safari 和 iPhone Safari 支持得最好,其次是Opera和Windows下的Firefox 3等。IE暂不支持。
在b/s开发中经常用到的javaScript技术整理 一、验证类 1、数字验证内 1.1 整数 1.2 大于0的整数 (用于传来的ID的验证) 1.3 负整数的验证 1.4 整数不能大于iMax 1.5 整数不能小于iMin 2、时间类 ...
电子漆这是在electron.js中制作的一个简单的绘画程序
此外,《ASP.NET 4高级程序设计(第4版)》专门提供了两章的内容来教你如何用Ajax 技术制作快速响应的页面,以及如何使用微软的ASP.NETAJAX平台。另外,还专门介绍了ASP.NET4 新增的功能,如MVC 和动态数据等。 ...
此外,《ASP.NET 4高级程序设计(第4版)》专门提供了两章的内容来教你如何用Ajax 技术制作快速响应的页面,以及如何使用微软的ASP.NETAJAX平台。另外,还专门介绍了ASP.NET4 新增的功能,如MVC 和动态数据等。 ...
尝试使用实时数据: : 更好地可视化波动较小的市场。 如果性能存在问题,请降低更新间隔/最大热图大小。订单簿热图该回购实现了实时限价订单热图,静止... 我建议使用其他客户端,但是如果您对此实现感兴趣,请查看exam
客户端服务器该“应用程序”使用库(具有非常好的API和文档)来允许用户通过服务器进行通信,该服务器仅相互广播消息。 在此项目中同时设置了服务器(Node.js)和客户端(Browser JS)。 只需运行npm install && npm...
6、练习程序:用SOCKET模拟实现SSH客户端功能 6、项目实战二、开发FTP服务器\客户端软件 ※分别开发服务器端和客户端,通过Socket模块实现网络通信,模拟实现FTP主要的文件下载、上传功能、实现多用户并发在线使用...