Halo rendering method and device, equipment, medium and product

Abstract

The invention discloses a halo rendering method, device and equipment, a medium and a product. The method comprises the following steps: displaying a light source element and at least one target element in a display interface; the target element is rendered with a halo effect; the halo effect is determined based on the light emitting effect of the light source element and the distance between the target element and the light source element; and adjusting the halo effect of the target element in response to the light-emitting effect change of the light source element. When the light-emitting effect of the light source element in the display interface changes, the halo effect generated on the target element is correspondingly adjusted according to the change condition of the light-emitting effect. The dynamic halo effect is added to the target element in the display interface, the display interestingness is increased, and the display effect of the interface is optimized.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of display, in particular to a halo rendering method, device, equipment, medium and product. BACKGROUND

[0002] As an important component in user interface design, text bubbles are usually used to provide brief explanations, helping users understand the functions or contents of specific elements in the interface. The background of text bubbles is usually translucent, which ensures that the content behind is not blocked and focuses the user's attention on the prompt text. In the design process, the visual experience of users can be improved by beautifying the display effect of text bubbles in the user interface.

[0003] The prior art usually uses text rendering technology to convert the designed font from its vector representation into pixel data that can be displayed on the screen. This usually involves rendering the font, size, shape, or position of the text, as well as adding a halo effect. Through text rendering, the text content can be presented in a clearer, more beautiful, and more readable way in the display interface.

[0004] However, the existing text rendering method is monotonous and the display effect is not good. SUMMARY

[0005] The present application provides a halo rendering method, device, equipment, medium and product to realize dynamic rendering of target elements.

[0006] According to a first aspect of the present application, a halo rendering method is provided, comprising:

[0007] displaying a light source element and at least one target element in a display interface; the target element is rendered with a halo effect; the halo effect is determined based on the light emitting effect of the light source element and the distance between the target element and the light source element;

[0008] adjusting the halo effect of the target element in response to changes in the light emitting effect of the light source element.

[0009] According to a second aspect of the present application, a halo rendering device is provided, comprising:

[0010] an element display module for displaying a light source element and at least one target element in a display interface; the target element is rendered with a halo effect; the halo effect is determined based on the light emitting effect of the light source element and the distance between the target element and the light source element;

[0011] an effect adjustment module for adjusting the halo effect of the target element in response to changes in the light emitting effect of the light source element.

[0012] According to a third aspect of the present application, an electronic device is provided, the electronic device comprising:

[0013] at least one processor; and

[0014] a memory communicatively connected with the at least one processor; wherein

[0015] the memory stores a computer program executable by the at least one processor, and the computer program is executed by the at least one processor to enable the at least one processor to perform the halo rendering method according to any one of the embodiments of the present application.

[0016] According to another aspect of the present application, a computer readable storage medium is provided, the computer readable storage medium stores computer instructions for enabling a processor to implement the halo rendering method according to any one of the embodiments of the present application when executed by the processor.

[0017] According to another aspect of the present application, the embodiments of the present application further provide a computer program product, the computer program product comprises a computer program, and the computer program implements the halo rendering method according to any one of the embodiments of the present application when executed by a processor.

[0018] The technical solution of the embodiments of the present application, by displaying the light source element and at least one target element in the display interface; the target element is rendered with a halo effect; the halo effect is determined based on the light emitting effect of the light source element and the distance between the target element and the light source element; in response to the change of the light emitting effect of the light source element, the halo effect of the target element is adjusted. By adjusting the halo effect radiated on the target element according to the change of the light emitting effect when the light emitting effect of the light source element in the display interface changes. The dynamic halo effect is added to the target element in the display interface, the interestingness of the display is increased, and the display effect of the interface is optimized.

[0019] It should be understood that the content described in this part is not intended to identify key or important features of the embodiments of the present application, nor is it used to limit the scope of the present application. Other features of the present application will become apparent from the following description. BRIEF DESCRIPTION OF DRAWINGS

[0020] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings needed in the embodiment description will be briefly introduced as follows. Obviously, the drawings in the following description are only some embodiments of the present application, and other drawings can also be obtained by those skilled in the art without creative labor.

[0021] Figure 1 is a display interface example diagram of a halo rendering method provided according to an embodiment of the present application;

[0022] Figure 2 is a display interface example diagram in a halo rendering method according to an embodiment of the present application;

[0023] Figure 3 is a display interface example diagram in a halo rendering method according to an embodiment of the present application;

[0024] Figure 4 is a structural schematic diagram of a halo rendering device according to an embodiment of the present application;

[0025] Figure 5 is a structural schematic diagram of an electronic device according to an embodiment of the present application. DETAILED DESCRIPTION

[0026] In order to make the personnel in the art better understand the present application, the technical solutions in the embodiments of the present application will be described clearly and completely below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only a part of the embodiments of the present application, but not all the embodiments. Based on the embodiments in the present application, all other embodiments obtained by the personnel in the art without creative labor should belong to the protection scope of the present application.

[0027] It should be noted that the terms "first", "second", and the like in the specification and claims of the present application and the above-mentioned drawings are used to distinguish similar objects, and do not necessarily indicate a specific order or a chronological sequence. It should be understood that the data thus used can be interchanged under appropriate circumstances, so that the embodiments of the present application described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "include" and "have" and any variations thereof are intended to cover non-exclusive inclusion, for example, a process, method, system, product or device including a series of steps or units does not necessarily have to be limited to those steps or units clearly listed, but can include other steps or units not clearly listed or inherent to the process, method, product or device.

[0028] Embodiment One

[0029] Figure 1 A display interface example diagram of a halo rendering method is provided for the embodiment one of the present application, and the present embodiment can be applicable to the case of halo rendering for elements in a display interface. The method can be executed by a halo rendering device, which can be realized in the form of hardware and / or software, and the halo rendering device can be configured in an electronic device. As shown in the figure, the display interface includes a light source element 1 and at least one target element 2. The method includes: Figure 1

[0030] ​The light source element 1 and the at least one target element 2 are displayed in the display interface; the target element 2 is rendered with a halo effect; the halo effect is determined based on the light emitting effect of the light source element 1 and the distance between the target element 2 and the light source element 1.

[0031] In this embodiment, the display interface can be understood as an interface for displaying a picture, which can be a UI interface and the like. The light source element 1 can be understood as an element emitting light. The target element 2 can be understood as an element to which a halo is to be added. The halo effect can be understood as a display effect of a halo formed by the outward radiation of a light source to the target element 2. The light emitting effect can be understood as the effect of light emitted by the light source.

[0032] Specifically, when the display of the display interface is triggered, the processor can determine the content to be displayed in the display interface based on the function corresponding to the display interface, and the content to be displayed is the target element 2. In order to add a halo, the halo needs to be radiated outward by the light source element 1, and the outward radiation of the halo will form a halo effect on the target element 2. The halo effect is determined by the light emitting effect of the light source element 1 and the distance between the target element 2, such as the closer the distance between the light source element 1 and the target element 2, the larger and stronger the halo. The processor can render the target element 2 and the light source element 1 according to the set rendering mode, so as to display the rendered target element 2 and the light source element 1 in the display interface.

[0033] In response to the change of the light emitting effect of the light source element 1, the halo effect of the target element 2 is adjusted.

[0034] It can be known that the state of the light source element 1 itself can also be changed, such as the position, light emitting attribute and the like of the light source element 1 can be changed by setting. When the state of the light source element 1 changes, the light emitting effect of the light source element 1 changes, which causes the halo effect radiated by the light source element 1 to change.

[0035] Specifically, when the state of the light source element 1 changes, such as the position, change speed and light emitting attribute of the light source element 1 change, the light emitting effect of the light source element 1 changes, and the processor can adjust the halo effect radiated to the target element 2 based on the change of the state of the light source element 1 in response to the change of the light emitting effect of the light source element 1.

[0036] The technical scheme of the embodiment of the present application is that a light source element and at least one target element are displayed in a display interface; the target element is rendered with a halo effect; the halo effect is determined based on the light emitting effect of the light source element and the distance between the target element and the light source element; and the halo effect of the target element is adjusted in response to the change of the light emitting effect of the light source element. When the light emitting effect of the light source element in the display interface changes, the halo effect radiated on the target element is adjusted according to the change of the light emitting effect. The dynamic halo effect is added to the target element in the display interface, the interestingness of display is increased, and the display effect of the interface is optimized.

[0037] It can be known that since the target element 2 is not fixed in the display interface, it can present dynamic changes in the display interface, including changes such as up, down, left, right movement, foreground and background transformation or appearance and disappearance, which can cause the distance between the light source element 1 and the target element 2 to change, and the halo effect radiated on the target element 2 will also change accordingly, and the dynamic change of the target element 2 is controlled based on the presentation parameters of the target element 2 in the display interface.

[0038] Further, based on the above embodiment, it further comprises:

[0039] In response to the change of the presentation parameters of the target element 2, the halo effect of the target element 2 is adjusted; the change of the presentation parameters of the target element includes the change of the relative position between the target element and the light source element in the display interface, and / or the change of the priority of any target element in all target elements.

[0040] In the embodiment, the presentation parameters can be understood as the parameters of the target element 2 displayed in the display interface. The relative position can be understood as the relationship between the position of the light source element 1 and the target element 2. The presentation parameters can be modified by user voice control, touch control, gesture control, function trigger control (such as playing a voice function) and pre-set standard change parameters.

[0041] It can be known that multiple target elements 2 can be displayed in one display interface. If there are too many target elements 2, displaying all target elements 2 can cause the problem of crowded screen, making it difficult for the user of the display interface to find the target element 2 he wants. The display order of the target element 2 can be controlled by setting the display priority. The priority of all target elements 2 can be changed at the same time to achieve the purpose of batch display, or the priority of each target element 2 can be set. The priority can be understood as the order of display.

[0042] Specifically, when the presentation parameter of the target element 2 changes, the position of the target element 2 changes accordingly, and the processor can determine the halo effect of the halo to be rendered based on the change of the presentation parameter in response to the change of the presentation parameter of the target element 2. When the presentation parameter of the target element 2 changes, the position of the target element 2 changes in the display interface, and the processor can determine the relative position between the light source element 1 and the target element 2, compare the relative position with the relative position in the previous frame of the display interface, and determine whether the relative position changes. When the relative position changes, the halo effect also changes accordingly. The processor can adjust the halo effect of the target element 2 in response to the change of the presentation parameter of the target element 2.

[0043] The technical scheme of the embodiment of the application achieves the display change of the target element by modifying the presentation parameter. The floating and display change of the target element are controlled, and the interest of the element display in the display interface is improved.

[0044] When the change of the presentation parameter of the target element includes the change of the priority of any target element 2 in all target elements 2, the priority of any target element 2 in all target elements 2 is the appearance time priority of the target element 2, and the difference between the appearance time of the target element 2 and the current time is inversely proportional to the intensity of the halo effect.

[0045] Specifically, the processor can adjust the halo effect of the target element 2 in response to the change of the priority of any target element 2 in all target elements 2. The processor can determine the difference between the appearance time and the current time of the target element 2 through the appearance time of the target element 2 set in the priority, reflect the display time length of the target element 2 through the difference, and the difference is inversely proportional to the intensity of the halo effect. That is, the processor can highlight the target element 2 with a shorter display time length by lowering the intensity of the halo effect of the target element 2 with a longer display time length and raising the intensity of the halo effect of the target element 2 with a shorter display time length.

[0046] The technical scheme of the embodiment of the application determines the time difference of the target element through the priority setting to determine the intensity of the corresponding halo effect. The automatic determination of the halo intensity change is achieved. The interest of the element display in the display interface is improved.

