CN114611047A - 页面渲染方法、装置、电子设备及存储介质 - Google Patents
页面渲染方法、装置、电子设备及存储介质 Download PDFInfo
- Publication number
- CN114611047A CN114611047A CN202210418965.7A CN202210418965A CN114611047A CN 114611047 A CN114611047 A CN 114611047A CN 202210418965 A CN202210418965 A CN 202210418965A CN 114611047 A CN114611047 A CN 114611047A
- Authority
- CN
- China
- Prior art keywords
- page
- template
- templates
- page sub
- sub
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000009877 rendering Methods 0.000 title claims abstract description 104
- 238000000034 method Methods 0.000 title claims abstract description 72
- 238000012545 processing Methods 0.000 claims description 13
- 238000004590 computer program Methods 0.000 claims description 12
- 230000008569 process Effects 0.000 description 21
- 238000010586 diagram Methods 0.000 description 12
- 230000000694 effects Effects 0.000 description 10
- 230000000007 visual effect Effects 0.000 description 8
- 238000004891 communication Methods 0.000 description 6
- 230000001360 synchronised effect Effects 0.000 description 6
- 230000003993 interaction Effects 0.000 description 5
- 238000004364 calculation method Methods 0.000 description 4
- 230000003287 optical effect Effects 0.000 description 4
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 238000011161 development Methods 0.000 description 3
- 238000013461 design Methods 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 230000006870 function Effects 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004044 response Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Image Generation (AREA)
- Processing Or Creating Images (AREA)
Abstract
本申请公开了一种页面渲染方法、装置、电子设备及存储介质，其中，方法包括：确定至少两个页面子模板中每个页面子模板对应的第一信息；第一信息至少包括偏移量；至少两个页面子模板表征对图片文件格式的页面模板进行区域划分得到的页面子模板；偏移量用于标识对应的页面子模板在页面模板的位置；基于每个页面子模板对应的第一信息，在设定视图容器的对应位置渲染出至少两个页面子模板中每个页面子模板对应的图层数据。
Description
技术领域
本申请涉及计算机技术领域，尤其涉及一种页面渲染方法、装置、电子设备及存储介质。
背景技术
前端业务开发过程中，用户在图片文件格式的页面模板中进行页面编辑，编辑视图中会实时渲染出页面的视觉效果。然而，在面对复杂业务开发场景时，编辑过程中对页面的实时渲染效果受限，往往会影响页面编辑的效率。
发明内容
有鉴于此，本申请实施例提供一种页面渲染方法、装置、电子设备及存储介质，以至少解决相关技术生成图像的效率不高的问题。
本申请实施例的技术方案是这样实现的：
本申请实施例提供了一种页面渲染方法，所述方法包括：
确定至少两个页面子模板中每个页面子模板对应的第一信息；所述第一信息至少包括偏移量；所述至少两个页面子模板表征对图片文件格式的页面模板进行区域划分得到的页面子模板；所述偏移量用于标识对应的页面子模板在所述页面模板的位置；
基于每个页面子模板对应的第一信息，在设定视图容器的对应位置渲染出所述至少两个页面子模板中每个页面子模板对应的图层数据。
其中，上述方案中，在所述在设定视图容器的对应位置渲染出所述至少两个页面子模板中每个页面子模板对应的图层数据之前，所述方法还包括：
确定所述设定视图容器的尺寸。
上述方案中，所述设定视图容器的可视区域的高度大于或等于所述页面模板的高度；所述设定视图容器的可视区域的宽度大于或等于所述页面模板的宽度。
上述方案中，在所述至少两个页面子模板在所述页面模板中依次竖向排布的情况下，所述设定视图容器的高度为所述至少两个页面子模板中每个页面子模板的高度的累加值，且所述设定视图容器的宽度为所述至少两个页面子模板中页面子模板的宽度的最大值；或者，
在所述至少两个页面子模板在所述页面模板中依次横向排布的情况下，所述设定视图容器的高度为所述至少两个页面子模板中页面子模板的高度的最大值，且所述设定视图容器的宽度为所述至少两个页面子模板中每个页面子模板的宽度的累加值。
上述方案中，所述确定至少两个页面子模板中每个页面子模板对应的第一信息时，所述方法包括：
在所述至少两个页面子模板在所述页面模板中依次竖向排布的情况下，基于第一页面子模板对应的高度和对应的第一偏移量，确定第二页面子模板对应的第一偏移量；所述第一偏移量为竖向偏移量；或者，
在所述至少两个页面子模板在所述页面模板中依次横向排布的情况下，基于第一页面子模板对应的宽度和对应的第二偏移量，确定第二页面子模板对应的第二偏移量；所述第一偏移量为横向偏移量。
上述方案中，所述基于每个页面子模板对应的第一信息，在设定视图容器的对应位置渲染出所述至少两个页面子模板中每个页面子模板对应的图层数据时，所述方法包括：
基于页面子模板对应的偏移量和对应的图层数据的第一位置信息，在所述设定视图容器的对应位置渲染对应的图层数据；其中，
所述第一位置信息表征对应的图层数据在对应的页面子模板中的位置。
上述方案中，所述第一信息还包括页面子模板对应的上下文信息。
本申请实施例还提供了一种页面渲染装置，包括：
第一处理单元，用于确定至少两个页面子模板中每个页面子模板对应的第一信息；所述第一信息至少包括偏移量；所述至少两个页面子模板表征对图片文件格式的页面模板进行区域划分得到的页面子模板；所述偏移量用于标识对应的页面子模板在所述页面模板的位置；
渲染单元，用于基于每个页面子模板对应的第一信息，在设定视图容器的对应位置渲染出所述至少两个页面子模板中每个页面子模板对应的图层数据。
本申请实施例还提供了一种电子设备，包括：处理器和用于存储能够在处理器上运行的计算机程序的存储器，
其中，所述处理器用于运行所述计算机程序时，执行上述页面渲染方法的步骤。
本申请实施例还提供了一种存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述页面渲染方法的步骤。
本申请实施例提供的一种页面渲染方法、装置、电子设备及存储介质，图片文件格式的页面模板进行区域划分得到至少两个页面子模板，在图片文件格式的页面模板进行页面编辑的过程中，为每个页面子模板确定对应的至少包括偏移量的第一信息，并根据第一信息，在设定视图容器的对应位置渲染出每个页面子模板的图层数据，得到页面子模板的渲染结果。这样，基于每个页面子模板在页面模板上的位置，在一个设定视图容器渲染出所有页面子模板对应的图层数据，能够解决不同页面子模板之间的图层遮盖问题，提升了页面的实时渲染效果，同时减少了页面编辑过程中所需的调整操作，提高了页面编辑的效率。
附图说明
图1为本申请实施例提供的页面渲染方法实现流程示意图；
图2为相关技术的页面模板划分示意图；
图3为相关技术的页面实时渲染效果示意图；
图4为本申请应用实施例提供的页面渲染的软件架构示意图；
图5为本申请应用实施例提供的页面渲染方法实现示意图；
图6为本申请应用实施例提供的页面渲染方法实现示意图；
图7为本申请应用实施例提供的渲染结果示意图；
图8为本申请实施例提供的页面渲染装置的结构示意图；
图9为本申请实施例提供的电子设备的结构示意图。
具体实施方式
在本申请的各种实施例中，图片文件格式的页面模板进行区域划分得到至少两个页面子模板，在图片文件格式的页面模板进行页面编辑的过程中，为每个页面子模板确定对应的至少包括偏移量的第一信息，并根据第一信息，在设定视图容器的对应位置渲染出每个页面子模板的图层数据，得到页面子模板的渲染结果。这样，基于至少两个页面子模板在页面模板上的位置，在一个设定视图容器渲染出所有页面子模板对应的图层数据，能够解决不同页面子模板之间的图层遮盖问题，提升了页面的实时渲染效果，同时减少了页面编辑过程中所需的调整操作，提高了页面编辑的效率。
为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。
图1为本申请实施例提供的页面渲染方法的实现流程示意图，本申请实施例提供了一种页面渲染方法，应用于电子设备，其中，电子设备包括但不限于服务器、终端等电子设备。包括：
步骤101：确定至少两个页面子模板中每个页面子模板对应的第一信息。
其中，所述第一信息至少包括偏移量；所述至少两个页面子模板表征对图片文件格式的页面模板进行区域划分得到的页面子模板；所述偏移量用于标识对应的页面子模板在所述页面模板的位置。
进行前端开发的过程时，将设计稿文件作为页面模板，按照页面模板对应的图像区域进行区域划分，得到至少两个页面子模板，从划分得到的至少两个页面子模板中确定至少两个页面子模板。其中，设计稿文件可以是PSD等图片文件格式的文件。
将页面模板划分得到的部分或全部页面子模板作为待渲染的页面子模板，为确定出的页面子模板确定对应的第一信息，第一信息表征将对应的页面子模板渲染在设定视图容器所需的信息。
这里，页面子模板对应的第一信息至少包括偏移量，偏移量可以根据对应的页面子模板在页面模板的位置确定得到，页面子模板在页面模板的位置可以通过页面子模板在页面模板构建的坐标系中的坐标描述。
作为本申请的一个实施例，所述第一信息还包括页面子模板对应的上下文信息。
为每个页面子模板确定对应的上下文信息，根据上下文信息为页面子模板配置生成对应的编辑器，以在设定视图容器渲染对应的页面子模板。
步骤102：基于每个页面子模板对应的第一信息，在设定视图容器的对应位置渲染出所述至少两个页面子模板中每个页面子模板对应的图层数据。
基于每个页面子模板对应的第一信息，将至少两个页面子模板的图层数据渲染在同一个设定视图容器的对应位置，也就是说，至少两个页面子模板的图层数据渲染在同一个视图容器。这里，根据至少两个页面子模板中的每个页面子模板的偏移量，确定不同页面子模板在页面模板的位置差异，建立页面模板坐标系和设定视图容器坐标系的对应关系，进而确定每个页面子模板的图层数据在同一设定视图容器的对应位置。
作为本申请的一个实施例，所述基于每个页面子模板对应的第一信息，在设定视图容器的对应位置渲染出所述至少两个页面子模板中每个页面子模板对应的图层数据时，所述方法包括：
基于页面子模板对应的偏移量和对应的图层数据的第一位置信息，在所述设定视图容器的对应位置渲染对应的图层数据；其中，
所述第一位置信息表征对应的图层数据在对应的页面子模板中的位置。
基于标识对应的页面子模板在页面模板的位置的偏移量，和标识对应的图层数据在对应的页面子模板中的位置的第一位置信息，确定图层数据在页面模板的位置，从而根据页面模板坐标系与设定视图容器坐标系的对应关系，在设定视图容器的对应位置渲染对应的图层数据。这里，第一信息可以包括页面子模板对应的图层数据的第一位置信息。
相关技术中，参照图2、图3，在用户对被划分为多个页面子模板的页面模板进行编辑的过程中，通常采用插入或修改图片、文字等编辑方式处理页面子模板内的图层，可能导致实时渲染效果不佳，影响页面编辑的效率。在本申请实施例中，基于每个页面子模板在页面模板上的位置，在同一个视图容器渲染出所有页面子模板对应的图层数据，能够解决不同页面子模板之间的图层遮盖问题，提升了页面的实时渲染效果，同时减少了页面编辑过程中所需的调整操作，提高了页面编辑的效率。
作为本申请的一个实施例，所述确定至少两个页面子模板中每个页面子模板对应的第一信息时，所述方法包括：
在所述至少两个页面子模板在所述页面模板中依次竖向排布的情况下，基于第一页面子模板对应的高度和对应的第一偏移量，确定第二页面子模板对应的第一偏移量；所述第一偏移量为竖向偏移量；或者，
在所述至少两个页面子模板在所述页面模板中依次横向排布的情况下，基于第一页面子模板对应的宽度和对应的第二偏移量，确定第二页面子模板对应的第二偏移量；所述第一偏移量为横向偏移量。
在对页面模板划分为至少两个页面子模板时，可以按照竖向或横向进行区域划分，也就是说，至少两个页面子模板在页面模板的排布方式，可以是竖向排布或横向排布，并根据排布方式确定至少两个页面子模板中每个页面子模板对应的偏移量。
对于至少两个页面子模板在页面模板为竖向排布方式，至少两个页面子模板在页面模板中依次竖向排布，对于每个页面子模板，基于竖向相邻的页面子模板的高度和竖向偏移量，确定自身的竖向偏移量。通过竖向划分得到的多个页面子模板，通常在渲染页面视觉效果时也是以竖向排布的竖向渲染方式。
对于至少两个页面子模板在页面模板为横向排布方式，至少两个页面子模板在页面模板中依次横向排布，对于每个页面子模板，基于横向相邻的页面子模板的宽度和横向偏移量，确定自身的横向偏移量。同理，通过横向划分得到的多个页面子模板，通常在渲染页面视觉效果时也是以横向排布的横向渲染方式。
以竖向排布方式为例进行说明，第一个页面子模板的竖向偏移量为0，高度为200；与第一个页面子模板相邻的第二个页面子模板的竖向偏移量为200，高度为300；与第二个页面子模板相邻的第三个页面子模板的竖向偏移量为500，高度为250，以此类推。
根据设定的排布方式确定页面子模板在页面模板的位置，确定页面子模板的偏移量，这样，根据确定出的偏移量，可以在页面渲染时连续地渲染所有页面子模板，提升了页面的实时渲染效果。
设定视图容器是图层渲染最终载体，UI呈现的可视区域。作为本申请的一个实施例，在所述在设定视图容器的对应位置渲染出所述至少两个页面子模板中每个页面子模板对应的图层数据之前，所述方法还包括：
确定所述设定视图容器的尺寸。
确定页面模板的各图层渲染载体的视图容器尺寸，基于确定出的尺寸生成设定视图容器。这里，视图容器的可视区域的尺寸可以根据页面模板的尺寸确定，也可以根据具体业务场景需要确定。
作为本申请的一个实施例，所述设定视图容器的可视区域的高度大于或等于所述页面模板的高度；所述设定视图容器的可视区域的宽度大于或等于所述页面模板的宽度。
将设定视图容器的可视区域的高度确定为不小于页面模板的高度，将设定视图容器的可视区域的宽度确定为不小于页面模板的宽度。这样，在图片文件格式的页面模板中进行页面编辑，通过本申请实施例确定的设定视图容器的可视区域，能够完整地渲染出页面的视觉效果，提升了页面的实时渲染效果。
作为本申请的一个实施例，在所述至少两个页面子模板在所述页面模板中依次竖向排布的情况下，所述设定视图容器的高度为所述至少两个页面子模板中每个页面子模板的高度的累加值，且所述设定视图容器的宽度为所述至少两个页面子模板中页面子模板的宽度的最大值；或者，
在所述至少两个页面子模板在所述页面模板中依次横向排布的情况下，所述设定视图容器的高度为所述至少两个页面子模板中页面子模板的高度的最大值，且所述设定视图容器的宽度为所述至少两个页面子模板中每个页面子模板的宽度的累加值。在对页面模板划分为至少两个页面子模板时，可以按照竖向或横向进行区域划分，也就是说，至少两个页面子模板在页面模板的排布方式，可以是竖向排布或横向排布，并根据排布方式确定至少两个页面子模板中每个页面子模板对应的高度或宽度，进而确定设定视图容器的高度或宽度。
对于竖向排布方式，至少两个页面子模板在页面模板中依次竖向排布，确定设定视图容器的高度为划分得到的至少两个页面子模板的高度的累加值，且设定视图容器的宽度为至少两个页面子模板中页面子模板的宽度的最大值。
对于横向排布方式，至少两个页面子模板在页面模板中依次横向排布，确定设定视图容器的高度为至少两个页面子模板中页面子模板的高度的最大值，且设定视图容器的宽度为划分得到的至少两个页面子模板的宽度的累加值。
根据设定的排布方式确定设定视图容器的尺寸，在图片文件格式的页面模板中进行页面编辑，这样，通过本申请实施例确定的设定视图容器的可视区域，能够完整地渲染出页面的视觉效果，提升了页面的实时渲染效果。
实际应用时，可以通过模块化的软件架构对上述方案进行功能实现。图4为本申请应用实施例提供的一种页面渲染的软件架构示意图，如图4示出的，该软件架构至少包括共享生成器和编辑器生成器两大模块，其中：
共享生成器用于确定共享视图容器(也就是设定视图容器)的尺寸，并基于确定出的尺寸生成转发生成器、共享渲染器和共享视图容器这三个组件。
编辑器生成器，用于生成编辑器。生成的编辑器用于确定至少两个页面子模板中每个页面子模板对应的图层数据和编辑器上下文，并将图层数据和编辑器上下文传给对应的转发器。
这里，相较于相关技术，本申请实施例提供的编辑器增加一种入参：转发器，同时增加两种部件，包括：
渲染适配器，用于检测是否存在转发器，并根据是否存在转发器而对应执行相应的渲染逻辑。具体地，渲染适配器判断入参是否包括转发器，如果入参中存在转发器则执行转发执行器；入参中不存在转发器则执行原有的渲染逻辑；
转发执行器，用于执行转发器，并将图层数据、编辑器上下文传给转发器。
在进行页面渲染时：
转发生成器，用于确定至少两个页面子模板中每个页面子模板对应的偏移量，将每个页面子模板的偏移量设置于对应的转发器内。这里，转发器在页面渲染过程中，还会接收到编辑器传递的图层数据和编辑器上下文，并将转发器内的信息(也就是第一信息，包括编辑器传递的图层数据、编辑器上下文和/或转发器内的偏移量)发送到共享渲染器。
共享渲染器，用于基于转发器内的页面子模板对应的信息，确定每个图层在共享视图容器内的对应位置，在共享视图容器的对应位置渲染出至少两个页面子模板中每个页面子模板对应的图层数据。
共享视图容器，用于图层渲染的载体，渲染出至少两个页面子模板中每个页面子模板对应的图层数据。
基于图4示出的页面渲染的软件架构示例，可以实现页面渲染。具体地，参见图5示出的页面渲染的数据流示意图，包括：
将模板数据集分别传入共享生成器和编辑器生成器。
对于共享生成器，根据传入的模板数据集生成转发生成器、共享渲染器和共享视图容器。转发生成器生成相应的n个转发器，确定至少两个页面子模板中每个页面子模板对应的偏移量，并在生成的每个转发器内设置对应的页面子模板的偏移量。其中，转发器中还会有与模板数据集的模板关联的标识，例如模板ID，使编辑器生成器创建编辑器时能够获取到相应的转发器，创建相应的编辑器。
对于编辑器生成器，根据传入的模板数据集和相应的转发器，创建相应的n个编辑器。
由编辑器中的转发执行器将图层数据、编辑器上下文传给相应的转发器。利用转发器内部记录的需要转发的目标共享渲染器，转发器将接收的信息(图层数据、编辑器上下文)和偏移量(x，y)转发到共享渲染器。共享渲染器基于转发器的第一信息，在共享视图容器的对应位置渲染出图层数据，从而实现UI呈现。
图6可以更为直观地表现页面渲染过程，利用模板数据集生成n个转发器和n个编辑器，每个转发器内设置有对应的页面子模板的偏移量，由编辑器将图层数据(包括图层1、图层2、……、图层n)传给转发器，转发器再将信息转发到共享渲染器，从而实现UI呈现。
下面以实际应用中的页面渲染为例，对以竖向渲染方式的页面渲染过程进行说明，对于横向渲染方式的页面渲染过程可以对应设置。
1、将页面模板的页面子模板数据表(表1)、图层数据表(表2)作为模板数据集，传给共享生成器，得到：
a)共享视图容器，此时的共享视图容器的宽高为：宽度＝600，高度＝1200。
这里，确定共享视图容器的宽高时，共享视图容器的宽度或高度是取累加值还是取最大值，取决于使用业务场景。竖向渲染，高度取累加值，宽度取数据集的中的最大值；横向渲染，高度取数据集的中的最大值，宽度取累加值；如有其他场景，可根据需要设置。
b)转发生成器，转发生成器根据页面子模板数据表，生成相应数量的转发器：转发器1(id＝1，x＝0，y＝0，G)，转发器2(id＝2，x＝0，y＝100，G)，转发器3(id＝3，x＝0，y＝900，G)。
这里，结合表1对每个转发器内置的偏移量的计算过程进行说明。其中，竖向渲染的横向偏移量x始终为0，纵向偏移量y的计算过程如下：
1)为第1个页面子模板生成的转发器内置的纵向偏移量为y1＝0；
2)为第2个页面子模板生成的转发器内置偏的纵向移量为y2＝页面子模板1的高度+转发器1的偏移量y1；
3)为第n个页面子模板生成的转发器内置的纵向偏移量为yn＝模板n-1的高度+模板n-1的偏移量yn-1。
如果是横向渲染，纵向偏移量y始终为0，横向偏移量x计算规则与上述计算过程类似。
并且，偏移量是描述经过当前转发器转发后可以得到和业务场景匹配的偏移数值，偏移量的计算并不只有上述方式，在实现过程中可根据业务场景自定义。
这样，能够确定至少两个页面子模板中每个页面子模板对应的偏移量。
c)共享渲染器G。
接收转发器的信息，主要包含以下信息：图层数据表的图层数据、编辑器上下文、偏移量(x，y)。在渲染图层时，需要加上转发器内置的偏移量x和偏移量y的值得到渲染位置的坐标。
以竖向渲染图层2-2时，共享渲染器拿到转发器2(id＝2，x＝0，y＝100，G)的信息后，确定渲染的图层坐标(X’，Y’)为：X’＝300(300+0)，Y’＝800(700+100)。
表1页面子模板数据表
表2图层数据表
2、根据页面子模板数据表及根据ID关联出步骤1中生成的转发器，创建相应的编辑器1，编辑器2，编辑器3。
3、各个编辑器开始渲染图层，编辑器的渲染适配器检测到转发器的存在后，会执行转发器，并将图层数据、编辑器上下文信息传递给转发器，转发器将接收到的信息及自身信息发送到共享渲染器G。
4、共享渲染器G在接收到图层数据后，执行渲染逻辑，且根据渲染图层的坐标(X，Y)加上转发器转发过来的偏移量(x，y)得到(X’，Y’)。
5、共享渲染器G将渲染数据渲染到共享视图容器，完成渲染，
6、图层在响应用户交互或重绘过程，重复步骤3至6，渲染结果示例如下图7。
在本应用实施例中，通过共享渲染器及共享视图容器的方式，实现编辑器与渲染的解耦。并且，通过转发器及偏移量方式，在不影响现有图层数据结构的同时，实现图层的共享渲染。这样，在解决不同页面子模板之间的图层遮盖问题，提升了页面的实时渲染效果的同时，减少了页面编辑过程中所需的调整操作，提高了页面编辑的效率。并且，保证各个页面子模板图层数据的独立性，改造后交互数据不变，不影响上层应用交互。
为实现本申请实施例的方法，本申请实施例还提供了一种页面渲染装置，如图8所示，该装置包括：
第一处理单元801，用于确定至少两个页面子模板中每个页面子模板对应的第一信息；所述第一信息至少包括偏移量；所述至少两个页面子模板表征对图片文件格式的页面模板进行区域划分得到的页面子模板；所述偏移量用于标识对应的页面子模板在所述页面模板的位置；
渲染单元802，用于基于每个页面子模板对应的第一信息，在设定视图容器的对应位置渲染出所述至少两个页面子模板中每个页面子模板对应的图层数据。
其中，在一个实施例中，所述装置还包括：
第二处理单元，用于在所述渲染单元802在设定视图容器的对应位置渲染出所述至少两个页面子模板中每个页面子模板对应的图层数据之前，确定所述设定视图容器的尺寸。
在一个实施例中，所述设定视图容器的可视区域的高度大于或等于所述页面模板的高度；所述设定视图容器的可视区域的宽度大于或等于所述页面模板的宽度。
在一个实施例中，在所述至少两个页面子模板在所述页面模板中依次竖向排布的情况下，所述设定视图容器的高度为所述至少两个页面子模板中每个页面子模板的高度的累加值，且所述设定视图容器的宽度为所述至少两个页面子模板中页面子模板的宽度的最大值；或者，
在所述至少两个页面子模板在所述页面模板中依次横向排布的情况下，所述设定视图容器的高度为所述至少两个页面子模板中页面子模板的高度的最大值，且所述设定视图容器的宽度为所述至少两个页面子模板中每个页面子模板的宽度的累加值。
在一个实施例中，所述第一处理单元801，用于：
在所述至少两个页面子模板在所述页面模板中依次竖向排布的情况下，基于第一页面子模板对应的高度和对应的第一偏移量，确定第二页面子模板对应的第一偏移量；所述第一偏移量为竖向偏移量；或者，
在所述至少两个页面子模板在所述页面模板中依次横向排布的情况下，基于第一页面子模板对应的宽度和对应的第二偏移量，确定第二页面子模板对应的第二偏移量；所述第一偏移量为横向偏移量。
在一个实施例中，所述渲染单元802，用于：
基于页面子模板对应的偏移量和对应的图层数据的第一位置信息，在所述设定视图容器的对应位置渲染对应的图层数据；其中，
所述第一位置信息表征对应的图层数据在对应的页面子模板中的位置。
在一个实施例中，所述第一信息还包括页面子模板对应的上下文信息。
实际应用时，所述第一处理单元801、所述渲染单元802、所述第二处理单元可由基于页面渲染装置中的处理器，比如中央处理器(CPU，Central Processing Unit)、数字信号处理器(DSP，Digital Signal Processor)、微控制单元(MCU，Microcontroller Unit)或可编程门阵列(FPGA，Field－Programmable Gate Array)等实现。
需要说明的是：上述实施例提供的页面渲染装置在进行页面渲染时，仅以上述各程序模块的划分进行举例说明，实际应用中，可以根据需要而将上述处理分配由不同的程序模块完成，即将装置的内部结构划分成不同的程序模块，以完成以上描述的全部或者部分处理。另外，上述实施例提供的页面渲染装置与页面渲染方法实施例属于同一构思，其具体实现过程详见方法实施例，这里不再赘述。
基于上述程序模块的硬件实现，且为了实现本申请实施例页面渲染方法，本申请实施例还提供了一种电子设备。图9为本申请实施例电子设备的硬件组成结构示意图，如图9所示，电子设备包括：
通信接口1，能够与其它设备比如网络设备等进行信息交互；
处理器2，与通信接口1连接，以实现与其它设备进行信息交互，用于运行计算机程序时，执行上述一个或多个技术方案提供的方法。而所述计算机程序存储在存储器3上。
当然，实际应用时，电子设备中的各个组件通过总线系统4耦合在一起。可理解，总线系统4用于实现这些组件之间的连接通信。总线系统4除包括数据总线之外，还包括电源总线、控制总线和状态信号总线。但是为了清楚说明起见，在图9中将各种总线都标为总线系统4。
本申请实施例中的存储器3用于存储各种类型的数据以支持电子设备的操作。这些数据的示例包括：用于在电子设备上操作的任何计算机程序。
可以理解，存储器3可以是易失性存储器或非易失性存储器，也可包括易失性和非易失性存储器两者。其中，非易失性存储器可以是只读存储器(ROM，Read Only Memory)、可编程只读存储器(PROM，Programmable Read-Only Memory)、可擦除可编程只读存储器(EPROM，Erasable Programmable Read-Only Memory)、电可擦除可编程只读存储器(EEPROM，Electrically Erasable Programmable Read-Only Memory)、磁性随机存取存储器(FRAM，ferromagnetic random access memory)、快闪存储器(Flash Memory)、磁表面存储器、光盘、或只读光盘(CD-ROM，Compact Disc Read-Only Memory)；磁表面存储器可以是磁盘存储器或磁带存储器。易失性存储器可以是随机存取存储器(RAM，Random AccessMemory)，其用作外部高速缓存。通过示例性但不是限制性说明，许多形式的RAM可用，例如静态随机存取存储器(SRAM，Static Random Access Memory)、同步静态随机存取存储器(SSRAM，Synchronous Static Random Access Memory)、动态随机存取存储器(DRAM，Dynamic Random Access Memory)、同步动态随机存取存储器(SDRAM，SynchronousDynamic Random Access Memory)、双倍数据速率同步动态随机存取存储器(DDRSDRAM，Double Data Rate Synchronous Dynamic Random Access Memory)、增强型同步动态随机存取存储器(ESDRAM，Enhanced Synchronous Dynamic Random Access Memory)、同步连接动态随机存取存储器(SLDRAM，SyncLink Dynamic Random Access Memory)、直接内存总线随机存取存储器(DRRAM，Direct Rambus Random Access Memory)。本申请实施例描述的存储器2旨在包括但不限于这些和任意其它适合类型的存储器。
上述本申请实施例揭示的方法可以应用于处理器2中，或者由处理器2实现。处理器2可能是一种集成电路芯片，具有信号的处理能力。在实现过程中，上述方法的各步骤可以通过处理器2中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器2可以是通用处理器、DSP，或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。处理器2可以实现或者执行本申请实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者任何常规的处理器等。结合本申请实施例所公开的方法的步骤，可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于存储介质中，该存储介质位于存储器3，处理器2读取存储器3中的程序，结合其硬件完成前述方法的步骤。
处理器2执行所述程序时实现本申请实施例的各个方法中的相应流程，为了简洁，在此不再赘述。
在示例性实施例中，本申请实施例还提供了一种存储介质，即计算机存储介质，具体为计算机可读存储介质，例如包括存储计算机程序的存储器3，上述计算机程序可由处理器2执行，以完成前述方法所述步骤。计算机可读存储介质可以是FRAM、ROM、PROM、EPROM、EEPROM、Flash Memory、磁表面存储器、光盘、或CD-ROM等存储器。
在本申请所提供的几个实施例中，应该理解到，所揭露的装置、电子设备和方法，可以通过其它的方式实现。以上所描述的设备实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，如：多个单元或组件可以结合，或可以集成到另一个系统，或一些特征可以忽略，或不执行。另外，所显示或讨论的各组成部分相互之间的耦合、或直接耦合、或通信连接可以是通过一些接口，设备或单元的间接耦合或通信连接，可以是电性的、机械的或其它形式的。
上述作为分离部件说明的单元可以是、或也可以不是物理上分开的，作为单元显示的部件可以是、或也可以不是物理单元，即可以位于一个地方，也可以分布到多个网络单元上；可以根据实际的需要选择其中的部分或全部单元来实现本实施例方案的目的。
另外，在本申请各实施例中的各功能单元可以全部集成在一个处理单元中，也可以是各单元分别单独作为一个单元，也可以两个或两个以上单元集成在一个单元中；上述集成的单元既可以采用硬件的形式实现，也可以采用硬件加软件功能单元的形式实现。
本领域普通技术人员可以理解：实现上述方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成，前述的程序可以存储于一计算机可读取存储介质中，该程序在执行时，执行包括上述方法实施例的步骤；而前述的存储介质包括：移动存储设备、ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。
或者，本申请上述集成的单元如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请实施例的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机、服务器、或网络设备等)执行本申请各个实施例所述方法的全部或部分。而前述的存储介质包括：移动存储设备、ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。
可以理解的是，在本申请实施例中，涉及到用户信息，如图像内容的人脸信息等相关的数据，当本申请实施例运用到具体产品或技术中时，需要获得用户许可或者同意，且相关数据的收集、使用和处理需要遵守相关国家和地区的相关法律法规和标准。
需要说明的是，本申请实施例所记载的技术方案之间，在不冲突的情况下，可以任意组合。除非另有说明和限定，术语“连接”应做广义理解，例如，可以是电连接，也可以是两个元件内部的连通，可以是直接相连，也可以通过中间媒介间接相连，对于本领域的普通技术人员而言，可以根据具体情况理解上述术语的具体含义。
另外，在本申请实例中，“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解“第一\第二\第三”区分的对象在适当情况下可以互换，以使这里描述的本申请的实施例可以除了在这里图示或描述的那些以外的顺序实施。
本文中术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中术语“至少一个”表示多个中的任意一个或多个中的至少两个的任意组合，例如，包括A、B、C中的至少一个，可以表示包括从A、B和C构成的集合中选择的任意一个或多个元素。
以上所述，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以所述权利要求的保护范围为准。
在具体实施方式中所描述的各个实施例中的各个具体技术特征，在不矛盾的情况下，可以进行各种组合，例如通过不同的具体技术特征的组合可以形成不同的实施方式，为了避免不必要的重复，本申请中各个具体技术特征的各种可能的组合方式不再另行说明。
Claims (10)
1.一种页面渲染方法，其特征在于，所述方法包括：
确定至少两个页面子模板中每个页面子模板对应的第一信息；所述第一信息至少包括偏移量；所述至少两个页面子模板表征对图片文件格式的页面模板进行区域划分得到的页面子模板；所述偏移量用于标识对应的页面子模板在所述页面模板的位置；
基于每个页面子模板对应的第一信息，在设定视图容器的对应位置渲染出所述至少两个页面子模板中每个页面子模板对应的图层数据。
2.根据权利要求1所述的方法，其特征在于，在所述在设定视图容器的对应位置渲染出所述至少两个页面子模板中每个页面子模板对应的图层数据之前，所述方法还包括：
确定所述设定视图容器的尺寸。
3.根据权利要求2所述的方法，其特征在于，所述设定视图容器的可视区域的高度大于或等于所述页面模板的高度；所述设定视图容器的可视区域的宽度大于或等于所述页面模板的宽度。
4.根据权利要求2所述的方法，其特征在于，
在所述至少两个页面子模板在所述页面模板中依次竖向排布的情况下，所述设定视图容器的高度为所述至少两个页面子模板中每个页面子模板的高度的累加值，且所述设定视图容器的宽度为所述至少两个页面子模板中页面子模板的宽度的最大值；或者，
在所述至少两个页面子模板在所述页面模板中依次横向排布的情况下，所述设定视图容器的高度为所述至少两个页面子模板中页面子模板的高度的最大值，且所述设定视图容器的宽度为所述至少两个页面子模板中每个页面子模板的宽度的累加值。
5.根据权利要求1所述的方法，其特征在于，所述确定至少两个页面子模板中每个页面子模板对应的第一信息时，所述方法包括：
在所述至少两个页面子模板在所述页面模板中依次竖向排布的情况下，基于第一页面子模板对应的高度和对应的第一偏移量，确定第二页面子模板对应的第一偏移量；所述第一偏移量为竖向偏移量；或者，
在所述至少两个页面子模板在所述页面模板中依次横向排布的情况下，基于第一页面子模板对应的宽度和对应的第二偏移量，确定第二页面子模板对应的第二偏移量；所述第一偏移量为横向偏移量。
6.根据权利要求1所述的方法，其特征在于，所述基于每个页面子模板对应的第一信息，在设定视图容器的对应位置渲染出所述至少两个页面子模板中每个页面子模板对应的图层数据时，所述方法包括：
基于页面子模板对应的偏移量和对应的图层数据的第一位置信息，在所述设定视图容器的对应位置渲染对应的图层数据；其中，
所述第一位置信息表征对应的图层数据在对应的页面子模板中的位置。
7.根据权利要求1所述的方法，其特征在于，所述第一信息还包括页面子模板对应的上下文信息。
8.一种页面渲染装置，其特征在于，包括：
第一处理单元，用于确定至少两个页面子模板中每个页面子模板对应的第一信息；所述第一信息至少包括偏移量；所述至少两个页面子模板表征对图片文件格式的页面模板进行区域划分得到的页面子模板；所述偏移量用于标识对应的页面子模板在所述页面模板的位置；
渲染单元，用于基于每个页面子模板对应的第一信息，在设定视图容器的对应位置渲染出所述至少两个页面子模板中每个页面子模板对应的图层数据。
9.一种电子设备，其特征在于，包括：处理器和用于存储能够在处理器上运行的计算机程序的存储器，
其中，所述处理器用于运行所述计算机程序时，执行权利要求1至7任一项所述方法的步骤。
10.一种存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至7任一项所述方法的步骤。
Priority Applications (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210418965.7A CN114611047A (zh) | 2022-04-20 | 2022-04-20 | 页面渲染方法、装置、电子设备及存储介质 |
| PCT/CN2023/087298 WO2023202403A1 (zh) | 2022-04-20 | 2023-04-10 | 页面渲染方法、装置、电子设备及计算机可读存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210418965.7A CN114611047A (zh) | 2022-04-20 | 2022-04-20 | 页面渲染方法、装置、电子设备及存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114611047A true CN114611047A (zh) | 2022-06-10 |
Family
ID=81869207
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210418965.7A Pending CN114611047A (zh) | 2022-04-20 | 2022-04-20 | 页面渲染方法、装置、电子设备及存储介质 |
Country Status (2)
| Country | Link |
|---|---|
| CN (1) | CN114611047A (zh) |
| WO (1) | WO2023202403A1 (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2023202403A1 (zh) * | 2022-04-20 | 2023-10-26 | 北京沃东天骏信息技术有限公司 | 页面渲染方法、装置、电子设备及计算机可读存储介质 |
Family Cites Families (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP6274962B2 (ja) * | 2014-04-25 | 2018-02-07 | 株式会社スクウェア・エニックス | 情報処理装置、制御方法、プログラム及び記録媒体 |
| CN105868201B (zh) * | 2015-01-20 | 2020-01-03 | 阿里巴巴集团控股有限公司 | 页面生成方法及装置 |
| CN106156148B (zh) * | 2015-04-14 | 2020-08-21 | 腾讯科技（深圳）有限公司 | 一种页面的渲染方法、装置和终端设备 |
| CN114168696A (zh) * | 2021-11-30 | 2022-03-11 | 完美世界(北京)软件科技发展有限公司 | 地格划分、地格渲染方法、装置、设备及可读介质 |
| CN114611047A (zh) * | 2022-04-20 | 2022-06-10 | 北京沃东天骏信息技术有限公司 | 页面渲染方法、装置、电子设备及存储介质 |
-
2022
- 2022-04-20 CN CN202210418965.7A patent/CN114611047A/zh active Pending
-
2023
- 2023-04-10 WO PCT/CN2023/087298 patent/WO2023202403A1/zh unknown
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2023202403A1 (zh) * | 2022-04-20 | 2023-10-26 | 北京沃东天骏信息技术有限公司 | 页面渲染方法、装置、电子设备及计算机可读存储介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| WO2023202403A1 (zh) | 2023-10-26 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US20180113997A1 (en) | Image processing method, image processing system, recording medium storing program | |
| CN104978750B (zh) | 用于处理视频文件的方法和装置 | |
| CN111880752B (zh) | 印章打印方法、装置、电子设备及存储介质 | |
| US11818323B2 (en) | Image generation system, method for generating a virtual viewpoint image, and storage medium | |
| CN114611047A (zh) | 页面渲染方法、装置、电子设备及存储介质 | |
| CN108462893A (zh) | 一种弹幕的显示方法、装置、终端和存储介质 | |
| KR101616671B1 (ko) | 인터넷 만화 컨텐츠의 유통을 위한 방법과 시스템 및 기록 매체 | |
| CN102929934A (zh) | 照片信息显示的方法及移动终端 | |
| US7898552B2 (en) | Method and editing processor for adding graphics object with simple manner | |
| CN108055594A (zh) | 边缘切片的实现方法、装置、计算机设备及存储介质 | |
| US20150058948A1 (en) | Content sharing system, content sharing method, and information communication apparatus | |
| CN104424646A (zh) | 图像处理设备和控制方法 | |
| CN116342880A (zh) | 对视频进行关键内容分割的方法及电子设备 | |
| CN108683931A (zh) | 一种多媒体播放方法和系统、存储介质 | |
| CN117319736A (zh) | 视频处理方法、装置、电子设备及存储介质 | |
| CN107071589A (zh) | 共享图像数据的分享方法和图像数据服务器 | |
| CN111711800A (zh) | 拼接显示屏的图像处理方法、装置及存储介质 | |
| CN110807301B (zh) | 一种文档编辑的方法、装置、计算机存储介质及终端 | |
| CN116866545B (zh) | 摄像头模组的映射关系调整方法、设备及存储介质 | |
| CN112837211B (zh) | 一种图片处理方法、装置、电子设备及可读存储介质 | |
| CN117827416A (zh) | 视频的多进程处理方法、装置、计算机设备和存储介质 | |
| CN117973327A (zh) | 在线协同编辑文档的方法及通信系统 | |
| JP6370857B2 (ja) | データ保管装置及びデータ保管プログラム | |
| CN112788633A (zh) | 一种通信优化方法及装置 | |
| CN118798128A (zh) | 一种文档布局方法以及装置 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |