Method and device for generating stroking streamer effect and electronic equipment

Abstract

The invention provides a stroking streamer effect generation method and device and electronic equipment, and the method comprises the steps: obtaining a target pattern contained in a target icon in response to a trigger instruction for the target icon displayed in a graphical user interface, and recognizing a contour line of the target pattern; segmenting the contour line to obtain a plurality of line segments; for each line segment in the plurality of line segments, configuring a gray value for the line segment according to a preset rule to obtain a grayed line segment; wherein one line segment is configured with a plurality of gray values; according to the grayed line segments corresponding to the plurality of line segments, generating a gray streamer graph; and generating a stroking streamer effect of the contour line of the target pattern based on the gray streamer graph and a preset streamer color, and displaying the stroking streamer effect at a specified position in the graphical user interface. According to the method, the corresponding edge streamer effect can be quickly generated, meanwhile, engine codes do not need to be modified, the streamer effect can be updated under the condition that the engine is not heated, and the generation efficiency of the edge streamer effect is improved.

Description

Methods, apparatus, and electronic devices for generating outlining glow effects Technical Field

[0001] This disclosure relates to the field of computer graphics processing technology, and in particular to a method, apparatus and electronic device for generating a stroked light effect. Background Technology

[0002] In related technologies, there are two ways to achieve the stroke animation effect: one is to use curves to generate line segments to achieve the stroke animation effect. This method cannot be supported in online projects and often requires modification of the engine code; the other is to manually fit straight lines to achieve the stroke animation effect. This method requires artists to create it manually, which has a high production cost. Summary of the Invention

[0003] The purpose of this disclosure is to provide a method, apparatus, and electronic device for generating edge-flowing light effects, so as to quickly generate animations with edge-flowing light effects.

[0004] In a first aspect, this disclosure provides a method for generating a stroke-glow effect. The method includes: responding to a trigger command for a target icon displayed in a graphical user interface, obtaining a target pattern contained in the target icon, and identifying the outline of the target pattern; segmenting the outline to obtain multiple line segments; configuring grayscale values ​​for each line segment according to a preset rule to obtain grayscale line segments; wherein a line segment is configured with multiple grayscale values; generating a grayscale glow image based on the grayscale line segments corresponding to the multiple line segments; generating a stroke-glow effect for the outline of the target pattern based on the grayscale glow image and a preset glow color, and displaying the stroke-glow effect at a specified position in the graphical user interface.

[0005] Secondly, this disclosure provides an apparatus for generating a flowing outline effect. The apparatus includes: a contour line recognition module, used to respond to a trigger command for a target icon displayed in a graphical user interface, acquire a target pattern contained in the target icon, and recognize the contour line of the target pattern; a line segmentation module, used to segment the contour line to obtain multiple line segments; a grayscale configuration module, used to configure grayscale values ​​for each of the multiple line segments according to a preset rule to obtain grayscale line segments; wherein, a line segment is configured with multiple grayscale values; an image generation module, used to generate a grayscale flowing outline image based on the grayscale line segments corresponding to the multiple line segments; and a coloring module, used to generate a flowing outline effect of the contour line of the target pattern based on the grayscale flowing outline image and a preset flowing outline color, and display the flowing outline effect at a specified position in the graphical user interface.

[0006] Thirdly, this disclosure provides an electronic device including a processor and a memory, the memory storing machine-executable instructions that can be executed by the processor, the processor executing the machine-executable instructions to implement the above-described method for generating the outlining and flowing light effect.

[0007] Fourthly, this disclosure provides a computer-readable storage medium storing computer-executable instructions that, when invoked and executed by a processor, cause the processor to implement the above-described method for generating the outlining and flowing light effect.

[0008] The embodiments disclosed herein bring the following beneficial effects: The method, apparatus, and electronic device for generating a stroke-glow effect provided herein first respond to a trigger command for a target icon displayed in a graphical user interface, obtain the target pattern contained in the target icon, and identify the outline of the target pattern; then, segment the outline to obtain multiple line segments; for each of the multiple line segments, configure grayscale values ​​for the line segment according to preset rules to obtain grayscale line segments; wherein, a line segment is configured with multiple grayscale values; then, generate a grayscale glow image based on the grayscale line segments corresponding to the multiple line segments; then, based on the grayscale glow image and a preset glow color, generate a stroke-glow effect for the outline of the target pattern, and display the stroke-glow effect at a specified position in the graphical user interface. In this method, the outline of the identified target pattern is segmented, and matching grayscale values ​​are generated from the segment data. The grayscale segments are then rasterized to generate a corresponding grayscale flowing light image. Simultaneously, a shader is used to overlay the grayscale flowing light image onto the edge flowing light effect. This method enables the rapid generation of the corresponding edge flowing light effect. Furthermore, this method does not require modification of the engine code and can update the flowing light effect without hot-updating the engine, thus improving the generation efficiency of the edge flowing light effect.

[0009] Other features and advantages of this disclosure will be set forth in the following description, or some features and advantages may be inferred from the description or determined without doubt, or may be learned by practicing the techniques described above.

[0010] To make the above-mentioned objects, features and advantages of this disclosure more apparent and understandable, preferred embodiments are described below in detail with reference to the accompanying drawings. Attached Figure Description

[0011] To more clearly illustrate the technical solutions in the specific embodiments of this disclosure or the prior art, the drawings used in the description of the specific embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of this disclosure. For those skilled in the art, other drawings can be obtained from these drawings without creative effort.

[0012] Figure 1 is a flowchart of a method for generating a flowing outline effect according to an embodiment of the present disclosure; Figure 2 is a schematic diagram of a target pattern according to an embodiment of the present disclosure; Figure 3 is a schematic diagram of a retrieval outline according to an embodiment of the present disclosure; Figure 4 is a schematic diagram of a grayscale flowing outline image according to an embodiment of the present disclosure; Figure 5 is a schematic diagram of a range masking image according to an embodiment of the present disclosure; Figure 6 is a schematic diagram of a flowing outline effect according to an embodiment of the present disclosure; Figure 7 is a structural schematic diagram of a device for generating a flowing outline effect according to an embodiment of the present disclosure; Figure 8 is a structural schematic diagram of an electronic device according to an embodiment of the present disclosure. Detailed Implementation

[0013] To make the objectives, technical solutions, and advantages of the embodiments of this disclosure clearer, the technical solutions of the embodiments of this disclosure will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this disclosure, and not all embodiments. The components of the embodiments of this disclosure described and shown in the accompanying drawings can generally be arranged and designed in various different configurations.

[0014] Therefore, the following detailed description of the embodiments of this disclosure provided in the accompanying drawings is not intended to limit the scope of the claimed disclosure, but merely to illustrate selected embodiments of the disclosure. All other embodiments obtained by those skilled in the art based on the embodiments of this disclosure without inventive effort are within the scope of protection of this disclosure.

[0015] In related technologies, there are two ways to achieve the stroke animation effect: one is to use curves to generate line segments to achieve the stroke animation effect. This method cannot support online projects and often requires modification of engine code. At the same time, the rendering efficiency of the effect is low. The other is to manually fit straight lines to achieve the stroke animation effect. This method requires artists to create it manually, which is inefficient, but the artistic expression effect is high.

[0016] Based on the above description, this disclosure provides a method, apparatus, and electronic device for generating a stroke-flowing light effect, which can be applied to scenarios of icon display and exit display.

[0017] To facilitate understanding of this disclosure, a method for generating a flowing light effect with outline provided by an embodiment of this disclosure will be described in detail first. As shown in Figure 1, the method includes the following specific steps: Step S102, in response to a trigger command for a target icon displayed in a graphical user interface, the target pattern contained in the target icon is obtained, and the outline of the target pattern is identified.

[0018] In a practical implementation, the target icon can be any triggerable identifier or control displayed in the graphical user interface. Different icons in the graphical user interface contain different patterns, and the patterns corresponding to different icons are pre-set and stored in a designated location. In one specific embodiment, the target pattern corresponding to the target icon can be displayed in an image with a black background. The target pattern can be any style of pattern, and the color of the target pattern is not black.

[0019] After obtaining the target pattern, edge retrieval needs to be performed to identify its contour lines. Optionally, deep learning methods, edge detection operators, or a combination of Gaussian filtering, non-maximum suppression, and double threshold detection can be used for edge retrieval.

[0020] Step S104: The outline is segmented to obtain multiple line segments.

[0021] In practical implementation, after obtaining the outline of the target pattern, the outline can be divided into multiple line segments according to a preset segmentation rule. Specifically, the preset segmentation rule can be to divide the outline into a preset number of line segments, to divide the outline into multiple line segments of the same length, or to randomly divide the outline into multiple line segments; wherein, the lengths of the multiple line segments after division can be the same or different.

[0022] In practical applications, the outline of the target pattern can include multiple outlines, and each outline can be divided into multiple line segments according to a preset segmentation rule. Since the length of each outline may be different, the length of the line segments corresponding to each outline may also be different.

[0023] Step S106: For each of the multiple line segments, configure grayscale values ​​for the line segment according to preset rules to obtain grayscale line segments; wherein, a line segment is configured with multiple grayscale values.

[0024] In practice, the above-mentioned preset rules can be determined according to R&D needs or user settings. For example, the preset rules can be to configure gray values ​​of line segments that decrease sequentially in a clockwise or counterclockwise order, or to configure gray values ​​of line segments that increase sequentially in a counterclockwise order.

[0025] Each grayscale line segment contains multiple grayscale values, meaning that a grayscale line segment is not a single color. For example, a grayscale line segment can be one where the grayscale value decreases sequentially from the start point to the end point, or it can be one where the grayscale value increases sequentially from the start point to the end point.

[0026] Step S108: Generate a grayscale streamer image based on the grayscale line segments corresponding to the multiple line segments.

[0027] In practical implementation, the grayscale line segments corresponding to multiple line segments can be drawn on a blank image based on their positions in the target pattern, resulting in a completed blank image, which is also a grayscale streaming image; alternatively, the grayscale line segments corresponding to multiple line segments in the target pattern can be extracted using a mask image to obtain a grayscale streaming image.

[0028] The grayscale streamer image includes multiple grayscale line segments corresponding to multiple line segments, and the shape formed by the multiple grayscale line segments is the same as the shape of the outline of the target pattern.

[0029] Step S110: Based on the grayscale light image and the preset light color, generate the outline light effect of the target pattern and display the outline light effect at a specified position in the graphical user interface.

[0030] In practice, the color of the flowing light effect can be determined by the user. For example, the flowing light color can be set to multiple colors or a single color, such as yellow, red, or green. Here, the flowing light color corresponds to the color of the outline of the target pattern.

[0031] In practical applications, the grayscale values ​​of the grayscale line segments in the grayscale flowing light image can be used to color the corresponding line segment areas in the outline in sequence. For example, the line segment areas can be colored sequentially in descending order of grayscale values, and then colored with the flowing light color to obtain the flowing light effect of the outline of the target pattern. Alternatively, the transparency of the corresponding line segment areas in the outline can be set according to the grayscale values ​​of the grayscale line segments in the grayscale flowing light image. The transparency of each line segment area will gradually change from the current transparency to opacity, and the color of each line segment area will be set to the flowing light color, thereby obtaining the flowing light effect of the outline.

[0032] In an optional embodiment, the outline glow effect of the target pattern is displayed for a preset duration. In response to the end of the glow effect display, the target icon is displayed at a designated location in the graphical user interface. The preset display duration can be arbitrarily set; that is, the outline glow effect is displayed for only the preset duration, and after display, the target icon is displayed at a designated location in the graphical user interface. This designated location can be a display area in the graphical user interface used to preview the currently triggered icon, or it can be a fixed display area in the graphical user interface.

[0033] This disclosure provides a method for generating a flowing light effect. The method involves segmenting the outline of the identified target pattern, generating matching grayscale values ​​from the segment data, and then performing rasterization on the grayscale segments to generate a corresponding grayscale flowing light image. Simultaneously, a shader is used to overlay the grayscale flowing light image onto the edge flowing light effect. This method achieves rapid generation of the corresponding edge flowing light effect without modifying the engine code, allowing for updates to the flowing light effect without hot-updating the engine, thus improving the generation efficiency of the edge flowing light effect.

[0034] The following examples illustrate the contour line segmentation method.

[0035] After obtaining the target pattern of the currently triggered target icon, the outline of the target pattern is identified. Figure 2 shows a schematic diagram of a target pattern provided in an embodiment of this disclosure. The target pattern in Figure 2 is the pattern corresponding to the white area in an image with a black background.

[0036] In practical applications, edge retrieval of the target pattern shown in Figure 2 can obtain the outline of the target pattern. Figure 3 is a schematic diagram of an outline retrieval provided by an embodiment of this disclosure. The lines with thickened edges of the target pattern in Figure 3 are the outlines of the target pattern. The target pattern includes 4 outlines, that is, each closed shape corresponds to a closed outline.

[0037] Based on the above description, the outline of the target pattern includes at least one line; the specific process of segmenting the outline to obtain multiple line segments may include: for each outline, segmenting the current outline based on a preset number of segments to obtain multiple line segments; wherein the number of line segments contained in the current outline matches the number of segments.

