A dynamic artistic character generation method based on SVG layered rendering and canvas font calculation and related equipment

Abstract

The application discloses a kind of dynamic artistic character generation method and related equipment based on SVG layered rendering and Canvas font calculation, method includes: obtaining the character information and visual effect information input by user through user interface;Actual font size is calculated according to character information by Canvas technology, artistic character effect is designed by layering by SVG technology, and multi-level rendering structure is obtained;Artistic character is generated and displayed according to character information, actual font size, visual effect information and multi-level rendering structure;Parameter update information input by user is obtained through user interface, and the rendering effect of artistic character is updated in real time.The embodiment of the application can render and update the rendering effect of artistic character in real time, and at the same time, complex multi-layer rendering effect can be realized, with good cross-platform compatibility.The application can be widely applied in the field of artistic character generation technology.

Description

Technical Field

[0001] This application relates to the field of artistic font generation technology, and in particular to a dynamic artistic font generation method and related equipment based on SVG layered rendering and Canvas font calculation. Background Technology

[0002] In web design and front-end development, artistic fonts are an important visual element widely used in advertising, promotional materials, user interfaces, and other scenarios. Currently, artistic font effects are typically achieved through web page CSS styles or image processing software (such as Photoshop).

[0003] Among these, CSS styles offer limited artistic font effects and struggle to achieve complex multi-layered effects (such as shadows, outlines, and background blending); artistic fonts generated by image processing software are static images, lacking dynamic editing capabilities and having large file sizes, making them unsuitable for real-time rendering; furthermore, when processing multiple fonts, the different font size calculation methods on different platforms or devices may lead to inaccurate font size calculations, resulting in inconsistent artistic font display effects and poor display quality.

[0004] In summary, the technical problems existing in the relevant technologies need to be improved. Summary of the Invention

[0005] The main objective of this application is to propose a dynamic artistic font generation method and related device based on SVG layered rendering and Canvas font calculation. By combining the user interface, SVG and Canvas size calculation functions, the rendering effect of artistic fonts can be rendered and updated in real time, and complex multi-layer rendering effects can be achieved, with good cross-platform compatibility.

[0006] To achieve the above objectives, one aspect of this application proposes a method for generating dynamic artistic fonts based on SVG layered rendering and Canvas font calculation, the method comprising: Obtain text and visual information input by the user through the user interface; The actual font size is calculated based on the text information using Canvas technology, and the artistic font effect is layered using SVG technology to obtain a multi-layered rendering structure. Artistic fonts are generated based on the text information, the actual font size, the visual effect information, and the multi-layer rendering structure, and then displayed through the user interface. The user-input parameter update information is obtained through the user interface, and the rendering effect of the artistic font is updated in real time according to the parameter update information. The multi-layered rendering structure includes a text layer, a background layer, an outer stroke layer, a shadowed text layer, and a shadowed stroke layer.

[0007] In some embodiments, the text information includes text content, font style, and font size. The step of calculating the actual font size based on the text information using Canvas technology includes: The text content, font style, and font size are obtained based on the text information; The actual font size is calculated using the Canvas's measureText method based on the text content, the font style, and the font size.

[0008] In some embodiments, the layered design of the artistic font effect using SVG technology to obtain a multi-layered rendering structure includes: The text layer is defined using the TEXT tag of the SVG; The background layer is defined using the RECT tag of the SVG; The outer stroke layer, the shadow text layer, and the shadow stroke layer are defined by the MASK tag and the TEXT tag of the SVG; The outer stroke layer is used to generate a stroke effect outside the text layer, the shadow text layer is used to generate a text shadow effect at a specified offset position of the text layer, and the shadow stroke layer is used to generate a stroke shadow effect at a specified offset position of the outer stroke layer.

[0009] In some embodiments, generating artistic text based on the text information, the actual font size, the visual effect information, and the multi-layer rendering structure includes: The visual effect information is parsed to obtain first rendering parameters that are adapted to the multi-level rendering structure; The first rendering parameters are adjusted according to the actual font size to obtain the second rendering parameters; The artistic font is obtained by performing layered rendering based on the text information, the second rendering parameters, and the multi-layered rendering structure.

[0010] In some embodiments, adjusting the first rendering parameters according to the actual font size to obtain the second rendering parameters includes: The position and size parameters in the first rendering parameters are updated based on the actual font size to obtain the second rendering parameters; The position parameter and the size parameter are used to control the position and size of the text layer, the background layer, the outer stroke layer, the shadow text layer, and the shadow stroke layer.

[0011] In some embodiments, the step of performing layered rendering based on the text information, the second rendering parameters, and the multi-layered rendering structure to obtain the artistic font includes: The text layer is rendered according to the text information and the second rendering parameters to obtain the text content; The background layer is rendered according to the second rendering parameters to obtain the background effect; The background layer, the outer stroke layer, the shadow text layer, and the shadow stroke layer are rendered according to the second rendering parameters to obtain the background effect, the outer stroke effect, the text shadow effect, and the stroke shadow effect, respectively. The artistic font is obtained by combining the text content, background effect, outer stroke effect, text shadow effect, and stroke shadow effect using the SVG technology.

[0012] In some embodiments, updating the rendering effect of the artistic font in real time according to the parameter update information includes: The content to be updated in the multi-level rendering structure is determined based on the parameter update information; The rendering effect of the content to be updated is updated based on the parameter update information.

[0013] To achieve the above objectives, another aspect of this application proposes a dynamic artistic font generation device based on SVG layered rendering and Canvas font calculation, the device comprising: The user interaction module is used to obtain text and visual information input by the user through the user interface. The font size calculation and multi-layer rendering structure construction module is used to calculate the actual font size based on the text information using Canvas technology, and to perform layered design of artistic font effects using SVG technology to obtain a multi-layer rendering structure. The artistic font generation and display module is used to generate artistic fonts based on the text information, the actual font size, the visual effect information, and the multi-layer rendering structure, and to display the artistic fonts through the user interface. The real-time update module is used to obtain parameter update information input by the user through the user interaction interface, and update the rendering effect of the artistic font in real time according to the parameter update information. The multi-layered rendering structure includes a text layer, a background layer, an outer stroke layer, a shadowed text layer, and a shadowed stroke layer.

[0014] To achieve the above objectives, another aspect of this application provides an electronic device, which includes a memory and a processor. The memory stores a computer program, and the processor executes the computer program to implement the methods described above.

[0015] To achieve the above objectives, another aspect of the embodiments of this application proposes a computer-readable storage medium storing a computer program that, when executed by a processor, implements the methods described above.

[0016] To achieve the above objectives, another aspect of this application provides a computer program product, including a computer program that, when executed by a processor, implements the methods described above. The embodiments of this application include at least the following beneficial effects: This application provides a method and related equipment for generating dynamic artistic fonts based on SVG layered rendering and Canvas font calculation. This solution obtains text information and visual effect information input by the user through a user interface, providing the user with a real-time parameter input and adjustment interface, supporting the user to dynamically modify the text content and visual effects, and improving the flexibility of artistic font design; by calculating the actual font size based on the text information using Canvas technology, it achieves accurate measurement of the actual size of different fonts under different platforms and devices, providing accurate size information for subsequent layered rendering, and ensuring the consistency of rendering effects in different environments; by using SVG technology to design artistic font effects in layers, it achieves modular management of complex visual effects, facilitating the realization of high-precision rendering effects; by dynamically generating artistic fonts and displaying them in real time, it is convenient for users to directly view the rendering results, improving design efficiency; by obtaining parameter update information and updating the rendering effect through the user interface, only the parts that need to be updated in the multi-layered rendering structure need to be re-rendered, avoiding global redrawing, improving rendering performance, and at the same time providing the user with an interface for dynamically adjusting parameters, further improving the flexibility of artistic font design. Attached Figure Description

[0017] Figure 1 This is a flowchart illustrating the steps of a dynamic artistic font generation method based on SVG layered rendering and Canvas font calculation provided in an embodiment of this application. Figure 2 This is a schematic diagram of the structure of a dynamic artistic font generation device based on SVG layered rendering and Canvas font calculation provided in an embodiment of this application; Figure 3 This is a schematic diagram of the hardware structure of the electronic device provided in the embodiments of this application. Detailed Implementation

[0018] 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 of this application and are not intended to limit it. In the following description, when referring to the accompanying drawings, unless otherwise indicated, the same numbers in different drawings represent the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with those of this application; they are merely examples of apparatuses and methods consistent with some aspects of the embodiments of this application as detailed in the appended claims.

[0019] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application belongs. The terminology used herein is for the purpose of describing embodiments of this application only and is not intended to limit this application.

[0020] Before providing a detailed description of the embodiments of this application, some of the nouns and terms involved in the embodiments of this application will be explained first. The nouns and terms involved in the embodiments of this application are subject to the following interpretations.

[0021] SVG (Scalable Vector Graphics): SVG is an XML-based graphics standard mainly used to draw vector graphics on web pages. Its characteristics include lossless scaling, graphics composed of vector information such as points, lines, and shapes, and small file size.

[0022] Canvas: Canvas is a canvas element provided by HTML5 for drawing bitmap graphics on a webpage. It can be drawn and manipulated at the pixel level through the JavaScript interface, and is suitable for graphics scenarios that need to be updated frequently.

[0023] The concept of the present invention will now be explained in conjunction with the background art.

[0024] In web design and front-end development, artistic fonts are an important visual element widely used in advertising, promotional materials, user interfaces, and other scenarios. Currently, artistic font effects are typically achieved through web page CSS styles or image processing software (such as Photoshop).

[0025] Among these, CSS styles offer limited artistic font effects and struggle to achieve complex multi-layered effects (such as shadows, outlines, and background blending); artistic fonts generated by image processing software are static images, lacking dynamic editing capabilities and having large file sizes, making them unsuitable for real-time rendering; furthermore, when processing multiple fonts, the different font size calculation methods on different platforms or devices may lead to inaccurate font size calculations, resulting in inconsistent artistic font display effects and poor display quality.

[0026] The aforementioned problems limit the flexibility and expressiveness of artistic fonts on web pages, and there is an urgent need for a solution that can be dynamically edited, supports complex effects, and is compatible with multiple fonts. To this end, this application provides a method and related device for generating dynamic artistic fonts based on SVG layered rendering and Canvas font calculation. By combining the user interface, SVG and Canvas size calculation functions, the rendering effect of artistic fonts can be rendered and updated in real time, and complex multi-layer rendering effects can be achieved, with good cross-platform compatibility.

[0027] This application provides a method for generating dynamic artistic characters based on SVG layered rendering and Canvas font calculation, relating to the field of information technology. This method can be applied to terminals, servers, or software running on either a terminal or server. In some embodiments, the terminal can be a smartphone, tablet, laptop, desktop computer, smart speaker, smartwatch, or in-vehicle terminal, but is not limited to these. The server can be configured as an independent physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server providing basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDN, and big data and artificial intelligence platforms. The server can also be a node server in a blockchain network. The software can be an application implementing a method for generating dynamic artistic characters based on SVG layered rendering and Canvas font calculation, but is not limited to these forms.

[0028] This application can be used in a wide variety of general-purpose or special-purpose computer system environments or configurations. Examples include: personal computers, server computers, handheld or portable devices, tablet devices, multiprocessor systems, microprocessor-based systems, set-top boxes, programmable consumer electronics, network PCs, minicomputers, mainframe computers, and distributed computing environments including any of the above systems or devices. This application 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. This application can also be practiced in distributed computing environments where tasks are performed by remote processing devices connected via a communication network. In distributed computing environments, program modules can reside in local and remote computer storage media, including storage devices.

[0029] Figure 1 This is an optional flowchart of a dynamic artistic font generation method based on SVG layered rendering and Canvas font calculation provided in an embodiment of this application. Figure 1 The method may include, but is not limited to, steps S101 to S104.

