Page rendering method and device, electronic equipment and storage medium

Abstract

The application discloses a page rendering method and device, electronic equipment and a storage medium, wherein the method comprises: determining first information corresponding to each page sub-template in at least two page sub-templates; the first information at least comprises an offset; the at least two page sub-templates represent page sub-templates obtained by dividing a page template in picture file format into regions; the offset is used to identify the position of the corresponding page sub-template in the page template; based on the first information corresponding to each page sub-template, layer data corresponding to each page sub-template in the at least two page sub-templates is rendered at the corresponding position of a set view container.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a page rendering method, apparatus, electronic device, and storage medium. Background Technology

[0002] In front-end business development, users edit pages within image file format templates, with the editing view rendering the page's visual effects in real time. However, in complex business development scenarios, the real-time rendering of the page during editing is limited, often impacting the efficiency of page editing. Summary of the Invention

[0003] In view of this, embodiments of this application provide a page rendering method, apparatus, electronic device, and storage medium to at least solve the problem of low efficiency in image generation in related technologies.

[0004] The technical solution of this application embodiment is implemented as follows:

[0005] This application provides a page rendering method, the method including:

[0006] First information corresponding to each page sub-template in at least two page sub-templates is determined; the first information includes at least an offset; the at least two page sub-templates represent page sub-templates obtained by dividing a page template in image file format into regions; the offset is used to identify the position of the corresponding page sub-template in the page template;

[0007] Based on the first information corresponding to each page sub-template, the layer data corresponding to each of the at least two page sub-templates is rendered at the corresponding position of the set view container.

[0008] In the above scheme, before rendering the layer data corresponding to each of the at least two page sub-templates at the corresponding position of the set view container, the method further includes:

[0009] Determine the size of the set view container.

[0010] In the above scheme, the height of the visible area of ​​the set view container is greater than or equal to the height of the page template; the width of the visible area of ​​the set view container is greater than or equal to the width of the page template.

[0011] In the above scheme, when the at least two page sub-templates are arranged vertically in sequence within the page template, the height of the set view container is the sum of the heights of each of the at least two page sub-templates, and the width of the set view container is the maximum width of the page sub-templates among the at least two page sub-templates; or,

[0012] When the at least two page sub-templates are arranged horizontally in sequence within the page template, the height of the set view container is the maximum height of the page sub-templates among the at least two page sub-templates, and the width of the set view container is the sum of the widths of each page sub-template among the at least two page sub-templates.

[0013] In the above scheme, when determining the first information corresponding to each page sub-template in at least two page sub-templates, the method includes:

[0014] When at least two page sub-templates are arranged vertically in sequence within the page template, the first offset of the second page sub-template is determined based on the height and first offset of the first page sub-template; the first offset is a vertical offset; or,

[0015] When at least two page sub-templates are arranged horizontally in sequence in the page template, the second offset corresponding to the second page sub-template is determined based on the width corresponding to the first page sub-template and the corresponding second offset; the first offset is a horizontal offset.

[0016] In the above scheme, when rendering the layer data corresponding to each of the at least two page sub-templates at the corresponding position of the set view container based on the first information corresponding to each page sub-template, the method includes:

[0017] Based on the offset corresponding to the page sub-template and the first position information of the corresponding layer data, the corresponding layer data is rendered at the corresponding position in the set view container; wherein,

[0018] The first location information represents the position of the corresponding layer data in the corresponding page sub-template.

[0019] In the above scheme, the first information also includes the context information corresponding to the page sub-template.

[0020] This application also provides a page rendering apparatus, including:

[0021] A first processing unit is configured to determine first information corresponding to each page sub-template in at least two page sub-templates; the first information includes at least an offset; the at least two page sub-templates represent page sub-templates obtained by dividing a page template in image file format into regions; the offset is used to identify the position of the corresponding page sub-template in the page template;

[0022] The rendering unit is used to render the layer data corresponding to each of the at least two page sub-templates at the corresponding position of the set view container based on the first information corresponding to each page sub-template.

[0023] This application also provides an electronic device, including: a processor and a memory for storing a computer program capable of running on the processor.

[0024] The processor is used to execute the steps of the above-described page rendering method when running the computer program.

[0025] This application also provides a storage medium storing a computer program thereon, which, when executed by a processor, implements the steps of the above-described page rendering method.

[0026] This application provides a page rendering method, apparatus, electronic device, and storage medium. A page template in image file format is divided into at least two page sub-templates. During page editing using the image file format page templates, first information, including at least an offset, is determined for each page sub-template. Based on this first information, the layer data of each page sub-template is rendered at the corresponding position within a defined view container, resulting in a rendering result for the page sub-template. This approach, by rendering the layer data of all page sub-templates within a single defined view container based on the position of each page sub-template on the page template, solves the layer occlusion problem between different page sub-templates, improves the real-time rendering effect of the page, reduces the adjustment operations required during page editing, and increases the efficiency of page editing. Attached Figure Description

[0027] Figure 1 This is a schematic diagram illustrating the implementation process of the page rendering method provided in the embodiments of this application;

[0028] Figure 2 A diagram illustrating the division of page templates for related technologies;

[0029] Figure 3 A diagram illustrating the real-time rendering effect of related technologies on a webpage.

[0030] Figure 4 A schematic diagram of the software architecture for page rendering provided in the application embodiments of this application;

[0031] Figure 5 A schematic diagram illustrating the implementation of the page rendering method provided in the application embodiments of this application;

[0032] Figure 6 A schematic diagram illustrating the implementation of the page rendering method provided in the application embodiments of this application;

[0033] Figure 7A schematic diagram of the rendering results provided for an application embodiment of this application;

[0034] Figure 8 This is a schematic diagram of the structure of the page rendering apparatus provided in the embodiments of this application;

[0035] Figure 9 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application. Detailed Implementation

[0036] In various embodiments of this application, a page template in image file format is divided into regions to obtain at least two page sub-templates. During the page editing process of the image file format page template, first information, including at least an offset, is determined for each page sub-template. Based on the first information, the layer data of each page sub-template is rendered at the corresponding position in a set view container to obtain the rendering result of the page sub-template. In this way, based on the positions of at least two page sub-templates on the page template, the layer data corresponding to all page sub-templates are rendered in a set view container, which can solve the layer occlusion problem between different page sub-templates, improve the real-time rendering effect of the page, and reduce the adjustment operations required during the page editing process, thereby improving the efficiency of page editing.

[0037] To make the objectives, technical solutions, and advantages of this application clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this application.

[0038] Figure 1 This is a schematic diagram illustrating the implementation flow of the page rendering method provided in this application embodiment. This application embodiment provides a page rendering method applied to electronic devices, wherein the electronic devices include, but are not limited to, servers, terminals, and other electronic devices. It includes:

[0039] Step 101: Determine the first information corresponding to each page sub-template in at least two page sub-templates.

[0040] Wherein, the first information includes at least an offset; the at least two page sub-templates represent page sub-templates obtained by dividing the page template in image file format into regions; the offset is used to identify the position of the corresponding page sub-template in the page template.

[0041] During front-end development, the design draft file is used as a page template. The page template is then divided into regions based on its corresponding image areas, resulting in at least two sub-page templates. From these two sub-page templates, at least two more sub-page templates are selected. The design draft file can be an image file format such as PSD.

[0042] The page template is divided into some or all of the page sub-templates as the page sub-templates to be rendered. The determined page sub-templates are given corresponding first information, which represents the information required to render the corresponding page sub-templates in the set view container.

[0043] Here, the first information corresponding to the page sub-template includes at least the offset. The offset can be determined based on the position of the corresponding page sub-template in the page template. The position of the page sub-template in the page template can be described by the coordinates of the page sub-template in the coordinate system constructed by the page template.

[0044] As an embodiment of this application, the first information also includes context information corresponding to the page sub-template.

[0045] For each page sub-template, determine the corresponding context information, and configure the corresponding editor for the page sub-template based on the context information, so as to render the corresponding page sub-template in the set view container.

[0046] Step 102: Based on the first information corresponding to each page sub-template, render the layer data corresponding to each of the at least two page sub-templates at the corresponding position of the set view container.

[0047] Based on the first information corresponding to each page sub-template, the layer data of at least two page sub-templates are rendered in the corresponding positions within the same defined view container. In other words, the layer data of at least two page sub-templates are rendered in the same view container. Here, based on the offset of each page sub-template in the at least two page sub-templates, the positional differences between different page sub-templates within the page template are determined, establishing the correspondence between the page template coordinate system and the defined view container coordinate system, thereby determining the corresponding position of the layer data of each page sub-template within the same defined view container.

[0048] As an embodiment of this application, when rendering the layer data corresponding to each of the at least two page sub-templates at the corresponding position of a set view container based on the first information corresponding to each page sub-template, the method includes:

[0049] Based on the offset corresponding to the page sub-template and the first position information of the corresponding layer data, the corresponding layer data is rendered at the corresponding position in the set view container; wherein,

[0050] The first location information represents the position of the corresponding layer data in the corresponding page sub-template.

