[发明专利]一种在Web页面上动态显示圆角矩形的方法和Web服务器

说明书

技术领域

本发明涉及Web页面的显示技术，尤其涉及在Web页面上显示圆角矩形的方法及Web服务器。

背景技术

在Web应用系统中，如图1所示，经常会在页面的某些展示区域使用圆角矩形作为信息的显示面板，以达到更加美观和整洁的显示效果。仅仅依靠Html提供的标准元素能够让浏览器上显示严格矩形，不能够显示带有复杂形状边界的圆角矩形。为了解决这个问题，现有技术中在Web页面上圆角矩形中的圆角部分用预先存储的图片作为背景，具体地，首先由美工人员预先绘制若干个包含圆角的图片，以图片文件的形式存储在服务器的存储媒介中，再由Web系统的页面设计人员修改样式表文件，分别指定页面中圆角矩形的四个角区域的背景图片为上述存储的包含圆角的图片，圆角矩形的其他区域放置Html提供的标准元素，当用户终端向服务器发送访问页面的请求后，服务器依次将Web页面的Html代码发送给用户终端的浏览器，浏览器将这些Html代码显示成图形或者文字，其中当浏览器解析到圆角矩形的圆角区域时，会获得作为背景的图片文件的链接地址，然后浏览器向服务器发送获得该文件信息的请求，该请求中包含文件的链接地址，服务器接收到该请求后根据链接地址，在存储媒介中找到浏览器想要获得的文件并以二进制流的形式发送给用户终端，用户终端的浏览器将接收到的二进制流显示成图片，这样圆角矩形的四个圆角部分就在浏览器上显示出来，圆角矩形的其他部分可以通过浏览器解析Html代码中预先设置的标准元素来显示。

在系统要求发生变化时，例如基于整个页面风格变化的需要，页面中的圆角矩形的颜色、圆角的尺寸和圆角弧度等参数也需要做相应调整，此时采用上述现有技术的圆角矩形若要实现这样的调整，则需要美工人员根据新的要求重新绘制包含四个圆角的矩形图片，并需要网页设计人员重新调整样式表文件，使圆角矩形的四个角区域指定新的图片文件作为背景，这样当用户终端访问该页面时，服务器可以根据新的包含圆角的背景图片文件的链接地址，将新的背景图片以二进制流的形式发送给用户终端，浏览器将新的背景图片显示在页面中的圆角矩形的圆角区域。由此可见，当需要改变圆角矩形时，不仅需要美工人员重新绘制图片，还需要网页设计人员修改样式表，维护较麻烦。

发明内容

本发明解决的技术问题是提供一种在Web页面上动态显示圆角矩形的方法，以解决目前技术中由于采用静态背景图片实现圆角矩形显示所带来的维护麻烦的问题。

为解决上述问题，本发明提供一种在Web页面上动态显示圆角矩形的方法，该方法包括：

服务器接收用户终端发送的访问Web页面的请求，对于页面中的圆角矩形区域，预置的圆角矩形组件根据页面中为该圆角矩形组件指定的属性值，绘制出圆角矩形，并将该圆角矩形传递给服务器，服务器将包含圆角矩形的信息发送给用户终端；

用户终端根据接收的包含圆角矩形的信息在浏览器上显示。

这样，在用户终端通过浏览器访问需要显示圆角矩形的页面时，服务器将包含圆角矩形组件动态绘制的圆角矩形发送给用户终端，在页面需要维护的时候，圆角矩形的显示结果也需要做相应调整，上述技术方案不需要如现有技术中美工人员重新绘制背景图片，而只需要改变页面中指定的圆角矩形的属性值，这样当用户再访问该页面时，圆角矩形组件根据指定的新属性值绘制新的圆角矩形，并由服务器发送到用户终端上的浏览器中显示，所以本发明提供的显示圆角矩形的方法更用以维护。

在上述方法中，指定的圆角矩形组件的属性值包括表示圆角矩形形状特征的属性值和表示圆角矩形颜色特征的属性值；圆角矩形组件根据预先指定的表示圆角矩形形状特征的属性值和表示圆角矩形颜色特征的属性值，动态绘制圆角矩形。这样只需要改变指定的表示圆角矩形的形状和颜色的特征值，就可以实现圆角矩形的变化。

上述方法中，表示圆角矩形形状特征的属性值包括：表示圆角矩形的四个角中需要使用圆角的角的Target属性值；

表示需要使用的圆角的弧度的Radius属性值；

表示圆角矩形的宽度和高度的Height属性值和Width属性值；

圆角矩形组件根据预先指定的圆角矩形组件的属性值动态绘制出圆角矩形的步骤包括：

圆角矩形组件根据预先指定的圆角矩形组件的Target属性值，识别需要使用圆角的角，并在需要使用圆角的角区域绘制与Radius属性值、BgColor属性值、Height属性值和Width属性值相对应的圆角矩形。

表示圆角矩形颜色特征的属性值包括：

表示圆角矩形的背景颜色的BgColor属性值；