[0030] S101. Obtain text and visual information input by the user through the user interface; S102. Calculate the actual font size based on the text information using Canvas technology, and design the artistic font effect in layers using SVG technology to obtain a multi-layered rendering structure. In some embodiments, the text information includes text content, font style, and font size. The actual font size is calculated based on the text information using Canvas technology, including: S1021. Obtain the text content, font style, and text size based on the text information; S1022. Calculate the actual font size based on the text content, font style, and font size using the Canvas's measureText method.

[0031] In some embodiments, the artistic font effect is designed in layers using SVG technology to obtain a multi-layered rendering structure, including: S1023. Define the text layer using the SVG's TEXT tag; S1024. Define the background layer using the RECT tag of SVG; S1025. Define the outer stroke layer, shadow text layer, and shadow stroke layer using the MASK and TEXT tags of SVG; The outer stroke layer is used to generate a stroke effect outside the text layer, the shadow text layer is used to generate a text shadow effect at a specified offset position of the text layer, and the shadow stroke layer is used to generate a stroke shadow effect at a specified offset position of the outer stroke layer.

[0032] Specifically, in S101 of this embodiment, the user can input the text information and visual effect information of the artistic font to be generated through the user interaction interface. The user interaction interface can be a web page interface or an application interface; the text information includes parameters such as text content, font style, and font size, while the visual effect information includes attributes such as color, shadow, stroke, and background. The user can adjust the above parameters in real time through the settings panel provided by the interaction interface, and the backend server uses the parameters as the input basis for subsequent rendering processing.

[0033] In S102 of this embodiment, to ensure a consistent display effect across different devices and font environments, it is necessary to obtain the actual size of the target text under the current font style and font size. Specifically, this involves calling the `measureText` method provided by Canvas to calculate the actual width and height of the text based on the parameters extracted from the user-input text information, generating accurate font size data. This solves the problem of size calculation errors caused by different font environments in existing technologies, providing accurate geometric size information for subsequent multi-layer rendering.

[0034] Meanwhile, to achieve multi-layered and high-precision artistic font rendering effects, this embodiment also uses SVG technology to design layered artistic font effects and construct a multi-layered rendering structure. Specifically, the text layer is defined using the SVG TEXT tag, which is responsible for presenting the basic shape and content of the text based on the text information input by the user; the background layer is defined using the SVG RECT tag, which is used to provide the background effect of the text, which can be a single color or a gradient effect, etc.; combined with the SVG MASK and TEXT tags, an outer stroke layer, a shadow text layer, and a shadow stroke layer are defined respectively. The outer stroke layer is located outside the text layer and can be used to enhance the clarity of the text boundary. The shadow text layer generates a shadow effect at a specified offset position of the text layer, which can add a three-dimensional effect to the text. The shadow stroke layer generates a shadow stroke effect at an offset position of the outer stroke layer, which further improves the visual expressiveness of the artistic font. The specific rendering effects of the background layer, outer stroke layer, shadow text layer, and shadow stroke layer are determined by the visual effect parameters input by the user.

[0035] It can be recognized that, through the above processing, this embodiment achieves the acquisition of input parameters, font size calculation, and construction of a multi-layer rendering structure, ensuring the customizability of the artistic font effect and laying the foundation for subsequent high-precision, multi-layer real-time rendering and dynamic updates.

[0036] S103. Generate artistic text based on text information, actual font size, visual effect information, and multi-layer rendering structure, and display the artistic text through the user interface. In some embodiments, generating artistic fonts based on text information, actual font size, visual effect information, and a multi-layered rendering structure includes: S1031. Analyze the visual effect information to obtain the first rendering parameters that are compatible with the multi-level rendering structure; S1032. Adjust the first rendering parameters according to the actual font size to obtain the second rendering parameters.