[0051] Based on the offset of the page sub-template corresponding to the identifier within the page template, and the first position information of the layer data corresponding to the identifier within the corresponding page sub-template, the position of the layer data within the page template is determined. Then, according to the correspondence between the page template coordinate system and the set view container coordinate system, the corresponding layer data is rendered at the corresponding position within the set view container. Here, the first information may include the first position information of the layer data corresponding to the page sub-template.

[0052] In related technologies, refer to Figure 2 , Figure 3 When users edit a page template divided into multiple sub-templates, they typically use methods such as inserting or modifying images and text to handle layers within the sub-templates. This can lead to poor real-time rendering and affect the efficiency of page editing. In this embodiment, based on the position of each sub-template on the page template, the layer data corresponding to all sub-templates is rendered in the same view container. This solves the layer occlusion problem between different sub-templates, improves the real-time rendering effect of the page, reduces the adjustment operations required during page editing, and increases the efficiency of page editing.

[0053] As an embodiment of this application, when determining the first information corresponding to each page sub-template in at least two page sub-templates, the method includes:

[0054] When at least two page sub-templates are arranged vertically in sequence within the page template, the first offset of the second page sub-template is determined based on the height and first offset of the first page sub-template; the first offset is a vertical offset; or,

[0055] When at least two page sub-templates are arranged horizontally in sequence in the page template, the second offset corresponding to the second page sub-template is determined based on the width corresponding to the first page sub-template and the corresponding second offset; the first offset is a horizontal offset.

[0056] When dividing a page template into at least two page sub-templates, the area can be divided vertically or horizontally. That is, the arrangement of the at least two page sub-templates in the page template can be vertical or horizontal, and the offset of each page sub-template in the at least two page sub-templates is determined according to the arrangement.

[0057] For at least two page sub-templates arranged vertically within a page template, and for each page sub-template, its own vertical offset is determined based on the height and vertical offset of its vertically adjacent page sub-templates. Multiple page sub-templates obtained through vertical division are typically rendered using a vertically arranged, vertically rendered layout when rendering the page's visual effects.

[0058] For at least two page sub-templates arranged horizontally within a page template, and for each page sub-template, its own horizontal offset is determined based on the width and horizontal offset of its horizontally adjacent page sub-templates. Similarly, multiple page sub-templates obtained through horizontal division are typically rendered in a horizontally arranged manner when rendering the page's visual effect.

[0059] Taking the vertical layout as an example, the vertical offset of the first page sub-template is 0, and the height is 200; the vertical offset of the second page sub-template adjacent to the first page sub-template is 200, and the height is 300; the vertical offset of the third page sub-template adjacent to the second page sub-template is 500, and the height is 250, and so on.

[0060] The position of the page sub-templates within the page template is determined based on the set layout, and the offset of the page sub-templates is determined. In this way, based on the determined offset, all page sub-templates can be rendered continuously during page rendering, improving the real-time rendering effect of the page.

[0061] The view container is defined as the final carrier for layer rendering and the visible area presented by the UI. As an embodiment of this application, before rendering the layer data corresponding to each of the at least two page sub-templates at the corresponding position of the defined view container, the method further includes:

[0062] Determine the size of the set view container.

[0063] Determine the view container size for each layer rendering carrier of the page template, and generate the specified view container based on the determined size. Here, the size of the visible area of ​​the view container can be determined based on the size of the page template, or it can be determined according to the specific business scenario requirements.

[0064] As an embodiment of this application, the height of the visible area of ​​the set view container is greater than or equal to the height of the page template; the width of the visible area of ​​the set view container is greater than or equal to the width of the page template.

[0065] The height of the visible area of ​​the view container is set to be no less than the height of the page template, and the width of the visible area of ​​the view container is set to be no less than the width of the page template. In this way, when editing a page within an image file format page template, the visible area of ​​the view container, determined by the embodiments of this application, can fully render the visual effect of the page, improving the real-time rendering effect of the page.

[0066] As an embodiment of this application, when the at least two page sub-templates are arranged vertically in sequence within the page template, the height of the set view container is the sum of the heights of each of the at least two page sub-templates, and the width of the set view container is the maximum width of the page sub-templates among the at least two page sub-templates; or,

[0067] When at least two page sub-templates are arranged horizontally sequentially within the page template, the height of the set view container is the maximum height of the page sub-templates among the at least two page sub-templates, and the width of the set view container is the sum of the widths of each page sub-template among the at least two page sub-templates. When dividing the page template into at least two page sub-templates, the area can be divided vertically or horizontally. That is, the arrangement of the at least two page sub-templates within the page template can be vertical or horizontal, and the height or width of each page sub-template within the at least two page sub-templates is determined according to the arrangement method, thereby determining the height or width of the set view container.

