当前位置：文档之家 › 基于GEF框架的SVG制作工具设计与实现

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

  • 格式：doc
  • 大小：258.00 KB
  • 文档页数：4

任务赚钱类网站收集（含赚钱流程）：/1971797023/blog/1356166548

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

摘 要 本文在对比了几款SVG制作工具的功能特性后，分析了实现制作工具所面临的两个问题，并提出了一种在Eclipse平台上基于GEF框架的制作SVG文件的设计和实现方案，最后介绍了系统的架构和部分关键模块的实现。

关键词 SVG，GEF，MVC模式，DOM

1 引言

SVG(Scalable Vector Graphics)是一种基于XML开放标准的矢量图形描述语言，支持对图形、图像、文字、透明效果和动画描述,并提供极强的交互性，被广泛使用在各应用系统中。但是，由于SVG源码可读性差，编写需时长，易出错，SVG应用的制作效率很低，所以需要一款可视化的制作工具。本文的目的就是利用Eclipse平台的GEF(Graphic Editor Framework)框架，针对SVG的能聚合多种媒体数据，并能体现其动态性和交互性的特点，设计并实现了一款SVG的可视化制作工具。

2 SVG制作工具的研究现状

进年来SVG发展迅速，国外在此方面已进行了多年研究，并有多款工具问世。我国在SVG上的研究起步较晚，一直处于落后地位，成型的工具更是寥寥无几。以下是对几款制作工具的简单介绍以及功能特性比较。

Batik，始于2000年，是 Apache组织开发项目里SVG开源软件计划之一。它是基于 java 语言实现的一个 SVG 应用的工具集，用于实现对 SVG 对象的显示、编辑以及将 SVG 图形对象转换成其他图片格式。Inkscape也是一款开源软件，它始于2003年，有跨平台的特性，主要以Linux作为开发平台。Mobile Designer是Beatware公司研发的一款，其输出内容可以满足SVG，SVG

Tiny，SVG Basic以及一些它们混合的版本。

通过分析上面三款SVG制作工具，可以得出他们的功能特性比较，如表1所示。

由表1可以得出SVG制作工具应该包含以下主要组件：

 画布：提供编辑SVG场景的区域。达到一种WYSIWYG的效果。

 工具条：用于创建各种图形对象，这些对象包括SVG中的几何图形、文本、图片和音视频文件。

 源码编辑器：用于编辑SVG文件源码。

 属性视图：用于展现和编辑当前选中对象的属性。

 大纲视图：用于展现当前SVG文件的场景树。提供了一种图形化视图展现对象在场景树中是如何存储的。并提供了在场景中对对象进行选择和排序工具。

 事件处理视图：允许设计者为对象添加和定义事件。

 时间轴：在时间上组织场景中的对象。

 仿真器：预览所制作的SVG文件，包括表1：Batik、Inkscape和Mobile Designer功能特性比较

Batik Inkscape Mobile

Designer

可视化 × √ √

画布 × √ √

工具条 × √ √ 组件 属性框 × × √

时间轴 × × √

源码编辑器 × √ ×

场景树 × × ×

仿真器 × × ×

任务赚钱类网站收集（含赚钱流程）：/1971797023/blog/1356166548

SVG特性 动画 √ × √

字体 √ × √

滤镜 √ × ×

交互 √ × √

音视频 √ × √

脚本 √ × ×

扩展 √ × ×

开源 √ √ ×

其他 跨平台 高级控件

对象的表现和交互行为。

在实现该制作工具时面临的主要问题：如何为用户提供方便的源码编辑工具（如提供代码提示和代码折叠）；如何完成图形与SVG文本文件的相互转化。

3 带代码提示的源码编辑器

众所周知，SVG源码可读性差，编辑效率低，所以优化源码编辑器提高编辑效率是非常必要的。可以通过提供代码提示来提高编辑效率。代码提示包括提供内容助理和自动完成建议。内容助理是在激活时为用户相关代码进行提示，自动完成建议是当用户选中某提示时，自动完成此提示所需代码，类似用Eclipse编写java代码时，在实例后面输入“.”后列出此实例可用的所有方法。

首先分析SVG的语言特点，如下所示：

font-size="12">This is a text

可以看出标签名和属性都包含在“<”和“>”中，其间以空格分隔，以“”结束,标签的内容则写在“>”和“<”之间。由此可以得出代码提示算法的思想：从光标所在处的前一个字符开始，往前进行判断。

如果先遇到的为“>”，不给任何提示；

如果先遇到的为“<”，取得从“<”到当前光标处的字符串，找出所有以该字符串开始的元素名称，用户确认某元素后就自动输入（以text为例）“”；

如果先遇到空格，说明光标所处的位置可能用于编写属性，往前寻找进行判断：

若先遇到“>”或“/”，不给提示；

若先遇到“<”，说明当前光标所处的位置用于编写属性，为此元素找到所有匹配的属性，并显示到代码提示框中，用户确认某属性后自动输入（以x为例）“x=""”。

如果先遇到的为“/”，说明当前光标所处位置是一个标签的结束，向前寻找当前标签名称，在提示框中给出唯一提示，确认后自动输入（以text为例）“”。

4 图形与SVG文本转化思想的分析和介绍

制作工具包含一个画布（图形编辑器），一个源码编辑器，这两个编辑器在某一时刻只有其中之一可见，如何使这两个编辑器编辑的内容同步，是面临的另一个问题。

SVG文档通过DOM来组织文本内容逻辑关联的，利用DOM接口对SVG文档进行分析后，其中的信息会被转化成一棵对象节点树（DOM树）。可以通过DOM接口访问、修改、添加或删除树种的节点和内容。如下有一个SVG文档，其代码为：

y="10" width="50" height="20"/>

font-size="12" x="10" y="10">hello

用DOM树表示这段文档，如图1所示。

DocumentsvgrectgHelloFont-sizeTextFillHeightWidthYXIdStrokeYXId

图1：DOM树

任务赚钱类网站收集（含赚钱流程）：/1971797023/blog/1356166548

在这棵DOM树中，SVG文档的内容都用节点表示。一个节点又可以包含其它节点，节点本身也可以包含一些属性信息。相应的在画布中能否用与SVG DOM相同的思想来组织其中的各元素以形成一棵图形对象树，并实现图形对象树到SVG DOM树的映射关系？

经分析发现Eclipse平台下的GEF框架刚好可以满足需求。GEF的优势是提供了标准的MVC结构，即模型、视图和控制器。其中模型可以根据需求构建其属性和层次关系，以形成一棵对象树，这正是所需要的。

Draw2D是基于SWT的图形处理包，它为GEF的展现提供了一套轻量级图形系统。Draw2D中的提供的缺省图形全部都实现IFigure（org.eclipse.draw2d.IFigure）接口，可以控制图形的尺寸位置，监听事件等等。但是缺省图形不能满足特殊需求（比如SVG的text有填充透明度属性），所以需要创建新的图形，以text为例，创建TextFigure类继承org.eclipse.draw2-

bel，重写其paintFigure方法。

经过扩充后的Draw2D图形库就可以辅助完成图像与SVG的相互转化。转化思想：新建一个SVG文件时为其创建新的DOM树。

从源码编辑器切换到图形编辑器：获取源码编辑器中当前的所有文本内容，并据文本内容创建一棵SVG DOM树。从根节点开始遍历整棵SVG DOM树，为图元节点建立对应的模型对象，从而完成了SVG DOM树到图形对象树的映射。

从图形编辑器切换到源码编辑：在图形编辑器中新建一个图形对象，在DOM树上就会在对应位置添加图形节点和属性节点。切换时，直接获取DOM树的全部内容，并以XML语言的形式显示在源码编辑器中，从而完成图形到SVG文本文件的转化， 5 系统框架设计

针对上述提出的问题，以及可视化和易操作的目的，本系统的设计采用MVC模型并基于GEF框架。系统框架设计如图2所示。

ControllerView & EditorModel Import/Export SVG DOMGraphic ModelsSVG File

(*.SVG)Graphic ToolsSVG DocumentSVG

ConvertorSource EditorGraphic

EditorText ToolsViewsTimeline

EditorEmulate

Emulator

图2：系统框架图

5.1 核心模块的功能设计

 用户接口（ View & Editor）

包括各种视图和编辑器。其中视图包括Navigator视图、Properties视图、Outline视图和Problems视图。编辑器包括：Graphic

Editor（画布）、Timeline Editor（时间线）、Source Editor（源码编辑器）。

 控制器（Controller）

包括Graphic Tools和Text Tools。其中Graphic Tools用于管理Graphic Editor中整个被编辑模型对象的数据，而Text

Tools用于管理Source Editor中SVG文档内容，并提供内容辅助、语法高亮、代码折叠等功能，以提高编辑效率。

 模型（Model）

Graphic Models包含circle、line等基本图形类。这些类提供了图形的所有属性以及绘制、删除和编辑等方法。

SVG DOM用于将SVG 文档转化为一个对象模型的集合（DOM树）。

SVG Document是正在Source Editor

合集下载

svg操作方法及注意事项

svg操作方法及注意事项

svg操作方法及注意事项

SVG（Scalable Vector Graphics）是一种基于XML的图形格式，用于描述二维矢量图形。在使用SVG进行操作时，需要掌握一些基本的方法和注意事项。

一、SVG操作方法：

1. 创建SVG元素：可以使用HTML的标签创建SVG元素，设置其属性，如宽度、高度等。

2. 绘制基本形状：SVG支持绘制矩形、圆形、椭圆、直线、多边形等基本形状，可以使用相应的、、、、等标签进行绘制。

3. 使用路径绘制复杂形状：路径是SVG中最常用的绘制复杂形状的方法，可以使用标签，通过设置路径命令（如M、L、C等）来描述路径的起点、直线段、曲线段等。

4. 设置样式：可以通过设置元素的样式属性，如fill（填充颜色）、stroke（边框颜色）、stroke-width（边框宽度）等来改变SVG元素的外观。

5. 使用变换：可以使用transform属性对SVG元素进行平移、旋转、缩放等变换操作，常用的值有translate、rotate、scale等。

6. 添加文本：可以使用标签添加文本内容，并设置其样式属性，如字体大小、字体颜色等。

7. 添加动画：SVG支持添加动画效果，可以使用、等标签来实现平移、旋转、缩放等动画效果。

二、注意事项：

1. 使用正确的XML语法：SVG是基于XML的格式，因此需要遵循XML的语法规则，如正确嵌套标签、正确闭合标签等。

2. 注意坐标系：SVG使用笛卡尔坐标系，原点在左上角，x轴向右，y轴向下。在绘制图形时，需要注意坐标系的转换。

3. 注意单位：SVG中的长度单位可以是像素（px）、百分比（%）等，需要根据具体情况选择合适的单位。

4. 注意交互效果：SVG可以实现鼠标交互效果，如hover、click等，可以通过设置事件监听器来实现相应的交互效果。

5. 注意性能优化：当SVG文件较大时，可能会影响页面加载速度，可以通过优化SVG文件大小、减少不必要的元素和属性等方式进行性能优化。

svg施工方案

svg施工方案

svg施工方案

SVG是可缩放矢量图形（Scalable Vector Graphics）的简称，是一种基于XML语法的图像格式。SVG图形可以用于网页、移动应用、数据可视化等领域，它具有矢量图形的优点，可以无损地缩放、自适应不同分辨率的设备。

在进行SVG施工方案时，需要考虑以下几个方面：

1. 图形设计：首先需要进行图形的设计，确定所需的形状和颜色。可以使用矢量图形软件（如Adobe Illustrator）进行设计，也可以直接编写SVG代码。设计时需要注意图形的比例关系和层次结构，以便在网页或应用中实现预期效果。

2. 编写SVG代码：在设计完成后，需要将图形转化为SVG代码。SVG代码使用XML语法，包含一系列的标签和属性，用于描述图形的形状、颜色、边框等信息。编写SVG代码时需要注意标签和属性的使用方式，以及属性值的正确设置。

3. 嵌入SVG图形：将编写好的SVG代码嵌入到网页或应用中。可以使用标签或标签将SVG文件引入到HTML文档中，也可以直接在HTML文档中编写SVG代码。在嵌入SVG图形时需要注意路径和文件名的设置，确保图形可以正确加载和显示。

4. 响应式设计：为了适应不同尺寸和分辨率的设备，需要进行响应式设计。可以使用CSS媒体查询和viewport属性来调整SVG图形的大小和位置。在响应式设计时需要考虑不同设备的显示效果，并进行适当的调整，以确保图形在各种设备上都能够良好地显示和交互。

5. 动画效果：SVG支持一系列的动画效果，可以通过CSS或JavaScript来实现。可以使用CSS动画属性和关键帧来定义图形的动态效果，也可以使用JavaScript库（如Snap.svg）来实现更复杂的动画效果。在添加动画效果时需要注意动画的时序和持续时间，以及用户交互的响应。

总结起来，SVG施工方案是将图形设计转化为SVG代码，并嵌入到网页或应用中的过程。需要进行图形设计、编写SVG代码、嵌入SVG图形、响应式设计和添加动画效果等步骤。通过合理的施工方案，可以实现高质量、可缩放和响应式的矢量图形效果。

Web环境下SVG地图浏览器的设计与实现

Web环境下SVG地图浏览器的设计与实现

文章编号:10092427X(2003)0220135204

Web环境下SVG地图浏览器的设计与实现

