基于GEF框架的SVG制作工具设计与实现

任务赚钱类网站收集（含赚钱流程）：基于GEF框架的SVG制作工具设计与实现摘要本文在对比了几款SVG制作工具的功能特性后，分析了实现制作工具所面临的两个问题，并提出了一种在Eclipse平台上基于GEF框架的制作SVG文件的设计和实现方案，最后介绍了系统的架构和部分关键模块的实现。关键词SVG，GEF，MVC模式，DOM1引言SVG(ScalableVectorGraphics)是一种基于XML开放标准的矢量图形描述语言，支持对图形、图像、文字、透明效果和动画描述,并提供极强的交互性，被广泛使用在各应用系统中。但是，由于SVG源码可读性差，编写需时长，易出错，SVG应用的制作效率很低，所以需要一款可视化的制作工具。本文的目的就是利用Eclipse平台的GEF(GraphicEditorFramework)框架，针对SVG的能聚合多种媒体数据，并能体现其动态性和交互性的特点，设计并实现了一款SVG的可视化制作工具。2SVG制作工具的研究现状进年来SVG发展迅速，国外在此方面已进行了多年研究，并有多款工具问世。我国在SVG上的研究起步较晚，一直处于落后地位，成型的工具更是寥寥无几。以下是对几款制作工具的简单介绍以及功能特性比较。Batik，始于2000年，是Apache组织开发项目里SVG开源软件计划之一。它是基于java语言实现的一个SVG应用的工具集，用于实现对SVG对象的显示、编辑以及将SVG图形对象转换成其他图片格式。Inkscape也是一款开源软件，它始于2003年，有跨平台的特性，主要以Linux作为开发平台。MobileDesigner是Beatware公司研发的一款，其输出内容可以满足SVG，SVGTiny，SVGBasic以及一些它们混合的版本。通过分析上面三款SVG制作工具，可以得出他们的功能特性比较，如表1所示。由表1可以得出SVG制作工具应该包含以下主要组件：画布：提供编辑SVG场景的区域。达到一种WYSIWYG的效果。工具条：用于创建各种图形对象，这些对象包括SVG中的几何图形、文本、图片和音视频文件。源码编辑器：用于编辑SVG文件源码。属性视图：用于展现和编辑当前选中对象的属性。大纲视图：用于展现当前SVG文件的场景树。提供了一种图形化视图展现对象在场景树中是如何存储的。并提供了在场景中对对象进行选择和排序工具。事件处理视图：允许设计者为对象添加和定义事件。时间轴：在时间上组织场景中的对象。仿真器：预览所制作的SVG文件，包括表1：Batik、Inkscape和MobileDesigner功能特性比较BatikInkscapeMobileDesigner可视化×√√画布×√√工具条×√√组件属性框××√时间轴××√源码编辑器×√×场景树×××仿真器×××任务赚钱类网站收集（含赚钱流程）：特性动画√×√字体√×√滤镜√××交互√×√音视频√×√脚本√××扩展√××开源√√×其他跨平台高级控件对象的表现和交互行为。在实现该制作工具时面临的主要问题：如何为用户提供方便的源码编辑工具（如提供代码提示和代码折叠）；如何完成图形与SVG文本文件的相互转化。3带代码提示的源码编辑器众所周知，SVG源码可读性差，编辑效率低，所以优化源码编辑器提高编辑效率是非常必要的。可以通过提供代码提示来提高编辑效率。代码提示包括提供内容助理和自动完成建议。内容助理是在激活时为用户相关代码进行提示，自动完成建议是当用户选中某提示时，自动完成此提示所需代码，类似用Eclipse编写java代码时，在实例后面输入“.”后列出此实例可用的所有方法。首先分析SVG的语言特点，如下所示：textid=text1x=92y=89font-size=12Thisisatext/text可以看出标签名和属性都包含在“”和“”中，其间以空格分隔，以“/text”结束,标签的内容则写在“”和“”之间。由此可以得出代码提示算法的思想：从光标所在处的前一个字符开始，往前进行判断。如果先遇到的为“”，不给任何提示；如果先遇到的为“”，取得从“”到当前光标处的字符串，找出所有以该字符串开始的元素名称，用户确认某元素后就自动输入（以text为例）“text/text”；如果先遇到空格，说明光标所处的位置可能用于编写属性，往前寻找进行判断：若先遇到“”或“/”，不给提示；若先遇到“”，说明当前光标所处的位置用于编写属性，为此元素找到所有匹配的属性，并显示到代码提示框中，用户确认某属性后自动输入（以x为例）“x=”。如果先遇到的为“/”，说明当前光标所处位置是一个标签的结束，向前寻找当前标签名称，在提示框中给出唯一提示，确认后自动输入（以text为例）“/text”。4图形与SVG文本转化思想的分析和介绍制作工具包含一个画布（图形编辑器），一个源码编辑器，这两个编辑器在某一时刻只有其中之一可见，如何使这两个编辑器编辑的内容同步，是面临的另一个问题。SVG文档通过DOM来组织文本内容逻辑关联的，利用DOM接口对SVG文档进行分析后，其中的信息会被转化成一棵对象节点树（DOM树）。可以通过DOM接口访问、修改、添加或删除树种的节点和内容。如下有一个SVG文档，其代码为：svgwidth=240height=320rectid=rect1fill=redx=0y=10width=50height=20/textid=text1stroke=blackfont-size=12x=10y=10hello/text/svg用DOM树表示这段文档，如图1所示。DocumentsvgrectgHelloFont-sizeTextFillHeightWidthYXIdStrokeYXId图1：DOM树任务赚钱类网站收集（含赚钱流程）：在这棵DOM树中，SVG文档的内容都用节点表示。一个节点又可以包含其它节点，节点本身也可以包含一些属性信息。相应的在画布中能否用与SVGDOM相同的思想来组织其中的各元素以形成一棵图形对象树，并实现图形对象树到SVGDOM树的映射关系？经分析发现Eclipse平台下的GEF框架刚好可以满足需求。GEF的优势是提供了标准的MVC结构，即模型、视图和控制器。其中模型可以根据需求构建其属性和层次关系，以形成一棵对象树，这正是所需要的。Draw2D是基于SWT的图形处理包，它为GEF的展现提供了一套轻量级图形系统。Draw2D中的提供的缺省图形全部都实现IFigure（org.eclipse.draw2d.IFigure）接口，可以控制图形的尺寸位置，监听事件等等。但是缺省图形不能满足特殊需求（比如SVG的text有填充透明度属性），所以需要创建新的图形，以text为例，创建TextFigure类继承org.eclipse.draw2--d.Label，重写其paintFigure方法。经过扩充后的Draw2D图形库就可以辅助完成图像与SVG的相互转化。转化思想：新建一个SVG文件时为其创建新的DOM树。从源码编辑器切换到图形编辑器：获取源码编辑器中当前的所有文本内容，并据文本内容创建一棵SVGDOM树。从根节点开始遍历整棵SVGDOM树，为图元节点建立对应的模型对象，从而完成了SVGDOM树到图形对象树的映射。从图形编辑器切换到源码编辑：在图形编辑器中新建一个图形对象，在DOM树上就会在对应位置添加图形节点和属性节点。切换时，直接获取DOM树的全部内容，并以XML语言的形式显示在源码编辑器中，从而完成图形到SVG文本文件的转化，5系统框架设计针对上述提出的问题，以及可视化和易操作的目的，本系统的设计采用MVC模型并基于GEF框架。系统框架设计如图2所示。ControllerView&EditorModelImport/ExportSVGDOMGraphicModelsSVGFile(*.SVG)GraphicToolsSVGDocumentSVGConvertorSourceEditorGraphicEditorTextToolsViewsTimelineEditorEmulateEmulator图2：系统框架图5.1核心模块的功能设计用户接口（View&Editor）包括各种视图和编辑器。其中视图包括Navigator视图、Properties视图、Outline视图和Problems视图。编辑器包括：GraphicEditor（画布）、TimelineEditor（时间线）、SourceEditor（源码编辑器）。控制器（Controller）包括GraphicTools和TextTools。其中GraphicTools用于管理GraphicEditor中整个被编辑模型对象的数据，而TextTools用于管理SourceEditor中SVG文档内容，并提供内容辅助、语法高亮、代码折叠等功能，以提高编辑效率。模型（Model）GraphicModels包含circle、line等基本图形类。这些类提供了图形的所有属性以及绘制、删除和编辑等方法。SVGDOM用于将SVG文档转化为一个对象模型的集合（DOM树）。SVGDocument是正在SourceEditor任务赚钱类网站收集（含赚钱流程）：中编辑的SVG文档。仿真（Emulate）Emulator，仿真器，用于预览在编辑器中创建的SVG文档。输入/输出（Import/Export）SVGConvert完成SVG文件与SVGDOM之间的相互转换。5.2数据模型设计SVG中的基本图形包括rect、circle、ellipse、line、polyline、polygon和text，把他们公共属性和功能抽取出来放入基类MFigure中。再为他们分别建立对应的类继承MFigure类，并在其中添加自己的私有属性和方法。如图4所示。6关键模块的实现6.1控制器（EditPart）的实现本系统中以BaseEditPart为基类，所有模型对应的控制器，都是BaseEditPart的子类。比如：EPText做为MText的控制器，继承BaseEditPart。6.2图形模型树与SVGDOM的转换转换过程主要用到以下方法：图4：数据模型类图privatevoidinitDOM()；功能：为SVG文件创建相应的DOM树。publicvoiddrawByDOM(Documentdoc)；功能：遍历DOM树。privateMFigureelementToGraphic(Elementelement)；功能：为DOM树的每个图形节点创建图形对象。7结论本文所述的系统为制作SVG提供了一个解决方案。它直接简化了整个SVG的创作过程，创建SVG内容甚至不需要有SVG的相关背景知识或编码经验。除了提供了WYSIWYG设计，对象时空同步；场景交互；服务仿真等特性。还提供了友好的对话框，只点击几下鼠标就可为设计添加交互。大大提高了创作的效率,具有很重要的推广应用价值。参考文献[1][2][3]Viljoen,D.W.,Calitz,A.P.,Cowley,N.L.O.A2-DMPEG-4MutimediaAuthoringTool[J].ACMNewYork,NY,USA.2003:151-160.[4]黄晓文.基于XML的网络矢量图像SVG的实现与应用研究[J]上