[0047] Further, before adjusting the halo effect of the target element 2 in response to the change of the light emitting effect of the light source element 1, the method further comprises:

[0048] Adjusting the position of the light source element 1 in the display interface, the change speed of the light source element 1, the light emitting direction of the light source element 1, the light emitting color and the light emitting intensity of the light source element 1 to change the light emitting effect of the light source element 1.

[0049] The position, the change speed, the light emitting direction, the light emitting color and the light emitting intensity can be adjusted in different ways, such as user voice control, touch control, gesture control, function trigger control (such as playing voice function) and pre-set standard change parameters.

[0050] In the embodiment, the change speed can be the speed of change of the position and / or posture of the light source element 1, such as the moving speed and the rotating speed, or the speed of light emitted by the light source element 1, such as the change speed when the light is changed in the form of a breathing light, the emission rate when the light is emitted in the form of a ray, etc. The light emitting direction can be understood as the direction of the light halo, which can be emitted in a straight line or at an angle, etc., and can affect the position of the halo effect on the target element 2. The light emitting color can be understood as the color corresponding to the halo, which can affect the color presented by the halo effect. The light emitting intensity can be understood as the brightness of the light source, which can affect the range of the halo effect.

[0051] Optionally, the light source element 1 comprises a ring-shaped light circle, the color of the ring-shaped light circle is single or multiple, and the ring-shaped light circle can be understood as a source of light in the form of a ring. Different colors can be set by dividing different circular positions of the ring-shaped light circle.

[0052] Specifically, in order to present different light emitting effects of the light source element 1, the position of the light source element 1 in the display interface can be adjusted, such as setting the center and the radius, the light source element 1 moves in the form of a circle, or moves in a linear or other shape trajectory to change the position. The processor can also adjust the change speed of the light source element 1 itself or the light emitted by the light source element 1, such as the light source element 1 itself rotating at a set change speed to change the position of different colors in the ring-shaped light circle. The processor can also change the light emitting color to change the color of the halo. The light emitting intensity can also be changed, such as changing from strong to weak or from weak to strong.

[0053] Further, on the basis of the above embodiment, the target element 2 comprises a preset shape background pattern and a text superimposed on the background pattern, wherein the preset shape is a bubble shape.

[0054] In the embodiment, the background pattern can be understood as a frame for clearly displaying the text, which is set at the bottom of the text. The bubble shape can change with the size and length of the text.

[0055] For the purpose of facilitating understanding of the halo effect mentioned in the present application, a specific example is shown, Figure 2 A display interface example of a halo rendering method provided by the first embodiment of the present application is shown in FIG. 1. Figure 2As shown, it is a display interface at t time, by dividing the annular aperture into three light colors, respectively represented by straight line, dotted line and circle, it can be seen that the halo effect color formed by different light colors of light source element 1 on different positions of target element 2 is also different, and the halo effect is gradually lightened as the relative distance between target element 2 and light source element 1 becomes larger. The change speed of light source element 1 is r, and it rotates in the counterclockwise direction at the change speed r, after a seconds, the display screen formed is as shown in Figure 3 As shown, Figure 3 Another display interface example in a halo rendering method provided by the embodiment one of the application is as shown in Figure 3 As shown, it is a display interface at t+a time, the positions of the three light colors have changed, and the target element 2 in the upper right corner is away from the light source, compared with Figure 2 It can be found by comparison that the halo effect on the target element 2 above contains two kinds of circle and straight line, and the halo effect of the target element 2 away from the light source element 1 is lighter, realizing the dynamic change of halo.

[0056] Further, on the basis of the above embodiment, the step of displaying the light source element 1 and the at least one target element 2 in the display interface can include:

[0057] a1, obtaining the target element 2, the light source element 1, the element starting position information, the preset path parameter and the halo material resource.

[0058] In the embodiment, the target element 2 can be understood as including the text content and the background pattern that need to be displayed. The element starting position information can be understood as including the information composed of the position coordinates of each target element 2 appearing in the first frame display interface, for example, the element starting position of the first target element 2 is (x1, y1), the element starting position of the second target element 2 is (x2, y2), etc., and it also includes the priority of the target element 2 set. The preset path parameter can be understood as the parameter corresponding to the rendering path of the target element 2 set, which can include the parameters affecting the size of the text, such as text size and text width, and the upper, lower, left and right margins of the background generated according to the text. The halo material resource can be understood as the material resource corresponding to the halo effect formed by the light source element 1, and the halo material resource supports canvas clipping.

[0059] Specifically, when triggering the display of the display interface, the processor can obtain the target element 2 related to the display interface, such as guide words or response words, etc., and can also obtain the element starting position information and the preset path parameter set in advance for the display of each target element 2, and can also obtain the halo material resource required for the rendering of the target element 2 selected by the operator of the display interface.

[0060] b1, determine the target element 2 position of the target element 2 in the display interface according to the preset floating range and the element start position information.

[0061] In the embodiment, the preset floating range can be understood as the range interval for the target element 2 to move up, down, left and right, such as the preset floating range including the horizontal floating range and the vertical floating range, wherein the horizontal floating range is 0-a, and the vertical floating range is 0-b.

[0062] It can be known that when the target element 2 is dynamically displayed, each action can be split into each frame of picture, and the floating effect of the target element 2 is formed by changing the position of the target element 2 in each frame of picture when the display interface is continuously displayed. Each frame of display interface corresponds to the split display picture. The position of the target element 2 can be understood as the pixel position corresponding to the target element 2 in the display interface.

[0063] Specifically, for each target element 2 in the target element 2, the processor can determine the step length and direction of the target element 2 moving in the display interface according to the preset floating range, and superimpose the determined step length and direction and the text start position corresponding to the target element 2 in the element start position information, to determine the target element 2 position of the target element 2 in the display interface.

[0064] c1, determine the element area path of the target element 2 according to the target element 2 position and the preset path parameter.

[0065] Among them, the element area path includes the background pattern path and the text area path.

[0066] In the embodiment, the element area path can be understood as the path occupied by the whole target element 2, for example, the horizontal direction of the element area path is from x1-x11, and the vertical direction occupies y1-y4, and the path includes the collection of these points. The background pattern path can be understood as the path occupied by the background pattern in the target element 2. The text area path can be understood as the path occupied by the region of the text part in the target element 2.

[0067] Specifically, the processor can determine the text area path of the text area occupied by the text content corresponding to the target element 2 according to the text rendering parameter recorded in the preset path parameter according to the target element 2 position. The processor can calculate the background pattern path by combining the text area path with the margin corresponding to the bubble in the preset path parameter. The processor can take the whole of the text area path and the background pattern path as the element area path.

[0068] d1, determine the target light halo position and the target light halo according to the halo material resource and the element area path.

[0069] In the embodiment, the to-be-added halo position can be understood as a region in the display interface to which the halo effect is added. The to-be-added halo can be understood as a halo after being cropped according to the to-be-added halo position.

[0070] It can be known that the halo material resource can be in various types such as an animation form, and the halo material resource in the animation form is composed of halo material sub-resources displayed in the display interface. For the halo material resource with a rotation effect or a movement effect, the rotation angle or the movement position of the halo material resource displayed in the display interface can be adjusted to achieve the rotation effect or the movement effect.

[0071] Specifically, the processor can first determine the halo material resource corresponding to the display interface according to the light-emitting effect of the light source element 1, such as determining the halo material sub-resource or the halo material resource after rotation or movement adjustment. The target element 2 can be distinguished in the display interface through the element region path, and there can be different display situations of the foreground and the background in the target element 2. The processor can screen out the element region path corresponding to the target element 2 belonging to the foreground as the to-be-added halo position according to the preset rendering requirement. The halo material resource that does not need to be added is cropped through the to-be-added halo position to obtain the to-be-added halo.

[0072] e1、According to the preset rendering order, the element region path, the to-be-added halo position, and the target halo, the light source element 1 and the target element 2 are rendered to obtain a display interface containing the light source element 1 and at least one target element 2.

[0073] In the embodiment, the preset rendering order can be understood as a preset rendering level order and a priority order of the target element 2.

[0074] Specifically, the processor can first render the target element 2 in the order of priority from low to high according to the priority order in the preset rendering order, and the brightness of the target element 2 with low priority can be lower than that of the target element 2 with high priority. When rendering each target element 2, the processor can first render the background pattern of the target element 2 according to the background pattern path, then render the text content part of the target element 2 according to the preset path parameter and the text region path, render the to-be-added region by the to-be-added halo, and finally render the light source element 1 by the preset light source element 1 region path to obtain the target element 2 result after adding the halo effect in each frame after rendering.

[0075] The technical scheme of the embodiment of the application comprises the following steps: obtaining a target element, a light source element, element starting position information, preset path parameters and a halo material resource; determining a target element position of the target element in a display interface according to a preset floating range and the element starting position information; determining an element region path of the target element according to the target element position and the preset path parameters; determining a to-be-added halo position and a target halo according to the halo material resource and the element region path; and rendering the light source element and the target element according to a preset rendering sequence, the element region path, the to-be-added halo position and the target halo, so as to obtain a display interface containing the light source element and at least one target element. The position of the target element after moving in the display interface is determined by the preset floating range, which lays a foundation for presenting the floating effect of the target element. The accuracy of the halo adding position is ensured by determining the halo region to be rendered in the display interface and the to-be-added halo. The dynamic halo is added on the dynamic target element, the floating effect of the target element and the transformation effect of the halo are realized, and the display effect of the target element is optimized, thereby increasing the interestingness of the display.

[0076] Further, on the basis of the above-mentioned embodiment, the step of determining the target element 2 position of the target element 2 in the display interface according to the preset floating range and the element starting position information can be refined as follows:

[0077] randomly generating a moving parameter interval of the target element 2 according to the preset floating range; executing a callback on the target element 2 based on the moving parameter interval to determine a moving parameter value of the target element 2; and determining the target element 2 position of the target element 2 in the display interface according to the element starting position information and the moving parameter value.

[0078] In this embodiment, the moving parameter interval can be understood as a parameter region for controlling the floating of the target element 2 in consecutive picture frames, and can include a horizontal moving parameter interval and a vertical moving parameter interval, wherein the moving parameter interval of each target element 2 can be different. The moving parameter value can be understood as a distance of movement in a frame of picture, which includes a horizontal value and a vertical value.

[0079] Specifically, the processor can randomly generate the moving parameter interval of each target element 2 within the preset floating range. The processor can execute a callback on the target element 2 based on the moving parameter interval and a preset moving period length, wherein the moving period length can be set according to requirements, and the moving parameter value of the target element 2 in each frame is determined. The processor can determine the target text starting position corresponding to the first frame of each target element 2 in the element starting position information, superimpose the target text starting position and the moving parameter value of the second frame, and determine the target element 2 position of the target element 2 corresponding to the second frame. The target element 2 position of the target element 2 corresponding to the third frame is determined by superimposing the target element 2 position of the target element 2 corresponding to the second frame and the moving parameter value of the third frame, and so on.

[0080] For example, the horizontal movement parameter interval of the first target element 2 is 0-200 pixel values, and the vertical movement parameter interval is 0-50; the horizontal movement parameter interval of the second target element 2 is 0-100, and the vertical movement parameter interval is 0-50; the floating amplitude of the first target element 2 is greater than that of the second target element 2, and the setting of different movement parameter intervals increases the visual effect and interestingness of the overall picture. The movement period length of a complete movement is 3s, and through the function relationship between the set picture frame number per second, the movement period length and the movement parameter interval, the movement parameter value of each frame can be obtained, such as through the difference between the end points of the movement parameter interval divided by the product of the frame number and the movement period length, the movement parameter value under each frame can be determined.