[0038] In practical implementation, the number of segments can be determined based on R&D needs or user settings. For example, the number of segments can be set to a fixed number or any number according to user requirements. Specifically, each outline can be randomly divided into multiple segments of a preset number, or it can be divided into multiple segments of a preset number on an even basis, or it can be divided into multiple segments of a preset number in order of length from largest to smallest or smallest to largest.

[0039] In an optional embodiment, the specific process of segmenting the current contour line based on a preset number of segments to obtain multiple line segments may include: determining the segment length according to the number of segments and the length of the current contour line; dividing the current contour line into multiple line segments according to the segment length; wherein the length of each line segment is the segment length.

[0040] In practice, each contour line can be treated as a current contour line. Then, the length of the current contour line is divided by the number of segments to obtain the average length, which is also the segment length. Then, the current contour line is divided into multiple line segments, each with a length equal to the segment length.

[0041] The following examples are used to describe how grayscale values ​​are configured for line segments.

[0042] Before configuring grayscale values ​​for line segments according to preset rules to obtain grayscale line segments, it is necessary to obtain the point set corresponding to the contour line; the point set is used to indicate the position of the vertex on the contour line; for each line segment among multiple line segments, the position of the vertex on the line segment is determined according to the point set.

[0043] In practical implementation, the point set corresponding to the contour line includes all vertices located on the contour line, and these vertices, when connected, form the contour line. The vertices in the point set corresponding to the contour line can be distributed uniformly or non-uniformly on the contour line. Based on the vertices contained in the point set, the positions of vertices on each of the multiple line segments can be determined, and these vertices can be distributed uniformly or non-uniformly on the line segments.

[0044] In an optional embodiment, to increase the randomness of the length and position of line segments within each contour line, the start and / or end positions of multiple line segments can be offset according to a preset offset. This offset can be a user-configured parameter, representing the length by which the line segment moves forward or backward.

[0045] In practical implementation, multiple line segments can be shifted forward or backward by a certain distance along the contour line in a clockwise or counterclockwise direction, based on the offset amount. Similarly, the starting position of a single line segment within the contour line can be shifted forward or backward by a certain distance along the contour line in a clockwise or counterclockwise direction, based on the offset amount. Since adjacent line segments within the same contour line are interconnected, shifting the starting position of one line segment forward will also shift the ending position of the preceding line segment forward.

[0046] Furthermore, if the starting point of the line segment is not in the point set, the starting point is inserted into the point set; if the ending point is not in the point set, the ending point is inserted into the point set.

[0047] In practical implementation, when segmenting the contour line, the starting position of the resulting line segment may not be the position of a vertex in the point set corresponding to the contour line, and the ending position of the resulting line segment may not be the position of a vertex in the point set corresponding to the contour line either. In this case, in order to facilitate subsequent point position retrieval in the point set, it is necessary to add the positions of the starting and ending positions of the line segment that are not in the point set to the point set.

[0048] Furthermore, for each line segment, the endpoint of the current line segment is checked in the point set to see if it is located after the starting point of the current line segment. If not, the starting and / or ending positions of the current line segment are adjusted. This method performs closed and cyclic processing on the line segments in the contour line, ensuring that multiple line segments formed by crossing the starting point of the contour line can be correctly connected.

[0049] In practical implementation, when the midpoint of a line segment is found to be behind the starting point, the starting or ending point of the line segment in the point set needs to be adjusted to ensure that the continuous point set on the contour line can be correctly traversed subsequently.

[0050] Based on the above description, the specific process of configuring grayscale values ​​for line segments according to preset rules to obtain grayscale line segments may include: determining sub-segments between every two adjacent vertices in a line segment; for each sub-segment, determining the grayscale value corresponding to the sub-segment based on the relative position of the adjacent vertices in the line segment; and obtaining the grayscale line segment based on the grayscale value corresponding to each sub-segment.

[0051] In practical implementation, each line segment from the start to the end of the contour line can be traversed based on the set of points corresponding to the contour line, and a grayscale value can be calculated for each line segment. This grayscale value is obtained by linear interpolation based on the relative position of the current vertex within the line segment. Specifically, for each line segment, the grayscale value corresponding to the sub-line segment can be determined based on the relative position of the sub-line segments between the current vertex and the next vertex within the line segment. The grayscale values ​​of different sub-line segments within the same line segment are different; for example, the grayscale values ​​can be configured in descending or ascending order from the start to the end of the line segment.

[0052] In an optional embodiment, the specific process of determining the grayscale value of each sub-segment based on the relative position of its adjacent vertices within the line segment may include: setting the grayscale value of the sub-segment corresponding to the starting position as a first grayscale value; setting the grayscale value of the target sub-segment located after the sub-segment corresponding to the starting position and before the sub-segment corresponding to the ending position as a second grayscale value; wherein the second grayscale value is greater than the first grayscale value, and the further the target sub-segment is from the sub-segment corresponding to the starting position, the larger the second grayscale value of the target sub-segment; and setting the grayscale value of the sub-segment corresponding to the ending position as a third grayscale value; wherein the third grayscale value is greater than the second grayscale value.

[0053] In practical implementation, the specific grayscale values ​​corresponding to the first and third grayscale values ​​mentioned above can be determined according to R&D requirements. For example, the first grayscale value can be set to 1, and the second grayscale value can be set to 255 or 125, etc. If the grayscale values ​​are normalized, the first grayscale value can be set to 0.1, and the second grayscale value can be set to 1. The sub-segment corresponding to the starting position is the sub-segment between the starting position and the next vertex of the line segment, and the sub-segment corresponding to the ending position is the sub-segment between the ending position and the vertex preceding the ending position.

[0054] In another optional embodiment, if the line segment has a reverse flag parameter, the second grayscale value is set to be less than the first grayscale value, and the third grayscale value is set to be less than the second grayscale value; wherein, the farther the target sub-line segment is from the sub-line segment corresponding to the starting position, the smaller the second grayscale value of the target sub-line segment. In this method, the first grayscale value is greater than the third grayscale value; for example, the first grayscale value is set to 1 or 255, and the third grayscale value is set to 0.

[0055] In an optional embodiment, to retain the grayscale value 0 as a mask during subsequent coloring processing and avoid setting the first or third grayscale value to 0, specifically, since the grayscale value 0 is used as a mask, the image area with the grayscale value 0 is set to transparent in the shader, and the grayscale value corresponding to the streamer calculation is set to a value between 1 and 255, thereby reducing the amount of data processing in the shader.

[0056] In an optional embodiment, the user can set an acceleration coefficient, which is used to perform nonlinear transformation processing on the gray values ​​of the line segment configuration to obtain the nonlinear transformation results of the gray values ​​corresponding to each sub-line segment in the line segment, thereby helping to improve the randomness of the subsequent light-flowing effect.

[0057] By precisely controlling the position of each segment's line, the grayscale gradient, and the acceleration effect, the above method can generate a visual effect with a dynamic sense of flow, which is particularly suitable for generating flowing borders in game effects or UI design.

[0058] The following examples describe a method for generating grayscale streamer images.

[0059] Specifically, the process of generating a grayscale streamer image based on the grayscale line segments corresponding to multiple line segments can include: drawing line segments with grayscale values ​​on a blank image based on the grayscale line segments corresponding to multiple line segments and a preset line width to obtain a blank image; and determining the blank image as a grayscale streamer image.

[0060] In practical implementation, a blank image with the same size as the target pattern needs to be pre-created as the output carrier. Grayscale line segments are drawn on this blank image. Then, based on the calculated grayscale values ​​of multiple line segments and the specified line width, the current line segment is drawn on the blank image, thus obtaining a grayscale streamer image gradually constructed from the current point to the next point.

[0061] Figure 4 shows a schematic diagram of a grayscale streaming image provided in an embodiment of this disclosure. The lines with gradually changing grayscale values ​​in the grayscale streaming image shown in Figure 4 are grayscale line segments. Different sub-segments within the same grayscale line segment have different grayscale values. The grayscale value decreases sequentially from the starting point to the ending point of the line segment, that is, the grayscale value at the starting point of the line segment is 1, and it gradually transitions to the grayscale value at the ending point of the line segment being 0.

[0062] Through the above processing, a corresponding grayscale flowing light image can be generated. Then, color processing can be performed on the grayscale flowing light image to obtain the effect of outlining flowing light.

[0063] The following examples are used to describe the coloring method.

[0064] Specifically, the process of generating the outline of the target pattern with a flowing light effect based on the grayscale flowing light image and the preset flowing light color can include: sampling the grayscale flowing light image to obtain the grayscale value configured for each line segment in the grayscale flowing light image; performing a smooth transition process on the grayscale value configured for each line segment according to the preset minimum and maximum values ​​to obtain a smooth transition result; setting the transparency corresponding to each line segment to the smooth transition result, and setting the flowing light color to the color of each line segment to obtain a target mask image with an outline flowing light effect; and applying the target mask image to the target pattern to obtain the outline of the target pattern with a flowing light effect.

[0065] In practical implementation, the preset minimum and maximum values ​​can be determined according to R&D needs or user settings. For example, when the grayscale value is normalized to between 0 and 1, the preset minimum value can be set to 0, and the preset maximum value can be set to 1; the preset maximum value can also be set to 2 or 255, etc. Specifically, based on the preset minimum and maximum values, the grayscale value configured for each line segment is processed to achieve a smooth transition, generating a result that smoothly changes between the preset minimum and the preset maximum value. This result is the smooth transition result.

[0066] In an optional embodiment, the specific process of smoothing the grayscale values ​​configured for each line segment according to a preset minimum and a preset maximum value to obtain a smooth transition result may include: multiplying the grayscale value configured for each line segment with a preset range masking image to obtain a contour masking image; wherein, the position of the contour line of the target pattern in the range masking image is one grayscale value, and the area outside the contour line in the range masking image is another grayscale value; and smoothing the grayscale values ​​corresponding to the vertices contained in each line segment in the contour masking image according to the preset minimum and the preset maximum value to obtain a smooth transition result corresponding to each vertex.

[0067] In practical implementation, the preset range mask is also the mask image corresponding to the outline of the target pattern in the target pattern. In this mask image, the position of the outline is set to a grayscale value, such as white or gray, and the area outside the outline is set to another grayscale value, such as black. Figure 5 shows a schematic diagram of a range mask image provided by an embodiment of this disclosure. The range mask image shown in Figure 5 is the mask image corresponding to the outline of the target pattern shown in Figure 2. In this mask image, the position of the outline is white, and the rest of the position is set to black.

[0068] In practical applications, the shader first samples the input texture, which contains information from two channels: the x-channel stores a grayscale flow map, and the y-channel stores a range mask map of the flow color. Sampling uses preset sampler states and texture coordinates. Next, the shader calculates the grayscale increment value by adding the externally passed ratio parameter to the grayscale value obtained from the sampled grayscale flow map. This result is then multiplied by the range mask map in the y-channel. This step ensures that the grayscale value does not exceed the expected range, avoiding color overflow issues. Then, the smoothstep function is used for smooth interpolation calculation. This function smooths the grayscale value based on preset minimum and maximum values, generating a result that smoothly changes between 0 and 1. Finally, the base color of the material is set to the flow color defined by the artist; this flow color will serve as the base color for the flow effect. The transparency is set to the previously calculated smooth transition result, so the flow effect will change transparency according to the grayscale value, creating a fading visual effect. Since the shading process in the shader is performed in real time, the transparency of each sub-segment will change during the smooth interpolation process, resulting in the change of each sub-segment from transparent to opaque, thus producing a flowing light effect.

[0069] Finally, the final rendered result is returned. This shader achieves a controllable flowing light effect by combining a flowing light grayscale image, a mask image, and external parameters, featuring smooth transitions and customizable colors. The external parameters can include, but are not limited to, the number of segments, direction reversal indicators, segment width, acceleration coefficient, and offset.

[0070] Figure 6 illustrates a stroke-light effect according to an embodiment of this disclosure. The five images in Figure 6 correspond to five different times, showing the sub-line segments corresponding to various grayscale values ​​based on the transparency configured according to the smooth transition result. In Figure 6, sub-line segments configured with the same grayscale value in each contour are displayed at the same time. Thus, the sub-line segments corresponding to each contour line gradually reveal the entire contour line from transparent to opaque, thereby displaying the stroke-light effect. The stroke-light effect ends after the entire contour line is displayed.

[0071] Corresponding to the above method embodiments, this disclosure provides an apparatus for generating a flowing outline effect, as shown in FIG7. The apparatus includes: an outline recognition module 70, which is used to obtain the target pattern contained in the target icon and recognize the outline of the target pattern in response to a trigger command for a target icon displayed in a graphical user interface.

[0072] The line segmentation module 71 is used to segment the outline to obtain multiple line segments.

[0073] The grayscale configuration module 72 is used to configure grayscale values ​​for each of the multiple line segments according to preset rules, so as to obtain grayscale line segments; wherein, a line segment is configured with multiple grayscale values.

[0074] Image generation module 73 is used to generate grayscale streamer images based on the grayscale line segments corresponding to multiple line segments.

[0075] The coloring module 74 is used to generate the outline of the target pattern with a flowing light effect based on the grayscale flowing light image and the preset flowing light color, and to display the outline flowing light effect at a specified position in the graphical user interface.

