A method, medium, and computing device for scene rendering in a web page

Abstract

Multiple embodiments disclosed in this specification provide a method, medium, and computing device for rendering scenarios in a web page. A scenario component in a to-be-rendered scenario with a style customization requirement is referred to as a target scenario component. Considering that document elements in a web page document support style customization, then, this feature can be utilized to create at least some of the target scenario components in the to-be-rendered scenario as document elements in the web page document of the web page, with one target scenario component corresponding to one document element. Then, rendering can be performed in the web page based on the web page document, and the document elements with customized styles can be rendered in the web page. The rendered document elements with customized styles can be used as materials that can be adopted by a graphics rendering engine dependent on a canvas.

Description

Technical Field

[0001] Multiple embodiments of this specification relate to the field of map technology, and in particular, to a method, a medium, and a computing device for rendering a scene in a web page. Background Art

[0002] In some services, it is necessary to call a graphics rendering engine that depends on a canvas to render a scene (2D or 3D scene) in a web page. In order to improve the user experience of browsing the scene, it is necessary to render some scene components in the scene in rich and diverse styles. However, existing graphics rendering engines usually only support rendering scene components in basic styles.

[0003] Therefore, a technical solution that can render scene components in rich and diverse styles in a web page is needed. Summary of the Invention

[0004] Multiple embodiments of this specification provide a method, a medium, and a computing device for rendering a scene in a web page, so as to be able to render scene components in rich and diverse styles in a web page.

[0005] According to a first aspect of multiple embodiments of this specification, a method for rendering a scene in a web page is proposed, including:

[0006] Determine at least one target scene component in the scene to be rendered that has a style customization requirement, and create a document element corresponding to each target scene component in the web page document;

[0007] For each document element, determine the style editing code associated with the document element, and the style editing code is used to match the style customization requirement of the target scene component corresponding to the document element;

[0008] Call a first graphics rendering engine that depends on the web page document, and render a vector image corresponding to each document element in the first web page according to the web page document and the style editing code associated with each document element;

[0009] Perform rasterization processing on the vector image corresponding to each document element to obtain a material image of the target scene component corresponding to each document element;

[0010] Call a second graphics rendering engine that depends on the canvas, and render the scene to be rendered in the second web page according to the material image of each target scene component.

[0011] According to a second aspect of multiple embodiments of this specification, a computer-readable storage medium is proposed, on which a computer program is stored, and when the program is executed by a processor, the method described in the first aspect is implemented.

[0012] According to the third aspect of multiple embodiments of this specification, a computing device is proposed, including a memory and a processor; the memory is used to store computer instructions that can run on the processor, and the processor is used to implement the method described in the first aspect when executing the computer instructions.

[0013] In the above technical solution, the scene components in the scene to be rendered that have style customization requirements are called target scene components. Considering that the document elements in a web document support style customization (using style editing code), then, this feature can be utilized to create at least some of the target scene components in the scene to be rendered as document elements in the web document of the web page, with one target scene component corresponding to one document element. Then, based on the web document, rendering can be performed in the web page, and the document elements with customized styles can be rendered in the web page. It can be found that the rendered document elements with customized styles can be used as materials that can be adopted by a graphics rendering engine (the second graphics rendering engine) that depends on the canvas. In theory, by using these materials, the second graphics rendering engine can render the target scene components corresponding to each document element in the web page, so that the target scene components have customized styles.

[0014] And how to implement the above theoretical idea involves how to convert the rendered document elements with customized styles into materials that can be directly adopted by the second graphics rendering engine. To achieve this conversion, when rendering in the web page based on the web document, conventional non-graphics rendering methods cannot be used for rendering (because this will result in the rendered document elements not being pictures, and it is difficult to further obtain materials that can be directly adopted by the second graphics rendering engine). Instead, it is necessary to rely on the graphics rendering engine (the first graphics rendering engine) of the web document for rendering. The working principle of the first graphics rendering engine depends on the tree structure of each document element in the web document. Rendering can be performed based on the web document, and the first graphics rendering engine has the characteristic of rendering document elements associated with style editing code into vector pictures. In this way, the rendered document elements with customized styles by the first graphics rendering engine in the web page are in vector picture format. By converting the vector pictures into rasterized pictures, the rasterized pictures can be used as materials that can be directly adopted by the second graphics rendering engine.