[0081] Further, on the basis of the above embodiment, the step of determining the element region path of the target element 2 according to the position of the target element 2 and the preset path parameter can be further refined as:

[0082] determining the text region path in the target element 2 according to the position of the target element 2 and the text path sub-parameter in the preset path parameter; determining the horizontal path of the background pattern in the target element 2 according to the horizontal starting position in the position of the target element 2, the background horizontal two-side margin in the preset path parameter and the text region path; determining the vertical path of the background pattern in the target element 2 according to the vertical starting position in the position of the target element 2, the background vertical two-side margin in the preset path parameter and the text region path; determining the background pattern path according to the horizontal path and the vertical path; taking the text region path and the background pattern path as the element region path of the target element 2.

[0083] In this embodiment, the text path sub-parameter can be understood as a parameter for setting the text rendering mode, which can include text size, width and color, etc. The horizontal starting position can be understood as the first position point of the horizontal boundary in the position of the target element 2, such as the first position point on the leftmost side. The background horizontal two-side margin can include the distance between the left background pattern frame and the left side of the text, and the distance between the right background pattern frame and the right side of the text. The horizontal path can be understood as the path of the horizontal coverage area corresponding to the background pattern. The vertical starting position can be understood as the first position point of the vertical boundary in the position of the target element 2, such as the first position point on the uppermost side. The background vertical two-side margin can include the distance between the top background pattern frame and the top of the text, and the distance between the bottom background pattern frame and the bottom of the text. The vertical path can be understood as the path of the vertical coverage area corresponding to the background pattern.

[0084] Specifically, the processor can determine the area occupied by the text content according to the position of the target element 2 and the text path sub-parameter in the preset path parameter, and traverse each position point in the area occupied by the text content, and take all the traversed position points as the text area path in the target element 2. The processor can determine the text width corresponding to the whole text part through the text area path, and add the horizontal starting position in the position of the target element 2, the horizontal side margin of the background, and the text width to determine the horizontal termination position of the background pattern in the target element 2, and the area covered by the horizontal starting position to the horizontal termination position is the horizontal path. The processor can determine the text height corresponding to the whole text part through the text area path, and add the vertical starting position in the position of the target element 2, the vertical side margin of the background, and the text height to determine the vertical termination position of the background pattern in the target element 2, and the area covered by the vertical starting position to the vertical termination position is the vertical path. The processor can determine the background pattern path corresponding to the background pattern through the horizontal path and the vertical path. The processor can take the text area path and the background pattern path as the element area path of the target element 2 to distinguish the two parts of the text and the background pattern.

[0085] Further, on the basis of the above-mentioned embodiments, the step of determining the to-be-added halo position and the target halo according to the halo material resource and the element area path can be refined as:

[0086] According to the halo material resource, determine the halo sub-material belonging to each frame target element 2; perform callback on each halo sub-material based on a preset halo movement parameter interval to determine the halo movement parameter value corresponding to each halo sub-material; adjust the corresponding halo sub-material based on each halo movement parameter value to obtain a to-be-cut halo of the target element 2; screen and determine the area in the element area path that meets the preset addition condition to obtain a to-be-added halo position; cut the canvas area of the non-added part in the to-be-cut halo based on the to-be-added halo position to obtain a target halo.

[0087] In the embodiment, the preset halo movement parameter interval can be understood as a parameter adjustment interval corresponding to the dynamic effect of the halo. The halo to be cropped can be understood as a halo rendered corresponding to each frame of the display interface. The halo sub-material can be understood as a halo material displayed corresponding to each frame of the display interface. If the halo material resource is a dynamic picture, each frame constituting the dynamic halo material resource corresponds to different halo sub-materials. The halo material resource can also include a plurality of different sub-material resources. The halo movement parameter value can be understood as a parameter value for controlling the dynamic effect of the halo. The preset addition condition can be understood as a priority condition for displaying the target element 2, such as adding only the target element 2 in the foreground. The halo position to be added can be understood as the target element 2 to which the halo is added. The non-added part can be understood as a part of the halo to be cropped without the added area.

[0088] Specifically, the processor can perform callback on the halo material resource to be displayed by each frame of the display interface according to the preset halo movement parameter interval, determine the halo adjustment parameter corresponding to each frame of the display interface, adjust the halo material through the halo adjustment parameter, and obtain the halo to be cropped. The processor can determine the halo sub-materials belonging to the target element 2 of each frame according to the sub-material resources included in the halo material resource. For example, if the display sub-material resource 1 is displayed in the first to fifth frames, the halo sub-material corresponding to the target element 2 of the first to fifth frames is the sub-material resource 1. If the display sub-material resource 2 is displayed in the fifth to eighth frames, the halo sub-material corresponding to the target element 2 of the sixth to eighth frames is the sub-material resource 2. The processor can perform callback on each halo sub-material based on the preset halo movement parameter interval, determine the halo movement parameter value corresponding to each halo sub-material, and the determination method can refer to the determination of the movement parameter value in the above step. The processor can adjust the corresponding halo sub-material based on each halo movement parameter value, and obtain the halo to be cropped of the target element 2. The processor can compare the priority of each target element 2 belonging to each element area path with the preset addition condition, and screen out the area meeting the preset addition condition as the halo position to be added. The processor can crop the canvas area of the non-added part of the halo to be cropped based on the halo position to be added using canvas or clippath, and obtain the halo to be added.

[0089] Further, on the basis of the above embodiment, the step of rendering the light source element 1 and the target element 2 according to the preset rendering order, the element area path, the halo position to be added, and the target halo in the display interface to display the light source element 1 and at least one target element 2 can be refined as:

[0090] render the background pattern of the target element 2 through the background pattern path based on the preset rendering order; render the text of the target element 2 according to the text area path; render the target halo according to the halo position to be added; and render the light source element 1 based on the preset light source element 1 area path.

[0091] Specifically, the processor can render in the order from low to high based on the priority of the target element 2 in the preset rendering order. When rendering each target element 2, the processor can first render the background pattern of the target element 2 through the background pattern path, and then render the text content of the target element 2 based on the text area path and the text rendering sub-parameter in the preset path parameter. The processor can render the target halo according to the halo position to be added; and render the light source element 1 based on the preset light source element 1 area path, to obtain a display interface containing the light source element 1 and at least one target element 2.

[0092] The technical scheme of the embodiment of the application determines the dynamic parameter value of the target element in the display interface through the preset floating range, determines the position of the target element after moving in the display interface based on the dynamic parameter value, and lays the foundation for presenting the floating effect of the target element in the final display picture, and provides a basis for subsequent determination of the halo addition position in the display interface. By distinguishing the background pattern path and the text area path of the display interface through the position of the target element and the preset path parameter, a basis is provided for the subsequent rendering order to ensure that the text part is not blocked after rendering. By determining the halo area to be rendered according to the element area path under each frame of the display interface, and determining the changed halo to be cropped under each frame of the display interface through the preset halo movement parameter interval and halo material resources, a dynamic halo effect is realized. The halo to be added is obtained by cropping the halo to be cropped through the halo area to be rendered, which ensures the accuracy of the halo addition position under different frames and avoids the wrong addition of the halo. The dynamic halo is added on the dynamic target element, the floating effect of the target element and the transformation effect of the halo are realized. The display effect of the target element is optimized, and the interest of the display is increased.

[0093] Embodiment two

[0094] Figure 4 A structural schematic diagram of a halo rendering device provided by the third embodiment of the application is shown in FIG. 3. Figure 4 As shown in the figure, the device comprises:

[0095] An element display module for displaying a light source element and at least one target element in a display interface; the target element is rendered with a halo effect; the halo effect is determined based on the light-emitting effect of the light source element and the distance between the target element and the light source element.

[0096] The effect adjusting module is configured to adjust the halo effect of the target element in response to a change in the light emitting effect of the light source element.

[0097] The target element includes a background pattern of a preset shape and a text overlaid on the background pattern, and the preset shape is a bubble shape.

[0098] Optionally, the apparatus further includes:

[0099] The first adjusting module is configured to adjust the halo effect of the target element in response to a change in a presentation parameter of the target element, and the change in the presentation parameter of the target element includes a change in a relative position between the target element and the light source element in the display interface and / or a change in a priority of any target element among all target elements.

[0100] When the change in the presentation parameter of the target element includes the change in the priority of any target element among all target elements, the priority of any target element among all target elements is a target element appearance time priority, and a difference between the appearance time of the target element and a current time is inversely proportional to the intensity of the halo effect.

[0101] Optionally, the apparatus further includes a second adjusting module.

[0102] The second adjusting module is specifically configured to adjust a position of the light source element in the display interface, a change speed of the light source element, a light emitting direction of the light source element, a light emitting color and a light emitting intensity of the light source element to change the light emitting effect of the light source element before adjusting the halo effect of the target element in response to a change in the light emitting effect of the light source element.

[0103] Optionally, the apparatus further includes a display establishing module.

[0104] Further, the display establishing module includes:

[0105] An information obtaining unit is configured to obtain target elements, light source elements, element starting position information, preset path parameters and halo material resources.

[0106] A position determining unit is configured to determine a target element position of the target element in the display interface according to a preset floating range and the element starting position information.

[0107] A path determining unit is configured to determine an element area path of the target element according to the target element position and the preset path parameters.

[0108] A halo determining unit is configured to determine a to-be-added halo position and a target halo according to the halo material resources and the element area path.

[0109] The interface determination unit is used to render the light source element and the target element according to the preset rendering order, the element area path, the position of the halo to be added and the target halo, so as to obtain a display interface containing the light source element and at least one target element.

[0110] Furthermore, the position determination unit is specifically used for:

[0111] The movement parameter range of the target element is randomly generated according to a preset floating range;

[0112] A callback is executed on the target element based on the movement parameter range to determine the movement parameter value of the target element;

[0113] Based on the element's starting position information and the movement parameter value, the target element's position on the display interface is determined.

[0114] Furthermore, the path determination unit is specifically used for:

[0115] The text region path in the target element is determined based on the target element position and the text path sub-parameter in the preset path parameters;

[0116] The horizontal path of the background pattern in the target element is determined based on the horizontal starting position of the target element, the horizontal side margins of the background in the preset path parameters, and the path of the text area.

[0117] The vertical path of the background pattern in the target element is determined based on the vertical starting position of the target element, the vertical side margins of the background in the preset path parameters, and the path of the text area.

[0118] The background pattern path is determined based on the horizontal path and the vertical path;

[0119] The text area path and the background pattern path are used as the element area path of the target element.

[0120] Furthermore, the halo determination unit is specifically used for:

[0121] Based on the halo material resources, determine the halo sub-materials belonging to the target elements in each frame;

[0122] Based on the preset halo movement parameter range, a callback is executed on each of the halo sub-materials to determine the halo movement parameter value corresponding to each of the halo sub-materials;

[0123] Based on the halo movement parameter values, the corresponding halo sub-materials are adjusted to obtain the halo to be cropped for the target element;

[0124] Screening the region in the element region path to determine a region satisfying a preset adding condition, to obtain a to-be-added light halo position;

[0125] Cutting a canvas region of a non-adding part in the to-be-cut light halo based on the to-be-added light halo position, to obtain a target light halo.

[0126] The technical scheme of the embodiment of the application, by acquiring a target element, element start position information, a preset path parameter and a light halo material resource; for a target element in the target element, determining a target element position of the target element in the display interface according to a preset floating range and the element start position information; determining an element region path of the target element according to the target element position and the preset path parameter; the element region path includes a background pattern path and a text region path; determining a to-be-added light halo position and a to-be-added light halo of each frame target element according to the light halo material resource and each element region path; rendering each target element included in the display interface according to a preset rendering order, each to-be-added light halo position and each to-be-added light halo. The position of the target element after moving in the display interface is determined by the preset floating range, which lays the foundation for presenting the floating effect of the target element in the final display picture. By distinguishing the background pattern path and the text region path of the display interface, it is ensured that the text part will not be blocked. By determining the to-be-rendered light halo region and the to-be-added light halo of the display interface, the accuracy of the light halo adding position is ensured. The dynamic light halo is added on the dynamic target element, the floating effect of the target element and the transformation effect of the light halo are realized. The display effect of the target element is optimized, and the interest of the display is increased.

[0127] The light halo rendering device provided in the embodiment of the application can execute the light halo rendering method provided in any embodiment of the application, and has the corresponding function modules and beneficial effects of the execution method.

[0128] Embodiment three

[0129] Figure 5 A structural schematic diagram of an electronic device 40 that can be used to implement embodiments of the application is shown. The electronic device is intended to represent various forms of digital computers, such as laptops, desktops, tablets, personal digital assistants, servers, blade servers, mainframes, and other appropriate computers. The electronic device can also represent various forms of mobile devices, such as personal digital assistants, cellular telephones, smartphones, wearable devices (e.g., headsets, glasses, watches, etc.), and other similar computing devices. The components shown here, their connections and relationships, and their functions, are meant to be examples only, and are not intended to limit the implementations of the applications described and / or claimed in this document.

[0130] As Figure 5As shown, the electronic device 40 includes at least one processor 41, and a memory, such as a read-only memory (ROM) 42, a random access memory (RAM) 43, etc., connected to the at least one processor 41 in communication. The memory stores computer programs executable by the at least one processor 41, and the processor 41 can perform various appropriate actions and processes according to the computer programs stored in the read-only memory (ROM) 42 or loaded into the random access memory (RAM) 43 from the storage unit 48. In the RAM 43, various programs and data required for the operation of the electronic device 40 can also be stored. The processor 41, the ROM 42, and the RAM 43 are connected to each other through a bus 44. An input / output (I / O) interface 45 is also connected to the bus 44.

[0131] Various components in the electronic device 40 are connected to the I / O interface 45, including an input unit 46, such as a keyboard, a mouse, etc., an output unit 47, such as various types of displays, a speaker, etc., a storage unit 48, such as a magnetic disk, an optical disk, etc., and a communication unit 49, such as a network card, a modem, a wireless communication transceiver, etc. The communication unit 49 allows the electronic device 40 to exchange information / data with other devices through a computer network, such as the Internet, and / or various telecommunication networks.

[0132] The processor 41 can be various general and / or special-purpose processing components having processing and computing capabilities. Some examples of the processor 41 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various special-purpose artificial intelligence (AI) computing chips, various processors running machine learning model algorithms, a digital signal processor (DSP), and any appropriate processor, controller, microcontroller, etc. The processor 41 performs various methods and processes described above, such as the light halo rendering method.

[0133] In some embodiments, the light halo rendering method can be implemented as a computer program tangibly embodied in a computer readable storage medium, such as the storage unit 48. In some embodiments, part or all of the computer program can be loaded and / or installed onto the electronic device 40 via the ROM 42 and / or the communication unit 49. When the computer program is loaded onto the RAM 43 and executed by the processor 41, one or more steps of the light halo rendering method described above can be performed. Alternatively, in other embodiments, the processor 41 can be configured to perform the light halo rendering method by any other appropriate means, such as by means of firmware.

[0134] The various embodiments of the systems and techniques described above can be implemented in digital electronic circuitry, integrated circuitry, a field programmable gate array (FPGA), an application specific integrated circuit (ASIC), a system on a chip (SOC), a load programmable logic device (CPLD), computer hardware, firmware, software, and / or combinations thereof. These various embodiments can include implementation in one or more computer programs that are executable and / or interpretable on a programmable system including at least one programmable processor, which can be special or general purpose, coupled to receive data and instructions from, and to transmit data and instructions to, a storage system, at least one input device, and at least one output device.

[0135] Computer programs used to implement the processes of the application can be written in any combination of one or more programming languages. These computer programs can be provided to a processor of a general purpose computer, special purpose computer, or other programmable data processing apparatus, such that the computer program, when executed, can cause instructions defined in the flow charts and / or block diagrams to be implemented. The computer program can be executed entirely on a machine, partially on a machine, partially on a machine as a standalone software package and partially on a remote machine or entirely on a remote machine or server.

[0136] In the context of the present application, a computer-readable storage medium can be a tangible medium that can contain or store computer programs for use by or in connection with an instruction execution system, apparatus, or device. Computer-readable storage media can include, but are not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing. Alternatively, a computer-readable storage medium can be a machine-readable signal medium. More specific examples of the machine-readable storage medium will include one or more lines of electrical connections, portable computer disks, hard disk drives, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or Flash memory), optical fibers, portable compact disc read-only memories (CD-ROMs), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing.

[0137] To provide for interaction with a user, the systems and techniques described here can be implemented on an electronic device having a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user and a keyboard and a pointing device (e.g., a mouse or a trackball) by which the user can provide input to the electronic device. Other kinds of devices can be used to provide for interaction with a user as well; for example, feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form, including acoustic, speech, or tactile input.

[0138] The systems and techniques described here can be implemented in a computing system that includes a back end component (e.g., as a data server), or that includes a middleware component (e.g., an application server), or that includes a front end component (e.g., a user computer having a graphical user interface or a Web browser through which a user can interact with an implementation of the systems and techniques described here), or any combination of such back end, middleware, or front end components. The components of the system can be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include a local area network (LAN), a wide area network (WAN), blockchain network, and the Internet.