[0076] The aforementioned device for generating edge flowing light effects generates corresponding grayscale images by segmenting the outline of the target pattern into line segments, generating matching grayscale values ​​from the line segment data, and then performing rasterization on the grayscale line segments. Simultaneously, a shader is used to overlay the grayscale flowing light image onto the edge flowing light effect. This method achieves rapid generation of the corresponding edge flowing light effect without modifying the engine code, allowing for updates to the flowing light effect without hot-updating the engine, thus improving the generation efficiency of the edge flowing light effect.

[0077] Furthermore, the above-mentioned device also includes an icon display module for: displaying a target icon at a specified location in the graphical user interface in response to the end of displaying the outline glow effect.

[0078] Furthermore, the aforementioned contour line includes at least one; based on this, the aforementioned line segmentation module 71 is used to: for each contour line, based on a preset number of segments, segment the current contour line to obtain multiple line segments; wherein the number of line segments contained in the current contour line matches the number of segments.

[0079] Furthermore, the above-mentioned line segmentation module 71 is also used to: determine the segment length according to the number of segments and the length of the current contour line; divide the current contour line into multiple line segments according to the segment length; wherein the length of each line segment is the segment length.

[0080] Furthermore, the above-mentioned device also includes a vertex determination module, used to: obtain a set of points corresponding to the contour line before configuring grayscale values ​​for the line segments according to preset rules to obtain grayscale line segments; wherein the set of points is used to indicate the position of the vertex located on the contour line; and for each of the multiple line segments, determine the position of the vertex located on the line segment according to the set of points.

[0081] Furthermore, the above-mentioned device also includes an offset module, used to offset the starting position and / or ending position of multiple line segments according to a preset offset amount.

[0082] Furthermore, the above-mentioned device also includes a vertex insertion module, used to: insert the starting position of the line segment into the point set if the starting position is not in the point set; and insert the ending position into the point set if the ending position is not in the point set.

[0083] Furthermore, the above-mentioned device also includes a position adjustment module, used to: for each line segment, search in the point set whether the end position of the current line segment is located behind the start position of the current line segment; if not, adjust the start position and / or end position of the current line segment.

[0084] Furthermore, the grayscale configuration module 72 described above is used to: determine the sub-segment between every two adjacent vertices in the line segment; for each sub-segment, determine the grayscale value corresponding to the sub-segment based on the relative position of the adjacent vertices in the line segment; and obtain the grayscale line segment based on the grayscale value corresponding to each sub-segment.

[0085] Furthermore, the aforementioned grayscale configuration module 72 is also used to: set the grayscale value of the sub-line segment corresponding to the starting position to a first grayscale value; set the grayscale value of the target sub-line segment located after the sub-line segment corresponding to the starting position and before the sub-line segment corresponding to the ending position to a second grayscale value; wherein the second grayscale value is greater than the first grayscale value, and the farther the target sub-line segment is from the sub-line segment corresponding to the starting position, the larger the second grayscale value of the target sub-line segment; and set the grayscale value of the sub-line segment corresponding to the ending position to a third grayscale value; wherein the third grayscale value is greater than the second grayscale value.

[0086] Furthermore, the above-mentioned device also includes a reverse module, used to: if the line segment is set with a reverse flag parameter, set the second gray value to be less than the first gray value, and set the third gray value to be less than the second gray value; wherein, the farther the target sub-line segment is from the sub-line segment corresponding to the starting position, the smaller the second gray value of the target sub-line segment.

[0087] Furthermore, the image generation module 73 is used to: draw line segments with grayscale values ​​on a blank image based on the grayscale line segments corresponding to multiple line segments and a preset line width, to obtain a drawn blank image; and to determine the drawn blank image as a grayscale streamer image.

[0088] Furthermore, the aforementioned coloring module 74 is used to: sample a grayscale flow image to obtain the grayscale value configured for each line segment in the grayscale flow image; perform smooth transition processing on the grayscale value configured for each line segment according to a preset minimum value and a preset maximum value to obtain a smooth transition result; set the transparency corresponding to each line segment to the smooth transition result, and set the flow color to the color of each line segment to obtain a target mask image with a stroke flow effect; apply the target mask image to the target pattern to obtain the stroke flow effect of the outline of the target pattern.

[0089] Furthermore, the aforementioned coloring module 74 is also used to: multiply the grayscale value configured for each line segment with a preset range mask image to obtain a contour mask image; wherein, the position of the outline of the target pattern in the range mask image is a grayscale value, and the area in the range mask image other than the outline is a different grayscale value; and according to a preset minimum value and a preset maximum value, perform smooth transition processing on the grayscale values ​​corresponding to the vertices contained in each line segment in the contour mask image to obtain a smooth transition result corresponding to each vertex.

[0090] The device for generating the outlining flowing light effect provided in this embodiment has the same implementation principle and the same technical effect as the aforementioned method embodiment. For the sake of brevity, any parts not mentioned in the device embodiment can be referred to the corresponding content in the aforementioned method embodiment.

[0091] This disclosure also provides an electronic device, as shown in FIG8, which includes a processor and a memory. The memory stores machine-executable instructions that can be executed by the processor. The processor executes the machine-executable instructions to implement the above-described method for generating the outlining and flowing light effect.

[0092] Specifically, the method for generating the above-mentioned outline glow effect includes: responding to a trigger command for a target icon displayed in a graphical user interface, obtaining the target pattern contained in the target icon, and identifying the outline of the target pattern; segmenting the outline to obtain multiple line segments; configuring grayscale values ​​for each line segment according to preset rules to obtain grayscale line segments; wherein, a line segment is configured with multiple grayscale values; generating a grayscale glow image based on the grayscale line segments corresponding to the multiple line segments; generating an outline glow effect for the outline of the target pattern based on the grayscale glow image and a preset glow color, and displaying the outline glow effect at a specified position in the graphical user interface.

[0093] The above-described method for generating the edge flowing light effect involves segmenting the outline of the target pattern, generating matching grayscale values ​​from the segment data, rasterizing the grayscale segments to generate a corresponding grayscale flowing light image, and then using a shader to overlay the grayscale flowing light image onto the edge flowing light effect. This method enables the rapid generation of the corresponding edge flowing light effect without modifying the engine code, allowing for updates to the flowing light effect without hot-updating the engine, thus improving the generation efficiency of the edge flowing light effect.

[0094] In an optional embodiment, the method further includes: displaying a target icon at a specified location in the graphical user interface in response to ending the display of the outline glow effect.

[0095] In an optional embodiment, the outline line includes at least one; based on this, the step of segmenting the outline line to obtain multiple line segments includes: for each outline line, segmenting the current outline line based on a preset number of segments to obtain multiple line segments; wherein the number of line segments contained in the current outline line matches the number of segments.