周文生1,2,胡鹏1,贾永红3(1.武汉大学资源与环境科学学院,湖北武汉　430079;2.清华大学建筑学院,北京　100084;3.武汉大学遥感信息工程学院,湖北武汉　430079)摘要:SVG是近年来发展起来的基于XML的用于描述矢量图形、图像的标准规范,该规范的制定对网上矢量地图数据的共享具有十分重要的意义,基于SVG的矢量地图十分有利于地理空间数据的传播。文中首先分析了目前Web环境下矢量地图发布存在的问题,之后介绍了SVG的有关情况,最后基于Adobe的SVGViewer2.0设计并实现了一个SVG地图浏览器,着重研究了3个问题,即矢量地图数据在SVG文档中的组织与编码,地图浏览器界面的设计以及若干地图操作功能的实现。关　键　词:矢量地图;SVG;地图浏览器;Web环境;地理空间数据中图分类号:P208 文献标识码:A 地图作为国民经济和国防建设中必不可少的资料,一直受到人们的广泛关注。在Web环境下地图通常可用两种形式表示:一种是栅格形式;另一种是矢量形式。作为栅格形式的地图(有时称为“哑”地图),由于其固有的局限性(如缩放变形)和所包含的信息量有限等特性不能对单个地物进行操作,使其对地图的表现能力十分有限。而矢量形式的地图(有时称为“智能”地图),则由于其数据量少、缩放不变形、可挂接多种信息等特性使其成为地图表现的较好选择。然而目前的浏览器通常只直接支持栅格图象(如GIF和JPEG),而不支持矢量图形,这就使矢量形式的地图在网上的共享遇到了问题。目前有两种解决方案:一是在服务器端通过地图服务器将矢量形式的地图转化为栅格形式的地图;二是借助插件技术,如Ac2tiveX,Plug2in等,对浏览器的功能进行扩充,使其增加对矢量地图的支持。对于第1种方案,由于展示在客户端的地图是栅格地图,因此它对地图的表现能力很有限,且在用户对地图的操作中需要频繁地通过网络与服务器进行操作指令和处理结果的传输,加重了网络和服务器的负担。而对于第2种方案,尽管展示在客户端的是矢量地图,但由于地图数据的复杂性,使得不同系统产生的矢量地图的数据格式都不相同,这就造成了对于不同格式的地图数据需要开发不同的插件,同时在插件的开发中还需要考虑插件对不同客户端的适应性,因此给插件的开发带来了不少麻烦。而目前越来越受到人们关注的基于XML技术的通用矢量格式SVG则会彻底改变这种状态,使矢量地图的网络共享变得轻松、简单。文中将对SVG做一简单介绍,并在此基础上设计一个基于AdobeSVGViewer的地图浏览器,给网络矢量地图的共享提供方便。

基于SVG的思维导图的系统实现

基于SVG的思维导图的系统实现

基于SVG的思维导图的系统实现

任志豪;赖源劲

【摘 要】基于SVG实现的绘图技术,具有对象化和易于交互的特点,适合用于思维导图在线绘制的实现.基于SVG实现的思维导图绘制系统,其基础功能有思维导图节点及边的绘制、增删、位置变换和拖动,其中的关键技术点包括图形的位置计算和渲染等.

【期刊名称】《现代计算机（专业版）》

【年(卷),期】2016(000)009

【总页数】6页(P70-75)

【关键词】思维导图;SVG;实现

【作 者】任志豪;赖源劲

【作者单位】华南师范大学软件学院,广州 510631;华南师范大学软件学院,广州

510631

【正文语种】中 文

随着信息时代的飞速发展，人们在日常工作或者学习中越来越需要记录信息和知识，使用思维导图可为人们更高效地记录和归纳信息。思维导图又称心智图，它从中心主题出发，发散关键点，以简洁的信息表示整个结构。一个典型的思维导图由多个节点所组成，一个节点也可引申出多个子节点，体现了更清晰的分类思想，通过合理的分类方法，可以清晰地整理任务和快速定位信息的关键点。本文的主要内容则是如何实现一个思维导图的Web应用。 该系统使用SVG技术绘制思维导图的图形。SVG是可伸缩矢量图形（Scalable

Vector Graphics），用于描述二维矢量的一种图形格式。SVG是一种基于XML的语言，可以在XML或者HTML中嵌入SVG。SVG的事件模型基于SVG图形元素上，所以SVG具有很好的交互性。目前的已有的思维导图Web应用中，某些网站的思维导图应用使用了Canvas技术，而Canvas是像素级别的图形绘制技术，不太适合于思维导图这种对象级别的图形绘制中；另外一些网站的思维导图应用使用了Flash技术，但Flash技术比较繁琐，性能不高，而且Flash需要下载插件，在一部分的操作系统不能使用。与上述两种技术相比，SVG将图像当成对象，可将思维导图中节点和线等图形表现为对象，事件模型基于图形元素上的特性使得SVG更适合用于动态交互的应用。目前兼容SVG的浏览器有IE9以及其他主流的浏览器，使得SVG的应用具有较好的移植性。该系统使用一个SVG图形库——Raphael.js提供的API来绘制思维导图应用。