[0015] Through the above technical solution, it is possible to call the graphics rendering engine that depends on the canvas to render the scene components in the web page in rich and diverse styles. Description of the Drawings

[0016] Figure 1 It is a schematic diagram of the rendering effect based on two levels in the web page provided by the present disclosure.

[0017] Figure 2 An exemplary flowchart of a scene rendering method in a web page is provided.

[0018] Figure 3 An exemplary schematic diagram of an overall vector image is provided.

[0019] Figure 4 It is a schematic diagram of a scene rendered by the second graphics rendering engine provided by the present disclosure.

[0020] Figure 5 It is a schematic diagram of the structure of a computing device provided by the present disclosure.

[0021] In the drawings, the same or corresponding reference numerals represent the same or corresponding parts. The number of any element in the drawings is for illustration only and not for limitation, and any naming is only for distinction and does not have any limiting meaning. Detailed implementation manners

[0022] In order to enable those skilled in the art to better understand the technical solutions in this specification, the technical solutions in the embodiments of this specification will be clearly and completely described below in conjunction with the accompanying drawings in the embodiments of this specification. Obviously, the described embodiments are only a part of the embodiments of this specification, rather than all the embodiments. Based on the embodiments in this specification, all other embodiments obtained by those of ordinary skill in the art without making creative efforts shall fall within the protection scope of this specification.

[0023] It should be noted that: in other embodiments, the steps of the corresponding methods are not necessarily executed in the order shown and described in this specification. In some other embodiments, the steps included in the method may be more or less than those described in this specification. In addition, a single step described in this specification may be decomposed into multiple steps for description in other embodiments; and multiple steps described in this specification may also be combined into a single step for description in other embodiments.

[0024] The so-called rendering of a scene in a web page in the present disclosure means rendering web page content composed of elements such as text, geometric shapes, and images (such as pictures, videos, animations) in the web page. These web page contents can be understood as scenes, and the scenes can be static, dynamically variable, or interactive with users. The elements such as text, geometric shapes, and images included in the scene can be understood as scene components.

[0025] In some services, it is necessary to render the above-mentioned scene in a web page. For example, in order to facilitate users to obtain map-related services (such as location query, travel navigation, etc.) from the network using a browser, it is necessary to render an electronic map in the web page. The electronic map can be an electronic map that is interactive with users. Users can drag the electronic map to view different areas in the electronic map and zoom in or out on specific areas in the electronic map.

[0026] The above-mentioned scenario can be a 2D scenario or a 3D scenario. If it is necessary to render the above-mentioned scenario in a web page, it is often necessary to use a graphics rendering engine that depends on the canvas to achieve. The so-called dependence on the canvas means that the working principle of this graphics rendering engine seems to be painting on a canvas in the web page. Common graphics rendering engines that depend on the canvas can be canvas WebGL, canvas 2D, etc.

[0027] In practical applications, in order to improve the user experience of browsing the scenarios in the web page, it is necessary to render some scenario components in the scenario in rich and diverse styles. That is to say, it is necessary to achieve the customization of the styles of the scenario components. However, the graphics rendering engine that depends on the canvas currently only supports rendering scenario components in basic styles. For the convenience of description in this article, the scenario components in the scenario to be rendered that have the need for style customization are called target scenario components.

[0028] An optional technical solution that can render scenario components in rich and diverse styles in a web page is to present the scenario through two levels of rendering in the web page. One level of rendering is implemented by a graphics rendering engine that depends on the canvas. This level of rendering will not render at least some of the target scenario components and is mainly responsible for rendering non-target scenario components; the other level of rendering is non-graphic rendering based on the web document (this is the conventional rendering method for rendering in the web page based on the web document). This level of rendering is mainly responsible for rendering target scenario components (creating target scenario components as document elements in the web document and customizing styles for the document elements using style editing code).

[0029] However, there is a problem with the above-mentioned optional technical solution, that is, it is difficult to deeply integrate the two levels of rendering in the same web page with each other, and the presented scenario effect is not good. Figure 1 It is a schematic diagram of the effect of rendering based on two levels in the web page provided by the present disclosure. As Figure 1 shown, the scenario is an electronic map, and the target scenario component with the need for style customization can be a position marker in the shape of a balloon. It can be seen that although the position marker rendered by non-graphic rendering based on the web document has a customized style, this position marker blocks the text "Jinan" rendered by the graphics rendering engine that depends on the canvas.

[0030] In addition, there is also a problem with the above-mentioned optional technical solution, that is, in order to combine the rendering results of the two levels to display the scenario, it is required that the two levels of rendering be synchronized. However, the non-graphic rendering performance based on the web document is significantly lower than that of the graphics rendering engine that depends on the canvas. Therefore, when the amount of data to be rendered is relatively large, it is actually very difficult to synchronize these two levels of rendering, resulting in a relatively poor scenario display effect.

[0031] To solve the problems existing in the above alternative technical solutions, the present disclosure provides another alternative technical solution. In another alternative technical solution, instead of presenting a scene through rendering at two levels in a web page, only graphics rendering relying on a canvas is used to present the scene. However, the styling customization of target scene components still needs to be achieved by means of the rendering ability based on the web document. The following introduces this technical concept:

[0032] Considering that the document elements in a web document support styling customization (using styling editing code), then this feature can be utilized to create at least some of the target scene components in the scene to be rendered as document elements in the web document of the web page, with one target scene component corresponding to one document element. Then, based on the web document, rendering can be performed in the web page, and the document elements with customized styles can be rendered in the web page. It can be found that the rendered document elements with customized styles can be used as materials that can be adopted by the graphics rendering engine relying on the canvas (the second graphics rendering engine). In theory, by using these materials, the second graphics rendering engine can render the target scene components corresponding to each document element in the web page, so that the target scene components have customized styles.

[0033] It should be noted that the above-mentioned rendering based on document elements and the rendering of the graphics rendering engine relying on the canvas are not performed synchronously, but are performed successively. The role of the rendering based on document elements is not to directly participate in the presentation of the scene, but to produce materials for the graphics rendering engine relying on the canvas.

[0034] And how to implement the above theoretical idea involves how to convert the rendered document elements with customized styles into materials that can be directly adopted by the second graphics rendering engine. To achieve this conversion, when rendering in the web page based on the web document, a conventional non-graphics rendering method cannot be used for rendering. The reason is that if a conventional non-graphics rendering method is used for rendering, the rendered document elements will not be pictures, and it is difficult to further obtain materials that can be directly adopted by the second graphics rendering engine. Therefore, it is necessary to rely on the graphics rendering engine of the web document (the first graphics rendering engine) for rendering. The working principle of the first graphics rendering engine depends on the tree structure of each document element in the web document. It can perform rendering based on the web document, and the first graphics rendering engine has the characteristic of rendering the document elements associated with styling editing code into vector pictures. In this way, the rendered document elements with customized styles by the first graphics rendering engine in the web page are in the form of vector pictures. By converting the vector pictures into rasterized pictures, the rasterized pictures can be used as materials that can be directly adopted by the second graphics rendering engine.

