视图组件绘制方法、装置、电子设备及存储介质

技术领域

本申请涉及图像绘制的技术领域，具体而言，涉及一种视图组件绘制方法、装置、电子设备及存储介质。

背景技术

当前在绘制视图组件的外观时，一般将视图组件的外观拆分为N部分，在视图组件中添加N个子节点，每个子结点绘制一张九宫格式的图片来显示拆分外观的一部分，将N个子结点上绘制的内容拼接起来，从而显示出视图组件的完整外观。

但现有技术在绘制视图组件的外观时，会出现使用的图片资源冗余，程序运行时占用内存较多的问题，且代码块视图组件内部有冗余的子结点，对UI(User Interface，界面设计)布局运算产生一定的压力，同时也不便于开发调试阶段进行UI结点的查找。

发明内容

本申请提供一种视图组件绘制方法、装置、电子设备及存储介质，以解决现有技术中，存在的图片资源冗余，程序运行时占用内存较多的问题，以及现有技术中，代码块视图组件内部有冗余的子结点，对UI布局运算产生压力，也不便于开发调试阶段进行UI结点的查找的问题。

第一方面，本申请提供一种视图组件绘制方法，包括：响应用户绘制所述目标视图组件的绘制操作，从预设的基本结构单元库中选择与所述绘制操作相对应的至少一个基本结构单元的包围盒；设置选择的所述基本结构单元的包围盒的四角点坐标，得到所述绘制操作对应的目标视图组件。

本申请实施例中，通过响应用户绘制目标视图组件的绘制操作，从预设的基本结构单元库中选择与绘制操作相对应的至少一个基本结构单元的包围盒，并设置选择的基本结构单元的包围盒的四角点坐标，即可得到该绘制操作对应的目标视图组件，无需设置多个节点来组合该目标视图组件，使得得到的目标视图组件不会出现冗余的子结点，也就不会对UI布局运算产生压力，进而便于在开发调试阶段快速、准确地查找UI结点，同时，不同的目标视图组件可以通过同一基本结构单元库进行绘制，也就不会出现现有技术中的图片资源冗余的问题，从而减小了程序运行时占用的内存。

结合上述第一方面提供的技术方案，在一些可能的实施方式中，在所述得到所述绘制操作对应的目标视图组件后，所述方法还包括：响应用户配置所述目标视图组件与预设视图组件图标的关联关系的操作，将所述视图组件与所述目标视图组件建立关联，使得在用户选择所述预设视图组件图标时，显示所述预设视图组件图标关联的所述目标视图组件。

本申请实施例中，通过将目标视图组件与预设视图组件图标关联，使得在用户选择该预设视图组件图标时，显示该预设视图组件图标关联的目标视图组件，从而便于用户选择需要的目标视图组件，提高用户体验。

结合上述第一方面提供的技术方案，在一些可能的实施方式中，在得到所述绘制操作对应的目标视图组件后，所述方法还包括：响应用户配置所述目标视图组件的伸缩规则的操作，对应配置所述目标视图组件在水平方向的伸缩规则和所述目标视图组件在垂直方向的伸缩规则，以使所述目标视图组件能在水平方向和/或竖直方向伸缩。

本申请实施例中，通过配置目标视图组件在水平方向的伸缩规则和目标视图组件在垂直方向的伸缩规则，从而实现视图组件可以在水平方向和/或垂直方向伸缩，扩大绘制的目标视图组件的应用范围，提高了本方案的泛用性。

结合上述第一方面提供的技术方案，在一些可能的实施方式中，在所述响应用户绘制目标视图组件的绘制操作，从预设的基本结构单元库中选择与所述绘制操作相对应的至少一个基本结构单元的包围盒之前，所述方法还包括：获取所述目标视图组件的所有基本结构单元；针对每一个基本结构单元，确定该基本结构单元在直角坐标系中的外观区域，得到外观区域数据；根据该基本结构单元的外观区域数据，获取该基本结构单元的网格绘制区域数据；其中，所述网格绘制区域数据包括矩形区域的边界、按照预设顺序存储的三角形的顶点坐标、该网格绘制区域数据对应的所述外观区域以及每一个所述三角形的顶点坐标在所述外观区域中对应的外观坐标，所述矩形区域为包括该基本结构单元的最小矩形区域，所述矩形区域包括多个所述三角形；根据该基本结构单元的网格绘制区域数据，确定该基本结构单元的包围盒，所述包围盒为包括该基本结构单元的最小矩形区域。

本申请实施例中，根据该基本结构单元的外观区域数据，获取该基本结构单元的网格绘制区域数据，网格绘制区域数据包括矩形区域的边界、按照预设顺序存储的三角形的顶点坐标、该网格绘制区域数据对应的外观区域以及每一个三角形的顶点坐标在外观区域中对应的外观坐标，矩形区域为包括该基本结构单元的最小矩形区域，矩形区域包括多个三角形，从而得到该基本结构单元的完整的网格绘制区域数据，进而在利用该网格绘制区域数据计算包围盒时，能够更加精准地得到该基本结构单元的包围盒，进而提高利用该基本结构单元的包围盒绘制的目标视图组件的准确性。