[0096] In an optional embodiment, the step of segmenting the current contour line based on a preset number of segments to obtain multiple line segments includes: determining the segment length according to the number of segments and the length of the current contour line; dividing the current contour line into multiple line segments according to the segment length; wherein the length of each line segment is the segment length.

[0097] In an optional embodiment, before the step of configuring grayscale values ​​for line segments according to preset rules to obtain grayscale line segments, the above method further includes: obtaining a point set corresponding to the contour line; wherein the point set is used to indicate the position of the vertex located on the contour line; for each of the multiple line segments, the position of the vertex located on the line segment is determined according to the point set.

[0098] In an optional embodiment, the above method further includes: offsetting the starting position and / or ending position of multiple line segments according to a preset offset.

[0099] In an optional embodiment, the method further includes: if the starting position of the line segment is not in the point set, inserting the starting position into the point set; if the ending position is not in the point set, inserting the ending position into the point set.

[0100] In an optional embodiment, the method further includes: for each line segment, searching in the point set whether the end position of the current line segment is located behind the start position of the current line segment; if not, adjusting the start position and / or end position of the current line segment.

[0101] In an optional embodiment, the step of configuring grayscale values ​​for line segments according to preset rules to obtain grayscale line segments includes: determining sub-segments between every two adjacent vertices in a line segment; for each sub-segment, determining the grayscale value corresponding to the sub-segment based on the relative position of the adjacent vertices in the line segment; and obtaining the grayscale line segment based on the grayscale value corresponding to each sub-segment.

[0102] In an optional embodiment, the step of determining the grayscale value of each sub-segment based on the relative position of its adjacent vertices within the segment includes: setting the grayscale value of the sub-segment corresponding to the starting position to a first grayscale value; setting the grayscale value of the target sub-segment located after the sub-segment corresponding to the starting position and before the sub-segment corresponding to the ending position to a second grayscale value; wherein the second grayscale value is greater than the first grayscale value, and the further the target sub-segment is from the sub-segment corresponding to the starting position, the larger the second grayscale value of the target sub-segment; and setting the grayscale value of the sub-segment corresponding to the ending position to a third grayscale value; wherein the third grayscale value is greater than the second grayscale value.

[0103] In an optional embodiment, the method further includes: if the line segment is set with a reverse flag parameter, setting the second gray value to be less than the first gray value, and setting the third gray value to be less than the second gray value; wherein, the farther the target sub-line segment is from the sub-line segment corresponding to the starting position, the smaller the second gray value of the target sub-line segment.

[0104] In an optional embodiment, the step of generating a grayscale streamer image based on the grayscale line segments corresponding to multiple line segments includes: drawing line segments with grayscale values ​​on a blank image based on the grayscale line segments corresponding to multiple line segments and a preset line width to obtain a drawn blank image; and determining the drawn blank image as a grayscale streamer image.

[0105] In an optional embodiment, the step of generating a target pattern with a stroked light effect on the outline of the target pattern based on a grayscale light image and a preset light color includes: sampling the grayscale light image to obtain the grayscale value configured for each line segment in the grayscale light image; performing a smooth transition process on the grayscale value configured for each line segment according to a preset minimum value and a preset maximum value to obtain a smooth transition result; setting the transparency corresponding to each line segment to the smooth transition result, and setting the light color to the color of each line segment to obtain a target mask image with a stroked light effect; and applying the target mask image to the target pattern to obtain the stroked light effect on the outline of the target pattern.

[0106] In an optional embodiment, the step of smoothing the grayscale values ​​configured for each line segment according to a preset minimum and a preset maximum value to obtain a smooth transition result includes: multiplying the grayscale value configured for each line segment with a preset range masking image to obtain a contour masking image; wherein, the position of the contour line of the target pattern in the range masking image is one grayscale value, and the area outside the contour line in the range masking image is another grayscale value; and smoothing the grayscale values ​​corresponding to the vertices contained in each line segment in the contour masking image according to the preset minimum and the preset maximum value to obtain a smooth transition result corresponding to each vertex.

[0107] Furthermore, the electronic device shown in Figure 8 also includes a bus 102 and a communication interface 103, with the processor 101, the communication interface 103, and the memory 100 connected via the bus 102.

[0108] The memory 100 may include high-speed random access memory (RAM) and may also include non-volatile memory, such as at least one disk storage device. Communication between this system network element and at least one other network element is achieved through at least one communication interface 103 (which can be wired or wireless), such as the Internet, wide area network, local area network, metropolitan area network, etc. The bus 102 may be an ISA bus, PCI bus, or EISA bus, etc. The bus can be divided into address bus, data bus, control bus, etc. For ease of illustration, only a single bidirectional arrow is used in Figure 8, but this does not indicate that there is only one bus or one type of bus.

[0109] Processor 101 may be an integrated circuit chip with signal processing capabilities. In implementation, each step of the above method can be completed by the integrated logic circuitry in the hardware of processor 101 or by instructions in software form. The processor 101 can be a general-purpose processor, including a Central Processing Unit (CPU), a Network Processor (NP), etc.; it can also be a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), a Field-Programmable Gate Array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components. It can implement or execute the methods, steps, and logic block diagrams disclosed in the embodiments of this disclosure. The general-purpose processor can be a microprocessor or any conventional processor. The steps of the methods disclosed in the embodiments of this disclosure can be directly manifested as execution by a hardware decoding processor, or execution by a combination of hardware and software modules in the decoding processor. The software module can reside in a readily available storage medium in the art, such as random access memory, flash memory, read-only memory, programmable read-only memory, electrically erasable programmable memory, or registers. This storage medium is located in memory 100, and processor 101 reads information from memory 100 and, in conjunction with its hardware, completes the steps of the method described in the foregoing embodiments.

[0110] This disclosure also provides a computer-readable storage medium storing computer-executable instructions. When these computer-executable instructions are called and executed by a processor, they cause the processor to implement the above-described method for generating the outlined light effect. For specific implementation details, please refer to the method embodiments, which will not be repeated here.

[0111] Specifically, the method for generating the above-mentioned outline glow effect includes: responding to a trigger command for a target icon displayed in a graphical user interface, obtaining the target pattern contained in the target icon, and identifying the outline of the target pattern; segmenting the outline to obtain multiple line segments; configuring grayscale values ​​for each line segment according to preset rules to obtain grayscale line segments; wherein, a line segment is configured with multiple grayscale values; generating a grayscale glow image based on the grayscale line segments corresponding to the multiple line segments; generating an outline glow effect for the outline of the target pattern based on the grayscale glow image and a preset glow color, and displaying the outline glow effect at a specified position in the graphical user interface.