[0037] In some embodiments, adjusting the first rendering parameters according to the actual font size to obtain the second rendering parameters includes: S10321. Update the position and size parameters in the first rendering parameters according to the actual font size to obtain the second rendering parameters; The position and size parameters are used to control the position and size of the text layer, background layer, outer stroke layer, shadow text layer, and shadow stroke layer.

[0038] S1033. Perform layered rendering based on text information, second rendering parameters, and multi-layered rendering structure to obtain artistic text.

[0039] In some embodiments, layered rendering is performed based on text information, second rendering parameters, and a multi-layered rendering structure to obtain artistic text, including: S10331. Render the text layer according to the text information and the second rendering parameters to obtain the text content; S10332. Render the background layer according to the second rendering parameters to obtain the background effect; S10333: Render the background layer, outer stroke layer, shadow text layer and shadow stroke layer according to the second rendering parameters to obtain the background effect, outer stroke effect, text shadow effect and stroke shadow effect respectively. S10334. By combining text content, background effects, outer stroke effects, text shadow effects, and stroke shadow effects using SVG technology, artistic fonts are obtained.

[0040] Specifically, in S103 of this embodiment, based on the text information, actual font size, visual effect information, and multi-layer rendering structure obtained in the aforementioned steps, the artistic font is generated and displayed in real time on the user interface. This allows users to intuitively view the rendering results and easily adjust the input parameters according to the actual rendering results, thereby achieving an interactive and flexible design experience.

[0041] During the artistic font generation process, S1031 is responsible for parsing the visual effect information input by the user, such as parameters like color, transparency, shadow position, and stroke thickness, and generating a set of rendering parameters corresponding to the multi-layer rendering structure, namely the first rendering parameters.

[0042] Subsequently, in S1032, this embodiment adjusts the first rendering parameters a second time based on the actual font size obtained through Canvas technology in the aforementioned steps, generating the second rendering parameters. Specifically, the position and size parameters in the first rendering parameters are updated to ensure that the size and position of each rendering layer strictly match the actual font outline. The position parameters are used to control the coordinate positioning of the text layer, background layer, and stroke and shadow layers in the plane, while the size parameters are used to determine the width, height, and boundaries of each layer, thereby ensuring that the rendering results remain consistent under different fonts, font sizes, and display devices.

[0043] After parameter adjustment, this embodiment renders the text layer according to the text information and the second rendering parameters to generate basic text content; then the background layer, outer stroke layer, shadow text layer and shadow stroke layer are rendered in sequence to obtain the corresponding visual effects. Finally, the text content, background effect, outer stroke effect, text shadow effect and stroke shadow effect are integrated through SVG technology to form the final artistic font product, which is then displayed on the user interface.

[0044] It can be recognized that this embodiment achieves multi-layered high-precision rendering of artistic fonts through the above processing, while maintaining the consistency of visual effects under cross-platform and multi-font conditions.

[0045] S104. Obtain the parameter update information input by the user through the user interaction interface, and update the rendering effect of the artistic font in real time according to the parameter update information. The multi-layered rendering structure includes a text layer, a background layer, an outer stroke layer, a shadowed text layer, and a shadowed stroke layer.

[0046] In some embodiments, the rendering effect of the artistic font is updated in real time based on parameter update information, including: S1041. Determine the content to be updated in the multi-level rendering structure based on the parameter update information; S1042. Update the rendering effect of the content to be updated based on the parameter update information.

[0047] Specifically, in S104 of this embodiment, the parameter update information input by the user is obtained in real time through the user interface. This update information may include color adjustments, stroke thickness changes, shadow position changes, background transparency modifications, and font style modifications. Any parameter adjustments made by the user in the interface will be captured instantly, and the target area that needs to be updated in the multi-layer rendering structure will be accurately located according to the type of parameter adjustment, and only the parts where the parameters have changed will be updated.

[0048] It can be recognized that this embodiment, through the hierarchical rendering effect design and precise parsing of user input parameters, achieves re-rendering only for the parts where the parameters change, avoiding global redrawing, greatly improving rendering efficiency, reducing the delay between user adjustments and the final effect presentation, and further enhancing the experience of dynamically designed artistic fonts.

