CN102592261A - 矢量图展现方法及*** - Google Patents

Abstract

本申请公开了一种矢量图展现方法，根据矢量图尺寸及用户设定的缩放值、浏览器尺寸、页面同浏览器之间的间距，计算页面目标尺寸；生成页面目标尺寸的位图，然后把矢量图文件的相关信息放入到这张位图内，在浏览器的默认位置展现该位图。本申请还公开了一种矢量图展现***。本申请的矢量图展现方法及***，由于没有直接展现矢量图文件，而是根据需求生成相应的位图，这个过程并没有对矢量图文件进行拷贝、更改尺寸等操作，使得该矢量图文件可以在别处被复用，这样如果多处需要使用矢量图文件的话，不必拷贝很多显示对象储存矢量图文件的图像信息，保证了不会占用过多的存储器空间。

Description

矢量图展现方法及***

技术领域

本申请涉及信息技术，特别涉及一种矢量显示对象展现方法及***。

背景技术

矢量图，是根据几何特性来绘制图形，矢量可以是一个点或一条线，矢量图文件储存着图像矢量信息，占用内在空间较小，因为这种类型的图像文件包含独立的分离图像，可以自由无限制的重新组合。它的特点是放大后图像不会失真，和分辨率无关，文件占用空间较小，适用于图形设计、文字设计和一些标志设计、版式设计等。

位图(bitmap)，亦称为点阵图像或绘制图像，是由称作像素(图片元素)的单个点组成的。这些点可以进行不同的排列和染色以构成图样。当放大位图时，可以看见赖以构成整个图像的无数单个方块。扩大位图尺寸的效果是增大单个像素，从而使线条和形状显得参差不齐。然而，如果从稍远的位置观看它，位图图像的颜色和形状又显得是连续的。

Flash是由macromedia公司推出的交互式矢量图和Web动画的标准，由Adobe公司收购。网页设计者使用Flash创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。Flash的前身是Future Wave公司的FutureSplash，是世界上第一个商用的二维矢量动画软件，用于设计和编辑Flash文档。1996年11月，美国Macromedia公司收购了Future Wave，并将其改名为Flash。Flash被大量应用于互联网网页的矢量动画设计。因为使用向量运算(Vector Graphics)的方式，产生出来的影片占用存储空间较小，SWF(shock wave flash)是动画设计软件Flash的专用格式，是一种支持矢量和点阵图形的动画文件格式，被广泛应用于网页设计，动画制作等领域，SWF文件通常也被称为Flash文件，可以弥补HTML4格式在动画、视频方面的欠缺。

常见的矢量图展现方式，通常是直接将矢量图文件(如SWF)实例化并生成DisplayObject显示对象进行展现，这种方式的优点在于不需要额外操作位图信息，减轻了程序制作者的工作，并且是原样展现矢量图文件(如SWF)的内容，但是该方式由于是直接操作矢量图文件(如SWF)的图像信息，如果程序多处都要使用矢量图文件(如SWF)的话，就不得不拷贝很多DisplayObject显示对象储存矢量图文件(如SWF)的图像信息，占用大量的存储器空间，这样无疑加大了维护的成本。

发明内容

本申请要解决的技术问题是，在多处需要使用矢量图文件时，保证不会占用过多的存储器空间。

为解决上述技术问题，本申请提供了一种矢量图展现方法，包括以下步骤：

一.在存储器中存储矢量图文件；

二.根据矢量图尺寸及用户设定的缩放值、浏览器尺寸、页面同浏览器之间的间距，计算页面目标尺寸；

页面目标尺寸计算方式如下：

(1)计算RW＝BW-LG-RG，RH＝RW*SH/SW；

(2)如果RH≤(BH-TG-BG)，则直接进行步骤(3)，否则重新计算：RH＝BH-TG-BG，RW＝RH*SW/SH，然后进行步骤(3)；

(3)TW＝RW*zoom，TH＝RH*zoom；