[0068] For the vertical layout, at least two page sub-templates are arranged vertically in sequence within the page template. The height of the view container is determined to be the sum of the heights of the at least two page sub-templates, and the width of the view container is determined to be the maximum width of the page sub-templates among the at least two page sub-templates.

[0069] For the horizontal layout, at least two page sub-templates are arranged horizontally in sequence within the page template. The height of the view container is set to the maximum height of the page sub-templates among the at least two page sub-templates, and the width of the view container is set to the sum of the widths of the at least two page sub-templates obtained from the division.

[0070] The size of the set view container is determined according to the set layout, and the page is edited in the page template in image file format. In this way, the visible area of ​​the set view container determined by the embodiment of this application can fully render the visual effect of the page, and improve the real-time rendering effect of the page.

[0071] In practical applications, the above solutions can be implemented using a modular software architecture. Figure 4A schematic diagram of a page rendering software architecture is provided for an application embodiment of this application, such as... Figure 4 As shown, the software architecture includes at least two main modules: a shared generator and an editor generator.

[0072] The shared generator is used to determine the size of the shared view container (that is, to set the size of the view container), and to generate three components based on the determined size: the forward generator, the shared renderer, and the shared view container.

[0073] An editor generator is used to generate an editor. The generated editor determines the layer data and editor context for each page sub-template in at least two page sub-templates and passes the layer data and editor context to the corresponding relayer.

[0074] Here, compared to related technologies, the editor provided in this application embodiment adds an input parameter: a repeater, and also adds two components, including:

[0075] The rendering adapter is used to detect the presence of a repeater and execute the corresponding rendering logic based on its presence. Specifically, the rendering adapter determines whether the input parameters include a repeater. If a repeater exists in the input parameters, the repeater is executed; otherwise, the original rendering logic is executed.

[0076] The forwarding executor is used to execute the forwarder and pass layer data and editor context to the forwarder.

[0077] During page rendering:

[0078] The forward generator is used to determine the offset corresponding to each page sub-template in at least two page sub-templates, and sets the offset of each page sub-template in the corresponding forwarder. Here, during the page rendering process, the forwarder also receives layer data and editor context passed by the editor, and sends the information in the forwarder (that is, the first information, including the layer data passed by the editor, the editor context, and / or the offset in the forwarder) to the shared renderer.

[0079] The shared renderer is used to determine the corresponding position of each layer in the shared view container based on the information corresponding to the page sub-templates in the forwarder, and render the layer data corresponding to each page sub-template in at least two page sub-templates at the corresponding position in the shared view container.

[0080] A shared view container, used as a carrier for layer rendering, rendering the layer data corresponding to each of the at least two page sub-templates.

[0081] based on Figure 4 The illustrated software architecture example for page rendering demonstrates how page rendering can be implemented. See [link to documentation] for details. Figure 5 The illustrated data flow diagram for page rendering includes:

[0082] Pass the template dataset to the shared generator and the editor generator respectively.

[0083] For the shared generator, a forwarding generator, a shared renderer, and a shared view container are generated based on the input template dataset. The forwarding generator generates n forwarders, determines the offset of each page sub-template in at least two page sub-templates, and sets the corresponding page sub-template offset within each generated forwarder. The forwarders also contain an identifier associated with the templates in the template dataset, such as a template ID, enabling the editor generator to obtain the corresponding forwarder and create the appropriate editor when creating an editor.

[0084] For the editor generator, based on the input template dataset and the corresponding forwarder, create n editors.

[0085] The forwarding executor in the editor passes the layer data and editor context to the corresponding forwarder. Using the target shared renderer recorded internally by the forwarder, the forwarder forwards the received information (layer data, editor context) and offset (x, y) to the shared renderer. Based on the first information from the forwarder, the shared renderer renders the layer data at the corresponding position in the shared view container, thus realizing the UI presentation.

[0086] Figure 6 It can more intuitively represent the page rendering process. It uses a template dataset to generate n forwarders and n editors. Each forwarder is set with the offset of the corresponding page sub-template. The editor sends the layer data (including layer 1, layer 2, ..., layer n) to the forwarder, and the forwarder then forwards the information to the shared renderer, thereby realizing the UI presentation.

[0087] The following uses page rendering in a practical application as an example to explain the page rendering process in vertical rendering mode. The page rendering process in horizontal rendering mode can be set accordingly.

[0088] 1. Pass the page sub-template data table (Table 1) and layer data table (Table 2) of the page template as a template dataset to the shared generator to obtain:

[0089] a) Shared view container, where the width and height of the shared view container are: width = 600, height = 1200.

[0090] Here, when determining the width and height of the shared view container, whether to take the summation value or the maximum value depends on the business scenario. For vertical rendering, the height is taken as the summation value, and the width is taken as the maximum value in the dataset; for horizontal rendering, the height is taken as the maximum value in the dataset, and the width is taken as the summation value; for other scenarios, you can set it as needed.

[0091] b) Forwarding generator: Based on the page sub-template data table, the forwarding generator generates a corresponding number of forwarders: forwarder 1 (id=1, x=0, y=0, G), forwarder 2 (id=2, x=0, y=100, G), forwarder 3 (id=3, x=0, y=900, G).

[0092] Here, the calculation process of the built-in offset for each transponder is explained with reference to Table 1. Specifically, the horizontal offset x for vertical rendering is always 0, and the calculation process for the vertical offset y is as follows:

[0093] 1) The vertical offset built into the forwarder generated for the first page sub-template is y1 = 0;

[0094] 2) The vertical displacement of the forwarder built-in offset generated for the second page sub-template is y2 = height of page sub-template 1 + offset y1 of forwarder 1;

[0095] 3) The vertical offset built into the repeater generated for the nth page sub-template is y. n = Height of template n-1 + Offset y of template n-1 n-1 .

[0096] If it is horizontal rendering, the vertical offset y is always 0, and the calculation rule for the horizontal offset x is similar to the calculation process described above.

[0097] Furthermore, the offset describes the offset value that can be obtained after forwarding by the current repeater and matches the business scenario. The calculation of the offset is not limited to the above methods, and can be customized according to the business scenario during the implementation process.

[0098] This allows us to determine the offset of each page sub-template in at least two page sub-templates.

[0099] c) Shared renderer G.

[0100] The information received from the transponder mainly includes the following: layer data from the layer data table, editor context, and offset (x, y). When rendering the layer, the offset x and offset y values ​​built into the transponder need to be added to obtain the coordinates of the rendering position.

[0101] When rendering layer 2-2 vertically, after the shared renderer receives the information from repeater 2 (id=2, x=0, y=100, G), it determines the coordinates (X', Y') of the rendered layer as: X'=300(300+0), Y'=800(700+100).

[0102] Table 1 Page Sub-template Data Table

[0103]

[0104] Table 2 Layer Data Table

[0105]

[0106] 2. Based on the page sub-template data table and the forwarder generated in step 1 associated with the ID, create the corresponding editor 1, editor 2, and editor 3.

[0107] 3. Each editor begins rendering layers. After the editor's rendering adapter detects the existence of the repeater, it will execute the repeater and pass the layer data and editor context information to the repeater. The repeater will then send the received information and its own information to the shared renderer G.

[0108] 4. After receiving the layer data, the shared renderer G executes the rendering logic and obtains (X', Y') by adding the offset (x, y) forwarded by the repeater to the coordinates (X, Y) of the rendered layer.

[0109] 5. The shared renderer G renders the data to the shared view container, completing the rendering process.

[0110] 6. When the layer responds to user interaction or is redrawn, repeat steps 3 to 6. An example of the rendering result is shown below. Figure 7 .

[0111] In this application embodiment, the editor and rendering are decoupled by sharing a renderer and a view container. Furthermore, shared rendering of layers is achieved through repeaters and offsets without affecting the existing layer data structure. This solves the layer occlusion problem between different page sub-templates, improves the real-time rendering effect of the page, reduces the adjustment operations required during page editing, and improves the efficiency of page editing. Moreover, it ensures the independence of the layer data of each page sub-template, so the interactive data remains unchanged after the modification and does not affect the interaction of the upper-layer application.

[0112] To implement the method of the embodiments of this application, the embodiments of this application also provide a page rendering apparatus, such as... Figure 8 As shown, the device includes:

[0113] The first processing unit 801 is configured to determine first information corresponding to each page sub-template in at least two page sub-templates; the first information includes at least an offset; the at least two page sub-templates represent page sub-templates obtained by dividing a page template in image file format into regions; the offset is used to identify the position of the corresponding page sub-template in the page template;

[0114] The rendering unit 802 is used to render the layer data corresponding to each of the at least two page sub-templates at the corresponding position of the set view container based on the first information corresponding to each page sub-template.

[0115] In one embodiment, the device further includes:

[0116] The second processing unit is used to determine the size of the set view container before the rendering unit 802 renders the layer data corresponding to each of the at least two page sub-templates at the corresponding position of the set view container.

[0117] In one embodiment, the height of the visible area of ​​the set view container is greater than or equal to the height of the page template; the width of the visible area of ​​the set view container is greater than or equal to the width of the page template.

