《一种内容呈现设备和方法.pdf》由会员分享，可在线阅读，更多相关《一种内容呈现设备和方法.pdf（18页完整版）》请在专利查询网上搜索。
1、(10)申请公布号 CN 103176993 A(43)申请公布日 2013.06.26CN103176993A*CN103176993A*(21)申请号 201110432332.3(22)申请日 2011.12.21G06F 17/30(2006.01)(71)申请人北京神州绿盟信息安全科技股份有限公司地址 100089 北京市海淀区北洼路4号益泰大厦五层(72)发明人张磊(74)专利代理机构中国专利代理(香港)有限公司 72001代理人谢建云 刘鹏(54) 发明名称一种内容呈现设备和方法(57) 摘要本发明公开了一种适于图形化地呈现对象拓扑结构的内容呈现设备，其包括页面布局部件，适于定义。
2、用于图形化呈现的区域；位置确定部件，适于根据每个对象的属性来确定相应对象在所定义区域中的位置，根据每个对象的位置来确定一个或者多个连接关系的起点和终点在所定义区域中的位置；以及图形绘制部件，适于根据每个连接关系的起点和终点的位置在所定义区域中绘制连接每个连接关系的起点和终点的连线，并在所定义区域中绘制每个对象，其中所述对象叠加在所述连线之上。本发明还涉及相应的内容呈现方法。(51)Int.Cl.权利要求书2页 说明书8页 附图7页(19)中华人民共和国国家知识产权局(12)发明专利申请权利要求书2页 说明书8页 附图7页(10)申请公布号 CN 103176993 ACN 103176993 。
3、A1/2页21.一种内容呈现设备,适于图形化地呈现一个或者多个对象以及一个或者多个这些对象之间的连接关系，该内容呈现设备包括：页面布局部件，适于在所述内容呈现设备中定义用于图形化呈现的区域；位置确定部件，适于根据一个或者多个对象中每个对象的属性来确定相应对象在所定义区域中的位置，根据每个对象的位置来确定一个或者多个连接关系的起点和终点在所定义区域中的位置；以及图形绘制部件，适于根据每个连接关系的起点和终点的位置在所定义区域中绘制连接每个连接关系的起点和终点的连线，并在所定义区域中绘制每个对象，其中所述对象叠加在所述连线之上。2.如权利要求1所述的内容呈现设备，其中所述一个或者多个对象中的每个对。
4、象的属性包括对象的大小、对象在所定义区域中的初始位置、对象描述和对象的图标等中的一个或者多个，而且所述一个或者多个连接关系中的每个连接关系由连接关系所涉及的对象来定义。3.如权利要求1或者2所述的内容呈现设备，其中所述页面布局部件所定义的区域可以在所述内容呈现设备中移动或者缩放，以及当所定义的区域移动或者缩放时，所述位置确定部件重新确定每个对象的位置以及每个连接关系的起点和终点位置，以及所述图形绘制部件重新在所定义区域中绘制所述对象和对应于连接关系的连线。4.如权利要求1-3中任一个所述的内容呈现设备，还包括用户接口，适于接收用户对所述一个或者多个对象以及一个或者多个连接关系的操作，以及所述位。
5、置确定部件基于所述用户操作来重新确定每个对象的位置以及每个连接关系的起点和终点位置，以及所述图形绘制部件重新在所定义区域中绘制所述对象和对应于连接关系的连线。5.如权利要求1-4中任一个所述的内容呈现设备，其中所述内容呈现设备适于采用与HTML5兼容的呈现方式，页面布局部件适于采用HTML 中的Canvas元素来定义所述区域，以及所述图形绘制部件适于采用HTML中的Div元素来定义所述一个或者多个对象并在所定义区域中呈现所述对象。6.如权利要求5所述的内容呈现设备，其中对于每个对象，所述图形绘制部件利用第一Div元素来定义该对象的大小和位置，利用第二Div元素定义对应于该对象的图标，以及利用第。
6、三Div元素定义对应于该对象的对象描述，其中所述第二Div元素和第三元素包含在第一Div元素中。7.一种内容呈现方法,适于图形化地呈现一个或者多个对象以及一个或者多个这些对象之间的连接关系，该方法包括：在内容呈现设备中定义用于图形化呈现的区域；根据一个或者多个对象中每个对象的属性来确定相应对象在所定义区域中的位置，根据每个对象的位置来确定一个或者多个连接关系的起点和终点在所定义区域中的位置；以及根据每个连接关系的起点和终点的位置在所定义区域中绘制连接每个连接关系的起点和终点的连线，并在所定义区域中绘制每个对象，其中所述每个对象叠加在所述连线之权 利 要 求 书CN 103176993 A2/2。
7、页3上。8.如权利要求7所述的内容呈现方法，其中所述一个或者多个对象中的每个对象的属性包括对象的大小、对象在所定义区域中的初始位置、对象描述和对象图标等中的一个或者多个，而且所述一个或者多个连接关系中的每个连接关系由连接关系所涉及的对象来定义。9.如权利要求7或者8所述的内容呈现方法，其中所定义的区域可以在所述内容呈现设备中移动或者缩放，以及该方法还包括：当所定义的区域移动或者缩放时，重新确定每个对象的位置以及每个连接关系的起点和终点位置，以及重新在所定义区域中绘制所述对象和对应于连接关系的连线。10.如权利要求7-9中任一个所述的内容呈现方法，还包括：接收用户对所述一个或者多个对象以及一个或。
8、者多个连接关系的操作，以及基于所述用户操作来重新确定每个对象的位置以及每个连接关系的起点和终点位置，以及重新在所定义区域中绘制所述对象和对应于连接关系的连线。11.如权利要求7-10中任一个所述的内容呈现方法，其中采用与HTML5兼容的呈现方式来图形化地呈现一个或者多个对象以及一个或者多个这些对象之间的连接关系，采用HTML 中的Canvas元素来定义所述区域，以及采用HTML中的Div元素来定义所述一个或者多个对象并在所定义区域中呈现所述对象。12.如权利要求11所述的内容呈现方法，其中采用HTML中的Div元素来定义所述一个或者多个对象包括：对于每个对象，利用第一Div元素来定义该对象的大。
9、小和位置；利用第二Div元素定义对应于该对象的图标；以及利用第三Div元素定义对应于该对象的对象描述，其中所述第二Div元素和第三元素包含在第一Div元素中。权 利 要 求 书CN 103176993 A1/8页4一种内容呈现设备和方法技术领域0001 本发明涉及网络内容显示领域，尤其涉及在用户设备处呈现网络内容的内容呈现设备和相应的呈现方法。背景技术0002 随着基于互联网的应用越来越广泛、网络带宽不断增加以及用户设备的处理性能越加强大。越来越多的应用从传统的桌面应用转移到基于浏览器的应用上。网络管理应用也是如此，传统的网络管理应用通常采用客户端/服务器架构，在终端设备处安装传统的网络管理应。
10、用客户端，该客户端和安装在服务器处的网络管理应用服务器端进行通信，管理员可以通过在客户端处的操作来管理多个网络设备。目前，随着网络浏览器的应用越来越广泛，各种用户设备，例如传统的桌面型计算机、膝上型计算机和现在的个人数字助理、数字平板、移动终端以及智能手机等都内置了网络浏览器。为了便于管理员可以采用各种用户设备来进行网络管理，目前出现了多种基于网络浏览器的网络管理应用，以便系统管理员可以通过在各种用户设备上运行的网络浏览器就可以管理多个网络设备。0003 在网络管理应用中，一个重要的方面就是对网络设备之间的网络拓扑关系进行管理。通常，为了给予管理员对拓扑关系的直观感受，一般在图形用户接口中以图。
11、形方式示出这种拓扑关系，即拓扑图，以便管理员可以方便地查看拓扑图并进行相应的管理操作。当网络管理应用基于网络浏览器时，如何在网络浏览器中显示拓扑图以便于管理员观看和操作成为了关键的方面。0004 目前，已知可以在网络浏览器中采用来显示拓扑图的实现手段包括Flash、SVG和VML等。然而这些方式虽然都具有相应的优点，但是也具有明显的缺陷。例如，SVG能够以XML表述方式在浏览器上绘制拓扑图，而且由于是SVG为矢量图形，在拓扑图放大/缩小时图像不失真。但是SVG具有如下缺点，例如SVG图形没有被多数主流浏览器支持，导致在浏览器上显示SVG图形需要安装插件；而为了完全达到SVG图形的无极缩放，要求。
12、拓扑图上所有元素都需要以XML方式描述，因此需要将拓扑图上的设备图标从普通位图转换成矢量图，这样做的难度较大；另外SVG与Javascript的交互性较差，无法实现动态效果（如动态创建，删除，隐藏网络节点等）。使用Flash呈现网络拓扑图具有表现形式丰富、能够实现桌面应用所具有的绝大多数功能的优点，但是Flash具有如下缺点，例如Flash开发偏向美工的角色，需要专门的开发人员才能胜任并需要有专用的开发工具；另外，Flash在苹果公司的IOS系列操作平台上得不到支持。使用VML呈现网络拓扑图能够在浏览器页面中绘制各种图形，但是VML仅仅被IE内核的浏览器所支持，因此存在明显的应用范围限制。00。
13、05 由此可以看出，目前所采用的在网络浏览器中显示网络拓扑图的方式都存在不足之处。应当看出，其他需要在网络浏览器中显示类似于拓扑图之类的、具有对象和对象之间的连接关系的图形的应用同样存在上述问题。所期望的是一种可以支持大多数主流网络浏览器的，便于开发和进行交互的图形化呈现设备和方式。说 明 书CN 103176993 A2/8页5发明内容0006 鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决或者减缓上述问题的内容呈现设备和相应的内容呈现方法。0007 根据本发明的一个方面，提供了一种内容呈现设备,适于图形化地呈现一个或者多个对象以及一个或者多个这些对象之间的连接关系。该。
14、内容呈现设备包括页面布局部件，以便在该内容呈现设备中定义用于进行图形化呈现的区域。该内容呈现设备还包括位置确定部件，用于根据每个对象的属性来确定该对象在所定义区域中的位置。由于对象的连接关系一般可以由所涉及的对象来定义，因此位置确定部件可以根据每个对象的位置来确定一个或者多个连接关系的起点和终点在所定义区域中的位置。在该内容呈现设备中，图形绘制部件根据每个连接关系的起点和终点的位置在所定义区域中绘制连接每个连接关系的起点和终点的连线，并在所定义区域中绘制每个对象，其中对象叠加在连线之上。0008 根据本发明的内容呈现设备，在呈现对象及其连接关系时，考虑对象的大小和位置来获取对象的图形中心，将对。
15、象的连接关系绘制成简单的连线，然后将对象叠加在连线之上。这样，可以一种便捷的方式来图形化地呈现对象及其连接关系。0009 可选地，在此处公开的内容呈现设备中，每当所呈现的对象或者其连接关系发生改变时，位置确定部件会重新确定每个对象的位置以及每个连接关系的起点和终点位置，以及图形绘制部件重新在所定义区域中绘制对象和对应于连接关系的连线。0010 可选地，在此处公开的内容呈现设备可以采用HTML5或者与HTML5兼容的呈现方式，页面布局部件可以采用HTML 中的Canvas元素来定义呈现区域，以及图形绘制部件可以采用HTML中的Div元素来定义对象。例如，对于每个对象，图形绘制部件利用第一Div元。
16、素来定义对象的大小和位置，利用第二Div元素定义对应于该对象的图标，以及利用第三Div元素定义对应于该对象的对象描述，其中第二Div元素和第三元素包含在第一Div元素中。0011 HTML5是W3C在近期指定的标准，HTML5适于在各种用户设备（包括传统的计算机和目前快速发展的移动终端）中的各种网络浏览器中呈现网页。因此采用HTML5可以使得内容呈现设备可以广泛地应用于各种设备中。0012 根据本发明的另一个方面，提供了一种内容呈现方法,适于图形化地呈现一个或者多个对象以及一个或者多个对象连接关系。该内容呈现方法包括在内容呈现设备中定义用于图形化呈现的区域；根据每个对象的属性来确定相应对象在所。
17、定义区域中的位置，根据每个对象的位置来确定连接关系的起点和终点在所定义区域中的位置；以及根据每个连接关系的起点和终点的位置在所定义区域中绘制连接每个连接关系的起点和终点的连线，并在所定义区域中绘制每个对象，其中所述每个对象叠加在所述连线之上。0013 根据本发明的内容呈现方法，在呈现对象及其连接关系时，考虑对象的大小和位置来获取对象的图形中心，将对象的连接关系绘制成简单的连线，然后将对象叠加在连线之上。这样，可以一种便捷的方式来图形化地呈现对象及其连接关系。0014 在此公开的内容呈现设备和方法尤其适于应用在网络浏览器中，并且尤其适用于显示网络拓扑结构的应用。附图说明说 明 书CN 10317。
18、6993 A3/8页60015 通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：图1示出了根据本发明一个实施例的内容呈现设备的示意框图；图2示出了根据本发明一个实施例的内容呈现设备呈现的对象关系的示意图；图3示出了根据本发明一个实施例的内容呈现设备呈现的对象和对象关系的示意图；图4A-4C示出了根据本发明一个实施例的有关对象呈现区域进行缩放的示意图；图5示出了根据本发明一个实施例的对象定义的示意图；以及图6示意性地示出了根据本发。
19、明一个实施例的内容呈现方法的流程图。具体实施方式0016 下面结合附图和具体的实施方式对本发明作进一步的描述。0017 图1示出了根据本发明一个实施例的内容呈现设备100的示意框图。内容呈现设备100可以是适于呈现网络页面的网络浏览器。随着英特网和移动设备的硬件和软件技术发展，已经出现了各种并非网络浏览器、但是采用了各种网络浏览器内核（例如、IE内核等）的客户端应用。内容呈现设备100可以涵盖这些应用，所有可以呈现网络页面的客户端应用都在本发明的保护范围之内。0018 内容呈现设备100可以在呈现区域110呈现内容呈现设备100所接收的内容。内容呈现设备100除了呈现一般的内容，例如HTML格。
20、式的网页内容之外，还适于图形化地呈现一个或者多个对象以及一个或者多个这些对象之间的连接关系。很多适于呈现的结构都可以表述为对象以及对象之间的连接关系。例如，在网管领域中，网络拓扑结构可以表述为各个网络单元以及网络单元之间的连接关系；在数据库领域中，数据库中表格之间的关联同样可以表示为各个数据表以及这些数据表之间的关联关系。因此，如何在内容呈现设备中以便利的方式来呈现这种对象和对象之间的连接关系具有非常普遍的应用。0019 内容呈现设备100包括页面布局部件120，适于在内容呈现设备100的呈现区域110中定义专门用于图形化呈现这些对象和对象之间的连接关系的对象呈现区域112。可选地，对象呈现区。
21、域112可以在呈现区域100中被拉伸、压缩和移动，并且还可以跟随呈现区域而移动。一般来说，当对象呈现区域112的位置或者大小发生改变时，对象呈现区域112中所呈现的内容也应当相应发生改变，这将在下文中进行详细描述。0020 内容呈现设备100还包括位置确定部件130，用于根据所定义的一个或者多个对象以及一个或者多个这些对象之间的对象关系来确定这些对象和对象关系在对象呈现区域112中的位置。具体而言，每个对象都可以由一个或者多个属性来定义。可选地，这些属性包括对象的初始大小（例如长度和宽度）和对象的初始位置等。例如，一个对象可以具有如下属性：top:10px;left:10px;width:50。
22、px;height:80px;ID:object1上述属性说明了ID为object1的对象具有50像素的宽度和80像素的宽度，并且其左上角在对象呈现区域112的坐标系中具有坐标（10，10）。在诸如网络浏览器之类的客户端呈现设备中，一般将包括呈现区域110和对象呈现区域112在内的各种区域的原点设置在左上角，X轴向右延伸且Y轴向下延伸。说 明 书CN 103176993 A4/8页70021 应当注意的是，上面对象的这些大小和尺寸定义是相对于对象呈现区域110定义的，由于对象呈现区域112仅仅为呈现区域110的一部分，对象最终要在呈现区域110中呈现，因此为了在呈现区域110中合适地呈现对象，。
23、必须要根据对象的相对初始大小和对象的相对初始位置来计算对象在对象区域110中的绝对大小和位置。0022 可选地，对象的初始位置利用相对比例坐标来定义。比例坐标的值为对象在对象呈现区域102中的绝对值和对象呈现区域大小的比例。例如，假定对象呈现区域的宽度是W个像素，高度是H个像素，则相对于对象呈现区域的上边界距离为Y个像素，距离左边界为X个像素的节点的比例坐标（Xp，Yp）可以定义为：Xp = X * 100 / WYp = Y * 100 / H其中，值100意味着比例坐标值以百分比计算。0023 随后，当在呈现区域中呈现该节点时，可以根据下面的公式将对象的比例坐标（Xp，Yp）换算成相对于呈。
24、现区域的绝对坐标（Xa，Yp）Xa = (Xp * W / 100) + XcYa = (Yp * H / 100) + Yc，其中Xc和Yc分别为对象呈现区域112的左上角在呈现区域中的绝对坐标值。0024 位置确定部件130可以利用上述转换方式为每个对象确定其绝对坐标值。在为每个对象确定其绝对坐标值后，位置确定部件130还可以为每个对象关系来确定其坐标。对象关系可以涉及两个或者跟多个对象，因此，对象关系可以由所涉及的对象来定义。可选地，对象关系可以定义如下:其中定义了该对象关系relation1从对象object1指向object2。对象关系可以由从一个对象指向另一个对象的连线来表述。或者。
25、，当对象关系涉及超过多个对象时，可以由连接这些对象的星形连线来表示对象关系。0025 因此，位置确定部件130需要为每个对象关系确定这些连线的起点和终点。可选地，可以把对象关系的起点和终点确定为对象关系所涉及对象的中心位置。例如，在对象的左上角坐标为（Xa，Ya），其宽度和长度分别为Wa和La时，对象中心位置处的坐标为（Xa+Wa/2，Ya+La/2）。0026 内容呈现设备100还包括图形绘制部件140。图形绘制部件140接收由位置确定部件130确定的每个对象的绝对坐标和每个对象关系所对应的连线的起点和终点坐标，然后在对象呈现区域112中绘制这些对象和对象关系。图形绘制部件140首先在对象呈。
26、现区域112中绘制对象关系，当对象关系涉及两个对象时，对象关系可以被绘制为从一个对象中心到另一个对象中心的连线。而当对象关系涉及到三个或者更多对象时，这可以绘制连接所涉及对象的对象中心的星形线。例如，可以首先根据这些对象中心的坐标来确定星形的中心位置，然后绘制从星形中心到各个对象中心的连线。应当注意的是，本发明不局限于这些星形线连接方式，所以可以将多个对象中心连接在一起的方式都在本发明的保护范围之内。0027 图2示出了在由图形绘制部件140绘制了对象关系之后的示意图。如图2所示，此时在对象呈现区域112中已经绘制了各种连线。随后，图形绘制部件140根据由位置确说 明 书CN 10317699。
27、3 A5/8页8定部件所确定的每个对象的绝对位置，在对象呈现区域112中绘制每个对象。由于连线连接的都是对象中心的位置，因此当绘制对象时，对象就叠加在连线上。图3示出了由图形绘制部件140绘制了对象和对象关系之后的示意图。如图3所示，对象叠加在连线之上。应当注意的是，虽然在上述实施例中描述了先绘制连接后绘制对象的过程，但是只要对象叠加在连接之上，二者的顺序是可以任意的。0028 可选地，图形绘制部件140可以在绘制对象和对象关系之前，首先在呈现区域110中绘制对象呈现区域112。0029 在图1所示的内容呈现设备100中，首先由页面布局部件120定义专门来呈现对象和对象关系的对象呈现区域，然后。
28、由位置确定部件130根据对象事先定义的相对坐标来确定呈现对象的绝对坐标，并将对象关系确定为连接相关联对象中心的连线，最后由图形绘制部件140来分别绘制这些连线和对象，以使得对象叠加在连线之上，从而以图形化方式来呈现这些对象和相应的对象关系。内容呈现设备100提供了一种以较为方便的方式来图形化地呈现对象拓扑结构。0030 可选地，对象呈现区域112可以在呈现区域110中移动以及进行缩放（例如，可以基于内容呈现设备100的用户的指示来进行），也就是说对象呈现区域112的左上角坐标、宽度和长度都可以发生改变。而当对象呈现区域112的位置或者大小发生改变时，位置确定部件130为每个对象和对象关系重新计。
29、算绝对位置，然后图形绘制部件140根据新计算的位置值来重新呈现各个对象和对象关系。因此，所呈现的对象及其对象关系可以自动适应不同的页面尺寸。即使这些对象及其对象关系在具有不同分辨率的显示器（显示器的分辨率决定了呈现区域的尺寸）显示，或者在使用过程中改变对象呈现区域的尺寸，也能得到相同的效果。0031 图4A-4C示出了根据本发明一个实施例的有关对象呈现区域进行缩放的示意图。图4A示出了根据本发明一个实施例、在对象呈现区域呈现了各个对象和对象关系的示意图。图4A以网络节点和网络节点之间的关系，即网络拓扑结构为例进行了说明。图4B示出了在对象呈现区域沿宽度方向增加1.5倍时，如果不对对象呈现区域中。
30、的网络拓扑进行更新时的图示。图4C示出了根据本发明的一个实施例，当对象呈现区域沿宽度方向增加1.5倍时，相应对对象呈现区域中的网络拓扑结构进行更新后的图示。0032 如图4A-4C所示，如果对象呈现区域的大小或者位置发生了改变，如果不更新对象呈现区域中所呈现的内容，则会使得显示效果欠佳。而本发明的内容呈现设备100中采用了相对的比例坐标来定义对象和对象关系，因此可以方便地根据对象呈现区域的坐标来更新对象和对象关系的坐标，并进行重新呈现。0033 可选地，内容呈现设备100的用户可以对所呈现的对象和/或对象关系进行操作。例如，用户可以修改对象的属性、移动对象位置、修改对象关系、在对象之间添加新的。
31、关联或者删除已有关联等等。为此，内容呈现设备100还可以包括用户接口150，适于接收用户有关这些对象和/或对象关系的操作。而类似上述，在用户进行上述操作之后，位置确定部件130可以基于用户操作来重新确定每个对象的位置以及每个连接关系的起点和终点位置，而且图形绘制部件140可以重新在对象呈现区域中呈现这些对象。0034 另外，如前所述，每个对象都有相应的属性。每个对象除了相应的位置和大小属性之外，还可以包括对象的描述以及对象的图标等等之类的属性。在图形绘制部件140绘制说 明 书CN 103176993 A6/8页9对象时，可以考虑同时呈现对象的描述以及代表对象的对象图标。0035 可选地，内容。
32、呈现设备100可以采用HTML5来呈现对象的拓扑结构。HTML5是由W3C制定的最新网页呈现标准，可以方便地在网络浏览器中进行动态呈现。当然，内容呈现设备100可以不仅仅受限于采用HTML5，将来可能出现的、与HTML5兼容的格式都在本发明的保护范围之内。当内容呈现设备100采用HTML5来进行拓扑结构呈现时，页面布局部件120可以采用HTML 5中的canvas元素来定义对象呈现区域112。图形绘制部件140则可以利用javascript中的相关函数（例如，包括但不限于，moveTo（x,y）,lineTo(x,y),stroke()等）在canvas元素所定义的区域中绘制连线来代表对象之间。
33、的连接关系。另外，图形绘制部件利用HTML中的div元素来定义和呈现对象。0036 图5示出了利用div元素所定义的对象的示意图。如图5所示，一个对象可以利用一个或者多个div来定义，其中对象的外部实线部分由一个div来定义，该div元素除了定义对象的大小和位置之外，还具有属性z-index来定义该对象在canvas中的层，而在html中层是个抽象概念，当两个元素的位置重叠时，z-index属性大的元素会覆盖z-index小的元素。因此，通过为对象的div中的属性z-index赋予一个较大的值，可以确保该对象覆盖在对象关系的连线之上。0037 可选地，在每个对象内容，可以例如以另一个div来定。
34、义在实线所划出内部上方的虚线部分，在该部分中，div定义了对象的图标。另外，在实线划出部分下方的虚线部分可以用div来定义，在该部分中，定义了该对象的描述。0038 图5所示的对象可以利用下面的div元素来定义：路由器上述div定义了一个对象，其图标为文件icons/switcher.png，而名称为路由器。0039 应当注意的是，外层DIV由于决定了对象的位置和大小，因此是定义对象的关键，但是在对象内部用于定义对象图标和描述内部div以根据实际需要采用其它结构，比如仅有图标无文字，或者仅有文字无图标；也可以不用DIV容纳图标和文字，直接将图标或文字置于外部DIV内部等等。0040 图6示意性。
35、地示出了根据本发明一个实施例的内容呈现方法600的流程图。图6所示方法适于在上述的内容呈现设备100中执行以便在内容呈现设备100中呈现对象以及对象之间的连接关系（在下文中，将其统称为对象拓扑结构）。方法600始于步骤S610，其中在内容呈现设备中定义用于图形化呈现对象拓扑结构的对象呈现区域。该步骤S610可以由页面布局部件120执行。随后，在步骤S620中，根据要呈现的每个对象的属性来确定说 明 书CN 103176993 A7/8页10该对象在对象呈现区域中的位置。在确定了对象的位置之后，还根据每个对象的位置以及对象连接关系所涉及的对象来确定一个或者多个连接关系的起点和终点在对象呈现区域中。
36、的位置。步骤S620适于在位置确定部件130中执行。如上所述，对象的初始位置可以利用相对比例坐标来定义，在步骤S620中，需要将每个对象的相对比例坐标转换为绝对坐标值。另外，由于对象关系可以由所涉及的对象来定义。例如，当对象关系涉及超过多个对象时，可以由连接这些对象的星形连线来表示对象关系。在步骤S620中，需要为每个对象关系确定这些连线的起点和终点。可选地，可以如上所述把对象关系的起点和终点确定为对象关系所涉及对象的中心位置。0041 在步骤S620确定了对象及其连接关系的位置之后，在步骤S630中，根据每个连接关系的起点和终点的位置在对象呈现区域中绘制连接每个连接关系的起点和终点的连线。在。
37、绘制了代表对象连接关系的连线之后，在步骤S630中，在对象呈现区域中绘制每个对象，应当注意的是对象通常叠加在连线之上。步骤S630可以由图形绘制部件140来执行。0042 可选地，由于对象呈现区域可以移动和缩放，因此，对象呈现方法还包括，当对象呈现区域发生移动和/或缩放时，重新确定每个对象的位置以及每个连接关系的起点和终点位置，以及重新在对象呈现区域中绘制所述对象和对应于连接关系的连线的处理。0043 另外，可选地，内容呈现设备100的用户可以对所呈现的对象和/或对象关系进行操作。例如，用户可以修改对象的属性、移动对象位置、修改对象关系、在对象之间添加新的关联或者删除已有关联等等。为此，内容呈。
38、现方法还包括接收用户的各种操作的步骤，以及在用户进行操作时，基于用户操作来重新确定每个对象的位置以及每个连接关系的起点和终点位置，以及重新在对象呈现区域中绘制对象和对应于连接关系的连线的步骤。0044 另外，如前所述，每个对象都有相应的属性。每个对象除了相应的位置和大小属性之外，还可以包括对象的描述以及对象的图标等等之类的属性。在绘制对象时，可以考虑同时呈现对象的描述以及代表对象的对象图标。0045 可选地，内容呈现方法100可以采用HTML5来呈现对象的拓扑结构。例如，对象呈现区域可以用HTML 5中的canvas元素来定义。代表对象之间的连接关系的连线可以利用javascript中的相关函。
39、数（例如，包括但不限于，moveTo（x,y）,lineTo(x,y),stroke()等）在canvas元素所定义的区域中绘制。另外，图形绘制部件利用HTML中的div元素来定义和呈现对象。0046 可选地，如上所述，当采用div来定义对象时，内容呈现方法100可以首先利用第一Div元素来定义该对象的大小和位置；随后，分别利用第二Div元素定义对应于该对象的图标以及利用第三Div元素定义对应于该对象的对象描述，而所述第二Div元素和第三元素包含在第一Div元素中。0047 根据本发明的内容呈现设备和内容呈现方法提供了便于在诸如网络浏览器之内的终端设备上图形化地呈现对象拓扑结构的方案，该方案具有实现简单，容易被开发人员所掌握的优点。0048 另外，根据本发明的方案由于可以利用HTML 5进行，因此其支持各种主流浏览器，使开发人员不需顾虑浏览器兼容性问题。0049 应当注意的是，在本发明的内容呈现设备的各个部件中，根据其要实现的功能而对其中的部件进行了逻辑划分，但是，本发明不受限于此，可以根据需要对各个部件进行重说 明 书CN 103176993 A10。