- 浏览: 1002605 次
文章分类
最新评论
-
18335864773:
很多公司项目 都在使用pageoffice 来操作word,e ...
用java生成word文档 -
Gozs_cs_dn:
请问下博主, 怎样将sitemesh3.xsd绑定 sitem ...
SiteMesh3配置 -
Rose_06:
springside4.0quick-start.bat报错原因 -
ilemma:
我也是刚参见工作啊,经理让自学这个,有些东西不太懂,能不能发个 ...
Apache Shiro在Web中的应用 -
shanbangyou:
你废了
程序员上班打酱油的方法
本例子用wz_jsgraphics.js进行画矢量图,兼容多浏览器.
★ 总览 (overview)
该图形库使用了 DHTML 和 Javascript 技术,它可以画线,圆,椭圆,折线,多边形,矩形。对于一个不太了解 Javascript 的人来说使用这个图形库也是非常容易的,另外,使用这个图形库画出的图形是完全被优化到像素级的!
★ 性能( Performance )
在 HTML 中并没有提供类似于线、圆、椭圆或其它非矩形的图形表现元素。在工作区中,我们可以利用、并设置具有背景颜色的 Div (或 Layer )元素,并且把这些 Div 元素缩小到与像素相似的大小,每一个 Div 元素代表了一个像素,然后用 Div 元素在网页上进行绘制。我们在使用这些 Div 模型来画矢量图形的时候,要尽可能避免一些冗余的接连处,看下面的图:
<script type="text/javascript"></script>
从左至右,最左边的是最不好的画法,仔细看一下会发现阶梯状的每一行的连接处都会有一个 Div 连接,这个 Div 是没有用的,应该被删除;中间的画法已经很不错了,但应该再优化一下,以第一行为例:用三个 Div 表现水平的一行是多余的,应合为一个,同样垂直方向的 Div 也应合并(例如阶梯的末尾)。
按 Walter Zorn 所言,在画矢量图形时为获得更好的性能,并尽可能避免上述的一些冗余,他用了最好、最快速的算法,只用最少、最必要的 Div 元素来绘制图形。
需要说明的是,不要把这个图形库与用 Java 语言或其它语言开发的图形应用程序相比较,要知道,受基本的 HTML 和浏览器约束,采用 Javascript 脚本语言创建 Div 元素是非常慢的,在这里能达到图形绘制的最优化都已经是最好的结果。在使用这个图形库时,所绘制的图形像素最好不要超过 600 - 1000 像素。
是否应该选择 SVG? 目前具有 SVG 能力的浏览器或使用 SVG 插件的浏览器仍然是少数,所以如果你要画一些简单的矢量图形,使用这个矢量图形库还是一个不错的选择。
★ 浏览器的兼容性
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 文件的开头部分(在 和 之间):
<script type="text/javascript" src="wz_jsgraphics.js"></script>
2 .使用层( div 或 layer )作为画布( canvases )
如果是当页面正被载入时,直接在 html 页面中绘制,那么这个步骤不是必须的。
如果在页面加载完成后绘制,应该设置几个具有绝对坐标的层,作为你的画布,每一个层应该有一个唯一的 id:
...
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 元素的 id 作为 new jsGraphics(); 的构造参数,像下面这样:
<script type="text/javascript">
</script>
如果有多个 div 元素,每一个 div 都需要有它自已的 jsGraphics 对象:
<script type="text/javascript">
</script>
b )在页面载入的时候绘制
(在 Netscape 4 和 Opera 5/6 可以执行)
只需要将构造参数设为空:
<script type="text/javascript">
</script>
你可以选择 jg,jg2 或 jg_doc 其它的变量名,只要不违反 Javascript 的命名规则就可以。
2. 图形绘制函数
为确保所有浏览器能正确执行, 这里选择页面载入时进行绘制,即上文的 b 方式
一旦产生这些图形对象(在这个示例中 jg, jg2 或 jg_doc ),就可以使用它来调用绘制图形的方法。由图形对象所绘制的图形将会在相关的 div 元素上显示(采用上文 a 方式构造图形对象):
<script type="text/javascript">
</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
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 中)
jg.setPrintable(false);
wz_jsgraphics(js画图多浏览器).rar (6.8 KB)
描述: wz_jsgraphics.js+index.html
详细见这里
http://hta.group.iteye.com/group/blog/612232
其实网上有许多不错的javascript 2d库。比较著名的 jsgraphics 和 JS2D
- wz_jsgraphics_js画图多浏览器_.rar (6.8 KB)
- 下载次数: 174
发表评论
-
java冒泡排序对布尔类型进行排序
2015-12-11 23:06 640QQ 928900200 程序代写 java不能对 ... -
java星球机器人建模UML
2014-10-06 22:29 395Your task is to design and imp ... -
java循环
2014-09-19 09:56 398Computer Science, Claremont McK ... -
代写java程序qq:928900200
2014-06-18 12:46 3学校为全面提升学校教学质量,提高管理水平,决定开发一套小型成 ... -
StringTokenizer类的使用
2013-12-13 15:15 387StringTokenizer是一个用来分隔String的应 ... -
销售管理需求分析
2013-07-03 08:18 4991. 概述 目前,销售管理在企业管理中 ... -
基于jsp+servlet+jdbc的销售管理
2013-07-02 16:32 7源码http://apenny.taobao.com 1 ... -
Java获取请求客户端的真实IP地址
2012-05-07 16:40 901通常通过request.getRemoteAd ... -
java读取excel
2012-03-30 16:56 453import org.apache.poi.hssf.user ... -
基于Myeclipse9.1的spring3.1MVC开发搭建
2011-10-01 14:27 2017(1)配置基础装备。每个符合Java EE规范的web应用程 ... -
myeclipse 9.1 破解成功
2011-09-28 18:06 72059.0 的注册机在windows下 ... -
myeclipse9.1下载及破解方法-破解版
2011-09-26 11:17 18186MyEclipse 9.1 下载 注册 破 ... -
JDBC4.1更新了两个新特性
2011-05-20 10:23 10061. Connection,ResultSet 和 State ... -
Java replaceAll的陷阱之括弧
2011-05-09 16:26 4500大家都知道,replaceAll这个东西支持regular e ... -
Archive for 四月, 2011JavaEye被逼改名ItEye
2011-04-02 08:50 606Oracle挥舞法律大棒 JavaEy ... -
test
2011-04-02 08:34 426<script type="text/Java ... -
开源文档学习
2011-03-31 17:29 518http://www.family168.com -
myeclipse 8.6 M1 注册码
2011-03-31 10:13 1037Subscriber:MaYong Subscription ... -
java web 开源框架
2011-03-31 09:49 1033WebWork WebWork是由O ... -
google 谷歌 吃豆人 pacman
2010-05-26 12:12 1277原则上Google的Doodle只有 ...
相关推荐
纯js画曲线功能,当有数据时,替换数据即可
Excanvas是Google推出的一个JavaScript库,它为不支持HTML5 Canvas元素的老版IE浏览器提供了一个兼容解决方案。...通过学习和实践Excanvas,你可以掌握在任何浏览器环境下使用JavaScript进行画线和其他图形操作的技术。
JavaScript(简称JS)是一种广泛用于Web开发的轻量级编程语言,它允许开发者在用户的浏览器端执行代码,为网页添加动态功能。在这个主题中,我们将深入探讨如何利用JS来实现画图,包括画线条、多边形、艺术字以及...
纯js实现鼠标移动轨迹线的绘制,回车轨迹回放。 操作说明:在窗口中任意位置点击鼠标,程序将在两点间画线; 并通过拟合曲线算法,对...工作原理:在页面中动态添加div块的方式,模拟画线。 作者邮箱:258385583@qq.com
一款基于prototype.js的网页画线插件,画曲线图插件,使用本插件可在网页上生成虚线、物理抛物线、正弦波曲线,数字信息曲线等各种线形。本开源包中仅包括插件代码,不带有示例,需要的可参考官方 网站的调用例子。
综上所述,实现“js 鼠标画线 兼容主流浏览器”功能需要对JavaScript事件处理、HTML5 Canvas API以及跨浏览器兼容性有深入理解。项目中的代码可能包含了以上提到的所有细节,通过分析这些代码,我们可以学习到如何在...
在Three.js这个强大的JavaScript 3D库中,创建带宽度线和动态连续的箭头线是一种常见的需求,尤其是在构建交互式3D场景时。本文将深入探讨如何利用Three.js实现这一功能。 首先,理解Three.js的基本概念至关重要。...
本主题主要探讨如何使用JavaScript实现跨浏览器的画线和画图功能,特别是兼容Firefox和IE等主流浏览器。 首先,JavaScript本身并不直接支持 canvas 元素的低级图形操作。canvas 是HTML5引入的一个元素,提供了在...
threejs实时画线 鼠标左键添加点 鼠标右键回退 按住shift键画平行x轴或平行z轴的线 按ESC结束画线
在GIS(地理信息系统)中,实现通过鼠标交互来画线是一项基础且重要的功能。这个功能使得用户能够直观地在地图上绘制线条,从而创建路径、边界或其他地理特征。本篇文章将详细探讨如何利用C#编程语言,结合鼠标交互...
在这个"openlayers3画线功能例子"中,我们将深入探讨如何利用OpenLayers 3来实现地图上的线条绘制,包括直线和扇形图。 首先,要实现画线功能,我们需要在HTML文件中引入OpenLayers库的CDN链接或者本地文件。接着,...
1. **几何构造**:JSXGraph允许用户创建并操纵几何对象,如点、线、圆、三角形等。这些对象可以相互关联,例如,通过定义点在线段上的移动来动态改变线段的长度。 2. **函数绘图**:用户可以绘制任意复杂度的一元或...
ArcGIS API for JavaScript 实现identifyTask 画线选取元素
在ASP.NET中,"页面画线"通常是指在网页上绘制线条或图形,这涉及到HTML、CSS和JavaScript的基础,以及可能的服务器端编程技术。在Web开发中,我们可以通过多种方式实现这一功能,包括纯前端技术和结合服务器端控件...
网页画线是一个基础但重要的技能,特别是在开发交互式或数据可视化应用时。在这个例子中,我们将探讨如何在网页上实现画线,这是一个很常见的需求,无论是为了创建图表、设计简单的游戏还是实现用户交互。 首先,...
在“59.(leaflet篇)leaflet动态画线.zip”这个压缩包中,我们聚焦于如何使用Leaflet来实现地图上的动态轨迹线绘制。这个教程可能包含了在 Leaflet 地图上实时更新路径线,比如车辆移动轨迹或者运动路线等场景的...
arcgis api for javascript 实现动态轨迹(巡查轨迹)
在讨论JavaScript画线技术时,我们通常会涉及到两个不同的方法:使用HTML的矢量标记语言(VML)和使用HTML5的画布元素(Canvas)。接下来将详细介绍这两种方法的实例代码。 ### VML技术在IE浏览器下的应用 在早些...