[0118] In one embodiment, when the at least two page sub-templates are arranged vertically in sequence within the page template, the height of the set view container is the sum of the heights of each of the at least two page sub-templates, and the width of the set view container is the maximum width of the page sub-templates among the at least two page sub-templates; or,

[0119] When the at least two page sub-templates are arranged horizontally in sequence within the page template, the height of the set view container is the maximum height of the page sub-templates among the at least two page sub-templates, and the width of the set view container is the sum of the widths of each page sub-template among the at least two page sub-templates.

[0120] In one embodiment, the first processing unit 801 is configured to:

[0121] When at least two page sub-templates are arranged vertically in sequence within the page template, the first offset of the second page sub-template is determined based on the height and first offset of the first page sub-template; the first offset is a vertical offset; or,

[0122] When at least two page sub-templates are arranged horizontally in sequence in the page template, the second offset corresponding to the second page sub-template is determined based on the width corresponding to the first page sub-template and the corresponding second offset; the first offset is a horizontal offset.

[0123] In one embodiment, the rendering unit 802 is used for:

[0124] Based on the offset corresponding to the page sub-template and the first position information of the corresponding layer data, the corresponding layer data is rendered at the corresponding position in the set view container; wherein,

[0125] The first location information represents the position of the corresponding layer data in the corresponding page sub-template.

[0126] In one embodiment, the first information may further include context information corresponding to the page sub-template.

[0127] In practical applications, the first processing unit 801, the rendering unit 802, and the second processing unit can be implemented by processors in the page rendering device, such as central processing units (CPUs), digital signal processors (DSPs), microcontroller units (MCUs), or field-programmable gate arrays (FPGAs).

[0128] It should be noted that the page rendering apparatus provided in the above embodiments is only illustrated by the division of the above program modules. In practical applications, the above processing can be assigned to different program modules as needed, that is, the internal structure of the apparatus can be divided into different program modules to complete all or part of the processing described above. In addition, the page rendering apparatus and page rendering method embodiments provided in the above embodiments belong to the same concept, and their specific implementation process can be found in the method embodiments, which will not be repeated here.

[0129] Based on the hardware implementation of the above program modules, and in order to implement the page rendering method of the embodiments of this application, the embodiments of this application also provide an electronic device. Figure 9 This is a schematic diagram of the hardware structure of the electronic device according to an embodiment of this application, as shown below. Figure 9 As shown, the electronic device includes:

[0130] Communication interface 1 enables information exchange with other devices, such as network devices;

[0131] Processor 2 is connected to communication interface 1 to enable information interaction with other devices and to execute the methods provided by one or more of the above-mentioned technical solutions when running computer programs. The computer program is stored in memory 3.

[0132] Of course, in practical applications, the various components in an electronic device are coupled together through bus system 4. It can be understood that bus system 4 is used to achieve communication and connection between these components. In addition to the data bus, bus system 4 also includes a power bus, a control bus, and a status signal bus. However, for clarity, in... Figure 9 The general will label all buses as Bus System 4.

[0133] The memory 3 in this embodiment is used to store various types of data to support the operation of the electronic device. Examples of such data include any computer program used to operate on the electronic device.

[0134] It is understood that memory 3 can be volatile memory or non-volatile memory, or both. Non-volatile memory can be read-only memory (ROM), programmable read-only memory (PROM), erasable programmable read-only memory (EPROM), electrically erasable programmable read-only memory (EEPROM), ferromagnetic random access memory (FRAM), flash memory, magnetic surface memory, optical disc, or compact disc read-only memory (CD-ROM); magnetic surface memory can be disk storage or magnetic tape storage. Volatile memory can be random access memory (RAM), which is used as an external cache. By way of example, but not limitation, many forms of RAM are available, such as Static Random Access Memory (SRAM), Synchronous Static Random Access Memory (SSRAM), Dynamic Random Access Memory (DRAM), Synchronous Dynamic Random Access Memory (SDRAM), Double Data Rate Synchronous Dynamic Random Access Memory (DDRSDRAM), Enhanced Synchronous Dynamic Random Access Memory (ESDRAM), SyncLink Dynamic Random Access Memory (SLDRAM), and Direct Rambus Random Access Memory (DRRAM).The memory 2 described in the embodiments of this application is intended to include, but is not limited to, these and any other suitable types of memory.