[0112] The above-described method for generating the edge flowing light effect involves segmenting the outline of the target pattern, generating matching grayscale values ​​from the segment data, rasterizing the grayscale segments to generate a corresponding grayscale flowing light image, and then using a shader to overlay the grayscale flowing light image onto the edge flowing light effect. This method enables the rapid generation of the corresponding edge flowing light effect without modifying the engine code, allowing for updates to the flowing light effect without hot-updating the engine, thus improving the generation efficiency of the edge flowing light effect.

[0113] In an optional embodiment, the method further includes: displaying a target icon at a specified location in the graphical user interface in response to ending the display of the outline glow effect.

[0114] In an optional embodiment, the outline line includes at least one; based on this, the step of segmenting the outline line to obtain multiple line segments includes: for each outline line, segmenting the current outline line based on a preset number of segments to obtain multiple line segments; wherein the number of line segments contained in the current outline line matches the number of segments.

[0115] In an optional embodiment, the step of segmenting the current contour line based on a preset number of segments to obtain multiple line segments includes: determining the segment length according to the number of segments and the length of the current contour line; dividing the current contour line into multiple line segments according to the segment length; wherein the length of each line segment is the segment length.

[0116] In an optional embodiment, before the step of configuring grayscale values ​​for line segments according to preset rules to obtain grayscale line segments, the above method further includes: obtaining a point set corresponding to the contour line; wherein the point set is used to indicate the position of the vertex located on the contour line; for each of the multiple line segments, the position of the vertex located on the line segment is determined according to the point set.

[0117] In an optional embodiment, the above method further includes: offsetting the starting position and / or ending position of multiple line segments according to a preset offset.

[0118] In an optional embodiment, the method further includes: if the starting position of the line segment is not in the point set, inserting the starting position into the point set; if the ending position is not in the point set, inserting the ending position into the point set.

[0119] In an optional embodiment, the method further includes: for each line segment, searching in the point set whether the end position of the current line segment is located behind the start position of the current line segment; if not, adjusting the start position and / or end position of the current line segment.

[0120] In an optional embodiment, the step of configuring grayscale values ​​for line segments according to preset rules to obtain grayscale line segments includes: determining sub-segments between every two adjacent vertices in a line segment; for each sub-segment, determining the grayscale value corresponding to the sub-segment based on the relative position of the adjacent vertices in the line segment; and obtaining the grayscale line segment based on the grayscale value corresponding to each sub-segment.

[0121] In an optional embodiment, the step of determining the grayscale value of each sub-segment based on the relative position of its adjacent vertices within the segment includes: setting the grayscale value of the sub-segment corresponding to the starting position to a first grayscale value; setting the grayscale value of the target sub-segment located after the sub-segment corresponding to the starting position and before the sub-segment corresponding to the ending position to a second grayscale value; wherein the second grayscale value is greater than the first grayscale value, and the further the target sub-segment is from the sub-segment corresponding to the starting position, the larger the second grayscale value of the target sub-segment; and setting the grayscale value of the sub-segment corresponding to the ending position to a third grayscale value; wherein the third grayscale value is greater than the second grayscale value.

[0122] In an optional embodiment, the method further includes: if the line segment is set with a reverse flag parameter, setting the second gray value to be less than the first gray value, and setting the third gray value to be less than the second gray value; wherein, the farther the target sub-line segment is from the sub-line segment corresponding to the starting position, the smaller the second gray value of the target sub-line segment.

[0123] In an optional embodiment, the step of generating a grayscale streamer image based on the grayscale line segments corresponding to multiple line segments includes: drawing line segments with grayscale values ​​on a blank image based on the grayscale line segments corresponding to multiple line segments and a preset line width to obtain a drawn blank image; and determining the drawn blank image as a grayscale streamer image.

[0124] In an optional embodiment, the step of generating a target pattern with a stroked light effect on the outline of the target pattern based on a grayscale light image and a preset light color includes: sampling the grayscale light image to obtain the grayscale value configured for each line segment in the grayscale light image; performing a smooth transition process on the grayscale value configured for each line segment according to a preset minimum value and a preset maximum value to obtain a smooth transition result; setting the transparency corresponding to each line segment to the smooth transition result, and setting the light color to the color of each line segment to obtain a target mask image with a stroked light effect; and applying the target mask image to the target pattern to obtain the stroked light effect on the outline of the target pattern.

[0125] In an optional embodiment, the step of smoothing the grayscale values ​​configured for each line segment according to a preset minimum and a preset maximum value to obtain a smooth transition result includes: multiplying the grayscale value configured for each line segment with a preset range masking image to obtain a contour masking image; wherein, the position of the contour line of the target pattern in the range masking image is one grayscale value, and the area outside the contour line in the range masking image is another grayscale value; and smoothing the grayscale values ​​corresponding to the vertices contained in each line segment in the contour masking image according to the preset minimum and the preset maximum value to obtain a smooth transition result corresponding to each vertex.

[0126] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working process of the system and apparatus described above can be referred to the corresponding process in the foregoing method embodiments, and will not be repeated here.

[0127] Furthermore, in the description of the embodiments of this disclosure, unless otherwise expressly specified and limited, the terms "installation," "connection," and "linking" should be interpreted broadly. For example, they can refer to a fixed connection, a detachable connection, or an integral connection; they can refer to a mechanical connection or an electrical connection; they can refer to a direct connection or an indirect connection through an intermediate medium; and they can refer to the internal connection of two components. Those skilled in the art can understand the specific meaning of the above terms in this disclosure based on the specific circumstances.

[0128] If the aforementioned functions are implemented as software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this disclosure, in essence, or the part that contributes to the prior art, or a portion 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 several instructions to cause a computer device (which may be a personal computer, a terminal device, or a network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this disclosure. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0129] In the description of this disclosure, it should be noted that the terms "center," "upper," "lower," "left," "right," "vertical," "horizontal," "inner," and "outer," etc., indicate the orientation or positional relationship based on the orientation or positional relationship shown in the accompanying drawings, and are only for the convenience of describing this disclosure and simplifying the description, and do not indicate or imply that the device or element referred to must have a specific orientation, or be constructed and operated in a specific orientation, and therefore should not be construed as a limitation of this disclosure. Furthermore, the terms "first," "second," and "third" are used for descriptive purposes only and should not be construed as indicating or implying relative importance.

[0130] Finally, it should be noted that the above-described embodiments are merely specific implementations of this disclosure, used to illustrate the technical solutions of this disclosure, and not to limit it. The protection scope of this disclosure is not limited thereto. Although this disclosure has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that any person skilled in the art can still modify or easily conceive of changes to the technical solutions described in the foregoing embodiments, or make equivalent substitutions for some of the technical features, within the scope of the technology disclosed in this disclosure. Such modifications, changes, or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of this disclosure, and should all be covered within the protection scope of this disclosure. Therefore, the protection scope of this disclosure should be determined by the protection scope of the claims.