[0035] Through the above-mentioned another alternative technical solution, instead of presenting the scene through rendering at two levels, the scene is rendered based on a graphics rendering engine that depends on the canvas. The graphics rendering engine that depends on the web page document does not participate in the scene rendering, but generates picture materials with specific styles for the scene components. In this way, not only can the graphics rendering engine that depends on the canvas (canvas) be called to render the scene components in rich and diverse styles in the web page, but also the deep integration of the styles of the scene components and the entire scene background can be achieved, and the synchronous rendering of the scene components and the entire scene background can be realized to improve the rendering effect.

[0036] The above technical concept is described in detail below.

[0037] Figure 2 An exemplary flowchart of a method for rendering a scene in a web page is provided, including the following steps:

[0038] S200: Determine at least one target scene component in the scene to be rendered that has a style customization requirement.

[0039] Figure 2 The execution subject of the method shown is usually the web browser kernel.

[0040] In the present disclosure, a web page document refers to a document used to describe the layout of a web page, and a document element refers to an element that makes up a web page document. A markup language can be used to edit a web page document. The commonly used markup language is HyperText Markup Language (HTML). Therefore, a web page document is often referred to as an HTML document, and a document element is often referred to as an HTML element.

[0041] In the present disclosure, a style editing code refers to the code of a language that is used in conjunction with a markup language and is used to edit the rendering style of document elements in a web page document. The sample editing language used in conjunction with HTML is Cascading Style Sheets (CSS).

[0042] For example, the following shows a section of an HTML document:

[0043]

[0044] Among them, <!DOCTYPE html> is an HTML element, the content between and is an HTML element, and the content between and is an HTML element. <meta charset＝"utf-8"> is an HTML element. <title>and< / title> The content between is an HTML element, and the content between and is an HTML element. <h1>and< / h1> The content between is an HTML element.and The content between is an HTML element.

[0045] It is easy to find that there can be a nested relationship between HTML elements. For example, within the corresponding HTML element, there is a further nested <title>and< / title> corresponding HTML element.

[0046] To edit the style of each HTML element, corresponding CSS code can be associated with each HTML element, and the CSS code includes style information. The way to associate CSS code with an HTML element can be to embed the CSS code in the HTML element. For example, if it is necessary to edit the font color of the content (theme) in the <title>and< / title> corresponding HTML element, then it can be in <title>Embed the CSS code as follows:< / title>

[0047]

[0048]

[0049] where <title>The embedded "-color: yellow" is the CSS code, indicating that the font color is yellow.< / title>

[0050] S202: Create document elements corresponding to each target scene component in the web page document.

[0051] It should be noted that not every target scene component in the scene to be rendered can necessarily be created as a document element. Some types of scene components, such as animations, videos, models with internal structures, etc., cannot be created as document elements.

[0052] Therefore, if every target scene component in the scene to be rendered can be created as a document element, then when performing step S200, every target scene component in the scene to be rendered can be created as a document element.

[0053] If some target scene components in the scene to be rendered can be created as document elements and the remaining target scene components cannot be created as document elements, then when performing step S200, only some target scene components can be created as document elements.

[0054] S204: For each document element, determine the style editing code associated with the document element.

[0055] The general function of the style editing code is to provide the ability to customize the style for the document elements in the web page document, and the rendering styles of the document elements can be set in a rich and diverse manner.

[0056] In the present disclosure, for each document element, according to the style customization requirements of the target scene component corresponding to the document element, the style editing code associated with the document element is edited. In this way, when rendering the document element in a web page based on the web document, the style editing code associated with the document element is executed, so that the rendered document element has a customized style.

[0057] S206: Invoke a first graphics rendering engine that depends on the web document, and render a vector image corresponding to each document element in the first web page according to the web document and the style editing code associated with each document element.

[0058] S208: Rasterize the vector image corresponding to each document element to obtain a material image of the target scene component corresponding to each document element.