[0135] The methods disclosed in the embodiments of this application can be applied to processor 2, or implemented by processor 2. Processor 2 may be an integrated circuit chip with signal processing capabilities. In the implementation process, each step of the above method can be completed by the integrated logic circuit of the hardware in processor 2 or by instructions in the form of software. The processor 2 may be a general-purpose processor, DSP, or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. Processor 2 can implement or execute the methods, steps and logic block diagrams disclosed in the embodiments of this application. The general-purpose processor may be a microprocessor or any conventional processor, etc. The steps of the methods disclosed in the embodiments of this application can be directly manifested as being executed by a hardware decoding processor, or being executed by a combination of hardware and software modules in the decoding processor. The software modules may be located in a storage medium, which is located in memory 3. Processor 2 reads the program in memory 3 and completes the steps of the aforementioned method in combination with its hardware.

[0136] When processor 2 executes the program, it implements the corresponding processes in the various methods of the embodiments of this application. For the sake of brevity, these will not be described in detail here.

[0137] In an exemplary embodiment, this application also provides a storage medium, namely a computer storage medium, specifically a computer-readable storage medium, such as a memory 3 that stores a computer program, which can be executed by a processor 2 to complete the steps described in the aforementioned method. The computer-readable storage medium may be a memory such as FRAM, ROM, PROM, EPROM, EEPROM, Flash Memory, magnetic surface memory, optical disc, or CD-ROM.

[0138] In the several embodiments provided in this application, it should be understood that the disclosed apparatus, electronic devices, and methods can be implemented in other ways. The apparatus embodiments described above are merely illustrative. For example, the division of units is only a logical functional division, and in actual implementation, there may be other division methods, such as: multiple units or components may be combined, or integrated into another system, or some features may be ignored or not executed. In addition, the coupling, direct coupling, or communication connection between the various components shown or discussed may be through some interfaces, and the indirect coupling or communication connection between devices or units may be electrical, mechanical, or other forms.

[0139] The units described above as separate components may or may not be physically separate. The components shown as units may or may not be physical units, that is, they may be located in one place or distributed across multiple network units. Some or all of the units may be selected to achieve the purpose of this embodiment according to actual needs.

[0140] In addition, each functional unit in the various embodiments of this application can be integrated into one processing unit, or each unit can be a separate unit, or two or more units can be integrated into one unit; the integrated unit can be implemented in hardware or in the form of hardware plus software functional units.

[0141] Those skilled in the art will understand that all or part of the steps of the above method embodiments can be implemented by hardware related to program instructions. The aforementioned program can be stored in a computer-readable storage medium. When the program is executed, it performs the steps of the above method embodiments. The aforementioned storage medium includes various media that can store program code, such as mobile storage devices, ROM, RAM, magnetic disks, or optical disks.

[0142] Alternatively, if the integrated units described above are implemented as software functional modules and sold or used as independent products, they can also be stored in a computer-readable storage medium. Based on this understanding, the technical solutions of the embodiments of this application, or the parts that contribute to the prior art, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the methods described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as mobile storage devices, ROM, RAM, magnetic disks, or optical disks.

[0143] It is understood that in the embodiments of this application, user information, such as facial information in image content, and other related data are involved. When the embodiments of this application are applied to specific products or technologies, user permission or consent is required, and the collection, use and processing of related data must comply with the relevant laws, regulations and standards of the relevant countries and regions.

[0144] It should be noted that the technical solutions described in the embodiments of this application can be combined arbitrarily without conflict. Unless otherwise stated and limited, the term "connection" should be interpreted broadly. For example, it can refer to an electrical connection, or the internal connection between two components. It can be a direct connection or an indirect connection through an intermediate medium. Those skilled in the art can understand the specific meaning of the above term according to the specific circumstances.

[0145] Furthermore, in the examples of this application, "first," "second," etc., are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that the objects distinguished by "first," "second," and "third" can be interchanged where appropriate so that the embodiments of this application described herein can be implemented in a sequence other than those illustrated or described herein.

[0146] In this document, the term "and / or" is merely a description of the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent three cases: A alone, A and B simultaneously, and B alone. Additionally, the term "at least one" in this document means any combination of at least two of any one or more of a plurality of elements. For example, including at least one of A, B, and C can mean including any one or more elements selected from the set consisting of A, B, and C.

[0147] The above description is merely a specific embodiment of this application, but the scope of protection of this application is not limited thereto. Any variations or substitutions that can be easily conceived by those skilled in the art within the scope of the technology disclosed in this application should be included within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of the claims.

[0148] The specific technical features described in the various embodiments in the detailed implementation can be combined in various ways without contradiction. For example, different implementation methods can be formed by combining different specific technical features. In order to avoid unnecessary repetition, the various possible combinations of the specific technical features in this application will not be described separately.

Claims

