首 页 本刊概况 出 版 人 发行统计 在线订阅 欢迎投稿 市场分析 1 组织交流 1 关于我们
 
1
   通信短波
1
   新品之窗
1
   优秀论文
1
   通信趋势
1
   特别企划
1
   运营商动态
1
   技术前沿
1
   市场聚焦
1
   通信视点
1
   信息化论坛
1
当前位置:首页 > 优秀论文
SVG中鼠标拖动模型的设计与实现
作者:李昌林 任会斌 同济大学计算机科学与技术系
来源:不详
更新时间:2009/9/19 19:29:00
正文:

SVG(Scalable Vector Graphics)即为可升级矢量图行,它是一种开放标准的文本式矢量图形描述语言。使用SVG可以在网页上显示出各种各样的高质量的矢量图形。包括图像处理中常见的许多功能,如图形,文字、动画、音频、色彩、滤镜效果等。最关键的是:SVG完全用普通文本来描述。也就是说,这是一种专门为网络而设计的、基于文本的图像格式。并且SVG是基于XML的语言,所以可扩展性很强,并能够描述任意复杂的图像。
SVG中元素的鼠标拖动是目前SVG图形界面设计中常见的用户需求。而要在一个复杂的系统中做到精确无误的鼠标拖动,不仅要有恰当的SVG文档结构设计,还要有鼠标拖动对象时准确的坐标计算公式。在目前的SVG1.1或SVG1.2标准规范中并没有给出相关示范样例,而网络上流传的许多鼠标拖动范例程序有很大的局限性,特别是其拖动时的坐标计算公式并不具备通用性,当移植到复杂的大中型的SVG系统当中时很容易发生拖动的失败或错误移动。究其根本,无非是因为没有深入理解分析SVG中的坐标系转换(Coordinate system transformations)。
本文在深入了解SVG文档结构和其坐标系转换的基础上,设计了一个规范的SVG鼠标拖动模型,然后通过严谨的数学证明计算出适用于任何SVG系统的坐标计算公式。实现了在不同SVG系统中准确无误的鼠标拖动,并给出了源程序和效果示例图。
1 SVG文档结构设计
1.1 SVG文档设计
SVG文档的所有内容都是在一个二维空间无限的背景幕布上的,不过在其上还有一个有限的矩形区域用来放置文档内容。这个有限的矩形区域即SVG视窗(viewport),用户正是通过这个视窗看到了SVG图形。设置好视窗之后,SVG用户代理(SVG user agent)需要建立两个坐标系统:视窗坐标系和用户坐标系。而本文讨论的鼠标拖动的坐标计算与这两个坐标系统之间的转换默契关联。
视窗坐标系由SVG用户代理根据SVG文档的具体环境和设置进行计算而自动建立。它与用户坐标系的原点都是SVG视窗的坐标原点,用户坐标系中的一个单位必需等于一个屏幕像素。在此我们关注的是用户坐标系的建立以及它与视窗坐标系之间的转换。建立一个新的用户坐标系只需要在SVG文档中任意位置用转换矩阵的形式进行坐标转换,也可以用简单的坐标转换操作如:translate, scale, skew, rotate来实现。通过坐标系转换来建立新的用户坐标系是二维图形的基本操作,也是控制图形位置、大小、角度的通用方法。
在坐标转换的原理基础上,为了准确地实现鼠标拖动SVG图形,本文制定了以下SVG文档结构的设计模型:
(1) 对需要被拖动的元素dragTarget不要设置”transform”属性,而是给dragTarget设置一个用元素构造的父结点,然后把”transform”属性整体迁移到父结点元素中。这样既能达到坐标转换的要求,也不会影响到本文后面的坐标转换公式的计算。
(2) 拖动对象的任意祖先结点可以随意设置”transform”属性,SVG根结点也可以设置”viewBox”属性进行坐标转换,毫无限制。这正是目前网络上各种鼠标拖动方法所不能满足的要求。
(3) 拖动对象必需有一个足够大的背景区域(Background Rectangle)铺在拖动对象图层之下,以便让用户实施拖动操作,超出此背景区域则用户不能正确拖动此对象。这是SVG鼠标拖动的技巧,是一种强制要求,否则不能实现恰当的鼠标拖动。
(4) 响应鼠标拖动事件的元素必须是拖动对象和背景区域的共同父结点或祖先结点(也可以是SVG文档的根结点)。给这个祖先结点添加mousedown, mousemove, mouseup三个必不可少的事件。
如此,整个SVG文档的模型初步建立。下面给出了试验程序中的SVG文档模型的代码片断。

 
 
   
《通信市场》 中国·北京·复兴路49号通信市场(100036) 点击查看具体位置
电话:86-10-6820 7724, 6820 7726
京ICP备05037146号-8
建议使用 Microsoft IE4.0 以上版本 800*600浏览 如果您有什么建议和意见请与管理员联系