[0059] "Dependent on the web document" can be understood as that in the implementation of the working principle of the first graphics rendering engine, it is inseparable from the web document. The layout relationship of each document element in the web document can be described as a tree structure, that is, the DOM structure, and the first graphics rendering engine needs to render and layout in the web page according to the DOM structure.

[0060] Generally, it is necessary to specify which document elements as a rendering object to the first graphics rendering engine. The first graphics rendering engine will perform rendering for each rendering object in turn, and the number of rendering objects is the same as the number of times the first graphics rendering engine performs rendering.

[0061] In some embodiments, each document element can be used as a rendering object respectively.

[0062] In other embodiments, considering improving the rendering efficiency of the first graphics rendering engine, all document elements can be used as an overall rendering object, and according to the web document and the style editing code associated with each document element, perform a rendering operation in the web page to obtain an overall vector image, and the overall vector image is composed of local vector images corresponding to each document element.

[0063] Considering that if all document elements are rendered on an overall vector image, it is not convenient to distinguish the local vector images corresponding to each document element respectively. Therefore, during the process of invoking the first graphics rendering engine to perform rendering, it is usually also necessary to determine the positioning information of the local vector image corresponding to each document element in the overall vector image. In this way, in step S208, according to the determined positioning information, the local vector image corresponding to each document element can be split from the overall vector image, and the local vector image corresponding to each document element is rasterized to obtain a material image of the target scene component corresponding to each document element.

[0064] Figure 3 An exemplary schematic diagram of an overall vector image is provided. Assume that the scene to be rendered is an electronic map, and the target scene component is the location marker of a residential community on the electronic map. Figure 3 The overall vector image shown is composed of partial vector images of document elements corresponding to 8 location markers respectively. In the overall vector image, the coordinate ranges of the areas occupied by each partial vector image in the coordinate system are marked. In addition, each partial vector image is also associated with the position information of the scene component corresponding to the document element in the partial vector image in the scene. For example, the position information of Sanjianfang Nanli is 5.3.

[0065] The above-mentioned first graphics rendering engine can be, for example, SVG, Flash, etc.

[0066] S210: Invoke a second graphics rendering engine that depends on a canvas, and render the scene to be rendered in the second web page according to the material images of each target scene component.

[0067] "Depending on a canvas" means that the second graphics rendering engine does not render the layout in the web page based on the DOM structure corresponding to the web document in terms of working principle, but performs graphic drawing within a web container called a canvas. The material that the second graphics rendering engine can directly use usually needs to be a rasterized image. The second graphics rendering engine can be, for example, canvas 2D, or WebGL.

[0068] Figure 4 It is a schematic diagram of the scene rendered by the second graphics rendering engine provided by the present disclosure. As Figure 4 shown, the scene is an electronic map, and the target scene components that need to be customized in style can be text representations and / or graphic identifiers.

[0069] In addition, in the present disclosure, the first web page and the second web page can be the same web page or different web pages.

[0070] When the first web page and the second web page are web pages on different device terminals, before rendering the scene to be rendered in the second web page, the material images of each target scene component can be stored in a database. Then, when invoking the second graphics rendering engine for rendering, the material images of each target scene component can be read from the database, and the scene to be rendered can be rendered in the second web page according to the read material images of each target scene component.

[0071] When the first web page and the second web page are the same web page, for each document element, the style editing code associated with the document element is also used to conceal the rendering effect of the document element, so that the vector image corresponding to the document element rendered in the first web page is invisible to the user. The advantage of doing this is that the rendering results of the first graphics rendering engine and the second graphics rendering engine will not be superimposed on the same web page, and the user will only see the rendering result of the second graphics rendering engine. In terms of implementation, functional code for hiding the rendering effect can be added to the style editing code of the document element. In this way, after the browser renders the vector image corresponding to the document element, the vector image can be concealed, and the user cannot see the vector image rendered by the first graphics rendering engine in the first web page.