1. A page rendering method, characterized in that, The method includes: Determine the first information corresponding to each page sub-template in at least two page sub-templates; the first information includes at least an offset and the first position information of the layer data corresponding to each page sub-template in each page sub-template; the at least two page sub-templates represent page sub-templates obtained by dividing the page template in image file format into regions; the offset is used to identify the position of the corresponding page sub-template in the page template; Based on the first information corresponding to each page sub-template, the layer data corresponding to each of the at least two page sub-templates is rendered at the corresponding position of the set view container; the layer data corresponding to the at least two page sub-templates includes multiple layers, and each page sub-template corresponds to one layer; The step of rendering layer data corresponding to each of the at least two page sub-templates at the corresponding position of the set view container based on the first information corresponding to each page sub-template includes: The offset of each page sub-template in at least two page sub-templates is determined by the forwarding generator, and the offset of each page sub-template is set in the corresponding forwarder; the forwarder is used to receive layer data and editor context passed by the editor during the page rendering process, and send the first information in the forwarder to the shared renderer. Using the shared renderer, based on the information corresponding to the page sub-templates within the forwarder, the corresponding position of each layer within the set view container is determined, and the layer data corresponding to each of the at least two page sub-templates is rendered at the corresponding position within the set view container.

2. The method according to claim 1, characterized in that, Before rendering the layer data corresponding to each of the at least two page sub-templates at the corresponding position in the set view container, the method further includes: Determine the size of the set view container.

3. The method according to claim 2, characterized in that, The height of the visible area of ​​the set view container is greater than or equal to the height of the page template; the width of the visible area of ​​the set view container is greater than or equal to the width of the page template.

4. The method according to claim 2, characterized in that, When at least two page sub-templates are arranged vertically in sequence within the page template, the height of the set view container is the sum of the heights of each of the at least two page sub-templates, and the width of the set view container is the maximum width of the page sub-templates among the at least two page sub-templates; or, When the at least two page sub-templates are arranged horizontally in sequence within the page template, the height of the set view container is the maximum height of the page sub-templates among the at least two page sub-templates, and the width of the set view container is the sum of the widths of each page sub-template among the at least two page sub-templates.

5. The method according to claim 1, characterized in that, When determining the first information corresponding to each page sub-template in at least two page sub-templates, the method includes: When at least two page sub-templates are arranged vertically in sequence within the page template, the first offset of the second page sub-template is determined based on the height and first offset of the first page sub-template; the first offset is a vertical offset; or, When at least two page sub-templates are arranged horizontally in sequence in the page template, the second offset corresponding to the second page sub-template is determined based on the width corresponding to the first page sub-template and the corresponding second offset; the first offset is a horizontal offset.

6. The method according to claim 1, characterized in that, When rendering the layer data corresponding to each of the at least two page sub-templates at the corresponding position of the set view container based on the first information corresponding to each page sub-template, the method includes: Based on the offset corresponding to the page sub-template and the first position information of the corresponding layer data, the corresponding layer data is rendered at the corresponding position in the set view container; wherein, The first location information represents the position of the corresponding layer data in the corresponding page sub-template.

7. The method according to claim 1, characterized in that, The first information also includes the context information corresponding to the page sub-template.

8. A page rendering apparatus, characterized in that, include: The first processing unit is used to determine the first information corresponding to each page sub-template in at least two page sub-templates; The first information includes at least the offset and the first position information of the layer data corresponding to each page sub-template in each page sub-template; The at least two page sub-templates represent page sub-templates obtained by dividing the page template in image file format into regions; The offset is used to identify the position of the corresponding page sub-template in the page template; The layer data corresponding to the at least two page sub-templates includes multiple layers, and each page sub-template corresponds to one layer; The rendering unit is used to render the layer data corresponding to each of the at least two page sub-templates at the corresponding position of the set view container based on the first information corresponding to each page sub-template. Specifically, the rendering unit is used for: The offset of each page sub-template in at least two page sub-templates is determined by the forwarding generator, and the offset of each page sub-template is set in the corresponding forwarder; the forwarder is used to receive layer data and editor context passed by the editor during the page rendering process, and send the first information in the forwarder to the shared renderer. Using the shared renderer, based on the information corresponding to the page sub-templates within the forwarder, the corresponding position of each layer within the set view container is determined, and the layer data corresponding to each of the at least two page sub-templates is rendered at the corresponding position within the set view container.

9. An electronic device, characterized in that, include: The processor and the memory used to store computer programs that can run on the processor. When the processor is used to run the computer program, it performs the steps of the method according to any one of claims 1 to 7.

10. A storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the steps of the method as described in any one of claims 1 to 7.

Images