专利名称：一种在Web页面上动态显示圆角矩形的方法和Web服务器的制作方法
技术领域：
本发明涉及Web页面的显示技术，尤其涉及在Web页面上显示圆角矩形 的方法及Web服务器。
背景技术：
在Web应用系统中，如图1所示，经常会在页面的某些展示区域使用圓 角矩形作为信息的显示面板，以达到更加美观和整洁的显示效果。仅仅依靠 Html提供的标准元素能够让浏览器上显示严格矩形，不能够显示带有复杂形 状边界的圆角矩形。为了解决这个问题，现有技术中在Web页面上圓角矩形 中的圆角部分用预先存储的图片作为背景，具体地，首先由美工人员预先绘 制若干个包含圓角的图片，以图片文件的形式存储在服务器的存储媒介中， 再由Web系统的页面设计人员修改样式表文件，分别指定页面中圆角矩形的 四个角区域的背景图片为上述存储的包含圓角的图片，圆角矩形的其他区域 放置Html提供的标准元素，当用户终端向服务器发送访问页面的请求后，月良 务器依次将Web页面的Html代码发送给用户终端的浏览器，浏览器将这些 Html代码显示成图形或者文字，其中当浏览器解析到圆角矩形的圆角区域时， 会获得作为背景的图片文件的链接地址，然后浏览器向服务器发送获得该文 件信息的请求，该请求中包含文件的链接地址，服务器接收到该请求后根据 链接地址，在存储媒介中找到浏览器想要获得的文件并以二进制流的形式发 送给用户终端，用户终端的浏览器将接收到的二进制流显示成图片，这样圓 角矩形的四个圓角部分就在浏览器上显示出来，圆角矩形的其他部分可以通 过浏览器解析Html代码中预先设置的标准元素来显示。在系统要求发生变化时，例如基于整个页面风格变化的需要，页面中的 圆角矩形的颜色、圆角的尺寸和圆角弧度等参数也需要做相应调整，此时采 用上述现有技术的圓角矩形若要实现这样的调整，则需要美工人员根据新的要求重新绘制包含四个圓角的矩形图片，并需要网页设计人员重新调整样式 表文件，使圓角矩形的四个角区域指定新的图片文件作为背景，这样当用户 终端访问该页面时，服务器可以根据新的包含圓角的背景图片文件的链接地 址，将新的背景图片以二进制流的形式发送给用户终端，浏览器将新的背景 图片显示在页面中的圓角矩形的圆角区域。由此可见，当需要改变圆角矩形 时，不仅需要美工人员重新绘制图片，还需要网页设计人员修改样式表，维 护專支麻烦。发明内容本发明解决的技术问题是提供一种在Web页面上动态显示圓角矩形的方 法，以解决目前技术中由于采用静态背景图片实现圆角矩形显示所带来的维 护麻烦的问题。为解决上述问题，本发明^是供一种在Web页面上动态显示圆角矩形的方 法，该方法包4舌服务器接收用户终端发送的访问Web页面的请求，对于页面中的圆角矩 形区域，预置的圆角矩形组件根据页面中为该圆角矩形组件指定的属性值， 绘制出圆角矩形，并将该圆角矩形传递给服务器，服务器将包含圆角矩形的 信息发送给用户终端；用户终端根据接收的包含圓角矩形的信息在浏览器上显示。 这样，在用户终端通过浏览器访问需要显示圆角矩形的页面时，服务器 将包含圓角矩形组件动态绘制的圓角矩形发送给用户终端，在页面需要维护 的时候，圆角矩形的显示结果也需要做相应调整，上述技术方案不需要如现 有技术中美工人员重新绘制背景图片，而只需要改变页面中指定的圆角矩形 的属性值，这样当用户再访问该页面时，圆角矩形组件根据指定的新属性值 绘制新的圆角矩形，并由服务器发送到用户终端上的浏览器中显示，所以本 发明提供的显示圆角矩形的方法更用以维护。在上述方法中，指定的圓角矩形组件的属性值包括表示圆角矩形形状特征的属性值和表示圆角矩形颜色特征的属性值；圓角矩形组件根据预先指定 的表示圆角矩形形状特征的属性值和表示圆角矩形颜色特征的属性值，动态 绘制圓角矩形。这样只需要改变指定的表示圆角矩形的形状和颜色的特征值， 就可以实现圆角矩形的变化。上述方法中，表示圆角矩形形状特征的属性值包括表示圓角矩形的四 个角中需要使用圓角的角的Target属性值；表示需要使用的圆角的弧度的Radius属性值；表示圆角矩形的宽度和高度的Height属性值和Width属性值；圓角矩形组件^f艮据预先指定的圆角矩形组件的属性值动态绘制出圆角矩 形的步骤包括圆角矩形组件根据预先指定的圆角矩形组件的Target属性值，识别需要 使用圓角的角，并在需要使用圆角的角区域绘制与Radius属性值、BgColor 属性值、Height属性^直和Width属性值相对应的圆角矩形。表示圆角矩形颜色特征的属性值包括表示圆角矩形的背景颜色的BgColor属性值；表示圆角矩形的边框颜色的BorderColor属性值；圆角矩形组件根据预先指定的所述圆角矩形组件的属性值动态绘制出圆 角矩形的步骤包括圆角矩形组件绘制与BgColor属性值、BorderColor属性值相对应的圆角 矩形。在上述方法中，还包括服务器端在页面的圓角矩形的中间区域控制显示 的文字内容的步骤。这样圆角矩形就作为文字信息的展示面板。在上述方法中，预先指定的圆角矩形组件的属性值还包括表示是否自 动出现水平滚动条的IsHScroll属性值，或/和表示是否自动出现垂直滚动条的 IsVScroll属性^直；如果所述IsHScroll属性值为是，则在圆角矩形的中间显示的文字内容超过所述圆角矩形的宽度时，所述服务器端控制在页面的圆角矩形中显示水平 滚动条；如果所述IsVScroll属性值为是，则在圆角矩形的中间显示的文字内容超过所述圓角矩形的高度时，所述服务器端控制在页面的圓角矩形中显示垂直 滚动条。这样可以达到当文字信息过多时仍然保持较好的显示效果。在上述方法中，圆角矩形组件的定义由JAVA语言编写制作。本发明另一方面还提供了一种Web服务器，其包括接收单元，用于接收用户终端发送的访问页面的请求信息；圆角矩形处理单元，用于将Web页面中指定给圆角矩形组件的属性值传 递给圆角矩形组件并接收圆角矩形组件绘制的圓角矩形；, 发送单元，将包含圓角矩形的信息发送给用户终端。这样，在用户发送访问包含圆角矩形的页面时，上述服务器能够将圆角 矩形动态画出的圆角矩形发送给用户终端，用来显示，在页面需要调整时， 对于圓角矩形只需要给变指定的属性即可，页面的维护方便。在上述Web服务器中，还包括用于存储预先制作的圓角矩形组件的圆角 矩形组件实现单元。
图l是页面中显示的一种圆角矩形的示意图；图2是本发明实施例提供的一种在Web页面上动态显示圆角矩形的方法 流程图；图3是本发明实施例中对圓角矩形区域进行划分的示意图； 图4是本发明实施例提供的一种Web服务器的结构示意图； 图5是本发明实施例提供的另 一种Web服务器的结构示意图。
具体实施方式
本发明的核心是利用圓角矩形组件实现动态绘制圆角矩形，以解决目前 技术中采用静态背景图片实现圓角矩形显示所带来的维护麻烦的问题。下面结合附图对本发明作进一步的说明。本发明实施例提供一种在Web页面上动态显示圓角矩形的方法，如图2 所示，该方法包括如下步骤Sl:用户终端发送访问包含圆角矩形的Web页面的请求至服务器； S2:服务器接收到该用户终端发送的请求后，对于页面中的圓角矩形区 域，预先制作的圆角矩形组件#^居页面中为该圆角矩形组件指定的属性值， 绘制出圆角矩形，并将该圆角矩形传递给服务器，服务器将包含圓角矩形的 信息发送给用户终端；其中，上述圆角矩形组件可以由Web页面设计人员预先设计制作，并在 包含圆角矩形组件的Web页面中以标签的形式引用该组件。圆角矩形组件提供若干个可以设置的属性值，这些属性值包括可以表示 圆角矩形的形状和颜色特征的属性值，表示圆角矩形形状的属性值包括表 示圆角矩形四个角中哪个或哪几个角需要使用圓角的Target属性值、表示需要 使用的圆角的弧度的Radius属性值、表示圆角矩形的宽度和高度的Height属性 值和Width属性值；表示圆角矩形颜色的属性值包括表示圓角矩形的背景颜 色的BgColor属性值、表示圆角矩形边框颜色的BorderColor属性值。圓角矩形 组件根据预先指定的上述属性值，动态绘制与这些属性值相对应的圆角矩形， 并将绘制完的圆角矩形传递给服务器。下面举例说明上述指定圆角矩形组件的各个属性值的具体方法1 )对于Targer属性值，在圆角矩形组件中定义TL、 TR、 BL、 BR分别 表示矩形的四个角，即Top-Left(左上角)、Top-Right (右上角)、Bottom-Left (左下角)、Bottom-Right (右下角)，例如图1的例子，指定矩形的左上角和 右上角需要出现圆角，则页面中相应的代码可以写为〈panelBox target="TL,TR"......></panelBox>其中pane旧ox为本发明实施例中圆角矩形组件的名称，和普通的HTML的 标记在？ 1用规则上没有区别。2)对于Radius属性值，该属性值表示需要达到的圓角弧度值，例如图1 中的圆角矩形的圆角弧度为10,则页面中相应的代码可以写为 <panelBoxRadius="10"......></panelBox>3)对于BorderColor属性值，该属性值用于表示圆角矩形的边框颜色， 通过指定不同的BorderColor属性值，可以获得圓角矩形的不同外观颜色，例 如，如果需要显示带有红色边框的圓角矩形，并且假设定义红色为"R",则 页面中的相应的代码可以写为〈pane旧ox BorderColor="R"......></panelBox>对于指定圆角矩形的其他属性值也采用类似的代码书写格式。另外，实 际应用中，通常需要同时指定圓角矩形组件的多个属性值，此时的多个属性 值的赋值表达式之间用空格隔开，例如，如果在指定Targer属性值为"TL,TR" 的同时，还要指定圆角矩形的边框颜色为红色，则页面中的代码可以写为 〈pane旧ox target="TL,TR" BorderColor="R"......〉</panelBox>上述方案中圓角矩形的尺寸和颜色等特征可以通过对圓角矩形组件提供的属性进行赋值来指定，当然也可以在圓角矩形组件的定义中将其中的几个 属性值设置默认值，在页面的代码中调用圆角矩形组件的时候没有指定这些 设置过默认值的属性值时，则这些属性值就以默认值进行处理。圓角矩形组件根据预先指定的属性值绘制圆角矩形的一种具体实现步骤为圆角矩形将圆角矩形区域分成9个部分，如图3所示，其中区域A1、 A3、 A7和A9为圓角矩形的四个角的区域，服务器端根据Target属性值和Radius属性 值利用绘图API ( Application Programming Interface,应用程序才妄口 )函凄t对这 四个角的区域进行绘制；对于其余的区域中，圆角矩形组件在此其区域内放 置标准的Html提供的元素即可。需要说明的是，在实际应用中，在圓角矩形的中间区域通常用来显示文 字信息，因此，在绘制出需要的圆角矩形的同时也要显示所需的文字内容， 只需要在页面中组件的开始标签和结束标签之间加入文字内容即可，例如〈pane旧ox target="TL，TR" BorderColor="R"......>需要显示的文字内容</panelBox>此时，如果先前指定了圆角矩形的高度和宽度属性值，则有可能出现需 要显示的文字内容超出指圆角矩形的范围，为了能够更好的显示，圆角矩形 组件中可以提供表示是否自动出现滚动条的属性，具体的说包括表示是否自 动出现水平滚动条的IsHScroll属性值和表示是否自动出现垂直滚动条的 IsVScroll属性值，这两个属性值都分别具有两个值，即是和否。如果IsHScroll 属性值为是，则在圓角矩形的中间显示的文字内容超过所述圆角矩形的宽度 时，服务器端控制在页面的圓角矩形中显示水平滚动条；如果IsVScroll属性值 为是，则在圓角矩形的中间显示的文字内容超过所述圆角矩形的高度时，服 务器端控制在页面的圆角矩形中显示垂直滚动条。服务器将包含圓角矩形的信息发送给用户终端的具体步骤为服务器将 圓角矩形绘制的圆角区域的圆角图片以二进制流的形式发送给用户终端，对于圆角矩形的其他区域，由于是由标准的Html元素实现的，因此服务器以字 符串的形式向用户终端发送。上述步骤中，圆角矩形组件的实现可以用JAVA语言编写制作，具体的制 作过程为本领域技术人员公知常识，这里不再赘述。S3:用户终端根据接收的包含圆角矩形的信息在浏览器上显示出圆角矩形。其中，浏览器将服务器发送的表示圆角图片的二进制流显示成对应的圓 角图片，并将表示其他区域的字符串信息显示成圆角矩形的其他区域。这样，通过上述步骤，在用户通过终端访问带有圓角矩形的页面时，预 先放置在页面中的圓角矩形组件根据指定的属性值动态绘制圆角矩形，并由 服务器发送到用户终端，使得浏览器显示圆角矩形，整个过程中圓角矩形是 由圆角矩形组件动态绘出，不需要另外存储作为圆角区域背景的图片文件。 在页面需要改变，而圆角矩形也要做相应调整的时候，只需要调整页面文件 中指定的圆角矩形组件的属性值，以使得圓角矩形组件根据新的属性值绘制 的圆角矩形符合新的要求，不需要如现有技术中重新由美工人员绘制图片， 所以相对于现有技术，利用本实施例提供的方法显示圆角矩形更容易维护。相应地，本发明还提供了一种Web服务器100,如图4所示，该Web月良 务器100包括接收单元101，用于接收用户终端发送的访问页面的请求信息；圓角矩形处理单元102,用于将Web页面中指定给圓角矩形组件的属性 值传递给圆角矩形组件并接收圆角矩形组件绘制的圆角矩形；发送单元103,将包含圆角矩形的信息发送给用户终端。其中，接收单元101在接收到用户终端发送的请求后，对于页面中圓角 矩形区域，圓角矩形处理单元102将页面中的指定给圓角矩形组件的属性值发送给圓角矩形组件，该圓角矩形组件根据上述属性值绘制圆角矩形，并发 送回圆角矩形处理单元102,页面中指定给圆角矩形组件的属性值包括表示圓 角矩形的形状和颜色特征的属性值。圓角矩形组件可以借助调用绘图相关的 API函数来完成对圓角矩形的四个角区域的绘制，对于圓角矩形其他部分，圓角矩形组件只需要放置标准的Html元素即可。圓角矩形组件可以用JAVA等 常用的网络编程语言编写制作。上述圆角矩形组件预先制作并存储在圓角矩 形组件实现单元104中。圆角矩形组件将绘制完的圓角矩形发送给圓角矩形处理单元102后，发 送单元103将包含圓角矩形的信息发送给用户终端。其中，对于圆角矩形四 个角区域由于是图片，所以以二进制流的形式发送，对于圓角矩形的其他区 域，由于是标准的Html元素，因此只需要以字符串的形式发送。另外，如图5所示，上述用于存储预先制作的圓角矩形组件的圓角矩形 组件实现单元104也可以放置在上述Web服务器100中。这样用户终端在接收到发送单元发送的包含圓角矩形的信息后，就可以 在浏览器上显示对应的圆角矩形。在页面需要改变，而圓角矩形也要做相应 调整的时候，只需要调整页面文件中指定的圆角矩形组件的属性值，然后上 述Web服务器将调整后的属性值发送给圓角矩形组件，圆角矩形组件将绘制 与调整后的属性值对应的新圆角矩形，并发送给服务器，服务器将新的圆角 矩形发送给用户终端，用于在浏览器上显示，不需要如现有技术中重新由美 工人员绘制图片，所以利用本实施例提供的Web服务器显示圆角矩形更容易 维护。述，以上实施例的说明只是用于帮助理解本发明实施例的方法及其核心思想； 同时，对于本领域的一般技术人员，依据本发明实施例的思想，在具体实施 方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对 本发明的限制。
权利要求
1、一种在Web页面上动态显示圆角矩形的方法，包括服务器接收用户终端发送的访问Web页面的请求，对于页面中的圆角矩形区域，预置的圆角矩形组件根据页面中为该圆角矩形组件指定的属性值，绘制出圆角矩形，并将该圆角矩形传递给服务器，服务器将包含圆角矩形的信息发送给用户终端；用户终端根据接收的包含圆角矩形的信息在浏览器上显示。
2、 根据权利要求1所述的方法，其特征在于，所述指定的圆角矩形组件 的属性值包括表示圆角矩形形状特征的属性值和表示圓角矩形颜色特征的属 性值；所述圓角矩形组件根据预先指定的表示圆角矩形形状特征的属性值和表 示圆角矩形颜色特征的属性值，动态绘制圓角矩形。
3、 根据权利要求2所述的方法，其特征在于，所述表示圆角矩形形状特 征的属性值包括表示圓角矩形的四个角中需要使用圆角的角的Target属性值；表示需要使用的圆角的弧度的Radius属性值；表示圓角矩形的宽度和高度的Height属性值和Width属性值；所述圓角矩形组件根据预先指定的所述圆角矩形组件的属性值动态绘制 出圆角矩形的步骤包括所述圆角矩形组件根据预先指定的圓角矩形组件的Target属性值，识别 需要使用圆角的角，并在需要使用圓角的角区域绘制与Radius属性值、 BgColor属性值、Height属性值和Width属性^直相对应的圓角矩形。
4、 根据权利要求2所述的方法，其特征在于，所述表示圆角矩形颜色特 征的属性值包括表示圆角矩形的背景颜色的BgColor属性值；表示圆角矩形的边框颜色的BorderColor属性值；所述圓角矩形组件根据预先指定的所述圆角矩形组件的属性值动态绘制出圓角矩形的步骤包括所述圓角矩形组件绘制与BgColor属性值、BorderColor属性值相对应的 圆角矩形。
5、 根据权利要求2所述的方法，其特征在于，所述方法还包括服务器 端在页面的圆角矩形的中间区域控制显示的文字内容。
6、 根据权利要求5所述的方法，其特征在于，所述预先指定的圓角矩形 组件的属性值还包括表示是否自动出现水平滚动条的IsHScroll属性值，或/ 和表示是否自动出现垂直滚动条的IsVScroll属性值；，如果所述IsHScroll属性值为是，则在圆角矩形的中间显示的文字内容超 过所述圆角矩形的宽度时，所述服务器端控制在页面的圓角矩形中显示水平 滚动条；如果所述IsVScroll属性值为是，则在圆角矩形的中间显示的文字内容超 过所述圆角矩形的高度时，所述服务器端控制在页面的圆角矩形中显示垂直 滚动条。
7、 根据权利要求1-6中任意一项所述的方法，其特征在于，所述圓角矩 形组件的定义由JAVA语言编写制作。
8、 一种Web服务器，包括接收单元，用于接收用户终端发送的访问页面的请求信息；圓角矩形处理单元，用于将Web页面中指定给圓角矩形组件的属性值传 递给圆角矩形组件并接收圆角矩形组件绘制的圆角矩形；发送单元，将包含圆角矩形的信息发送给用户终端。
9、 根据权利要求8所述的Web服务器，其特征在于，所述Web服务器 还包括圆角矩形组件实现单元，其中所述圆角矩形组件实现单元用于存储预 先制作的圆角矩形组件。
全文摘要
本发明实施例提供一种在Web页面上动态显示圆角矩形的方法和Web服务器，该方法包括服务器接收用户终端发送的访问Web页面的请求，对于页面中的圆角矩形区域，预置的圆角矩形组件根据页面中为该圆角矩形组件指定的属性值，绘制出圆角矩形，并将该圆角矩形传递给服务器，服务器将包含圆角矩形的信息发送给用户终端；用户终端在浏览器上显示出圆角矩形。根据本发明实施例，在用户访问页面时，圆角矩形组件动态绘制图片，并由服务器传送到终端显示，当需要调整圆角矩形的显示时，只需要改变页面为圆角矩形组件指定的属性值，就可以使圆角矩形组件根据新的属性值绘制新的圆角矩形，维护方便。
文档编号G06F17/30GK101404021SQ200810167689
公开日2009年4月8日 申请日期2008年10月21日 优先权日2008年10月21日
发明者旭 张 申请人:深圳市金蝶中间件有限公司