[0072] In addition, when the first web page and the second web page are the same web page, after rendering the vector image corresponding to each document element in the first web page, at least some of the interaction trigger events associated with the document elements can be silenced, so that the interaction trigger events associated with the vector images in the first web page do not respond to the user's interaction operations on the vector images.

[0073] It is easy to understand that in practice, some document elements in a web page document may be associated with some interaction trigger events (it may be that when the web page developer edits the web page document, unconsciously uses document elements that are default associated with interaction trigger events). Silencing the interaction trigger events associated with the document elements has the advantage of avoiding accidentally triggering the interaction trigger events associated with some document elements when the user interacts with the web page.

[0074] In terms of implementation, functional code for silencing the interaction trigger events associated with the document elements can be added to the style editing code of the document element, or the js code associated with the web page document can be additionally used to implement the function of silencing the interaction trigger events associated with the document elements. Here, silencing can be understood as that after the browser renders the vector image corresponding to the document element, in the face of the user's interaction operations on the vector image, it will not respond to this interaction operation and start the interaction trigger event.

[0075] The present disclosure also provides a computer-readable storage medium, on which a computer program is stored. When the program is executed by a processor, the method of the embodiments of the present disclosure is implemented.

[0076] The present disclosure also provides a computing device, including a memory and a processor; the memory is used to store computer instructions that can run on the processor, and the processor is used to implement the method of the embodiments of the present disclosure when executing the computer instructions.

[0077] Figure 5 It is a schematic structural diagram of a computing device provided by the present disclosure. The computing device 15 may include, but is not limited to: a processor 151, a memory 152, and a bus 153 connecting different system components (including the memory 152 and the processor 151).

[0078] Among them, the memory 152 stores computer instructions, which can be executed by the processor 151, enabling the processor 151 to execute the methods of any embodiment of the present disclosure. The memory 152 may include a random access storage unit RAM 1521, a cache storage unit 1522, and / or a read-only storage unit ROM 1523. The memory 152 may further include: a program tool 1525 having a set of program modules 1524, and the program modules 1524 include, but are not limited to: an operating system, one or more application programs, other program modules, and program data. One or more combinations of these program modules may include the implementation of a network environment.

[0079] The bus 153 may include, for example, a data bus, an address bus, and a control bus, etc. The computing device 15 may further communicate with an external device 155 through an I / O interface 154, and the external device 155 may be, for example, a keyboard, a Bluetooth device, etc. The computing device 150 may also communicate with one or more networks through a network adapter 156. For example, the network may be a local area network, a wide area network, a public network, etc. As shown in the figure, the network adapter 156 may also communicate with other modules of the computing device 15 through the bus 153.

[0080] In addition, although the operations of the method of the present disclosure are described in a specific order in the drawings, this does not require or imply that these operations must be performed in that specific order, or that all the shown operations must be performed to achieve the desired result. Additionally or alternatively, some steps may be omitted, multiple steps may be combined into one step for execution, and / or one step may be decomposed into multiple steps for execution.

[0081] Although the spirit and principles of the present disclosure have been described with reference to several specific embodiments, it should be understood that the present disclosure is not limited to the specific embodiments disclosed, and the division of each aspect does not mean that the features in these aspects cannot be combined for benefit. This division is only for the convenience of expression. The present disclosure aims to cover various modifications and equivalent arrangements included within the spirit and scope of the appended claims.

[0082] The systems, devices, modules or units described in the above embodiments can be specifically implemented by computer chips or entities, or by products with certain functions. A typical implementation device is a computer. Specifically, the computer can be, for example, a personal computer, a laptop computer, a cellular phone, a camera phone, a smart phone, a personal digital assistant, a media player, a navigation device, an email device, a game console, a tablet computer, a wearable device, or a combination of any of these devices.

[0083] For convenience of description, when describing the above devices, they are divided into various units according to their functions and described separately. Of course, when implementing this specification, the functions of each unit can be implemented in the same or multiple software and / or hardware.