其中，RW为宽度中间变量，RH为高度中间变量，SW为矢量图宽度，SH为矢量图高度，BW是用户设定的浏览器宽度，BH是用户设定的浏览器高度，LG是用户设定的页面同浏览器之间的左间距，RG是用户设定的页面同浏览器之间的右间距，TG是用户设定的页面同浏览器之间的上间距，TG是用户设定的页面同浏览器之间的下间距，TW是页面目标宽度，TH是页面目标高度，zoom是用户设定的缩放值；

三.生成一张宽度为页面目标宽度TW、高度为页面目标高度TH的位图，然后把矢量图文件的相关信息放入到这张位图内，在浏览器的默认位置展现该位图。

所述矢量图展现方法还可以包括以下步骤：

四.根据页面目标宽度TW、页面目标高度TH、显示屏宽度SCW、显示屏高度SCH，以及用户设定的页面x坐标偏移百分比OXP、页面y坐标偏移百分比OYP，计算页面目标位置；

页面x坐标偏移百分比，是指页面中心x坐标偏移浏览器中心点的距离和页面目标宽度与浏览器宽度差值的比例；

页面y坐标偏移百分比，是指页面中心y坐标偏移浏览器中心点的距离和页面目标高度与浏览器高度差值的比例；

五.在浏览器的页面目标位置展现该位图。

页面x坐标偏移百分比可以在-0.5～0.5之间，页面y坐标偏移百分比可以在-0.5～0.5之间；

浏览器左上角坐标为(0，0)，右下角坐标为(BW，BH)时，页面目标位置计算方式如下：

TX＝(SCW-TW)*(0.5+OXP)，TY＝(SCW-TH)*(0.5+OYP)；

其中，SCW是显示屏宽度，SCH是显示屏高度，TW是页面目标宽度，TH是页面目标高度，OXP是用户设定的页面x坐标偏移百分比，OYP是页面y坐标偏移百分比，TX是页面目标位置左上角x坐标，TY是页面目标位置左上角y坐标。

浏览器的默认位置可以为浏览器的中心位置。

为解决上述技术问题，本申请还提供了一种矢量图展现***，包括页面目标尺寸计算模块、位图生成模块、位图展现模块；

所述页面目标尺寸计算模块，用于根据矢量图尺寸及用户设定的缩放值、浏览器尺寸、页面同浏览器之间的间距，计算页面目标尺寸；

所述位图生成模块，用于根据所述页面目标尺寸计算模块计算得到的页面目标宽度、页面目标高度，生成一张宽度为页面目标宽度、高度为页面目标高度的位图，然后把矢量图文件的相关信息放入到这张位图内；

所述位图展现模块，用于在浏览器中展现所述位图生成模块生成的位图。

所述页面目标尺寸计算模块，计算页面目标尺寸的方式可以如下：

(1)计算RW＝BW-LG-RG，RH＝RW*SH/SW；

(2)如果RH≤(BH-TG-BG)，则直接进行步骤(3)，否则重新计算：RH＝BH-TG-BG，RW＝RH*SW/SH，然后进行步骤(3)；

(3)TW＝RW*zoom，TH＝RH*zoom；

其中，RW为宽度中间变量，RH为高度中间变量，SW为矢量图宽度，SH为矢量图高度，BW是用户设定的浏览器宽度，BH是用户设定的浏览器高度，LG是用户设定的页面同浏览器之间的左间距，RG是用户设定的页面同浏览器之间的右间距，TG是用户设定的页面同浏览器之间的上间距，TG是用户设定的页面同浏览器之间的下间距，TW是页面目标宽度，TH是页面目标高度，zoom是用户设定的缩放值。

所述矢量图展现***还可以包括一页面目标位置计算模块；

所述页面目标位置计算模块，用于根据页面目标宽度TW、页面目标高度TH、显示屏宽度SCW、显示屏高度SCH，以及用户设定的页面x坐标偏移百分比OXP、页面y坐标偏移百分比OYP，计算页面目标位置；

页面x坐标偏移百分比，是指页面中心x坐标偏移浏览器中心点的距离和页面目标宽度与浏览器宽度差值的比例；

页面y坐标偏移百分比，是指页面中心y坐标偏移浏览器中心点的距离和页面目标高度与浏览器高度差值的比例；

所述位图展现模块，初始时浏览器的默认位置展现该位图，然后在浏览器的所述页面目标位置计算模块计算得到的页面目标位置展现该位图。

所述页面x坐标偏移百分比可以在-0.5～0.5之间，所述页面y坐标偏移百分比可以在-0.5～0.5之间；

浏览器左上角坐标为(0，0)，右下角坐标为(BW，BH)时，页面目标位置计算方式如下：

TX＝(SCW-TW)*(0.5+OXP)，TY＝(SCW-TH)*(0.5+OYP)；

其中，SCW是显示屏宽度，SCH是显示屏高度，TW是页面目标宽度，TH是页面目标高度，OXP是用户设定的页面x坐标偏移百分比，OYP是页面y坐标偏移百分比，TX是页面目标位置左上角x坐标，TY是页面目标位置左上角y坐标。

本申请的矢量图展现方法及***，由于没有直接展现矢量图文件，而是根据需求生成相应的位图，这个过程并没有对矢量图文件进行拷贝、更改尺寸等操作，仅仅是根据矢量图文件矢量信息生成特定尺寸下的位图，每次变量的变化都会导致尺寸的重新计算，然后是旧位图的销毁和新位图的生成，使得该矢量图文件可以在别处被复用，这样如果程序多处需要使用矢量图文件(如SWF)的话，不必拷贝很多DisplayObject显示对象储存矢量图文件(如SWF)的图像信息，保证了不会占用过多的存储器空间，大大提高了程序的灵活性，提高了程序运行的性能。

附图说明

为了更清楚地说明本申请或现有技术中的技术方案，下面将对本申请或现有技术描述中所需要使用的附图作简单的介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它的附图。

图1是本申请的矢量图展现方法一实施例示意图；

图2是本申请的矢量图展现***一实施例示意图。

具体实施方式

下面将结合本申请中的附图，对本申请中的技术方案进行清楚、完整的描述，显然，所描述的实施例是本申请的一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其它实施例，都属于本申请保护的范围。

实施例一

矢量图展现方法，如图1所示，包括以下步骤：

一.在存储器中存储矢量图文件(如SWF文件)；

二.根据矢量图尺寸及用户设定的缩放值、浏览器尺寸、页面同浏览器之间的间距，计算页面目标尺寸；

用户可以通过拖动slider(滑块)或者鼠标滚动等各种方式设定的缩放值；

用户可以拖拽浏览器、最大化或者还原等操作更改浏览器的尺寸；

由于页面是呈现在浏览器里面的，用户通过设定页面同浏览器四边的间距，以获得较佳阅读体验；

页面目标尺寸计算方式如下：

(1)计算RW＝BW-LG-RG，RH＝RW*SH/SW；

(2)如果RH≤(BH-TG-BG)，则直接进行步骤(3)，否则重新计算：RH＝BH-TG-BG，RW＝RH*SW/SH，然后进行步骤(3)；

(3)TW＝RW*zoom，TH＝RH*zoom；

其中，RW为宽度中间变量，RH为高度中间变量，SW为矢量图宽度，SH为矢量图高度，BW是用户设定的浏览器宽度，BH是用户设定的浏览器高度，LG是用户设定的页面同浏览器之间的左间距，RG是用户设定的页面同浏览器之间的右间距，TG是用户设定的页面同浏览器之间的上间距，TG是用户设定的页面同浏览器之间的下间距，TW是页面目标宽度，TH是页面目标高度，zoom是用户设定的缩放值；

三.生成一张宽度为页面目标宽度TW、高度为页面目标高度TH的位图，然后把矢量图文件的相关信息放入到这张位图内，在浏览器的默认位置(如浏览器的中心位置)展现该位图；

四.根据页面目标宽度TW、页面目标高度TH、显示屏宽度SCW、显示屏高度SCH，以及用户设定的页面x坐标偏移百分比OXP、页面y坐标偏移百分比OYP，计算页面目标位置；

在浏览器的默认位置展现该位图。

用户可以通过在浏览器中拖动位图页面设定页面x坐标偏移百分比、页面y坐标偏移百分比；

页面x坐标偏移百分比，是指页面中心x坐标偏移浏览器中心点的距离和页面目标宽度与浏览器宽度差值的比例，并且页面x坐标偏移百分比在-0.5～0.5之间；

页面y坐标偏移百分比，是指页面中心y坐标偏移浏览器中心点的距离和页面目标高度与浏览器高度差值的比例，并且页面y坐标偏移百分比在-0.5～0.5之间；

用户可以拖动显示在浏览器中的位图页面，但是为了用户的体验，不应当让用户任意拖动位图页面，应当在浏览器的特定区域内展现页面内容；

浏览器左上角坐标为(0，0)，右下角坐标为(BW，BH)，页面目标位置计算方式如下：

TX＝(SCW-TW)*(0.5+OXP)，TY＝(SCW-TH)*(0.5+OYP)；

其中，SCW是显示屏宽度，SCH是显示屏高度，TW是页面目标宽度，TH是页面目标高度，OXP是用户设定的页面x坐标偏移百分比，OYP是页面y坐标偏移百分比，TX是页面目标位置左上角x坐标，TY是页面目标位置左上角y坐标；

五.在浏览器的页面目标位置展现该位图。

实施例二

矢量图展现***，如图2所示，包括页面存储器、目标尺寸计算模块、位图生成模块、页面目标位置计算模块、位图展现模块；

所述存储器，用于存储矢量图文件(如SWF文件)；

所述页面目标尺寸计算模块，用于根据矢量图尺寸及用户设定的缩放值、浏览器尺寸、页面同浏览器之间的间距，计算页面目标尺寸；

所述页面目标尺寸计算模块，计算页面目标尺寸的方式如下：

(1)计算RW＝BW-LG-RG，RH＝RW*SH/SW；

(2)如果RH≤(BH-TG-BG)，则直接进行步骤(3)，否则重新计算：RH＝BH-TG-BG，RW＝RH*SW/SH，然后进行步骤(3)；

(3)TW＝RW*zoom，TH＝RH*zoom；

其中，RW为宽度中间变量，RH为高度中间变量，SW为矢量图宽度，SH为矢量图高度，BW是用户设定的浏览器宽度，BH是用户设定的浏览器高度，LG是用户设定的页面同浏览器之间的左间距，RG是用户设定的页面同浏览器之间的右间距，TG是用户设定的页面同浏览器之间的上间距，TG是用户设定的页面同浏览器之间的下间距，TW是页面目标宽度，TH是页面目标高度，zoom是用户设定的缩放值。

所述位图生成模块，用于根据所述页面目标尺寸计算模块计算得到的页面目标宽度、页面目标高度，生成一张宽度为页面目标宽度、高度为页面目标高度的位图，然后把矢量图文件的相关信息放入到这张位图内。

所述页面目标位置计算模块，用于根据页面目标宽度TW、页面目标高度TH、显示屏宽度SCW、显示屏高度SCH，以及用户设定的页面x坐标偏移百分比OXP、页面y坐标偏移百分比OYP，计算页面目标位置；

页面x坐标偏移百分比，是指页面中心x坐标偏移浏览器中心点的距离和页面目标宽度与浏览器宽度差值的比例，页面x坐标偏移百分比在-0.5～0.5之间；

页面y坐标偏移百分比，是指页面中心y坐标偏移浏览器中心点的距离和页面目标高度与浏览器高度差值的比例，页面y坐标偏移百分比在-0.5～0.5之间；

浏览器左上角坐标为(0，0)，右下角坐标为(BW，BH)，页面目标位置计算方式如下：

TX＝(SCW-TW)*(0.5+OXP)，TY＝(SCW-TH)*(0.5+OYP)；

其中，SCW是显示屏宽度，SCH是显示屏高度，TW是页面目标宽度，TH是页面目标高度，OXP是用户设定的页面x坐标偏移百分比，OYP是页面y坐标偏移百分比，TX是页面目标位置左上角x坐标，TY是页面目标位置左上角y坐标。

所述位图展现模块，用于在浏览器中展现所述位图生成模块生成的位图，初始时在浏览器的默认位置(如浏览器的中心位置)展现该位图，然后在浏览器的所述页面目标位置计算模块计算得到的页面目标位置展现该位图。

本申请的矢量图展现方法及***，根据用户设定的缩放值、浏览器尺寸、页面同浏览器之间的间距等变量，计算得出恰当的目标尺寸，然后将矢量图文件转换为尺寸等于目标尺寸的位图，将大小为目标尺寸的该位图展现给用户。本申请的矢量图展现方法，采集的变量较多，每次变量的变化都会导致目标尺寸的重新计算，生成新位图，所以对外部的响应也比较灵活；

本申请的矢量图展现方法及***，由于没有直接展现矢量图文件，而是根据需求生成相应的位图，这个过程并没有对矢量图文件进行拷贝、更改尺寸等操作，仅仅是根据矢量图文件矢量信息生成特定尺寸下的位图(该技术同截图***的位图保存模块相同，都是从数据源中生成位图信息)，每次变量的变化都会导致尺寸的重新计算，然后是旧位图的销毁和新位图的生成，使得该矢量图文件可以在别处被复用，这样如果程序多处需要使用矢量图文件(如SWF)的话，不必拷贝很多DisplayObject显示对象储存矢量图文件(如SWF)的图像信息，保证了不会占用过多的存储器空间，大大提高了程序的灵活性，提高了程序运行的性能。

以上所述，仅为本发申请较佳的具体实施方式，但本发申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到的变化或替换，都应该涵盖在本申请的保护范围之内。

Claims (10)

1.一种矢量图展现方法，其特征在于，包括以下步骤：

一.在存储器中存储矢量图文件；

二.根据矢量图尺寸及用户设定的缩放值、浏览器尺寸、页面同浏览器之间的间距，计算页面目标尺寸；

页面目标尺寸计算方式如下：

(1)计算RW＝BW-LG-RG，RH＝RW*SH/SW；

(2)如果RH≤(BH-TG-BG)，则直接进行步骤(3)，否则重新计算：RH＝BH-TG-BG，RW＝RH*SW/SH，然后进行步骤(3)；

(3)TW＝RW*zoom，TH＝RH*zoom；

其中，RW为宽度中间变量，RH为高度中间变量，SW为矢量图宽度，SH为矢量图高度，BW是用户设定的浏览器宽度，BH是用户设定的浏览器高度，LG是用户设定的页面同浏览器之间的左间距，RG是用户设定的页面同浏览器之间的右间距，TG是用户设定的页面同浏览器之间的上间距，TG是用户设定的页面同浏览器之间的下间距，TW是页面目标宽度，TH是页面目标高度，zoom是用户设定的缩放值；

三.生成一张宽度为页面目标宽度TW、高度为页面目标高度TH的位图，然后把矢量图文件的相关信息放入到这张位图内，在浏览器的默认位置展现该位图。

2.根据权利要求1所述的矢量图展现方法，其特征在于，还包括以下步骤：

四.根据页面目标宽度TW、页面目标高度TH、显示屏宽度SCW、显示屏高度SCH，以及用户设定的页面x坐标偏移百分比OXP、页面y坐标偏移百分比OYP，计算页面目标位置；

页面x坐标偏移百分比，是指页面中心x坐标偏移浏览器中心点的距离和页面目标宽度与浏览器宽度差值的比例；

页面y坐标偏移百分比，是指页面中心y坐标偏移浏览器中心点的距离和页面目标高度与浏览器高度差值的比例；

五.在浏览器的页面目标位置展现该位图。

3.根据权利要求2所述的矢量图展现方法，其特征在于，

页面x坐标偏移百分比在-0.5～0.5之间，页面y坐标偏移百分比在-0.5～0.5之间；

浏览器左上角坐标为(0，0)，右下角坐标为(BW，BH)，页面目标位置计算方式如下：

TX＝(SCW-TW)*(0.5+OXP)，TY＝(SCW-TH)*(0.5+OYP)；

其中，SCW是显示屏宽度，SCH是显示屏高度，TW是页面目标宽度，TH是页面目标高度，OXP是用户设定的页面x坐标偏移百分比，OYP是页面y坐标偏移百分比，TX是页面目标位置左上角x坐标，TY是页面目标位置左上角y坐标。

4.根据权利要求1、2或3所述的矢量图展现方法，其特征在于，

浏览器的默认位置为浏览器的中心位置。

5.一种矢量图展现***，其特征在于，包括页面目标尺寸计算模块、位图生成模块、位图展现模块；

所述页面目标尺寸计算模块，用于根据矢量图尺寸及用户设定的缩放值、浏览器尺寸、页面同浏览器之间的间距，计算页面目标尺寸；

所述位图生成模块，用于根据所述页面目标尺寸计算模块计算得到的页面目标宽度、页面目标高度，生成一张宽度为页面目标宽度、高度为页面目标高度的位图，然后把矢量图文件的相关信息放入到这张位图内；

所述位图展现模块，用于在浏览器中展现所述位图生成模块生成的位图。

6.根据权利要求5所述的矢量图展现***，其特征在于，

所述页面目标尺寸计算模块，计算页面目标尺寸的方式如下：

(1)计算RW＝BW-LG-RG，RH＝RW*SH/SW；

(2)如果RH≤(BH-TG-BG)，则直接进行步骤(3)，否则重新计算：RH＝BH-TG-BG，RW＝RH*SW/SH，然后进行步骤(3)；

(3)TW＝RW*zoom，TH＝RH*zoom；

其中，RW为宽度中间变量，RH为高度中间变量，SW为矢量图宽度，SH为矢量图高度，BW是用户设定的浏览器宽度，BH是用户设定的浏览器高度，LG是用户设定的页面同浏览器之间的左间距，RG是用户设定的页面同浏览器之间的右间距，TG是用户设定的页面同浏览器之间的上间距，TG是用户设定的页面同浏览器之间的下间距，TW是页面目标宽度，TH是页面目标高度，zoom是用户设定的缩放值。

7.根据权利要求6所述的矢量图展现***，其特征在于，所述矢量图展现***还包括一页面目标位置计算模块；

所述页面目标位置计算模块，用于根据页面目标宽度TW、页面目标高度TH、显示屏宽度SCW、显示屏高度SCH，以及用户设定的页面x坐标偏移百分比OXP、页面y坐标偏移百分比OYP，计算页面目标位置；

页面x坐标偏移百分比，是指页面中心x坐标偏移浏览器中心点的距离和页面目标宽度与浏览器宽度差值的比例；

页面y坐标偏移百分比，是指页面中心y坐标偏移浏览器中心点的距离和页面目标高度与浏览器高度差值的比例；

所述位图展现模块，初始时浏览器的默认位置展现该位图，然后在浏览器的所述页面目标位置计算模块计算得到的页面目标位置展现该位图。

8.根据权利要求7所述的矢量图展现***，其特征在于，

所述页面x坐标偏移百分比在-0.5～0.5之间，所述页面y坐标偏移百分比在-0.5～0.5之间；

浏览器左上角坐标为(0，0)，右下角坐标为(BW，BH)，页面目标位置计算方式如下：

TX＝(SCW-TW)*(0.5+OXP)，TY＝(SCW-TH)*(0.5+OYP)；

其中，SCW是显示屏宽度，SCH是显示屏高度，TW是页面目标宽度，TH是页面目标高度，OXP是用户设定的页面x坐标偏移百分比，OYP是页面y坐标偏移百分比，TX是页面目标位置左上角x坐标，TY是页面目标位置左上角y坐标。

9.根据权利要求7或8所述的矢量图展现***，其特征在于，

浏览器的默认位置为浏览器的中心位置。

10.根据权利要求5所述的矢量图展现***，其特征在于，

所述矢量图文件为SWF文件。

Images