快捷搜索:  as  test  1111  test aNd 8=8  test++aNd+8=8  as++aNd+8=8  as aNd 8=8

金宝搏亚洲体育博彩_酒文化网进入



GFX(dojox.gfx)作为 Dojo 扩展组件之一,封装了底层浏览器中实际的图形引擎,使开拓职员具备了 Web 绘图的基础能力,是此类利用的根基。同时,作为 Dojo 核心组件的 DnD(dojo.dnd),则实现了基于浏览器的鼠标拖拽操作,从而为图形组件选择,组件间连线等高档绘图操作供给了技巧支持。再者,经由过程引入自定义 Dojo 小部件(dijit),开拓职员可以对已有利用进行合理的扩展,应用户可以经由过程更为机动的要领去操作图形。本文首先将对基于浏览器的绘图道理做一先容,而后以层进的要领向读者展示若何将 GFX,DnD 以及 dijit 进行慎密的结合,在浏览器中完成绘图类利用常见的各类操作,着末将经由过程一个实际的 Web 绘牟利用来让读者对本文所述内容有更进一步的体会。

浏览器绘图的基滥觞基本理

基于 HTML 和 JavaScript 的浏览器绘图要领,依附于各个浏览器内部所供给的图形引擎。但因为不合浏览器所支持的收集图形标准不尽相同,给软件的兼容性造成了很大年夜的艰苦。Dojo 金宝搏亚洲体育博彩作为今朝盛行的 JavaScript 框架之一,虽然在必然程度上为开拓职员樊篱了这些差异,但当碰到某些特殊的绘图需求时,仍显得力不从心,因而也就有需要对浏览器绘图的基滥觞基本理有所懂得,这样才会写出机能更稳、效率能高的优秀代码。今朝几个主流的收集图形标准包括 IE 支持的 VML,Firefox,Safari 和 Opera 支持的 SVG 以及 HTML5 支持的 Canvas。

VML 是微软开拓并在 IE 5.0 以上版本供给支持的基于 XML 的一种标记说话,应用 VML 描述的矢量图形,由 shape 和 group 两个基础元素定义,shape 描述了一个矢量图形元素,而 shape 则将这些图形元素聚拢在一路,从而使其可以作为一个整体被处置惩罚。因为应用简单的文原先表示图像,因而 VML 可用很少的字节来表示相对繁杂的图像。

SVG 是由 W3C 拟订的同样基于 XML 的矢量图形描述说话,SVG 元素是唆使若何绘制图像的一些指令,由图形引擎解释这些指令,把 SVG 图像在浏览器上显示出来。应用 SVG 可以在网页上显示出各类各样的高质量的矢量图形,其最显着的特性是机动的文件款式,矢量图形、位图和翰墨三部分合营组成一个 SVG 图形,并具备对运行中的 Web 页面图像进行实时改动的能力。

Canvas 是指 HTML 5 中新加入的 canvas 元素,最初由 Apple 的 Safari 浏览器引入,而后受到 Firefox 和 Opera 的广泛支持。Canvas 元素相对 VML 和 SVG 的一个紧张不合在于,canvas 供给了经由过程 JavaScript 绘制图形的措施,每一个 canvas 元素都有一个高低文,在此中可以绘制随意率性图形;而 SVG 和 VML 都应用 XML 文档来描述图形,开拓职员平日经由过程改动此中的 XML 标记来完成对图像的改动。

明确了不合标准之间的差异,便更体会到 JavaScript 框架给开拓职员所带来的便捷,下面这样一段 Dojo 代码,可以在 IE 和 Firefox 下衬着出相同效果的的图形。但透过征象来发

现本色,我们应用 Firebug 不丢脸出同一图形在不合浏览器背后的不合实现。

var surface = dojox.gfx.createSurface(gTestContainer, 300, 300);

var line = surface.createLine({ x1:金宝搏亚洲体育博彩 20, y1: 20, x2: 100, y2: 100 })

.setFill([255, 0, 0, 0.5]).setStroke({color: "red", width: 5})

.setTransform({ dx:70, dy: 100 });

var circle = surface.createCircle({ cx: 170, cy: 200, r: 50 })

