矢量图形编辑（精选7篇）
矢量图形编辑 篇1
1 概述
矢量图形是计算机图形存储的两种主要方式, 跟GIF (位图) 相比, 具有无限缩放的特点, 而且图形的大小跟文件的大小毫无关系, 只和图形的复杂程度有关。正是因为这些优点, 各大厂商都推出一些属于自己的矢量图形规范。为了结束混乱的局面, W3C融合了百家之长, 就推出了新的编辑语言SVG。但是一般的文本编辑工具对SVG的操作, 显然是不准确不方便的。因此, 专门提供一个对SVG文件进行可视化编辑的矢量工具, 显得极为重要。
2 系统框架
矢量图形编辑器是一个完全独立在具体应用中的、通用的矢量图形编辑环境。此系统采用针对对象的绘制方法, 可以把图形中包含的对象定义为图元, 并将定义的图元进行组织分类, 就形成了图元库。在绘制图形的时候, 可以运用图元库里的各种图元进行拼凑和整合, 因此可以很好的利用其中很好的生产效率和, 组合成自己所需要的图形。当绘制完图形之后, 可以在设置里面规定图形的属性, 这样的话可以和具体的设备相联系。矢量图形编辑器最有应用前景的文件格式是SVG格式, 因为这个格式很适合在网络上发布。从网络终端发布一定的图形文件之后, 可以利用采集到的信息和数据, 随时随地的改变图元的动静态显示。也可以在浏览器中对选定的图元进行修改和设置等相关操作。
2.1 数据模型
第一类:图形模块。这类模块包括的图形有直线、折线、圆、圆弧、椭圆等基本形态。这些类别提供了一定的绘制方案, 包括旋转、移动、改变大小和分解组合等, 还提供了绘制的上线和导航等一些系统的方法。总而言之, 其他一些模块对于图形的操作都是通过调用图形模块里面的基本图形实现和完成的。
第二类:图形工具。这类模块的主要功能就是通过具体的步骤完成图形的生成。通过该模块所提供的鼠标事件和键盘事件, 可以很便捷的引导用户在显示器上绘制图形, 在完成的时候提醒用户设置一定的图形属性。通过主程序模块调用的添加图形的方法, 可以把图形加入到链表中。在绘制图形的时候, 通过图形模块上线和导航系统, 绘制图形的便捷性和精准度得到了很大的保障。
第三类:编辑工具。完成对图像的具体操作。比如说图形的移动、缩放、添加和删除等。该模块通过选择将选定的图形放入数据管理模块中的选择链表当中, 然后对选择链表中的图形, 利用图形模块中的基本操作步骤完成对图形的编辑。编辑工具还负责维护和生成链接的信息, 通过链接的信息勾画出相对应的网络拓扑图。
第四类:数据管理。顾名思义, 就是对整个系统数据的维护和管理工作。这个模块主要规定了详细的数据结构, 比如说删除链表、重做链表、图层链表等等, 而且在这个基础之上, 提供足够的方法进行维护。
第五类:工具管理。此模块的主要目的是:通过主程序反馈的消息, 决定了生成相对应的图形工具, 然后再通过主模块将消息反馈到相对应的模块工具中进行处理。
第六类:数据解析。主要目的是完成SVG文件的存取。因为SVG文件是最基本的文本格式, 对它解析的时候, 生成的具体对象的数据都会存储在数据管理系统中。当文件修改完以后, 再用SVG文本格式保存。这个系统是在SAX的基础上提出来的一种解析模式。SVG解析模式的工作步骤为:首先通过SAX的初步解析, 然后仿照SAX模式提出的一种事件处理模式。在解析属性符号的时候, 得到一系列的对应事件, 在事件中处理代码完成图形的生成和属性值的解析。图元的SVG表示可由几何形状、交互事件和应用属性三部分组成。本系统提供的属性栏设置可以图形的属性信息。SVG中定义了大量的标准事件支持图形和脚本之间的交互。
2.2 数据链表结构
本系统的数据管理模块中定义了系统的数据链表结构, 其构成有图形对象链表、选择链表、图层链表。各个链表中的每一个节点都是上述图形类的一个对象, 并对应系统编辑窗口子DOM树中的一个节点。系统中每生成一个图形对象的时候, 就会把该对象添加到图形对象的链表中, 链表中包含对象的序号、对象的ID及元素类型, 然后根据其元素类型在DOM树中添加相应的SVG图形节点并设置节点的ID属性值。当对一个图形对象进行编辑的时候, 首先要拾取图形对象, 然后将其在图形对象链表中的信息拷贝到选择链表中, 以便根据选择链表中的图形对象进行用户所要进行的操作。图层链表是对图层的记录, 链表中包含图层的序号、图层名, 其在DOM树中对应的SVG文档的
3 系统实现
实现每个功能的具体操作步骤是:在不同的SVG文件中, 先说明鼠标事件, 把一段脚本的所有内容连接到事件处理器上面。当鼠标事件发生的时候, 就会触动脚本程序的运行。然后利用DOM接口, 对选定的对象元素进行修改、添加、删除等操作, 以此实现图形的绘制、删除和存储等相关功能。矢量图形编辑器的界面都是在SVG的数据上表现的, 是具备一定交互能力的图形处理客户端, 本系统通过Java Script对DOM编程实现了丰富的交互操作和使用效果。
3.1 图形对象分组技术的突破
在SVG文档中,
例如, 地图可以依据省图, 市图, 县图等分类方式进行分组, 形成一定的图形组, 无论在显示及编辑上都能给用户带来极大的方便。本系统中, 采用SVG基于XML的DOM文档管理结构, 通过对编辑窗口子DOM树中
3.2 图形组的编辑实现
图形组的编辑通过设置图形组相对应的
图形组的可见性, 是图形组中另一种编辑方式。图形组的可见性通过程序对
4 小结
根据信息化的高速发展, Web环境下的矢量图形技术的发展前景是非常可观的。本课题开发的矢量图形编辑系统提供了对Web图形的基本交互功能支持, 实现了SVG图形文件的可视化人机交互编辑和绘制, 加入行业图元系统可以快捷的移植到不同的应用程序中。课题所进行的Web GIS方面的应用开发, 使得本系统能够满足一些诸如学校、工厂、供水供电、房产平面表现之类的小型地理信息系统的应用需求。
参考文献
[1]侯宇, 李素有.基于XML的SVG技术及其应用[J].计算机应用研究, 2002 (5) :136-138.
矢量图形编辑 篇2
矢量化SVG图形技术在配电网运行监视中的应用
陈广，朱如升
（北京科东电力控制系统有限责任公司 2014）
摘要：SVG具有可扩展、可交互等特性，将SVG引入到电力WEB系统中，是电力系统实现WEB发布的新途径。本文总结了目前配电自动化系统中的WEB技术现状和不足，提出了基于SVG技术实现电网WEB发布的基本模型、架构和具体方法。通过实践证明SVG技术完全能够胜任电力系统的WEB应用需要，将在电力系统的各个方面得到广泛的应用。
关键字：SVG；WEB系统;电力；配网自动化；配网运行监测
Vectorization SVG graphics technology in monitoring the operation of the distribution network
(Beijing Kedong Power Control Systems LLC 2014)Abstract:As a method for web publication,SVG has the characteristic of expansibility and interaction.It is a new path to introduce SVG into web application of power system.This paper summarize shortcoming,advantage and introduce basic method of applying SVG to WEB application in power system,and describes the frame work.SVG technique can meet the requirement of web publication and it will get more extensive application in power system.Key Words:SVG;WEB system;electric power;distribution network automation;distribution power Operational monitoring0 引言
近年来，WEB的相关技术发展最为迅速，通过Java、JavaScript等网络编程语言，HTML（HyperText Markup Language），XML（eXtensible Markup Language）互联网上的数据通用语言，在WEB浏览器中可以展现出丰富生动的虚拟世界。
配电自动化系统作为配电网监控的系统，有大量的电网运行的数据和图表。在使用WEB技术之前，异构机器需要浏览电网的图形和数据是很困难的。一般有两种方式：
（1）、在用户的机器上安装终端设备或终端软件，用于登录配电自动化主站，然后可以浏览图形和数据。这种方式简单易行，但是由于直接登录配电自动化主站，加大了主站的负载，同时增加了网络资源的开销，也会对配电自动化系统的运行造成一定的影响，而且权限不够的用户直接登录系统，对系统的安全
2014年电力系统自动化学术研讨会论文集
也带来了一定的隐患。
（2）、另一种方式就是，额外开发另一个系统，该系统只用于浏览配电自动化系统中的图形和数据，不支持用户的任何涉及到更改电力设备状态的操作。这种方式确实可以避免（1）中所提到的问题，但是重新开发一套系统需要人力和金钱的投入，而且后期的维护会比较复杂。
由于WEB是基于浏览器实现的，可以实现跨平台访问，而且开发过程中利用标准语言和协议。因此在配网运行中搭建WEB服务器，只要访问的客户端机器装有浏览器，就能够实现对配电自动化系统中的图形和数据的访问功能，从而达到配电网运行监测的目的。而浏览器已经是各种计算机操作系统的一部分，因此，利用WEB技术，基本对于客户端机器零要求，就能实现对配电自动化系统中的图形和数据的访问，而且通过防火墙和物理隔离装置，亦能保证配电自动化系统的正常运行和安全。
目前，目前国内系统多数采用CGI(Common Gateway Interface)技术或者利用ActiveX控件实现图形的WEB发布。但是在访问系统的过程中，用户与图形的交互频繁，CGI技术会大大的增加网络的传输量，造成过重的服务器负载，而且重复的画面刷新也会给客户端的操作带来很大的不便。而利用ActiveX控件，虽然可以通过客户端完成一部分基本的功能，但需要客户端安装相关的插件，而且其安全性和跨平台性也不能满足需要。因此基于以上的瓶颈，一种新的解决方案呼之欲出。
SVG是W3C组织发布的一种基于XML的开发的二维图形描述语言，主要面向网络应用，目的在于满足WEB应用日益增长的对动态、可缩放、和平台无关的展现复杂内容并实现灵活交互的需求。SVG规范了矢量图形的格式，并将其在客户端浏览器上的解析和表现交给了SVGVIEWER插件（高版本的浏览器已经完全支持SVG渲染），通过提供服务器端调用及客户端的脚本语言共同完成电网图形的渲染，从而使服务端的矢量图形数据直接供用户浏览、查询和分析，大大的减少了服务器的负载及网络数据的传输量。其作为一种新的网络矢量图形标准，为基于SVG的配电网运行监测提供了一种良好的解决方案。SVG的特征和优点
1.1 SVG的特征
SVG是Scalable Vector Graphic的英文缩写，即为可扩展的矢量图形。它是W3C制定的、用矢量描述图形的XML应用标准。它有着许多的优点，比如可扩充性(sca1able)，动态性，强交互性。SVG支持无极放大，对SVG图片进行任意比例的放大都不会损害图片的显示(没有太多的失真)，其他诸如BMP，JPEG格式的图片都不支持无级放大。SVG有动画元素，只要在SVG文件中嵌入SVG动画元素就可以实现动画效果了。同时SVG也定义了丰富的事件，包括鼠标事件和键盘事件，只要对SVG进行相关的脚本编程就可以实现SVG文件的交互操作。1.2 SVG的优点
从网络的应用角度来讲，SVG具有如下独特的一些功能优点：（1）、标准的文档描述和检索性
通常的栅格图像和矢量图像没有自我描述的特性，而SVG本身就可以带有描述性的文字来描述文档的信息（如：大小、颜色等）。SVG内的文字都以文本的形式出现在XML文件中，这些信息可用于搜索引擎，而以往的搜索引擎通常无法搜索到写在点阵图像内的文字。
（2）支持用户与图像的交互
SVG支持各种先进的网页交互技术。象HTML页面一样，可以设置SVG图像以捕获某些事件(如点击鼠标和滚动)，并用它们启动脚本。在构建简单SVG图像时，可以通过属性捕获这些事件。最常用的是onclick、onactivate、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onload、onresize、onunload和onrepeat。当这些事件之一被触发，就可以将事件对象本身提供给脚本，脚本反过来再用它确定哪个对象触发了该事件(也就是点击了什么对象)。然后脚本可以操纵那个对象的特性，如它的属性等。SVG用