[0049] Please see Figure 2 This application also provides a dynamic artistic font generation device based on SVG layered rendering and Canvas font calculation, which can implement the above method. The device includes: The user interaction module is used to obtain text and visual information input by the user through the user interface. The font size calculation and multi-layer rendering structure construction module is used to calculate the actual font size based on text information using Canvas technology, and to design the artistic font effect in layers using SVG technology to obtain a multi-layer rendering structure. The artistic font generation and display module is used to generate artistic fonts based on text information, actual font size, visual effect information, and multi-layer rendering structure, and to display the artistic fonts through a user interface. The real-time update module is used to obtain parameter update information input by the user through the user interface, and update the rendering effect of the artistic font in real time according to the parameter update information. The multi-layered rendering structure includes a text layer, a background layer, an outer stroke layer, a shadowed text layer, and a shadowed stroke layer.

[0050] It is understood that the content of the above method embodiments is applicable to the present device embodiments. The specific functions implemented by the present device embodiments are the same as those of the above method embodiments, and the beneficial effects achieved are also the same as those achieved by the above method embodiments.

[0051] This application also provides an electronic device, which includes a memory and a processor. The memory stores a computer program, and the processor executes the computer program to implement the above-described method. This electronic device can be any smart terminal, including tablet computers, in-vehicle computers, etc.

[0052] It is understood that the content of the above method embodiments is applicable to this device embodiment. The specific functions implemented by this device embodiment are the same as those of the above method embodiments, and the beneficial effects achieved are also the same as those achieved by the above method embodiments.

[0053] Please see Figure 3 , Figure 3 The hardware structure of an electronic device according to another embodiment is illustrated. The electronic device includes: The processor 901 can be implemented using a general-purpose CPU (Central Processing Unit), microprocessor, application-specific integrated circuit (ASIC), or one or more integrated circuits, and is used to execute relevant programs to implement the technical solutions provided in the embodiments of this application. The memory 902 can be implemented as a read-only memory (ROM), static storage device, dynamic storage device, or random access memory (RAM). The memory 902 can store the operating system and other application programs. When the technical solutions provided in the embodiments of this specification are implemented through software or firmware, the relevant program code is stored in the memory 902 and is called and executed by the processor 901 using the methods described in the embodiments of this application. The 903 input / output interface is used to implement information input and output. The communication interface 904 is used to enable communication and interaction between this device and other devices. Communication can be achieved through wired means (such as USB, Ethernet cable, etc.) or wireless means (such as mobile network, WIFI, Bluetooth, etc.). Bus 905 transmits information between various components of the device (e.g., processor 901, memory 902, input / output interface 903, and communication interface 904); The processor 901, memory 902, input / output interface 903, and communication interface 904 are connected to each other within the device via bus 905.

[0054] This application also provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the above-described method.

[0055] It is understood that the content of the above method embodiments is applicable to this storage medium embodiment. The specific functions implemented in this storage medium embodiment are the same as those in the above method embodiments, and the beneficial effects achieved are also the same as those achieved in the above method embodiments.

[0056] This application also provides a computer program product, including a computer program that, when executed by a processor, implements the above-described method.

[0057] It is understood that the content of the above method embodiments is applicable to the embodiments of this program product. The specific functions implemented by the embodiments of this program product are the same as those of the above method embodiments, and the beneficial effects achieved are also the same as those achieved by the above method embodiments.

[0058] Memory, as a non-transitory computer-readable storage medium, can be used to store non-transitory software programs and non-transitory computer-executable programs. Furthermore, memory may include high-speed random access memory, and may also include non-transitory memory, such as at least one disk storage device, flash memory device, or other non-transitory solid-state storage device. In some embodiments, memory may optionally include memory remotely located relative to the processor, and these remote memories can be connected to the processor via a network. Examples of such networks include, but are not limited to, the Internet, intranets, local area networks, mobile communication networks, and combinations thereof.

[0059] This application provides a method and related device for generating dynamic artistic fonts based on SVG layered rendering and Canvas font calculation. The method obtains user-inputted text and visual effect information through a user interface, providing real-time parameter input and adjustment interfaces. This allows users to dynamically modify text content and visual effects, improving the flexibility of artistic font design. By calculating the actual font size based on text information using Canvas technology, accurate measurement of the actual size of different fonts on different platforms and devices is achieved, providing accurate size information for subsequent layered rendering and ensuring consistent rendering effects across different environments. Layered design of artistic font effects using SVG technology enables modular management of complex visual effects, facilitating high-precision rendering. Dynamically generating artistic fonts and displaying them in real-time allows users to directly view the rendering results, improving design efficiency. Obtaining parameter update information and updating the rendering effect through the user interface allows only the parts that need updating in the multi-layered rendering structure to be re-rendered, avoiding global redrawing and improving rendering performance. Furthermore, it provides users with an interface for dynamically adjusting parameters, further enhancing the flexibility of artistic font design.

[0060] The embodiments described in this application are for the purpose of more clearly illustrating the technical solutions of the embodiments of this application, and do not constitute a limitation on the technical solutions provided by the embodiments of this application. As those skilled in the art will know, with the evolution of technology and the emergence of new application scenarios, the technical solutions provided by the embodiments of this application are also applicable to similar technical problems.

[0061] Those skilled in the art will understand that the technical solutions shown in the figures do not constitute a limitation on the embodiments of this application, and may include more or fewer steps than shown, or combine certain steps, or different steps.

[0062] The device embodiments described above are merely illustrative. The units described as separate components may or may not be physically separate; that is, they may be located in one place or distributed across multiple network units. Some or all of the modules can be selected to achieve the purpose of this embodiment according to actual needs.

[0063] Those skilled in the art will understand that all or some of the steps in the methods disclosed above, as well as the functional modules / units in the systems and devices, can be implemented as software, firmware, hardware, or suitable combinations thereof.

[0064] The terms “first,” “second,” “third,” “fourth,” etc. (if present) in the specification and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of this application described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms “comprising” and “having,” and any variations thereof, are intended to cover non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0065] It should be understood that in this application, "at least one (item)" means one or more, and "more than" means two or more. "And / or" is used to describe the relationship between related objects, indicating that three relationships can exist. For example, "A and / or B" can represent three cases: only A exists, only B exists, and both A and B exist simultaneously, where A and B can be singular or plural. The character " / " generally indicates that the preceding and following related objects are in an "or" relationship. "At least one (item) of the following" or similar expressions refer to any combination of these items, including any combination of single or plural items. For example, at least one (item) of a, b, or c can represent: a, b, c, "a and b", "a and c", "b and c", or "a and b and c", where a, b, and c can be single or multiple.

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

[0067] 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 can be selected to achieve the purpose of this embodiment according to actual needs.

[0068] Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.

[0069] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes multiple instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods of the various embodiments of this application. The aforementioned storage medium includes various media capable of storing programs, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0070] The preferred embodiments of the present application have been described above with reference to the accompanying drawings, but this does not limit the scope of the claims of the present application. Any modifications, equivalent substitutions, and improvements made by those skilled in the art without departing from the scope and substance of the embodiments of the present application shall be within the scope of the claims of the present application.

Claims

1. A method for generating dynamic artistic fonts based on SVG layered rendering and Canvas font calculation, characterized in that, include: Obtain text and visual information input by the user through the user interface; The actual font size is calculated based on the text information using Canvas technology, and the artistic font effect is layered using SVG technology to obtain a multi-layered rendering structure. Artistic fonts are generated based on the text information, the actual font size, the visual effect information, and the multi-layer rendering structure, and then displayed through the user interface. The user-input parameter update information is obtained through the user interface, and the rendering effect of the artistic font is updated in real time according to the parameter update information. The multi-layer rendering structure includes a text layer, a background layer, an outer stroke layer, a shadow text layer, and a shadow stroke layer. The text information includes text content, font style, and font size. The step of calculating the actual font size based on the text information using Canvas technology includes: The text content, font style, and font size are obtained based on the text information; The actual font size is calculated using the Canvas's measureText method based on the text content, the font style, and the font size. The layered design of artistic font effects using SVG technology results in a multi-layered rendering structure, including: The text layer is defined using the TEXT tag of the SVG; The background layer is defined using the RECT tag of the SVG; The outer stroke layer, the shadow text layer, and the shadow stroke layer are defined by the MASK tag and the TEXT tag of the SVG; The process of generating artistic fonts based on the text information, the actual font size, the visual effect information, and the multi-layer rendering structure includes: The visual effect information is parsed to obtain first rendering parameters that are adapted to the multi-level rendering structure; The first rendering parameters are adjusted according to the actual font size to obtain the second rendering parameters; The artistic font is obtained by performing layered rendering based on the text information, the second rendering parameters, and the multi-layered rendering structure.

2. The method for generating dynamic artistic characters based on SVG layered rendering and Canvas font calculation according to claim 1, characterized in that, The outer stroke layer is used to generate a stroke effect outside the text layer, the shadow text layer is used to generate a text shadow effect at a specified offset position of the text layer, and the shadow stroke layer is used to generate a stroke shadow effect at a specified offset position of the outer stroke layer.

3. The method for generating dynamic artistic fonts based on SVG layered rendering and Canvas font calculation according to claim 1, characterized in that, The step of adjusting the first rendering parameters according to the actual font size to obtain the second rendering parameters includes: The position and size parameters in the first rendering parameters are updated based on the actual font size to obtain the second rendering parameters; The position parameter and the size parameter are used to control the position and size of the text layer, the background layer, the outer stroke layer, the shadow text layer, and the shadow stroke layer.

4. The method for generating dynamic artistic characters based on SVG layered rendering and Canvas font calculation according to claim 1, characterized in that, The step of performing layered rendering based on the text information, the second rendering parameters, and the multi-layered rendering structure to obtain the artistic font includes: The text layer is rendered according to the text information and the second rendering parameters to obtain the text content; The background layer is rendered according to the second rendering parameters to obtain the background effect; The background layer, the outer stroke layer, the shadow text layer, and the shadow stroke layer are rendered according to the second rendering parameters to obtain the background effect, the outer stroke effect, the text shadow effect, and the stroke shadow effect, respectively. The artistic font is obtained by combining the text content, background effect, outer stroke effect, text shadow effect, and stroke shadow effect using the SVG technology.

5. The method for generating dynamic artistic characters based on SVG layered rendering and Canvas font calculation according to claim 1, characterized in that, The step of updating the rendering effect of the artistic font in real time according to the parameter update information includes: The content to be updated in the multi-level rendering structure is determined based on the parameter update information; The rendering effect of the content to be updated is updated based on the parameter update information.

6. A dynamic artistic font generation device based on SVG layered rendering and Canvas font calculation, characterized in that, The apparatus for implementing the method as described in any one of claims 1 to 5 comprises: The user interaction module is used to obtain text and visual information input by the user through the user interface. The font size calculation and multi-layer rendering structure construction module is used to calculate the actual font size based on the text information using Canvas technology, and to perform layered design of artistic font effects using SVG technology to obtain a multi-layer rendering structure. The artistic font generation and display module is used to generate artistic fonts based on the text information, the actual font size, the visual effect information, and the multi-layer rendering structure, and to display the artistic fonts through the user interface. The real-time update module is used to obtain parameter update information input by the user through the user interaction interface, and update the rendering effect of the artistic font in real time according to the parameter update information. The multi-layered rendering structure includes a text layer, a background layer, an outer stroke layer, a shadowed text layer, and a shadowed stroke layer.

7. An electronic device, characterized in that, The electronic device includes a memory and a processor, the memory storing a computer program, and the processor executing the computer program to implement the method according to any one of claims 1 to 5.

8. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by a processor, it implements the method of any one of claims 1 to 5.

Images