[0084] Those skilled in the art should understand that the embodiments of the present invention can be provided as a method, a system, or a computer program product. Therefore, the present invention can take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware aspects. Moreover, the present invention can take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0085] The present invention is described with reference to the flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to embodiments of the present invention. It should be understood that each flow and / or block in the flowchart and / or block diagram, and the combination of flows and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to the processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing devices to generate a machine, such that the instructions executed by the processor of the computer or other programmable data processing devices generate a device for implementing the functions specified in one Figure 1 one flow or multiple flows and / or blocks Figure 1 one block or multiple blocks.

[0086] This specification can be described in the general context of computer-executable instructions executed by a computer, such as program modules. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform specific tasks or implement specific abstract data types. The present specification can also be practiced in a distributed computing environment where tasks are performed by remote processing devices connected through a communication network. In a distributed computing environment, program modules can be located in local and remote computer storage media including storage devices.

[0087] These computer program instructions can also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to operate in a particular manner, such that the instructions stored in the computer-readable memory produce a manufacture including an instruction device that implements the functions specified in one or more of the processes Figure 1 one or more of the processes and / or blocks Figure 1 and / or blocks.

[0088] These computer program instructions can also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer-implemented process, so that the instructions executed on the computer or other programmable apparatus provide steps for implementing the functions specified in one or more of the processes Figure 1 one or more of the processes and / or blocks Figure 1 and / or blocks. In a typical configuration, a computer includes one or more processors (CPUs), an input / output interface, a network interface, and a memory.

[0089] The memory may include non-permanent memory in the form of computer-readable media, random access memory (RAM) and / or non-volatile memory such as read-only memory (ROM) or flash memory (flash RAM). Memory is an example of computer-readable media.

[0090] Computer-readable media includes both permanent and non-permanent, removable and non-removable media implemented by any method or technology for storing information. The information can be computer-readable instructions, data structures, program modules, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technologies, compact disc read-only memory (CD-ROM), digital versatile discs (DVD) or other optical storage, magnetic cassettes, magnetic disk storage, quantum memory, graphene-based storage media or other magnetic storage devices, or any other non-transitory media that can be used to store information that can be accessed by a computing device. As defined herein, computer-readable media does not include transitory computer-readable media such as modulated data signals and carrier waves.

[0091] It should also be noted that the term "comprising", "including" or any other variant thereof is intended to cover non-exclusive inclusion, so that a process, method, commodity or device comprising a series of elements not only includes those elements, but also includes other elements not expressly listed, or elements inherent to such process, method, commodity or device. Without further limitation, an element defined by the statement "comprising an..." does not exclude the presence of additional identical elements in the process, method, commodity or device comprising said element.

[0092] The above describes multiple embodiments of this specification. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recited in the claims may be performed in a different order than in the embodiments and still achieve the desired result. Additionally, the processes depicted in the figures do not necessarily require the particular order or sequential order shown to achieve the desired result. In certain embodiments, multitasking and parallel processing are also possible or may be advantageous.

[0093] The terms used in multiple embodiments of this specification are for the purpose of describing specific embodiments only and are not intended to limit multiple embodiments of this specification. The singular forms "a", "the" and "said" used in multiple embodiments of this specification and the appended claims are also intended to include the plural forms unless the context clearly dictates otherwise. It should also be understood that the term "and / or" as used herein refers to and encompasses any and all possible combinations of one or more of the associated listed items.

[0094] It should be understood that although the terms first, second, third, etc. may be used in multiple embodiments of this specification to describe various information, such information should not be limited to these terms. These terms are only used to distinguish information of the same type from each other. For example, without departing from the scope of multiple embodiments of this specification, the first information may also be referred to as the second information, and similarly, the second information may also be referred to as the first information. Depending on the context, the word "if" as used herein may be interpreted as "when" or "upon" or "in response to determining".