.setFill([0, 255, 0, 0.5]);

图 1 是 IE 下 VML 图形 DOM 布局, Firefox 下 SVG 图形的 DOM 布局则如图 2 所示。以是,应该懂得的是,Dojo 所供给的上层绘图 API,是能够根据不合的浏览器选择天生响应标准的绘图元素,这种封装的要领自然也就无法顾及各个绘图标准的独特之处,因而当我们在进行某项较为繁杂的绘图操作或者调试一个跨浏览器的代码缺陷时,不妨先确认一下 Dojo 是否很好的兼顾了这个问题,假如没有,那就必要我们针对不合的浏览器编写响应的代码来樊篱这些差异。

图 1. IE 下 VML 图形的 DOM 布局

图 2. Firefox 下 SVG 图形的 DOM 布局

Web 绘图类利用的基础布局

今朝,常见的绘图类利用大年夜致可以分为这样两类:一类因此画图板为代表的强调图形绘制的利用,另一类则因此流程图、UML 建模对象等为代表的图形互操作类利用。从实现的角度而言,此种绘图类利用均可视为由多个图形工具构成一个画面并基于此而涉及的对全部画面或此中各个图形工具一系列操作的 Web 利用。

Dojo 供给了足够的支持来实现此类利用,DojoX 供给的 GFX 图形对象包,具备对图形工具的天生和基础的二维操作能力,足以满意第一类利用的需求;而 Dojo 核心供给的 DnD 包,使得用户可以经由过程“拖放”操作完成图形工具的添加,在 GFX 的根基上增强了用户操作体验,为第二类利用所必要的图形选择和图形间连线等操作供给了技巧支持;同时,为了实现利用的可扩展性,可以应用自定义的 dijit 来引入更多的功能特性,比如,假如每个图形具有可造访的 URL 属性,那么经由过程供给一个基于图形工具的对象栏 dijit,则可以实现打开此 URL 的功能,当然,对象栏 dijit 可以供给更多的功能以达到更好的扩展性。图 3 展现告终合 GFX,DnD 与 Dijit 完成 Web 绘图类利用的基础组织布局图。

图 3. 实现 Web 绘图类利用的基础组织布局图

应用 GFX,实现基础绘图

GFX (dojox.gfx) 是 Dojo 供给的一套跨平台的图形天生包,用于天生基于 Web 的矢量图,能够做到动态天生以及和用户发生交互。应用 GFX 并非一件难事,其观点模型异常简单,由绘丹青面(surface)、图形(shape)以及组(group)构成。开拓职员只需起开创建一个绘丹青面,而后调用 GFX 中供给了图形创建 API,即可完成响应图形的绘制。对付一些常见的绘图操作,都金宝搏亚洲体育博彩可以经由过程设置图形工具响应的属性来实现,例如图像的边框以及颜色添补,可以经由过程 Stroke 和 Fill 属性进行设定,而图形之间的叠放层次则可以应用 z-order 来节制,z-index 值最大年夜的图形位于全部画面的最上方。清单 1 是应用 GFX 绘制一条简单的直线,虽然简单但完备展示了 GFX 绘图的基础步骤。

清单 1. GFX 绘图基础步骤

//1. 加载 gfx 包

dojo.require("dojox.gfx");

dojo.addOnLoad(function(){

//2. 获取 DOM 节点,用于创建 surface

gTestContainer = dojo.byId('testcontainer');

//3. 创建 300*300 的绘丹青面

var surface = dojox.gfx.createSurface(gTestContainer, 300, 300);

//4. 在画面上绘制直线,并设置响应添补色、线条以及位移等属性

surface.whenLoaded(dojo.hitch(this, function() {

var line = surface.createLine({x1: 20, y1: 20, x2: 100, y2: 120})

.setFill([255, 0, 0, 0.5]).setStroke({color: "red", width: 5}); }));

});

这里有三处值得留意,首先开拓职员可以经由过程全局 djConfig 工具中的 gfxRender 属性来指定在加载历程中应用何种绘图引擎及其优先级,清单 1 中 SVG 将会被首先考试测验,假如掉败将再考试测验 Silverlight,着末再试 VML,而 Canvas 将不再所考试测验的范围之内;再者,当应用 dojox.gfx.createSurface() 措施天生 surface 工具时,必须对其长宽值付与初值,纵然其初始大年夜小均为 0,不然在 IE 下会有绘丹青面无法衬着的问题呈现,工具天生后可以经由过程 setDimensions (width, height) 措施对其大年夜小进行动态调剂。着末一点,在 surface 工具天生之后,因为其背后关联的引擎有所不合,有的引擎必要额外的光阴进行初始化事情,以是我们不能在获得 surface 工具之后急速应用其进行图形绘制,而是应该采纳异步回调的要领,当 surface 工具初始化完毕后由再履行绘图操作,以确保不合绘图引擎之间的兼容性。

在获得一个图形工具之后,2D 绘图中一个常见的操作就是对图形进行各类变形 (transformation) 操作,此中包括扭转(Rotate)、缩放(Scale)、平移(Translate)以及倾斜(Skew)。GFX 经由过程供给 setTransform(matrix) 措施,使开拓职员只需供给精确的矩阵工具参数便可以实现响应的变形,同时为了简化谋略,还供给了一系列变形矩阵赞助类(dojox.gfx.matrix), 从而使得开拓职员只需选择响应的变形类,即可完成对应操作。例如,存在一个 500*500 大年夜小的图形组,应用如下的矩阵变形数组即可完成图形扩大年夜 2 倍并顺时针扭转 45 度的操作。

[translate(250, 250), rotat金宝搏亚洲体育博彩eg(-45), scale(2), translate(-250, -250)]

别的,GFX 支持组工具观点,当一个 surface 工具中涉及对金宝搏亚洲体育博彩多个图形的操作时,我们可以将这些图形划分加入到同一个组中。组兼具 surface 和 shape 二者的特性,繁杂图形的创建、多图形的事故相应处置惩罚以及多图形属性的统一调剂等操作,都必要借助组的观点来完成。开拓职员不仅可以将画面中存在的图形添加到组中,还可以应用与画面相同的 API 创建图形,surface 和 group 工具都支持应用 add()/remove() 操作来完成图形的添加或删除操作。清单 2 起开创建了一个 group 工具,而后将 surface 工具里的直线添加到自身,并对这两个图形进行了统一的变形操作。

清单 2. 对 GFX 图形工具进行变形操作

//5. 创建 group,并在此中创建一个绿色圆形

var group = surface.createGroup();

var circle = { cx: 250, cy: 250, r: 50 };

var shape_circle = group.createCircle(circle).setFill([0, 255, 0, 0.5]);

//6. 将画面中的血色直线移动到组工具中

group.add(line);

//7. 将组工具扩大年夜至 2 倍并逆时针扭转 45 度

group.setTransform([dojox.gfx.matrix.translate(250, 250),

dojox.gfx.matrix.rotateg(-45),dojox.gfx.matrix.scale(2),

dojox.gfx.matrix.translate(-250, -250)]);

引入移动和拖放,增强图形操作能力

在应用 GFX 实现了基础绘图操作之后,本章将再深入一步,借助 DnD(dojo.dnd) 完成对图形的移动和拖放 (DnD,Drag and Drop) 操作,增强用户对 Web 2.0 利用的体验。

首先来看移动操作,为了移动 GFX 绘丹青面中的某个图形工具,GFX 供给了专用于图形的移动的 dojox.gfx.Moveable 类,开拓职员在应用时只需简单的将所要移动的图形工具作为参数传入即可,例如,为了能够使清单 2 所创建的组图形具备可移动性,我们可以在图形创建完毕后经由过程如下这条语句来实现。

new dojox.gfx.Moveable(group)

这里顺便先容一下的是,在 Dojo 其核心库中供给有一个专用于 DOM 节点移动的 dojo.dnd.Moveable 类,较 dojox.gfx.Moveable 而言具有更为通用的移动能力,而并非仅限制于 GFX 图形,例如我们可以应用如下代码来移动一个 dijit 工具。

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

您可能还会对下面的文章感兴趣: