CN109472740A - 基于Web前端生成图形的方法和装置 - Google Patents

Abstract

本发明实施例公开了一种基于Web前端生成图形的方法和装置，涉及计算机技术领域。其中，该方法包括：对块级标签的属性进行设置，以得到锯齿边的图形单元；将多个所述图形单元拼接至块级对象，以得到附加有锯齿边的图形。通过以上方法，能够使图形的制作、更改更加灵活方便，有效减少页面引用的图片数目，提高页面加载速度，实现更好的用户体验。

Description

基于Web前端生成图形的方法和装置

技术领域

本发明涉及计算机技术领域，尤其涉及一种基于Web前端生成图形的方法和装置。

背景技术

在Web前端制作优惠券、邮票等图形时，难点在于锯齿边的制作。在现有技术中，通常采用伪元素的方式给DOM(文档对象模型)节点添加一个锯齿图片，即用图片的方式实现锯齿边，进而实现优惠券、邮票等图形的制作。

在实现本发明过程中，发明人发现现有技术中至少存在如下问题：

第一，图形的制作、修改非常不灵活。例如，若需要多种优惠券，则需要准备多张图片。如果优惠券的颜色或者锯齿的密度需要改动，那么还需要重新制作图片，并且替换进代码中。

第二、多张图片的加载会使页面的加载速度降低，影响页面的整体体验。

第三、如果选用普通的图片，那么在适配大屏手机时都会出现拉伸模糊的现象，影响用户体验。如果选用矢量图片，那么矢量图片的制作会消耗更多的人力和时间成本。

发明内容

有鉴于此，本发明实施例提供一种基于Web前端生成图形的方法和装置，以能够使图形的制作、更改更加灵活方便，有效减少页面引用的图片数目，提高页面加载速度，实现更好的用户体验。

为实现上述目的，根据本发明实施例的一个方面，提供了一种基于Web前端生成图形的方法。

本发明实施例的基于Web前端生成图形的方法包括：对块级标签的属性进行设置，以得到锯齿边的图形单元；将多个所述图形单元拼接至块级对象，以得到附加有锯齿边的图形。

可选地，所述方法还包括：在对块级标签的属性进行设置的步骤之前，确定块级对象以及确定所述图形单元的样式配置值；其中，所述图形单元的样式配置值包括：图形单元的颜色、图形单元的方向、图形单元的尺寸、背景颜色。

可选地，对块级标签的属性进行设置的步骤包括：对块级标签的边框属性进行设置。

可选地，所述方法还包括：在将多个所述图形单元拼接至块级对象的步骤之前，根据所述块级对象的尺寸和所述图形单元的尺寸确定锯齿边中图形单元的数目，并且，根据所述块级对象的尺寸和所述图形单元的方向确定锯齿边相对块级对象的相对位置。

为实现上述目的，根据本发明实施例的另一方面，提供了一种基于Web前端生成图形的装置。

本发明实施例的基于Web前端生成图形的装置包括：图形单元生成模块，用于对块级标签的属性进行设置，以得到锯齿边的图形单元；拼接模块，用于将多个所述图形单元拼接至块级对象，以得到附加有锯齿边的图形。

可选地，所述装置还包括：确定模块，用于确定块级对象以及确定所述图形单元的样式配置值；其中，所述图形单元的样式配置值包括：图形单元的颜色、图形单元的方向、图形单元的尺寸、背景颜色。

可选地，所述图形单元生成模块对块级标签的属性进行设置，包括：对块级标签的边框属性进行设置。

可选地，所述确定模块还用于：根据所述块级对象的尺寸和所述图形单元的尺寸确定锯齿边中的图形单元的数目，并且，根据所述块级对象的尺寸和所述图形单元的方向确定锯齿边相对块级对象的相对位置。

为实现上述目的，根据本发明实施例的再一个方面，提供了一种电子设备。

本发明实施例的电子设备，包括：一个或多个处理器；以及，存储装置，用于存储一个或多个程序；当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现本发明实施例的基于Web前端生成图形的方法。

为实现上述目的，根据本发明实施例的又一个方面，提供了一种计算机可读介质。

本发明实施例的计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现本发明实施例的基于Web前端生成图形的方法。

上述发明中的一个实施例具有如下优点或有益效果：在本发明实施例中，通过对块级标签的属性进行设置，能够得到锯齿边的图形单元；通过将多个所述图形单元拼接至块级对象，能够得到附加有锯齿边的图形。通过以上方法生成图形，能够使图形的制作、更改更加灵活方便，有效减少页面引用的图片数目，提高页面加载速度，实现更好的用户体验。

上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。

附图说明

附图用于更好地理解本发明，不构成对本发明的不当限定。其中：

图1是根据本发明实施例的基于Web前端生成图形的方法的主要步骤示意图；

图2是根据本发明实施例的方法生成一种图形的流程示意图；

图3a是图2所示流程中生成的矩形的示意图；

图3b是图2所示流程中生成的三角形的示意图；

图3c是图2所示流程中生成的梯形的示意图；

图3d是图2所示流程中生成的图形的示意图；

图4是根据本发明实施例的基于Web前端生成图形的装置的主要模块示意图；

图5是本发明实施例可以应用于其中的示例性***架构图；

图6是适于用来实现本发明实施例的电子设备的计算机***的结构示意图。

具体实施方式

以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

需要指出的是，在不冲突的情况下，本发明中的实施例以及实施例中的特征可以相互组合。

图1是根据本发明实施例的基于Web前端生成图形的方法的主要步骤示意图。如图1所示，该方法主要包括以下步骤：

步骤S101、对块级标签的属性进行设置，以得到锯齿边的图形单元。

在本发明实施例中，所述锯齿边可理解为由多个重复的图形单元构成的样式。比如，由多个梯形构成的锯齿样式，由多个三角形构成的锯齿样式，由多个半圆形构成的锯齿样式，等等。

在执行步骤S101时，可先设置一个DOM标签，并将该DOM标签设置为块级标签。比如，通过将DOM标签的display(显示)属性的属性值设为block(块)，即将该DOM标签设置成了块级标签。在得到块级标签之后，再对块级标签的属性进行设置，以得到锯齿边的图形单元。在一具体实施方式中，步骤S101包括：对块级标签的border(边框)属性进行设置。例如，当图形单元为三角形时，可通过设置块级标签的边框宽度和边框颜色、并将块级标签整块的宽度和高度设为0px(像素)来实现。例如，当图形单元为梯形时，可通过设置块级标签的边框宽度和边框颜色，以及设置块级标签整块的宽度和高度来实现。在另一具体实施方式中，步骤S101包括：对块级标签的border-radius(边框-半径)属性进行设置。例如，当图形单元为半圆形时，可通过设置border-radius属性来实现。

进一步，在执行步骤S101之前，该方法还包括：确定需要加锯齿边的块级对象以及确定所述图形单元的样式配置值。其中，所述图形单元的样式配置值包括：图形单元的颜色、图形单元的方向、图形单元的尺寸(比如宽度、高度、半径等)、背景颜色。具体实施时，需要加锯齿边的块级对象可通过传入参数object(对象)的值来确定；所述图形单元的样式配置值可通过其他传入参数的值确定，也可通过获取默认值来确定。例如，通过传入参数color(颜色)的值可确定图形单元的颜色，在传入参数color的值缺省时，可根据颜色的默认值来确定。例如，通过传入参数direction(方向)的值可确定图形单元的方向，在传入参数direction缺省时，可根据方向的默认值来确定。这样一来，当需要修改锯齿边的颜色、密度等样式时，只需修改传入参数，使得样式更改更加方便、灵活。

步骤S102、将多个所述图形单元拼接至块级对象，以得到附加有锯齿边的图形。

具体实施时，在根据步骤S101得到图形单元之后，可将多个图形单元相连接，并通过JS(Javascript，一种客户端脚本语言)语法中的appendChild方法将所述多个图形单元拼接至块级对象上。可理解的是，在不影响本发明实施的情况下，本领域技术人员还可采用其他方法(比如JS语法中的insertBefore方法)将所述多个图形单元拼接至块级对象。

进一步，在执行步骤S102之前，该方法还包括：根据所述块级对象的尺寸和所述图形单元的尺寸确定锯齿边的图形单元的数目，并且，根据所述块级对象的尺寸和所述图形单元的方向确定锯齿边相对块级对象的相对位置。例如，当需要将由梯形构成的锯齿边附加在块级对象的左边时，根据块级对象的高度和梯形的高度即可确定锯齿边中图形单元的数目；根据块级对象的宽度和梯形的方向即可确定锯齿边相对块级对象的相对位置。

在本发明实施例中，通过对块级标签的属性进行设置，能够得到锯齿边的图形单元；通过将多个所述图形单元拼接至块级对象，能够得到附加有锯齿边的图形。与现有生成图形的方法相比，本发明的方法能够使图形的制作、更改更加灵活方便，有效减少页面引用的图片数目，提高页面加载速度，实现更好的用户体验。

图2是根据本发明实施例的方法生成一种图形的流程示意图。其中，根据图2生成的图形可参见图3d。如图2所示，该方法主要包括以下流程：

步骤S201、确定块级对象以及确定锯齿边中每个梯形的样式配置值。

在图2所示流程中，所述图形单元为梯形，所述图形单元的样式配置值包括：梯形的颜色、梯形的方向、梯形的宽度、梯形的背景颜色。具体实施时，如果传参时传入了object、color、backgroundColor、direction、width的值，则根据传入的object的值确定块级对象，根据传入的color的值确定梯形的颜色，根据传入的backgroundColor的值确定背景颜色，根据传入的direction的值确定梯形的方向，根据传入的width的值确定梯形的宽度。如果传参时只传了object的值，则根据传入的object的值确定块级对象，并根据其他参数的默认值确定样式配置值。例如，若将块级对象的背景颜色作为梯形的默认颜色，则可通过JS中的window.getComputedStyle(object,false).backgroundColor方法获得梯形的默认颜色；若将页面的颜色作为默认的背景颜色，则可通过JS中的window.getComputedStyle(body,false).backgroundColor方法获得默认背景颜色。

步骤S202、对块级标签的属性进行设置，以做出锯齿边中的一个梯形。

为了便于理解，以下将生成梯形的过程分解为：先生成三角性、再调整成梯形这两个环节。首先，设置一个DOM标签<i>，并将<i>设置为块级标签。由于待生成的图3d中的锯齿边的方向向左，因此可将标签<i>的上边框、下边框宽度均设为2px，右边框的宽度设为3px，左边框的宽度设为0px，并将标签<i>的宽度和高度均设为0px。这样一来，可得到一个长为4px、宽为3px的矩形(如图3a所示)。然后，将上边框以及下边框的颜色设为步骤S101中确定的背景颜色。由此，可得到一个三角形(如图3b所示)。接下来，将标签<i>的高度改为1px，既可得到一个高为5px、宽为3px的梯形(如图3c所示)。具体实施时，可通过相应的代码直接得到锯齿边中的一个梯形。应理解的是，以上关于生成梯形的示例性说明不应构成对本发明保护范围的限制。

步骤S203、确定锯齿边中梯形的数目。

在该步骤中，可先通过JS中的object.offsetHeight(JS语法中的一种获取对象高度的方法)方法得到块级对象的高度，然后根据块级对象的高度和梯形的高度计算锯齿边中梯形的数目。比如，当块级对象的高度为100px，梯形的高度为5px，则锯齿边中梯形的数目为20个。具体实施时，如果计算出的梯形数目不是整数，则可以多取一个梯形。为了样式美观，可将块级对象的overflow(溢出)属性设置为hidden(隐藏)，既可隐藏锯齿边多出的部分。

步骤S204、用确定数目的梯形组成锯齿边，并将锯齿边拼接至块级对象上。

在该步骤中，将20个梯形连接起来，即可得到所需的锯齿边。然后，通过JS语法中的appendChild方法即可将锯齿边拼接至块级对象上。具体实施时，本领域技术人员还可根据其他JS方法(比如insertBefore方法)将锯齿边拼接至块级对象上。

步骤S205、将锯齿边摆放至预设的相对块级对象的相对位置。

在该步骤中，根据锯齿边的方向以及块级对象的宽度可得到锯齿边相对块级对象的相对位置。比如，如图3d所示，锯齿边的方向(即图形单元的方向)向左，则锯齿边相对块级对象的相对位置可设为“-(锯齿宽度-预设常数)”。比如，锯齿边的方向向右，则锯齿边相对块级对象的相对位置可设为“块级对象的宽度-1”。

在本发明实施例中，通过执行步骤S201至步骤S205，可生成图3d所示的图形。进一步，在具体实施时，通过将图2所示方法的代码进行封装，并根据需求确定该方法执行的次数，可方便、灵活地得到各种样式的图形。与通过图片生成图形的现有技术相比，本发明实施例中的方法能够使图形的制作、更改更加灵活方便，有效减少页面引用的图片数目，提高页面加载速度，实现更好的用户体验。

图4是根据本发明实施例的基于Web前端生成图形的装置的主要模块示意图。如图4所示，基于Web前端生成图形的装置400主要包括：图形单元生成模块401、拼接模块402。

图形单元生成模块401，用于对块级标签的属性进行设置，以得到锯齿边的图形单元。其中，所述锯齿边可理解为由多个重复的图形单元构成的样式。比如，由多个梯形构成的锯齿样式，由多个三角形构成的锯齿样式，由多个半圆形构成的锯齿样式，等等。

具体来说，图形单元生成模块401可先设置一个DOM标签，并将该DOM标签设置为块级标签。在得到块级标签之后，图形单元生成模块401再对块级标签的属性进行设置，以得到锯齿边的图形单元。在一具体实施方式中，图形单元生成模块401对块级标签的属性进行设置包括：对块级标签的border(边框)属性进行设置。例如，当图形单元为三角形时，可通过设置块级标签的边框宽度和边框颜色、并将块级标签整块的宽度和高度设为0px(像素)来实现。例如，当图形单元为梯形时，可通过设置块级标签的边框宽度和边框颜色，以及设置块级标签整块的宽度和高度来实现。在另一具体实施方式中，图形单元生成模块401对块级标签的属性进行设置包括：对块级标签的border-radius(边框-半径)属性进行设置。例如，当图形单元为半圆形时，可通过设置border-radius属性来实现。

拼接模块402，用于将多个所述图形单元拼接至块级对象，以得到附加有锯齿边的图形。

具体实施时，拼接模块402可将多个图形单元相连接，并通过appendChild(JS语法中的一种方法，可用于在指定元素节点的最后一个子节点添加节点)方法将所述多个图形单元拼接至块级对象上。另外，拼接模块也可采用其他方法(比如JS语法中的insertBefore方法)将所述多个图形单元拼接至块级对象。

在一优选实施方式中，该装置还包括：确定模块。所述确定模块用于：确定块级对象以及确定所述图形单元的样式配置值。其中，所述图形单元的样式配置值包括：图形单元的颜色、图形单元的方向、图形单元的尺寸、背景颜色。

具体实施时，确定模块可通过传入参数object(对象)的值确定块级对象。确定模块可通过传入参数color(颜色)、direction(方向)等参数的值确定样式配置值，在这些参数缺省的情况下，也可通过获取默认值确定样式配置值。通过设置确定模块，便于图形单元生成模块根据确定出的样式配置值进行属性设置。当需要修改锯齿边的颜色、密度等样式时，只需修改传入参数的值，使得样式更改更加方便、灵活。

进一步，所述确定模块还用于：根据所述块级对象的尺寸和所述图形单元的尺寸确定锯齿边中的图形单元的数目，并且，根据所述块级对象的尺寸和所述图形单元的方向确定锯齿边相对块级对象的相对位置。例如，当需要将由梯形构成的锯齿边附加在块级对象的左边时，确定模块可根据块级对象的高度和梯形的高度即可确定锯齿边的图形单元的数目；确定模块可根据块级对象的宽度和梯形的方向即可确定锯齿边相对块级对象的相对位置。

在本发明实施例中，通过图形单元生成模块对块级标签的属性进行设置，能够得到锯齿边的图形单元；通过拼接模块将多个所述图形单元拼接至块级对象，能够得到附加有锯齿边的图形。本发明的装置能够使图形的制作、更改更加灵活方便，有效减少页面引用的图片数目，提高页面加载速度，实现更好的用户体验。

图5示出了可以应用本发明实施例的基于Web前端生成图形的方法或基于Web前端生成图形的装置的示例性***架构500。图5示出的***架构仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图5所示，***架构500可以包括终端设备501、502、503，网络504和服务器505。网络504用以在终端设备501、502、503和服务器505之间提供通信链路的介质。网络504可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备501、502、503通过网络504与服务器505交互，以接收或发送消息等。终端设备501、502、503上可以安装有各种通讯客户端应用，例如购物类应用、网页浏览器应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等。

终端设备501、502、503可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。

服务器505可以是提供各种服务的服务器，例如对用户利用终端设备501、502、503所浏览的购物类网站提供支持的后台管理服务器。后台管理服务器可以对接收到的产品信息查询请求等数目进行分析等处理，并将处理结果反馈给终端设备。

需要说明的是，本发明实施例所提供的基于Web前端生成图形的方法一般由终端设备执行，相应地，基于Web前端生成图形的装置一般设置于终端设备中。

应该理解，图5中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

下面参考图6，其示出了适于用来实现本发明实施例的电子设备的计算机***600的结构示意图。图6示出的电子设备仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图6所示，计算机***600包括中央处理单元(CPU)601，其可以根据存储在只读存储器(ROM)602中的程序或者从存储部分608加载到随机访问存储器(RAM)603中的程序而执行各种适当的动作和处理。在RAM 603中，还存储有***600操作所需的各种程序和数目。CPU 601、ROM 602以及RAM 603通过总线604彼此相连。输入/输出(I/O)接口605也连接至总线604。

以下部件连接至I/O接口605：包括键盘、鼠标等的输入部分606；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分607；包括硬盘等的存储部分608；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分609。通信部分609经由诸如因特网的网络执行通信处理。驱动器610也根据需要连接至I/O接口605。可拆卸介质611，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器610上，以便于从其上读出的计算机程序根据需要被安装入存储部分608。

特别地，根据本发明公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本发明公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分609从网络上被下载和安装，和/或从可拆卸介质611被安装。在该计算机程序被中央处理单元(CPU)601执行时，执行本发明的***中限定的上述功能。

需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的***、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行***、装置或者器件使用或者与其结合使用。而在本发明中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数目信号，其中承载了计算机可读的程序代码。这种传播的数目信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行***、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。

附图中的流程图和框图，图示了按照本发明各种实施例的***、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的***来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本发明实施例中所涉及到的模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的模块也可以设置在处理器中，例如，可以描述为：一种处理器包括图形单元生成模块、拼接模块。其中，这些模块的名称在某种情况下并不构成对该模块本身的限定，例如，图形单元生成模块还可以被描述为“生成锯齿边的图形单元的模块”。

作为另一方面，本发明还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，使得该设备执行以下流程：对块级标签的属性进行设置，以得到锯齿边的图形单元；将多个所述图形单元拼接至块级对象，以得到附加有锯齿边的图形。

上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims (10)

1.一种基于Web前端生成图形的方法，其特征在于，所述方法包括：

对块级标签的属性进行设置，以得到锯齿边的图形单元；

将多个所述图形单元拼接至块级对象，以得到附加有锯齿边的图形。

2.根据权利要求1所述的方法，其特征在于，所述方法还包括：

在对块级标签的属性进行设置的步骤之前，确定块级对象以及确定所述图形单元的样式配置值；其中，所述图形单元的样式配置值包括：图形单元的颜色、图形单元的方向、图形单元的尺寸、背景颜色。

3.根据权利要求1所述的方法，其特征在于，对块级标签的属性进行设置的步骤包括：对块级标签的边框属性进行设置。

4.根据权利要求1所述的方法，其特征在于，所述方法还包括：

在将多个所述图形单元拼接至块级对象的步骤之前，根据所述块级对象的尺寸和所述图形单元的尺寸确定锯齿边中图形单元的数目，并且，根据所述块级对象的尺寸和所述图形单元的方向确定锯齿边相对块级对象的相对位置。

5.一种基于Web前端生成图形的装置，其特征在于，所述装置包括：

图形单元生成模块，用于对块级标签的属性进行设置，以得到锯齿边的图形单元；

拼接模块，用于将多个所述图形单元拼接至块级对象，以得到附加有锯齿边的图形。

6.根据权利要求5所述的装置，其特征在于，所述装置还包括：

确定模块，用于确定块级对象以及确定所述图形单元的样式配置值；

其中，所述图形单元的样式配置值包括：图形单元的颜色、图形单元的方向、图形单元的尺寸、背景颜色。

7.根据权利要求5所述的装置，其特征在于，所述图形单元生成模块对块级标签的属性进行设置，包括：对块级标签的边框属性进行设置。

8.根据权利要求6所述的装置，其特征在于，所述确定模块还用于：根据所述块级对象的尺寸和所述图形单元的尺寸确定锯齿边中图形单元的数目，并且，根据所述块级对象的尺寸和所述图形单元的方向确定锯齿边相对块级对象的相对位置。

9.一种电子设备，其特征在于，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1至4中任一所述的方法。

10.一种计算机可读介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现如权利要求1至4中任一所述的方法。