[0095] Each embodiment in this specification is described in a progressive manner. For the identical or similar parts among the embodiments, reference can be made to each other, and the differences between each embodiment and other embodiments are emphasized. In particular, for method embodiments, since they are basically similar to method embodiments, they are described relatively simply, and the relevant parts can refer to the partial description of method embodiments. The method embodiments described above are merely illustrative. The modules described as separate components may or may not be physically separated. When implementing the solutions of the embodiments of this specification, the functions of each module can be implemented in one or more software and / or hardware. It is also possible to select some or all of the modules according to actual needs to achieve the purpose of the solutions of this embodiment. A person of ordinary skill in the art can understand and implement it without creative work.

[0096] The above description is only the preferred embodiment of multiple embodiments of this specification, and is not intended to limit multiple embodiments of this specification. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of multiple embodiments of this specification shall be included in the scope protected by multiple embodiments of this specification.

Claims

1. A method for rendering a scene in a web page, comprising: Determining at least one target scene component in the scene to be rendered that has a style customization requirement, and creating a document element corresponding to each target scene component in the web page document; For each document element, determining a style editing code associated with the document element, the style editing code being used to match the style customization requirement of the target scene component corresponding to the document element; Invoking a first graphics rendering engine that depends on the web page document, and rendering a vector image corresponding to each document element in a first web page according to the web page document and the style editing code associated with each document element; Rasterizing the vector image corresponding to each document element to obtain a material image of the target scene component corresponding to each document element; Invoking a second graphics rendering engine that depends on a canvas, and rendering the scene to be rendered in a second web page according to the material image of each target scene component.

2. The method according to claim 1, wherein The first graphics rendering engine is SVG or Flash.

3. The method according to claim 1, wherein The second graphics rendering engine is canvas 2D or WebGL.

4. The method according to claim 1, wherein rendering a vector image corresponding to each document element in the web page according to the web page document and the style editing code associated with each document element comprises: Regarding each document element as an overall rendering object, performing a single rendering operation in the web page according to the web page document and the style editing code associated with each document element to obtain an overall vector image, the overall vector image being composed of local vector images corresponding to each document element; Determining the positioning information of the local vector image corresponding to each document element in the overall vector image; Rasterizing the vector image corresponding to each document element to obtain a material image of the target scene component corresponding to each document element, comprising: Splitting out the local vector image corresponding to each document element from the overall vector image according to the recorded positioning information; Rasterizing the local vector image corresponding to each document element to obtain a material image of the target scene component corresponding to each document element.

5. The method according to claim 1, wherein, When the first web page and the second web page are different web pages, the method further comprises: Before rendering the scene to be rendered in the second web page, storing the material image of each target scene component in a database; Rendering the scene to be rendered in the second web page according to the material image of each target scene component, comprising: Reading the material image of each target scene component from the database; Rendering the scene to be rendered in the second web page according to the read material image of each target scene component.

6. The method according to claim 1, wherein When the first web page and the second web page are the same web page, the style editing code associated with each document element is further used to conceal the rendering effect of the document element, so that the vector image corresponding to the document element rendered in the first web page is invisible to the user.

7. The method according to claim 1, wherein When the first web page and the second web page are the same web page, the method further comprises: After rendering vector images corresponding to each document element in the first web page, at least some of the interaction trigger events associated with the document elements are silenced, so that the interaction trigger events associated with the vector images in the first web page do not respond to user interaction operations on the vector images.

8. For the method according to any one of claims 1-7, the scene to be rendered is an electronic map, and the target scene components in the scene to be rendered include: Text identifiers and / or graphic identifiers.

9. A computing device, comprising a memory and a processor; the memory is used to store computer instructions that can be run on the processor, and the processor is used to implement the method according to any one of claims 1 to 8 when executing the computer instructions.

10. A computer-readable storage medium, on which a computer program is stored, and the program implements the method according to any one of claims 1 to 8 when executed by a processor.

Images