[0139] The computing system can include clients and servers. A client and server are generally remote from each other and typically interact through a communication network. The relationship of client and server arises by virtue of computer programs running on the respective computers and having a client-server relationship to each other. A server can be a cloud server, also known as a cloud computing server or cloud host, which is a host product in the cloud computing service system, to solve the defects of large management difficulty and weak business scalability in traditional physical host and VPS service.

[0140] In an embodiment, the present embodiment also includes a computer program product, the computer program product comprising a computer program which, when executed by a processor, implements the X-ray halo rendering method of any of the embodiments of the present application.

[0141] The computer program code can also be loaded onto a computer, other programmable data processing apparatus, or other devices to cause a series of operational steps to be performed on the computer, other programmable apparatus or other devices to produce the computer implemented process such that the

[0142] It should be understood that the various forms of flow shown in the figures are illustrative examples of implementing the steps of the application. Several steps have been described as being performed by a single device. It will be understood that these steps can be performed by a single device or multiple devices, and that the steps can be performed in an order different from that shown in the figures. For example, the steps described in the figures can be performed in parallel or in a different order, as long as the desired results of the application are achieved. The application is not limited in this regard.

[0143] The specific embodiments have been shown and described for the purposes of illustrating the physiological principles of the application and its practical application. It is therefore to be understood that various modifications and changes can be made by those skilled in the art without departing from the spirit and scope of the application. The scope of the application is not to be limited by specific illustrative embodiments. The application is to cover any and all modifications and the same is therefore intended to be within the scope of the application.

Claims

1. A halo rendering method, characterized in that, include: The light source element and at least one target element displayed in the display interface; The target element is rendered with a halo effect; the halo effect is determined based on the luminous effect of the light source element and the distance between the target element and the light source element. In response to changes in the luminous effect of the light source element, the halo effect of the target element is adjusted.

2. The method according to claim 1, characterized in that, Also includes: In response to changes in the rendering parameters of the target element, adjust the halo effect of the target element; The changes in the rendering parameters of the target element include: changes in the relative position of the target element and the light source element in the display interface, and / or changes in the priority of any target element among all target elements.

3. The method according to claim 2, characterized in that, When the change in the rendering parameters of the target element includes a change in the priority of any target element among all target elements, the priority of any target element among all target elements is the target element appearance time priority, and the difference between the appearance time of the target element and the current time is inversely proportional to the intensity of the halo effect.

4. The method according to claim 1, characterized in that, Before adjusting the halo effect of the target element in response to changes in the luminescence effect of the light source element, the method further includes: Adjusting the position of the light source element in the display interface, the speed of change of the light source element, the emission direction, emission color, and emission intensity of the light source element can change the emission effect of the light source element.

5. The method according to claim 1, characterized in that, The target element includes a background pattern of a preset shape and text superimposed on the background pattern, wherein the preset shape is a bubble shape.

6. The method according to claim 1, characterized in that, Displaying a light source element and at least one target element in the display interface includes: Acquire target element, light source element, element start position information, preset path parameters, and halo material resources; The target element position on the display interface is determined based on the preset floating range and the element's starting position information; The element region path of the target element is determined based on the target element's position and the preset path parameters; Based on the halo material resources and the element region path, determine the location of the halo to be added and the target halo; According to the preset rendering order, the element area path, the position of the halo to be added, and the target halo, the light source element and the target element are rendered to obtain a display interface containing the light source element and at least one target element.

7. The method according to claim 6, characterized in that, Determining the target element's position on the display interface based on the preset floating range and the element's starting position information includes: The movement parameter range of the target element is randomly generated according to a preset floating range; A callback is executed on the target element based on the movement parameter range to determine the movement parameter value of the target element; Based on the element's starting position information and the movement parameter value, the target element's position on the display interface is determined.

8. The method according to claim 6, characterized in that, Determining the element region path of the target element based on the target element's position and the preset path parameters includes: The text region path in the target element is determined based on the target element position and the text path sub-parameter in the preset path parameters; The horizontal path of the background pattern in the target element is determined based on the horizontal starting position of the target element, the horizontal side margins of the background in the preset path parameters, and the path of the text area. The vertical path of the background pattern in the target element is determined based on the vertical starting position of the target element, the vertical side margins of the background in the preset path parameters, and the path of the text area. The background pattern path is determined based on the horizontal path and the vertical path; The text area path and the background pattern path are used as the element area path of the target element.

9. The method according to claim 6, characterized in that, The step of determining the location of the halo to be added and the target halo based on the halo material resources and the element region path includes: Based on the halo material resources, determine the halo sub-materials belonging to the target elements in each frame; Based on the preset halo movement parameter range, a callback is executed on each of the halo sub-materials to determine the halo movement parameter value corresponding to each of the halo sub-materials; Based on the halo movement parameter values, the corresponding halo sub-materials are adjusted to obtain the halo to be cropped for the target element; The regions that meet the preset addition conditions are selected from the element region path to obtain the halo positions to be added. Based on the position of the halo to be added, the canvas area of ​​the non-added part of the halo to be cropped is cropped to obtain the target halo.

10. A halo rendering device, characterized in that, include: The element display module is used to display the light source element and at least one target element in the display interface; The target element is rendered with a halo effect; the halo effect is determined based on the luminous effect of the light source element and the distance between the target element and the light source element. The effect adjustment module is used to adjust the halo effect of the target element in response to changes in the luminous effect of the light source element.

11. An electronic device, characterized in that, The electronic device includes: At least one processor; and A memory communicatively connected to the at least one processor; wherein, The memory stores a computer program that can be executed by the at least one processor, the computer program being executed by the at least one processor to enable the at least one processor to perform the halo rendering method according to any one of claims 1-9.

12. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer instructions that cause a processor to execute the halo rendering method according to any one of claims 1-9.

13. A computer program product, characterized in that, The computer program product includes a computer program that, when executed by a processor, implements the halo rendering method according to any one of claims 1-9.

Images