Claims

1. A method for generating a flowing light effect in outlining, characterized in that, The method includes: responding to a trigger command for a target icon displayed in a graphical user interface, acquiring a target pattern contained in the target icon, and identifying the outline of the target pattern; segmenting the outline to obtain multiple line segments; configuring grayscale values ​​for each of the multiple line segments according to a preset rule to obtain grayscale line segments; wherein, one line segment is configured with multiple grayscale values; generating a grayscale glow map based on the grayscale line segments corresponding to the multiple line segments; generating a glow stroke effect for the outline of the target pattern based on the grayscale glow map and a preset glow color, and displaying the glow stroke effect at a specified position in the graphical user interface.

2. The method according to claim 1, characterized in that, The method further includes: in response to ending the display of the outline glow effect, displaying the target icon at a specified location in the graphical user interface.

3. The method according to claim 1, characterized in that, The contour line includes at least one; the step of segmenting the contour line to obtain multiple line segments includes: for each contour line, segmenting the current contour line based on a preset number of segments to obtain multiple line segments; wherein the number of line segments contained in the current contour line matches the number of segments.

4. The method according to claim 3, characterized in that, The step of segmenting the current contour line based on a preset number of segments to obtain multiple line segments includes: determining the segment length according to the number of segments and the length of the current contour line; dividing the current contour line into multiple line segments according to the segment length; wherein the length of each line segment is the segment length.

5. The method according to claim 1, characterized in that, Before the step of configuring grayscale values ​​for the line segments according to preset rules to obtain grayscale line segments, the method further includes: obtaining a point set corresponding to the contour line; wherein the point set is used to indicate the position of the vertex located on the contour line; for each of the multiple line segments, the position of the vertex located on the line segment is determined according to the point set.

6. The method according to claim 5, characterized in that, The method further includes: offsetting the starting position and / or ending position of the multiple line segments according to a preset offset amount.

7. The method according to claim 6, characterized in that, The method further includes: if the starting position of the line segment is not in the point set, inserting the starting position into the point set; if the ending position is not in the point set, inserting the ending position into the point set.

8. The method according to claim 7, characterized in that, The method further includes: for each line segment, searching the point set to determine whether the endpoint position of the current line segment is located behind the starting position of the current line segment; if not, adjusting the starting position and / or the endpoint position of the current line segment.

9. The method according to claim 5, characterized in that, The step of configuring grayscale values ​​for the line segment according to preset rules to obtain grayscale line segments includes: determining sub-line segments between every two adjacent vertices in the line segment; for each sub-line segment, determining the grayscale value corresponding to the sub-line segment based on the relative position of the adjacent vertices corresponding to the sub-line segment in the line segment; and obtaining grayscale line segments based on the grayscale values ​​corresponding to each sub-line segment.

10. The method according to claim 9, characterized in that, The step of determining the grayscale value of each sub-segment based on the relative positions of its adjacent vertices within the segment includes: setting the grayscale value of the sub-segment corresponding to the starting position as a first grayscale value; setting the grayscale value of a target sub-segment located after the sub-segment corresponding to the starting position and before the sub-segment corresponding to the ending position as a second grayscale value; wherein the second grayscale value is greater than the first grayscale value, and the further the target sub-segment is from the sub-segment corresponding to the starting position, the larger the second grayscale value of the target sub-segment; and setting the grayscale value of the sub-segment corresponding to the ending position as a third grayscale value; wherein the third grayscale value is greater than the second grayscale value.

11. The method according to claim 10, characterized in that, The method further includes: if the line segment is set with a reverse flag parameter, setting the second gray value to be less than the first gray value, and setting the third gray value to be less than the second gray value; wherein, the farther the target sub-line segment is from the sub-line segment corresponding to the starting position, the smaller the second gray value of the target sub-line segment.

12. The method according to claim 1, characterized in that, The step of generating a grayscale streamer image based on the grayscale line segments corresponding to the multiple line segments includes: drawing line segments with grayscale values ​​on a blank image based on the grayscale line segments corresponding to the multiple line segments and a preset line width to obtain a blank image that has been drawn; and determining the blank image that has been drawn as the grayscale streamer image.

13. The method according to claim 1, characterized in that, The step of generating the outline flowing light effect of the target pattern based on the grayscale flowing light image and the preset flowing light color includes: sampling the grayscale flowing light image to obtain the grayscale value configured for each line segment in the grayscale flowing light image; performing a smooth transition processing on the grayscale value configured for each line segment according to the preset minimum value and the preset maximum value to obtain a smooth transition result; setting the transparency corresponding to each line segment to the smooth transition result, and setting the flowing light color to the color of each line segment to obtain the outline flowing light effect of the target pattern.

14. The method according to claim 13, characterized in that, The step of smoothing the grayscale values ​​configured for each line segment according to preset minimum and maximum values ​​to obtain a smooth transition result includes: multiplying the grayscale values ​​configured for each line segment with a preset range masking image to obtain a contour masking image; wherein, the position of the contour line of the target pattern in the range masking image is one grayscale value, and the area in the range masking image other than the contour line is another grayscale value; and smoothing the grayscale values ​​corresponding to the vertices contained in each line segment in the contour masking image according to preset minimum and maximum values ​​to obtain a smooth transition result corresponding to each vertex.

15. A device for generating a flowing light effect by outlining, characterized in that, The device includes: a contour line recognition module, configured to, in response to a trigger command for a target icon displayed in a graphical user interface, acquire a target pattern contained in the target icon and recognize the contour line of the target pattern; a line segmentation module, configured to segment the contour line to obtain multiple line segments; a grayscale configuration module, configured to, for each of the multiple line segments, configure a grayscale value for the line segment according to a preset rule to obtain a grayscale line segment; wherein, one line segment is configured with multiple grayscale values; an image generation module, configured to generate a grayscale flowing light image based on the grayscale line segments corresponding to the multiple line segments; and a coloring module, configured to, based on the grayscale flowing light image and a preset flowing light color, generate a stroke flowing light effect for the contour line of the target pattern and display the stroke flowing light effect at a specified position in the graphical user interface.

16. An electronic device, characterized in that, The electronic device includes a processor and a memory, the memory storing machine-executable instructions that can be executed by the processor, the processor executing the machine-executable instructions to implement the method for generating the outline flowing light effect according to any one of claims 1 to 14.

17. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer-executable instructions, which, when invoked and executed by a processor, cause the processor to implement the method for generating the outlined light effect as described in any one of 1 to 14.

Images