结合上述第一方面提供的技术方案，在一些可能的实施方式中，所述针对每一个基本结构单元，确定该基本结构单元在直角坐标系中的外观区域，包括：当该基本结构单元为水平垂直方向可伸缩的基本结构单元时，利用所述直角坐标系确定该基本结构单元的外观区域，相应的，所述外观区域数据包括横坐标集和纵坐标集，所述横坐标集包括该基本结构单元在水平方向上可伸缩区域和不可伸缩区域的所有边界点的横坐标，所述纵坐标集包括该基本结构单元在竖直方向上可伸缩区域和不可伸缩区域的所有边界点的纵坐标；当该基本结构单元为不可伸缩的基本结构单元时，利用直角坐标系确定该基本结构单元的外观区域，相应的，所述外观区域数据包括横坐标集和纵坐标集，所述横坐标集包括该基本结构单元在水平方向上不可伸缩区域的边界点的横坐标，所述纵坐标集包括该基本结构单元在竖直方向上不可伸缩区域的所有边界点的纵坐标。

本申请实施例中，通过在直角坐标系中确定不可伸缩或在水平垂直方向可伸缩的基本结构单元的外观区域，进而得到外观区域数据，通过直角坐标系可以准确描述基本结构单元在水平或垂直方向的可伸缩区域以及不可伸缩区域，使得到的外观区域数据更加符合基本结构单元的实际情况，进而为确定网格绘制区域数据提供准确的外观区域数据。

结合上述第一方面提供的技术方案，在一些可能的实施方式中，当利用直角坐标系确定该基本结构单元的外观区域时，所述根据该基本结构单元的外观区域数据，获取该基本结构单元的网格绘制区域数据，包括：根据所述横坐标集和所述纵坐标集中最大的横坐标、最大的纵坐标和最小的横坐标、最小的纵坐标，确定所述矩形区域的边界；根据所述横坐标集和所述纵坐标集，确定组成所述矩形区域的所有三角形的顶点坐标；根据所述三角形的顶点坐标，将所述矩形区域划分为多个三角形区域，按照预设顺序记录每个三角形的顶点坐标；针对每个三角形区域，确定并记录该三角形区域的三个顶点坐标各自在该基本结构单元的外观区域中对应的外观坐标，使得该三角形区域顶点坐标发生变换时，该三角形区域的三个顶点坐标对应的外观坐标不变。

本申请实施例中，根据横坐标集和纵坐标集中最大的横坐标、最大的纵坐标和最小的横坐标、最小的纵坐标，确定矩形区域的矩形区域边界；根据横坐标集和纵坐标集，确定组成矩形区域的所有三角形的顶点坐标；根据三角形的顶点坐标，将矩形区域划分为多个三角形区域，按照预设顺序记录每个三角形的顶点坐标；针对每个三角形区域，确定并记录该三角形区域的三个顶点坐标各自在该基本结构单元的外观区域中对应的外观坐标，使得该三角形区域顶点坐标发生变换时，该三角形区域的三个顶点坐标对应的外观坐标不变，基于上述方式可以准确得到网格绘制区域数据，从而为计算包围盒提供准确的网格绘制区域数据。

结合上述第一方面提供的技术方案，在一些可能的实施方式中，所述纵坐标为整数或有限小数，和/或，所述横坐标为整数或有限小数。

本申请实施例中，由于纵坐标以及横坐标均为整数或有限小数，使得在利用不同的基本结构单元对应的包围盒绘制视图组件时，不同包围盒的边界衔接处不会出现重叠或间隙的情况，提高绘制的视图组件的精度。

结合上述第一方面提供的技术方案，在一些可能的实施方式中，在所述响应用户绘制所述目标视图组件的绘制操作，从预设的基本结构单元库中选择与所述绘制操作相对应的至少一个基本结构单元的包围盒之前，所述方法还包括：获取所述目标视图组件的所有基本结构单元；针对每一个基本结构单元，确定该基本结构单元在直角坐标系中的外观区域，得到外观区域数据；根据该基本结构单元的外观区域数据，获取该基本结构单元的网格绘制区域数据；其中，所述网格绘制区域数据包括扇形区域的边界、按照预设顺序存储的三角形的顶点坐标、该网格绘制区域数据对应的所述外观区域以及每一个所述三角形的顶点坐标在所述外观区域中对应的外观坐标，所述扇形区域为包括该基本结构单元的最小扇形区域，所述扇形区域包括多个所述三角形；根据该基本结构单元的网格绘制区域数据，确定该基本结构单元的包围盒，所述包围盒为包括该基本结构单元的最小矩形区域。

本申请实施例中，根据该基本结构单元的外观区域数据，获取该基本结构单元的网格绘制区域数据，网格绘制区域数据包括扇形区域的边界、按照预设顺序存储的三角形的顶点坐标、该网格绘制区域数据对应的外观区域以及每一个三角形的顶点坐标在外观区域中对应的外观坐标，扇形区域为包括该基本结构单元的最小扇形区域，扇形区域包括多个三角形，从而得到该基本结构单元的完整的网格绘制区域数据，进而在利用该网格绘制区域数据计算包围盒时，能够更加精准地得到该基本结构单元的包围盒，进而提高利用该基本结构单元的包围盒绘制的目标视图组件的准确性。

结合上述第一方面提供的技术方案，在一些可能的实施方式中，所述针对每一个基本结构单元，确定该基本结构单元在直角坐标系中的外观区域，包括：当该基本结构单元为在径向可伸缩的基本结构单元时，利用极坐标系确定该基本结构单元的外观区域，所述外观区域数据包括极径集、起始角度、终止角度、极坐标系原点在所述直角坐标系中的坐标；所述极径集包括该基本结构单元在径向上可伸缩区域和不可伸缩区域的所有边界点的极径，所述起始角度表征该基本结构单元在所述极坐标系中的起始极角，所述终止角度表征该基本结构单元在所述极坐标系中的终止极角；当该基本结构单元为不可伸缩的基本结构单元时，利用极坐标系确定该基本结构单元的外观区域，相应的，所述外观区域数据包括极径集、起始角度、终止角度、极坐标系原点在所述直角坐标系中的坐标，所述极径集包括该基本结构单元在径向上不可伸缩区域的所有边界点的极径，所述起始角度表征该基本结构单元在所述极坐标系中的起始极角，所述终止角度表征该基本结构单元在所述极坐标系中的终止极角；其中，所述极坐标系建立于所述直角坐标系中，所述极坐标系的极轴与所述直角坐标系的x轴正半轴方向相同。

本申请实施例中，在面对不可伸缩或在径向可伸缩的基本结构单元时，利用极坐标系确定该基本结构单元的外观区域，使得得到的外观区域数据可以准确描述该基本结构单元在径向的可伸缩区域以及不可伸缩区域，进而使得到的外观区域数据更加符合基本结构单元的实际情况，为确定网格绘制区域数据提供准确的外观区域数据。

结合上述第一方面提供的技术方案，在一些可能的实施方式中，当利用极坐标系确定该基本结构单元的外观区域时，所述根据该基本结构单元的外观区域数据，获取该基本结构单元的网格绘制区域数据，包括：根据该基本结构单元在径向上可伸缩区域和不可伸缩区域的边界点的极径、极坐标系原点在外观区域中的原点坐标、起始角度、终止角度，确定所述矩形区域的边界；以所述原点坐标为圆心，所述极径为半径，在所述起始角度、终止角度之间的圆弧中确定预设数量的目标点，所述目标点和所述极坐标系原点为组成所述矩形区域的三角形的顶点坐标，其中，不同的点不会互相重合；根据所述三角形的顶点坐标，将所述矩形区域划分为多个三角形区域，按照预设顺序记录每个三角形的顶点坐标；针对每个三角形区域，确定并记录该三角形区域的三个顶点坐标各自在该基本结构单元的外观区域中对应的外观坐标，使得该三角形区域顶点坐标发生变换时，该三角形区域的三个顶点坐标对应的外观坐标不变。

本申请实施例中，根据该基本结构单元在径向上可伸缩区域和不可伸缩区域的边界点的极径、极坐标系原点在外观区域中的原点坐标、起始角度、终止角度，确定矩形区域的边界；以原点坐标为圆心，极径为半径，在起始角度、终止角度之间的圆弧中确定预设数量的目标点，目标点和极坐标系原点为组成矩形区域的三角形的顶点坐标，其中，不同的点不会互相重合；根据三角形的顶点坐标，将矩形区域划分为多个三角形区域，按照预设顺序记录每个三角形的顶点坐标；针对每个三角形区域，确定并记录该三角形区域的三个顶点坐标各自在该基本结构单元的外观区域中对应的外观坐标，基于上述方式可以准确得到网格绘制区域数据，从而为后续计算包围盒提供准确的网格绘制区域数据。

结合上述第一方面提供的技术方案，在一些可能的实施方式中，所述目标视图组件为代码块视图组件。

第二方面，本申请提供一种视图组件绘制装置，包括绘制模块、设置模块，绘制模块用于响应用户绘制所述目标视图组件的绘制操作，从基本结构单元库中选择与所述绘制操作相对应的至少一个基本结构单元的包围盒；设置模块用于设置选择的每一个所述基本结构单元的包围盒的四角点坐标，得到所述绘制操作对应的目标视图组件。

第三方面，本申请实施例提供一种电子设备，包括：存储器和处理器，所述存储器和所述处理器连接；所述存储器，用于存储程序；所述处理器，用于调用存储于所述存储器中的程序，以执行如上述第一方面实施例和/或结合上述第一方面实施例的任一种可能的实施方式提供的方法。

第四方面，本申请实施例提供一种存储介质，其上存储有计算机程序，所述计算机程序被计算机运行时，执行如上述第一方面实施例和/或结合上述第一方面实施例的任一种可能的实施方式提供的方法。

附图说明

为了更清楚地说明本申请实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1为本申请实施例示出的一种视图组件绘制方法的流程示意图；

图2为本申请实施例示出的一种确定目标目标视图组件对应的基本结构单元的包围盒的四角点坐标的示意图；

图3为本申请实施例示出的一种绘制目标视图组件需要的基本结构单元及对应的代码块视图组件的示意图；

图4为本申请实施例示出的一种在水平垂直方向可伸缩的基本结构单元对应的外观区域的示意图；

图5为本申请实施例示出的一种网格绘制区域数据对应网格绘制区域的示意图；

图6为本申请实施例示出的一种在径向可伸缩的基本结构单元对应的外观区域的示意图；

图7为本申请实施例示出的另一种网格绘制区域数据对应网格绘制区域的示意图；

图8为本申请实施例示出的一种整套代码块目标视图组件对应的所有基本结构单元的示意图；

图9为本申请实施例示出的一种利用基本结构单元绘制目标代码块外观的示意图；

图10为本申请实施例示出的一种视图组件绘制装置的结构框图；

图11为本申请实施例示出的一种电子设备结构框图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行描述。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对齐进行进一步定义和解释。同时，在本申请的描述中诸如“第一”、“第二”等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

再者，本申请中术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。

下面将结合附图对本申请的技术方案进行清楚、完整地描述。

请参阅图1，图1为本申请实施例提供的一种视图组件绘制方法的流程示意图，下面将结合图1对齐包含的步骤进行说明。

S100：响应用户绘制目标视图组件的绘制操作，从基本结构单元库中选择与绘制操作相对应的至少一个基本结构单元的包围盒。

S200：设置选择的基本结构单元的包围盒的四角点坐标，得到绘制操作对应的目标视图组件。

用户在利用该视图组件绘制方法绘制目标视图组件时，首先从预设的基本结构单元库中选择相应的基本结构单元的包围盒，然后设置该基本结构单元的包围盒的四角点坐标，从而确定该基本结构单元的包围盒的位置，重复上述步骤，确定多个基本结构单元的包围盒各自的位置，从而组合得到对应的目标视图组件。其中，多个相同基本结构单元的包围盒可以同时存在，且同一基本结构单元的包围盒可以在不同的位置。其中，目标视图组件可以是代码块视图组件，后续将利用代码块视图组件为例进行说明。

为了便于理解S100、S200，请参阅图2，图2展示了绘制目标代码块外观时，需要选择的基本结构单元的包围盒，以及每个基本结构单元的包围盒的四角点坐标。图2中的(a)为目标代码块外观的完整外观，以及绘制该目标代码块外观所需的所有基本结构单元的包围盒，图2中的(b)为确定图2中的(a)中基本结构单元的包围盒1的四角点坐标，即(x

一种实施方式下，在S200后，该视图组件绘制方法还包括：响应用户配置目标视图组件与预设视图组件图标的关联关系的操作，将视图组件与目标视图组件建立关联。

通过配置目标视图组件与预设视图组件图标的关联关系，使得在用户选择预设视图组件图标时，显示该预设视图组件图标关联的目标视图组件。

为了便于理解，请参阅图3，图3展示了绘制目标代码块外观需要的外观基本结构单元以及对应的代码块视图组件，通过图3所示的外观基本结构单元对应的包围盒可以确定图3中的网格绘制边界框，在图3所示的右侧的目标代码块外观绘制完成后，即可与代码块视图组件建立关联，从而使得用户在选择该视图组件时，可以显示该目标代码块外观。

一种实施方式下，在S200之后，视图组件绘制方法还包括，响应用户配置目标视图组件的伸缩规则的操作，对应配置目标视图组件在水平方向的伸缩规则和目标视图组件在竖直方向的伸缩规则，以使目标视图组件能在水平方向和/或竖直方向伸缩。

可选的，配置目标视图组件在水平方向的伸缩规则可以是，配置在该目标视图组件需要进行水平方向的伸缩时，该视图组件内的哪些基本结构单元的包围盒需要进行水平方向的伸缩，进而实现该目标视图组件整体在水平方向的伸缩，同理，配置目标视图组件在竖直方向的伸缩规则可以是，配置在该目标视图组件需要进行竖直方向的伸缩时，该视图组件内的哪些基本结构单元的包围盒需要进行竖直方向的伸缩，进而实现该目标视图组件整体在竖直方向的伸缩。其中，具体配置哪些基本结构单元的包围盒进行伸缩可以根据实际需求设置，此处不对具体的伸缩规则作出限制。

第一种实施方式下，在S100之前，视图组件绘制方法还包括，首先获取目标视图组件的所有基本结构单元；然后针对每一个基本结构单元，确定该基本结构单元在直角坐标系中的外观区域，得到外观区域数据；再根据该基本结构单元的外观区域数据，获取该基本结构单元的网格绘制区域数据，最后根据该基本结构单元的网格绘制区域数据，确定该基本结构单元的包围盒，其中，包围盒为包括该基本结构单元的最小矩形区域，网格绘制区域数据包括矩形区域的边界、按照预设顺序存储的三角形的顶点坐标、该网格绘制区域数据对应的外观区域以及每一个三角形的顶点坐标在外观区域中对应的外观坐标，矩形区域为包括该基本结构单元的最小矩形区域，矩形区域包括多个三角形。其中，根据该基本结构单元的网格绘制区域数据，确定该基本结构单元的包围盒的具体方式及原理已为本领域技术人员所熟知，为简要描述，此处不再赘述。

一种实施方式下，基本结构单元的可伸缩方向不同，确定基本结构单元外观区域的方式以及获取到的外观区域数据也不同。

可选的，当该基本结构单元为在水平垂直方向可伸缩的基本结构单元时，利用直角坐标系确定该基本结构单元的外观区域，相应的，外观区域数据包括横坐标集和纵坐标集，横坐标集包括该基本结构单元在水平方向上可伸缩区域和不可伸缩区域的所有边界点的横坐标，纵坐标集包括该基本结构单元在竖直方向上可伸缩区域和不可伸缩区域的所有边界点的纵坐标。

可选的，横坐标集中的每个横坐标均为整数或有限小数，纵坐标集中的每个纵坐标均为整数或有限小数。

为了便于理解上述的基本结构单元为不可伸缩或在水平垂直方向可伸缩的基本结构单元时，获取外观区域数据的过程，请参阅图4，图4所示的基本结构单元为可以在水平方向和竖直方向伸缩的基本结构单元的外观区域，其中，U

可选的，当该基本结构单元为不可伸缩的基本结构单元时，利用直角坐标系或极坐标系确定该基本结构单元的外观区域，当利用直角坐标系确定该基本结构单元的外观区域时，相应的，外观区域数据包括横坐标集和纵坐标集，横坐标集包括该基本结构单元在水平方向上不可伸缩区域的边界点的横坐标，横坐标为整数或有限小数，纵坐标集包括该基本结构单元在竖直方向上不可伸缩区域的所有边界点的纵坐标，纵坐标为整数或有限小数。其中，具体利用直角坐标系确定该基本结构单元的外观区域，并获取外观区域数据的方法与前文记载的一致，为简要描述，此处不再赘述。

一种实施方式下，当利用直角坐标系确定该基本结构单元的外观区域时，根据该基本结构单元的外观区域数据，获取该基本结构单元的网格绘制区域数据的具体过程可以是，首先根据横坐标集和纵坐标集中最大的横坐标、最大的纵坐标和最小的横坐标、最小的纵坐标，确定矩形区域的边界；然后根据横坐标集和纵坐标集，确定组成矩形区域的所有三角形的顶点坐标；再根据三角形的顶点坐标，将矩形区域划分为多个三角形区域，按照预设顺序记录每个三角形的顶点坐标；最后针对每个三角形区域，确定并记录该三角形区域的三个顶点坐标各自在该基本结构单元的外观区域中对应的外观坐标，使得该三角形区域顶点坐标发生变换时，该三角形区域的三个顶点坐标对应的外观坐标不变。

可选的，组成矩形区域的所有三角形的顶点坐标为外观区域数据包括的横坐标集中的每一个横坐标和外观区域数据包括的纵坐标集中的每一个纵坐标组成的所有坐标。

可选的，按照预设顺序记录每个三角形的顶点坐标的方式可以是从左上角的三角形开始记录，按照从左到右的顺序依次记录每一排的三角形的顶点坐标，在第一排的三角形的坐标记录完成后，记录从上到下数第二排三角形的顶点坐标，以此类推，直至记录完所有三角形顶点的坐标。也可以是，从右上角的三角形开始记录，按照从右到左的顺序依次记录每一排的三角形的顶点坐标，在第一排的三角形的坐标记录完成后，记录从上到下数第二排三角形的顶点坐标，以此类推，直至记录完所有三角形顶点的坐标。上述举例仅为便于理解，预设顺序可以根据实际需求设置，此处不对预设顺序作出限制。

为了便于理解上述的获取该基本结构单元的网格绘制区域数据的具体过程，请参阅图5，图5中的(b)为网格绘制区域数据对应的网格绘制区域，图5中的(a)为该网格绘制区域数据对应的外观区域，其中，图5所示的基本结构单元为在水平垂直方向可伸缩的基本结构单元，且其对应的外观区域数据包括横坐标集U：(U

图5中组成矩形区域的所有三角形的顶点坐标为(U

确定并记录该基本结构单元的每个三角形区域的三个顶点坐标各自在该基本结构单元的外观区域中对应的外观坐标，如图5所示，将三角形的顶点坐标为(U

为便于理解，请参阅图5，图5展示了通过修改三角形顶点坐标实现水平翻转、垂直翻转、旋转和拉伸四种情况，但三角形顶点坐标对应的外观坐标始终不变，也即，修改顶点坐标(U

第二种实施方式下，在S100之前，视图组件绘制方法还包括，首先获取目标视图组件的所有基本结构单元；然后针对每一个基本结构单元，确定该基本结构单元在直角坐标系中的外观区域，得到外观区域数据；再根据该基本结构单元的外观区域数据，获取该基本结构单元的网格绘制区域数据，最后根据该基本结构单元的网格绘制区域数据，确定该基本结构单元的包围盒，其中，包围盒为包括该基本结构单元的最小扇形区域，网格绘制区域数据包括扇形区域的边界、按照预设顺序存储的三角形的顶点坐标、该网格绘制区域数据对应的外观区域以及每一个三角形的顶点坐标在外观区域中对应的外观坐标，扇形区域为包括该基本结构单元的最小扇形区域，扇形区域包括多个三角形。其中，根据该基本结构单元的网格绘制区域数据，确定该基本结构单元的包围盒的具体方式及原理已为本领域技术人员所熟知，为简要描述，此处不再赘述。其中，极坐标系确定该基本结构单元的外观区域时，在以最大极径为半径、极坐标系原点为圆心，从起始角度向终止角度作圆弧后，该圆弧可以完全包裹该基本结构单元，因此，可以将该圆弧作为该基本结构单元的边界，此时，该基本结构单元的边界是扇形区域。

可选的，当该基本结构单元为在径向可伸缩的基本结构单元时，利用极坐标系确定该基本结构单元的外观区域，外观区域数据包括极径集、起始角度、终止角度、极坐标系原点在直角坐标系中的坐标；极径集包括该基本结构单元在径向上可伸缩区域和不可伸缩区域的所有边界点的极径，起始角度表征该基本结构单元在极坐标系中的起始极角，终止角度表征该基本结构单元在极坐标系中的终止极角，极坐标系建立于直角坐标系中，极坐标系的极轴与直角坐标系的x轴方向相同。

为了便于理解上述的基本结构单元为不可伸缩或在径向可伸缩的基本结构单元时，获取外观区域数据的过程，请参阅图6，图6所示的基本结构单元为可以在径向伸缩的基本结构单元的外观区域，其中，P为极坐标系的原点，P的坐标为(U

可选的，当该基本结构单元为不可伸缩的基本结构单元时，利用极坐标系确定该基本结构单元的外观区域，相应的，外观区域数据包括极径集、起始角度、终止角度、极坐标系原点在直角坐标系中的坐标，极径集包括该基本结构单元在径向上不可伸缩区域的所有边界点的极径，起始角度表征该基本结构单元在极坐标系中的起始极角，终止角度表征该基本结构单元在极坐标系中的终止极角。其中，利用极坐标系确定该基本结构单元的外观区域，并获取外观区域数据的方法与前文记载的一致，为简要描述，此处不再赘述。

一种实施方式下，当利用极坐标系确定该基本结构单元的外观区域时，根据该基本结构单元的外观区域数据，获取该基本结构单元的网格绘制区域数据的具体过程可以是，首先根据该基本结构单元在径向上可伸缩区域和不可伸缩区域的边界点的极径、极坐标系原点在外观区域中的原点坐标、起始角度、终止角度，确定矩形区域的边界；然后以原点坐标为圆心，极径为半径，在起始角度、终止角度之间的圆弧中确定预设数量的目标点，目标点和极坐标系原点为组成矩形区域的三角形的顶点坐标，其中，不同的点不会互相重合；再根据三角形的顶点坐标，将矩形区域划分为多个三角形区域，按照预设顺序记录每个三角形的顶点坐标；最后针对每个三角形区域，确定并记录该三角形区域的三个顶点坐标各自在该基本结构单元的外观区域中对应的外观坐标，使得该三角形区域顶点坐标发生变换时，该三角形区域的三个顶点坐标对应的外观坐标不变。

可选的，根据该基本结构单元在径向上可伸缩区域和不可伸缩区域的边界点的极径、极坐标系原点在外观区域中的原点坐标、起始角度、终止角度，确定该基本结构单元的外观，然后确定一最小矩形区域，该最小矩形区域的边界为矩形区域的边界。

可选的，确定三角形的顶点坐标的方式可以是，以每一个极径为半径，极坐标系原点为圆心，从起始角度向终止角度作圆弧，然后将圆弧的两端的端点以及该圆弧上除端点外的至少一个点作为三角形的顶点，可选的，圆弧上除端点外的三角形顶点可以是该圆弧的等分点，例如，当需要从该圆弧上选择N个点作为顶点时，可以选择将该圆弧进行N+1等分的等分点作为三角形顶点，其中，同一条圆弧上选择的三角形顶点越多，对最后呈现的基本结构单元的呈现效果越好。

可选的，按照预设顺序记录每个三角形的顶点坐标的方式可以是，从极坐标系原点的三角形开始记录，按照从初始角度向终止角度的方向记录每一个圆弧对应的所有三角形的顶点坐标，在极径最小的圆弧对应的所有三角形的顶点坐标记录完成后，记录极径第二小的圆弧对应的所有三角形的顶点坐标，以此类推，直至完成所有三角形的顶点坐标的记录。上述举例仅为便于理解，预设顺序可以根据实际需求设置，此处不对预设顺序作出限制。

为了便于理解上述的获取该基本结构单元的网格绘制区域数据的具体过程，请参阅图7，图7中的(b)为利用图像的方法表现的网格绘制区域数据，图7中的(a)为该网格绘制区域数据对应的外观区域，其中，图7所示的基本结构单元为在径向可伸缩的基本结构单元，且其对应的外观区域数据包括：极径集R：(0、R

其中，图7中的(c)为对图7中的(b)进行水平翻转后的示意图，图7中的(d)为对图7中的(b)进行垂直翻转后的示意图，图7中的(e)为对图7中的(b)进行旋转后的示意图，图7中的(f)为对图7中的(b)进行拉伸后的示意图。

可选的，在获得基本结构单元的网格绘制区域数据后，可以设置该基本结构单元的具体伸缩规则，当基本结构单元为可在水平和竖直方向伸缩的基本结构单元时，例如，当基本结构单元为图5所示的基本结构单元时，可以设置(U

当基本结构单元为可在径向伸缩的基本结构单元时，例如，例如，当基本结构单元为图7所示的基本结构单元时，可以设置极径R

需要说明的是，当需要绘制不同的代码块目标视图组件时，需要事先针对每一个代码块目标视图组件设置对应的基本结构单元库，该基本结构单元库包含绘制该代码块目标视图组件所需的所有基本结构单元的包围盒，例如，需要绘制5个不同的代码块视图组件时，需要设置5个基本结构单元库，但考虑到该5个基本结构单元库可能存在相同的基本结构单元，因此，为了减少存储基本结构单元库的内存，可以将该5个基本结构单元库整合为1个基本结构单元库，相应的，整合后的基本结构单元库包括绘制这5个代码块视图组件需要的所有基本结构单元的包围盒。

相应的，在获取绘制所有待绘制代码块目标视图组件需要的所有基本结构单元的包围盒之前，需要确定所有待绘制代码块目标视图组件需要的所有基本结构单元，然后通过前文记载的内容，获取每一个基本结构单元的包围盒，其中，获取基本结构单元的包围盒的具体原理及步骤在前文已叙述清楚，为简要描述，此处不再赘述。

为了便于理解，请参阅图8，图8为从包括10个代码块外观的整套代码块外观中提取的8个基本结构单元，通过包括这8个基本结构单元各自对应的包围盒的基本结构单元库，可以绘制图8左侧的10个代码块外观，其中，以基本结构单元C为例，可以调整w0，w1，h0，h1，w，h为合适的数值，使得U1＝w0/w，U2＝(w0+w1)/w，V1＝h0/h，V2＝(h0+h1)/h为有限小数。

为了更好的理解，请参阅图9，图9展示了一种利用基本结构单元库中的7个基本结构单元来绘制目标代码块外观的示例，为了便于理解，将需要使用的7个基本结构单元分别用1-7的整数进行编号，相应的，绘制完成的目标代码块外观如图9右侧所示。

一种实施方式下，上述的视图组件绘制方法，可以应用于一包含UI界面的电子设备，UI界面包括：第一区域和第二区域，第一区域包括预设的视图组件和预设的基本结构单元库，基本结构单元库包括绘制目标视图组件所需的所有基本结构单元的包围盒，不同的基本结构单元对应不同的包围盒。

其中，第一区域可以包括预设视图组件图标，第二区域可以用于显示目标视图组件、目标代码块外观，例如，在S200之后，可以在第二区域显示该目标视图组件。

请参阅图10，图10为本申请实施例提供的一种视图组件绘制装置100，包括绘制模块110、设置模块120。

绘制模块110，用于响应用户绘制目标视图组件的绘制操作，从预设的基本结构单元库中选择与所述绘制操作相对应的至少一个基本结构单元的包围盒。

设置模块120，用于设置选择的每一个所述基本结构单元的包围盒的四角点坐标得到所述绘制操作对应的目标视图组件。

视图组件绘制装置100还包括关联模块，关联模块用于响应用户配置所述目标视图组件与预设视图组件图标的关联关系的操作，将所述视图组件与所述目标视图组件建立关联，使得在用户选择所述预设视图组件图标时，显示所述预设视图组件图标关联的所述目标视图组件。

视图组件绘制装置100还包括处理模块，处理模块用于响应用户配置所述目标视图组件的伸缩规则的操作，对应配置所述目标视图组件在水平方向的伸缩规则和所述目标视图组件在竖直方向的伸缩规则，以使所述目标视图组件能在水平方向和/或竖直方向伸缩。

处理模块还用于获取所述目标视图组件的所有基本结构单元；针对每一个基本结构单元，确定该基本结构单元在直角坐标系中的外观区域，得到外观区域数据；根据该基本结构单元的外观区域数据，获取该基本结构单元的网格绘制区域数据，所述网格绘制区域数据包括矩形区域的边界、按照预设顺序存储的三角形的顶点坐标、该网格绘制区域数据对应的所述外观区域以及每一个所述三角形的顶点坐标在所述外观区域中对应的外观坐标，所述矩形区域为包括该基本结构单元的最小矩形区域，所述矩形区域包括多个所述三角形；根据该基本结构单元的网格绘制区域数据，确定该基本结构单元的包围盒，所述包围盒为包括该基本结构单元的最小矩形区域。

处理模块还用于当该基本结构单元为水平垂直方向可伸缩的基本结构单元时，利用所述直角坐标系确定该基本结构单元的外观区域，相应的，所述外观区域数据包括横坐标集和纵坐标集，所述横坐标集包括该基本结构单元在水平方向上可伸缩区域和不可伸缩区域的所有边界点的横坐标，所述纵坐标集包括该基本结构单元在竖直方向上可伸缩区域和不可伸缩区域的所有边界点的纵坐标；当该基本结构单元为不可伸缩的基本结构单元时，利用直角坐标系确定该基本结构单元的外观区域，相应的，所述外观区域数据包括横坐标集和纵坐标集，所述横坐标集包括该基本结构单元在水平方向上不可伸缩区域的边界点的横坐标，所述纵坐标集包括该基本结构单元在竖直方向上不可伸缩区域的所有边界点的纵坐标。

处理模块具体用于根据所述横坐标集和所述纵坐标集中最大的横坐标、最大的纵坐标和最小的横坐标、最小的纵坐标，确定所述矩形区域的边界；根据所述横坐标集和所述纵坐标集，确定组成所述矩形区域的所有三角形的顶点坐标；根据所述三角形的顶点坐标，将所述矩形区域划分为多个三角形区域，按照预设顺序记录每个三角形的顶点坐标；针对每个三角形区域，确定并记录该三角形区域的三个顶点坐标各自在该基本结构单元的外观区域中对应的外观坐标，使得该三角形区域顶点坐标发生变换时，该三角形区域的三个顶点坐标对应的外观坐标不变。

一种实施方式下，所述纵坐标为整数或有限小数，和/或，所述横坐标为整数或有限小数。

处理模块还用于获取所述目标视图组件的所有基本结构单元；针对每一个基本结构单元，确定该基本结构单元在直角坐标系中的外观区域，得到外观区域数据；根据该基本结构单元的外观区域数据，获取该基本结构单元的网格绘制区域数据；其中，所述网格绘制区域数据包括扇形区域的边界、按照预设顺序存储的三角形的顶点坐标、该网格绘制区域数据对应的所述外观区域以及每一个所述三角形的顶点坐标在所述外观区域中对应的外观坐标，所述扇形区域为包括该基本结构单元的最小扇形区域，所述扇形区域包括多个所述三角形；根据该基本结构单元的网格绘制区域数据，确定该基本结构单元的包围盒，所述包围盒为包括该基本结构单元的最小矩形区域。

处理模块具体用于当该基本结构单元为在径向可伸缩的基本结构单元时，利用极坐标系确定该基本结构单元的外观区域，所述外观区域数据包括极径集、起始角度、终止角度、极坐标系原点在所述直角坐标系中的坐标；所述极径集包括该基本结构单元在径向上可伸缩区域和不可伸缩区域的所有边界点的极径，所述起始角度表征该基本结构单元在所述极坐标系中的起始极角，所述终止角度表征该基本结构单元在所述极坐标系中的终止极角；当该基本结构单元为不可伸缩的基本结构单元时，利用极坐标系确定该基本结构单元的外观区域，相应的，所述外观区域数据包括极径集、起始角度、终止角度、极坐标系原点在所述直角坐标系中的坐标，所述极径集包括该基本结构单元在径向上不可伸缩区域的所有边界点的极径，所述起始角度表征该基本结构单元在所述极坐标系中的起始极角，所述终止角度表征该基本结构单元在所述极坐标系中的终止极角；其中，所述极坐标系建立于所述直角坐标系中，所述极坐标系的极轴与所述直角坐标系的x轴正半轴方向相同。

处理模块具体用于根据该基本结构单元在径向上可伸缩区域和不可伸缩区域的边界点的极径、极坐标系原点在外观区域中的原点坐标、起始角度、终止角度，确定所述矩形区域的边界；以所述原点坐标为圆心，所述极径为半径，在所述起始角度、终止角度之间的圆弧中确定预设数量的目标点，所述目标点和所述极坐标系原点为组成所述矩形区域的三角形的顶点坐标，其中，不同的点不会互相重合；根据所述三角形的顶点坐标，将所述矩形区域划分为多个三角形区域，按照预设顺序记录每个三角形的顶点坐标；针对每个三角形区域，确定并记录该三角形区域的三个顶点坐标各自在该基本结构单元的外观区域中对应的外观坐标，使得该三角形区域顶点坐标发生变换时，该三角形区域的三个顶点坐标对应的外观坐标不变。

一种实施方式下，所述目标视图组件为代码块视图组件。

一种实施方式下，该视图组件绘制装置100可以部署于一包含UI界面的电子设备，所述UI界面包括：第一区域和第二区域，所述第一区域包括预设的视图组件和预设的基本结构单元库，所述基本结构单元库包括绘制目标视图组件所需的所有基本结构单元的包围盒，不同的基本结构单元对应不同的包围盒。其中，第一区域可以包括预设视图组件图标，第二区域可以用于显示目标视图组件、目标代码块外观。

本申请实施例所提供的视图组件绘制装置100，其实现原理及产生的技术效果和前述视图组件绘制方法实施例相同，为简要描述，装置实施例部分未提及之处，可参考前述视图组件绘制方法实施例中相应内容。

请参阅图11，其为本申请实施例提供的一种电子设备200。所述电子设备200包括：收发器210、存储器220、通讯总线230、处理器240。

所述收发器210、所述存储器220、处理器240各元件相互之间直接或间接地电性连接，以实现数据的传输或交互。例如，这些元件相互之间可通过一条或多条通讯总线230或信号线实现电性连接。其中，收发器210用于收发数据。存储器220用于存储计算机程序，如存储有图10中所示的软件功能模块，即视图组件绘制装置100。其中，视图组件绘制装置100包括至少一个可以软件或固件(firmware)的形式存储于所述存储器220中或固化在所述电子设备200的操作系统(operating system，OS)中的软件功能模块。所述处理器240，用于执行存储器220中存储的可执行模块，例如视图组件绘制装置100包括的软件功能模块或计算机程序。此时，处理器240，用于响应用户绘制目标视图组件的绘制操作，从所述基本结构单元库中选择与所述绘制操作相对应的至少一个基本结构单元的包围盒；设置选择的每一个所述基本结构单元的包围盒的四角点坐标，得到所述绘制操作对应的目标视图组件。

其中，存储器220可以是，但不限于，随机存取存储器(Random Access Memory，RAM)，只读存储器(Read Only Memory，ROM)，可编程只读存储器(Programmable Read-OnlyMemory，PROM)，可擦除只读存储器(Erasable Programmable Read-Only Memory，EPROM)，电可擦除只读存储器(Electric Erasable Programmable Read-Only Memory，EEPROM)等。

处理器240可能是一种集成电路芯片，具有信号的处理能力。上述的处理器可以是通用处理器，包括中央处理器(Central Processing Unit，CPU)、网络处理器(NetworkProcessor，NP)等；还可以是数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(FieldProgrammable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本申请实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器240也可以是任何常规的处理器等。

其中，上述的电子设备200，包括但不限于个人电脑、服务器等。

本申请实施例还提供了一种非易失性计算机可读取存储介质(以下简称存储介质)，该存储介质上存储有计算机程序，该计算机程序被计算机如上述的电子设备200运行时，执行上述所示的视图组件绘制方法。该计算机可读存储介质包括：U盘、移动硬盘、只读存储器(Read-Only Memory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述仅为本申请的优选实施例而已，并不用于限制本申请，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。