CN112579083B

CN112579083B - Image display method, device, electronic equipment and storage medium

Info

Publication number: CN112579083B
Application number: CN202011449309.0A
Authority: CN
Inventors: 王少康
Original assignee: Jingdong Technology Holding Co Ltd
Current assignee: Jingdong Technology Holding Co Ltd
Priority date: 2020-12-09
Filing date: 2020-12-09
Publication date: 2024-05-17
Anticipated expiration: 2040-12-09
Also published as: CN112579083A

Abstract

The embodiment of the invention discloses an image display method, an image display device, electronic equipment and a storage medium, and relates to the technical field of computers, wherein the method comprises the following steps: acquiring drawing control parameters and proportion values occupied by elements; the drawing control parameters comprise addresses of the first pictures; acquiring a first picture according to drawing control parameters, and drawing and generating an effect diagram for displaying the proportion of the element based on the first picture and the proportion value; and obtaining an effect graph, and visually displaying the effect graph. According to the technical scheme provided by the embodiment of the invention, the proportion of the elements can be conveniently and flexibly displayed through the configurability of drawing control parameters, the display effect is improved, the development efficiency of the display code is improved, and the development cost is reduced.

Description

Image display method, device, electronic equipment and storage medium

Technical Field

The embodiment of the invention relates to computer technology, in particular to an image display method, an image display device, electronic equipment and a storage medium.

Background

Currently, progress bars or pie charts, etc. are often used on pages to show the progress of events or the proportion of elements. For example, a progress bar is used to show the loading progress of a page, and a pie chart is used to show the proportion of the population count of a certain age group to the total population count.

In the process of realizing the invention, the prior art has at least the following problems:

the scheme for displaying the event progress or the proportion of the elements needs to be used for respectively developing the display codes aiming at each application scene, the development efficiency is low, the cost is high, and the display effect is single and poor aiming at the same application scene.

Disclosure of Invention

The embodiment of the invention provides an image display method, an image display device, electronic equipment and a storage medium, which are used for realizing the purposes of conveniently and flexibly displaying the proportion of elements, improving the display effect, improving the development efficiency of display codes and reducing the development cost.

In a first aspect, an embodiment of the present invention provides an image display method, including:

Acquiring drawing control parameters and proportion values occupied by elements; wherein the drawing control parameter includes an address of the first picture;

Acquiring a first picture according to the drawing control parameters, and drawing and generating an effect diagram for displaying the proportion of the element based on the first picture and the proportion value;

And obtaining the effect graph, and visually displaying the effect graph.

In a second aspect, an embodiment of the present invention further provides an image display apparatus, including:

The information acquisition module is used for acquiring drawing control parameters and the proportion value occupied by the element; wherein the drawing control parameter includes an address of the first picture;

The graphic drawing module is used for obtaining a first picture according to the drawing control parameters, and drawing and generating an effect graph for displaying the proportion of the elements based on the first picture and the proportion value;

And the effect diagram display module is used for acquiring the effect diagram output by the graph drawing module and visually displaying the effect diagram.

In a third aspect, an embodiment of the present invention further provides an electronic device, including:

one or more processors;

A memory for storing one or more programs;

The one or more programs, when executed by the one or more processors, cause the one or more processors to implement the image presentation method according to any of the embodiments of the present invention.

In a fourth aspect, embodiments of the present invention further provide a computer readable storage medium having stored thereon a computer program which, when executed by a processor, implements an image presentation method according to any of the embodiments of the present invention.

According to the technical scheme, the drawing control parameters and the proportion values occupied by the elements are firstly obtained, then the first picture is obtained according to the drawing control parameters, the effect diagram for displaying the proportion occupied by the elements is generated based on the first picture and the proportion values, and the effect diagram is obtained and visually displayed. According to the method, the effect graphs are drawn according to the addresses of the acquired first pictures, the acquired first pictures are different in addresses, different first pictures can be acquired based on the addresses, or different first pictures can be acquired based on the addresses when the same addresses are acquired at different moments, so that the effect graphs drawn according to the different first pictures are different, the purpose of drawing different effect graphs is achieved by configuring the different first pictures, and the effect graphs can be flexibly and conveniently generated under different scenes, and the effect graph supports personalized and customized configuration; meanwhile, the scheme can draw the effect graph aiming at different first pictures, and development of the effect graph drawing codes is not needed to be carried out aiming at different application scenes, so that the development efficiency of the codes is improved, and the development cost is reduced.

Drawings

In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, a brief description will be given below of the drawings required for the embodiments or the prior art descriptions, and it is obvious that the drawings in the following description are some embodiments of the present invention, and other drawings may be obtained according to these drawings without inventive effort for a person skilled in the art.

Fig. 1 is a flowchart of an image display method according to a first embodiment of the present invention;

FIG. 2 is a schematic diagram of an effect diagram according to a first embodiment of the present invention;

FIG. 3 is a schematic diagram of an effect diagram of a first graphic with a large pictogram according to a first embodiment of the present invention;

FIG. 4 is a schematic diagram showing an effect diagram of health degree according to an embodiment of the present invention;

FIG. 5 is a schematic diagram of an effect diagram of different outer contour shapes according to a first embodiment of the present invention;

Fig. 6 is a flowchart of an image display method according to a second embodiment of the present invention;

Fig. 7 is a flowchart of an image display method according to a third embodiment of the present invention;

Fig. 8 is a schematic diagram of a third-order bezier curve according to the third embodiment of the present invention;

FIG. 9 is a schematic view of a wavy line according to a third embodiment of the invention;

FIG. 10 is a schematic view of a second wavy line according to a third embodiment of the invention;

FIG. 11 is a schematic view of a third wavy line provided in a third embodiment of the invention;

FIG. 12 is a schematic view of a first pattern and a second pattern according to a third embodiment of the present invention;

FIG. 13 is a schematic diagram of a preset portion and a dividing line according to a third embodiment of the present invention;

FIG. 14 is a schematic view showing an effect diagram of different wavy line shapes according to the third embodiment of the invention;

Fig. 15 is a schematic structural diagram of an image display device according to a fourth embodiment of the present invention;

fig. 16 is a schematic structural diagram of an electronic device according to a fifth embodiment of the present invention.

Detailed Description

The invention is described in further detail below with reference to the drawings and examples. It is to be understood that the specific embodiments described herein are merely illustrative of the invention and are not limiting thereof. It should be further noted that, for convenience of description, only some, but not all of the structures related to the present invention are shown in the drawings.

Example 1

Fig. 1 is a flowchart of an image display method according to a first embodiment of the present invention, where the embodiment is applicable to a case where a proportion value occupied by an element is displayed on a display interface of a user terminal, and particularly, the embodiment may be used in a scenario of information statistics, and may also be used in an application scenario of progress bar display. The method may be performed by an image presentation device, which may be implemented in software and/or hardware, integrated in a user terminal with display functionality. The method can be integrated in intelligent terminals such as a PC, a smart phone, a tablet personal computer or a palm game machine.

As shown in fig. 1, the method specifically includes the following steps:

s110, acquiring drawing control parameters and a proportion value occupied by the elements, wherein the drawing control parameters comprise addresses of the first pictures.

The drawing control parameters may further include at least one of a parting line drawing parameter and a color filling parameter, and the first picture may be obtained according to an address of the first picture; the dividing line drawing parameters include dividing line shape parameters and the like. The first picture may include a first graphic, where the first graphic is used to determine an outline shape of a subsequently generated effect graph, and the first graphic may be any shape of graphic. The proportion value occupied by the element may include a proportion value occupied by a time element of the event, that is, a progress value, for example: a page loading progress value; the proportion value occupied by the element can also comprise other proportion values occupied by elements which can be obtained through statistics besides the time element, for example: and the proportion value occupied by the male and female users respectively in the purchasing population of a certain article. Typically, the proportion of elements may be in the form of percentages.

Specifically, the proportion value occupied by the element can be determined by the application program through information statistics or according to program running information. The drawing control parameters can be input by a user through a page, can be preconfigured in preset positions such as program codes, and can be dynamically determined according to the current value of the preset parameters.

S120, acquiring a first picture according to the drawing control parameters, and drawing and generating an effect diagram for displaying the proportion of the elements based on the first picture and the proportion value.

Specifically, the first picture may be obtained according to a drawing control parameter, for example: the first picture may be obtained according to a storage path of the first picture. Furthermore, a dividing line corresponding to the scale value can be drawn on the basis of the first picture, so as to obtain an effect diagram for representing the proportion of the element, wherein the effect diagram comprises a first graph and the dividing line, the dividing line divides the first graph into two parts, and different positions of the dividing line reflect different proportions of the element. At this time, the outline shape and the dividing line of the effect graph are generated according to the drawing control parameters and the proportion values, and the effect graph has the advantages of individuation and customization.

S130, obtaining an effect diagram, and visually displaying the effect diagram.

Specifically, the generated effect diagram is obtained, the schematic diagram of the effect diagram is shown in fig. 2, the first diagram in fig. 2 is heart-shaped, the dividing line is wave-shaped, and any color information can be filled in the part of the effect diagram corresponding to the proportion value occupied by the element, so that the proportion value can be displayed more clearly, and the user experience is improved. The first graphic may also be other shapes, as shown in fig. 3, the first graphic in fig. 3 being a elephant shape. As shown in fig. 4, an illustration is made by using a health-degree effect diagram, wherein the proportion of health factors is shown, a first graph in the health-degree effect diagram is heart-shaped, a dividing line is wave-shaped, when the fact that the user selects 'none at all' is detected, the proportion value of health elements is 100%, and the effect diagram with all heart-shaped filling can be output; upon detecting that the user selects only one of the options, for example: the smoking love can determine that the proportion value of healthy elements is 85%, and a corresponding effect graph can be output, wherein a heart shape is divided into an upper part and a lower part by a wavy line, and the upper part and the lower part respectively represent 85% and 15%; upon detecting a plurality of user selection options, for example: the 'love smoking', 'love drinking', 'usual overtime' and 'little movement', the proportion value of healthy elements is 30%, and a corresponding effect graph can be output, wherein the heart shape is divided into an upper part and a lower part by the wavy line, and the upper part and the lower part respectively represent 70% and 30%. The first graphic may be any shape other than heart-shaped, as shown in fig. 5, and may be in the shape of a doggie. The effect map is displayed at a preset display position, for example, in a page of an APP, and it is to be noted that parameter information such as a size of the effect map during display may be preset to match with an actual display effect. The effect diagram is visually displayed on the interface, so that a user can intuitively determine the proportion of the elements.

According to the technical scheme, the drawing control parameters and the proportion values occupied by the elements are firstly obtained, then the first picture is obtained according to the drawing control parameters, the effect diagram for displaying the proportion occupied by the elements is generated based on the first picture and the proportion values, and the effect diagram is obtained and visually displayed. In the method, the effect graphs are drawn according to the addresses of the acquired first pictures, the acquired first pictures are different in addresses, different first pictures can be acquired based on the addresses, or different first pictures can be acquired based on the addresses when the same addresses are acquired at different moments (because the first pictures stored under the addresses can be replaced at any time according to the needs), and then the effect graphs drawn according to the different first pictures are different, so that the aim of drawing different effect graphs by configuring the different first pictures is fulfilled, and further the effect graphs which can be flexibly and conveniently generated under different scenes and the effect graph supporting personalized and customized configuration effects are realized; meanwhile, the scheme can draw the effect graph aiming at different first pictures, and development of the effect graph drawing codes is not needed to be carried out aiming at different application scenes, so that the development efficiency of the codes is improved, and the development cost is reduced.

Example two

Fig. 6 is a flowchart of an image display method according to a second embodiment of the present invention, where the step of obtaining drawing control parameters is preferably further optimized based on the above embodiments. Wherein, the explanation of the same or corresponding terms as the above embodiments is not repeated herein.

Referring to fig. 6, the image display method provided in this embodiment includes:

S210, acquiring a proportion value occupied by the element.

Specifically, the proportion value occupied by the element may be determined by the application program through information statistics or according to program running information, for example: counting 65% of the users with certain application programs, and 35% of the users with certain application programs; and determining that the loading progress of a certain page is 70% and the like according to the program running information. After determining the source of the proportion value occupied by the element, the proportion value occupied by the element can be obtained based on the source of the proportion value occupied by the element and used for representing the proportion occupied by the element subsequently.

After step S210 is performed, step S220 or S230 or S240 may be performed.

S220, drawing control parameters input through the current page are obtained.

Specifically, the drawing control parameter may be parameter information directly input by the user, or may be parameter information selected by the user from the displayed drawing control parameters.

Illustratively, a control for inputting drawing control parameters is included on the current page, and when the control is detected to be triggered by the user, an input dialog box of drawing control parameters may be displayed for the user to input or select drawing control parameters. The user may input the address of the first picture, the split line drawing parameter, the color filling parameter, and the like in the input dialog. In order to facilitate the user in determining the address of the first picture, a link button may be provided in the above-mentioned input dialog. When the link button is detected to be triggered, a selection box for selecting the address of the first picture can be called, and when the user is detected to select a certain picture as the first picture, the address of the first picture can be generated and displayed in an input dialog box of the drawing control parameter.

Optionally, the address of the first picture includes an online link address of the first picture, or a local storage address of the first picture.

If the address of the first picture is an online link address, the online link address may be a web page link, and is used for linking to a picture on a network or linking to a picture in a cloud storage space, and taking a picture corresponding to the online link address as the first picture. If the address of the first picture is a local storage address, the local storage address may be a local storage path, and a picture in the local storage path may be used as the first picture.

S230, acquiring a preset drawing control parameter.

The preconfigured drawing control parameters may be drawing control parameters written in the application program code by the application developer when developing the application, for example: the address of the first picture written in advance, the parting line drawing parameter, the color filling parameter and the like.

Specifically, the dividing line drawing parameters may be determined according to a pre-configured drawing control parameter, for example: parting line shape parameters, etc., to draw parting lines according to parting line drawing parameters. Color fill parameters may be determined according to pre-configured rendering control parameters to fill the effect map according to the color fill parameters. And, an address of the first picture may be determined according to a pre-configured drawing control parameter to read the first picture at the address. If the first picture needs to be replaced, the original first picture at the address can be replaced by a new first picture.

S240, acquiring drawing control parameters determined according to the current value of the preset parameters.

Wherein, different values of the preset parameters can be used for determining different drawing control parameters, for example: when the current value of the preset parameter is A, the corresponding drawing control parameter is A ', when the current value of the preset parameter is B, the corresponding drawing control parameter is B', and the like.

Specifically, the current value of the preset parameter may be obtained, and further, the drawing control parameter corresponding to the current value may be obtained according to the current value, where the drawing control parameter may include a storage address of the first picture, a color filling parameter and/or a parting line drawing parameter.

Alternatively, the current value of the preset parameter can be determined; and determining the drawing control parameter corresponding to the current value of the preset parameter according to the current value of the preset parameter and the corresponding relation between the preset parameter value and the drawing control parameter.

For example, the preset parameter is time, and the current value of the acquired time is 10:00. According to the current value of the preset parameter, the drawing control parameter corresponding to the current value can be determined in the corresponding relation between the preset parameter value and the drawing control parameter. For example: the current value of the preset parameter is 10:00, the storage address of the first picture corresponding to 10:00 can be determined in the corresponding relation between the preset parameter value and the drawing control parameter, the first picture corresponding to the address is circular, the shape of the dividing line corresponding to 10:00 can be determined to be a straight line, and the color filling is red.

The preset parameters may include at least one of personal information parameters, scene parameters, and business parameters of the current user in order to make the subsequently generated effect map more personalized and attractive.

If the preset parameter is the personal information parameter of the current user, the corresponding relation between the personal information parameter and the drawing control parameter can be established in advance.

The personal information parameter may include gender information, age information, chinese zodiac information, occupation information, and the like.

For example, if the personal information parameter is gender information, the correspondence relationship between the gender information and the drawing control parameter may be: gender: men-first picture: square picture-dividing line: straight line-color filling: blue; gender: female-first picture: heart-shaped picture-split line: wavy line-color fill: and red. If the personal information parameter is age information, the correspondence between the age information and the drawing control parameter may be: under 10 years old-first picture: flower picture-split line: wavy line-color fill: yellow; 10-20 years-first picture: heart-shaped picture-split line: polyline-color filling: pink, etc. If the personal information parameter is the Chinese zodiac information, the first picture can be set as an animal picture corresponding to the Chinese zodiac of the user according to the Chinese zodiac information of different users. The method for determining the drawing control parameter according to the other personal information parameter is similar to the above method, and is not particularly limited herein.

If the preset parameter is a scene parameter, a corresponding relationship between the scene parameter and the drawing control parameter may be established in advance.

The scene parameters may include, among other things, time information, geographic location information, weather information, and the like.

For example, if the scene parameter is time information, the first picture corresponding to 8:00-20:00 may be a sun picture, and the first picture corresponding to 20:00-8:00 may be a moon picture. If the scene parameter is geographic location information, the first picture may be set as a logo building picture corresponding to the geographic location information. If the scene parameter is weather information, the first picture corresponding to a sunny day may be a sun picture, the first picture corresponding to cloudiness may be a cloud picture, and the first picture corresponding to snowing may be a snowflake picture.

If the preset parameter is a service parameter, a corresponding relationship between the service information and the drawing control parameter can be established in advance.

The service parameter may be any information related to the service of the current application or the current page, such as a service type, etc.

For example, if the service type of the current page is a shopping cart, the corresponding first picture is a shopping cart picture, and if the service type of the current page is a settlement type, the corresponding first picture is a wallet picture, etc.

S250, acquiring a first picture according to the drawing control parameters, and drawing and generating an effect diagram for displaying the proportion of the elements based on the first picture and the proportion value.

S260, obtaining an effect diagram, and visually displaying the effect diagram.

According to the technical scheme, firstly, the proportion value occupied by the element is obtained, and drawing control parameters input through a current page can be obtained; or obtaining a preset drawing control parameter; or the method can obtain the first picture in a plurality of modes, solves the problems that the outline effect of the effect picture is single and the visual experience of a user is poor in different application scenes, realizes the flexible and convenient generation of the effect picture with different outlines, improves the visual experience effect of the user, realizes the effect that the effect picture can support personalized and customized configuration of the user, and can improve the development efficiency of the display code and reduce the development cost.

Example III

Fig. 7 is a flowchart of an image display method according to a third embodiment of the present invention, where, based on the foregoing embodiments, a specific implementation manner of generating an effect diagram when a drawing control parameter includes a parting line drawing parameter may refer to a technical solution of the embodiment. Wherein, the explanation of the same or corresponding terms as the above embodiments is not repeated herein.

Referring to fig. 7, the image display method provided in this embodiment includes:

s310, acquiring drawing control parameters and the proportion value occupied by the element.

S320, acquiring a first picture according to the drawing control parameters, and identifying a first graph in the first picture.

The first graph may be an outline graph obtained by processing the first picture.

Specifically, after the first picture is obtained according to the drawing control parameters, the outer contour of the figure in the first picture can be extracted, and the extracted outer contour figure is used as the first figure. For example: and taking the outline graph of the rabbit in the extracted rabbit picture as a first graph.

It should be noted that the processable picture format may be one or more, and if the picture format of the first picture does not match the processable picture format, the first picture may be converted into the usable picture through picture format conversion.

Optionally, in order to facilitate identifying the first graphic in the first picture, the first picture may be further hollowed out: and carrying out matting processing on the first picture to obtain the first picture with the solid color hollowed-out.

Specifically, the background and the foreground in the first picture may be determined, and the foreground is subjected to matting processing according to a boundary between the background and the foreground, so that the pixel point corresponding to the foreground is in a transparent state, and the pixel point corresponding to the background may be set to a solid color, for example: white. The background of the first picture may be adjusted to a solid color according to a 24-bit color configuration table and/or color values, for example: the background is set to white, the value in the 24-bit color configuration table corresponding to white is #ffffff, and the color value is (255, 255, 255).

If the background color of the picture is pure color, the matting processing can be realized by adjusting the transparency of the pixel points.

Determining whether the background color of the first picture is a solid color; and when the background color is determined to be the pure color, modifying the transparency value of the pixel point with the color unequal to the background color in the first picture so as to hide the pixel point.

Specifically, the background color in the first picture may be extracted, and if all the background colors are the same, it may be determined that the background color is a solid color. Recording color information of a background color, extracting color information of all pixel points in a first picture, comparing all the color information with the color information of the background color, if the color information is the same, not processing the pixel points, and if the color information is different, adjusting the transparency value of the pixel points to be 0 so as to hide the pixel points.

It should be noted that, in order to better adjust the transparency value of each pixel, the first picture may be stored in the form of four channels of RGBA (red, green, blue, transparency values). If at least one of the values in the R, G and B channels of the current pixel is different from the background color, the value of the A channel of the current pixel can be adjusted to 0 so as to hide the pixel until all the pixels in the first picture are traversed, and the first picture with the hollowed solid color can be obtained.

For example, a hidden canvas (drawing processing graphics) may be created, a first picture is placed in the canvas, and color values of one or more pixels in four directions of the first picture, that is, right, lower and left, are obtained respectively, and if the color values of all the pixels are the same, it may be determined that the background color of the first picture is a solid color. Further, three primary colors (RGBA) judgment is performed on all pixel points of the first picture. If any one of R, G, B of the pixel points is not equal to the corresponding value of the background color, the A value (opacity) of the pixel point is changed to 0, so that the effect of hiding the pixel point is realized. And traversing to finish re-rendering the canvas, and outputting the first graph hollowed out in pure color.

S330, drawing a parting line based on the parting line drawing parameters.

The parting line drawing parameters may include parting line shape parameters, parting line type parameters, and the like, and may be used to draw parting lines. The parting line shape parameters may include straight lines, zigzag lines, wavy lines, etc., and the parting line shape parameters may include solid lines, broken lines, dot-dashed lines, etc. Specifically, according to the parting line drawing parameters, the parting line can be drawn at a preset position.

If the parting line drawing parameters include parting line shape parameters, the parting line may be drawn according to the following:

And determining a parting line length parameter according to the size of the first graph, and drawing the parting line according to the parting line length parameter and the parting line shape parameter.

Specifically, the dividing line length parameter may be determined according to the size of the first pattern, which may be a circumscribed rectangle of the first pattern, and the length of the long side or the short side of the circumscribed rectangle is used as the dividing line length parameter. Further, the dividing line is drawn based on the dividing line length parameter and the dividing line shape parameter.

In order to ensure that the length of the parting line meets the requirement of generating the effect graph later, the parting line length parameter can be properly enlarged. The length parameter of the dividing line can be determined according to the preset multiple and the length of the long side or the short side of the circumscribed rectangle of the first graph. The preset multiple is used for expanding the length parameter, and the value is larger than 1. For example: the preset multiple is 1.2, and the length parameter of the parting line is based on the long side of the circumscribed rectangle of the first graph, and then the length parameter of the parting line is 1.2 times of the length of the long side of the circumscribed rectangle of the first graph. For the purpose of the following explanation, the length of the long side of the circumscribed rectangle of the first pattern may be taken as the length of the first pattern, and the length of the short side of the circumscribed rectangle of the first pattern may be taken as the width of the first pattern. It should be noted that the preset multiple may be set according to actual requirements.

Optionally, the parting line shape parameter may include a wave amplitude parameter, and the step of drawing the parting line according to the parting line length parameter and the parting line shape parameter is as follows:

step one, determining a starting point and an ending point of a wave line according to the length or the width of a circumscribed rectangle of a first graph in a first picture.

Specifically, a corresponding circumscribed rectangle may be obtained according to the first graphic in the first picture, and the length or width of the circumscribed rectangle may be used as the length parameter of the dividing line. The starting point and the ending point of the wavy line may be determined according to the parting line length parameter, for example: and taking one point on the short edge of the circumscribed rectangle as a starting point, wherein the length parameter of the parting line is the length of the circumscribed rectangle, and determining the point which is the length parameter of the parting line from the starting point as an ending point on the edge of the edge where the starting point is located.

And step two, determining at least one middle turning point of the wave line according to the wave amplitude parameter.

The middle turning point may be a point corresponding to a crest or a trough of the wavy line. The wave amplitude parameter may be a parameter for determining a wave amplitude value, for example: the wave amplitude parameter can be a wave amplitude value or multiple information. According to different use scenes, the wave amplitude parameter can be configured by an application developer or can be configured by an ordinary user through a configuration inlet exposed by the application developer. If the wave amplitude parameter is the multiple information, the wave amplitude value can be determined according to the product of the wave amplitude value and the reference amplitude value. The reference amplitude value may be set to 1/10 of the first pattern length or width. The multiple information and the reference amplitude value may be set according to actual situations, and are not particularly limited in this embodiment.

Specifically, the number of the middle turning points can be preset, and the setting mode can be set according to the user requirement or the aesthetic requirement during display. Between the starting point and the ending point of the wave line, the position of each intermediate turning point may be determined based on the number of intermediate turning points and the wave amplitude parameter.

For example, assuming that the length and width of the circumscribed rectangle of the first pattern are 120 pixels, the coordinates of the top left vertex of the circumscribed rectangle are (0, 0), the start point coordinates may be disposed below the top left vertex of the circumscribed rectangle at a distance from the top left vertex of: the circumscribed rectangle has a length of-1/10, where the starting point has a coordinate of (0, -12), and the ending point has a coordinate of (120, -12). The positions of 7 equal dividing points can be determined according to the width of the rectangle, and the positions of turning points are further determined. Namely: [ (15,0), (30, -12), (45,0), (60, -12), (75,0), (90, -12), (105,0) ].

And thirdly, drawing a curve based on the starting point, the ending point and the middle turning point to obtain a generated wave line.

Specifically, after the start point, the end point, and the intermediate turning point are determined, curve drawing may be performed. If the points are connected by straight lines, the wavy line can be regarded as a broken line. If the points are connected by parabolic lines, a wavy line can also be obtained. To make the wavy line more attractive, a Bezier curve may be used to generate the wavy line. The bezier curve shown in fig. 8 is a third-order bezier curve, and the parameter t of the curve is 0.92. The specific manner in which the wavy line is generated is not particularly limited in this embodiment. When the number of intermediate turning points is different, the corresponding wavy lines are shown in fig. 9 and 10. When the wave amplitude parameters are different, the corresponding wave line diagrams are shown in fig. 9 and 11.

It should be noted that a canvas may be used to generate the wavy line, and the reference wavy line may be constructed based on a curve algorithm, such as a bezier curve algorithm, based on the starting point, the ending point, and the intermediate turning point. Wave curves with different amplitudes can be constructed according to the configured wave amplitude parameters, so that the wave amplitude control and display effects of different dividing lines are realized.

S340, generating an effect graph comprising the dividing line and the first graph according to the proportion value.

The first graph is divided into two parts by a dividing line in the effect graph, and different positions of the dividing line reflect different proportions of elements.

Specifically, the ratio value of the current element may be determined according to the different ratios of the elements. The dividing line may be displayed at a corresponding position of the first graphic according to the scale value, for example: the area of the first pattern may be divided into a proportional value by using a dividing line, or the area of the circumscribed rectangle of the first pattern may be divided into a proportional value by using a dividing line. After the first graph is divided by using the dividing line, different positions of the dividing line can reflect different proportions of the elements.

In order to make the drawing result of the dividing line more accurate, the dividing line may be drawn using the following steps:

and step one, drawing a second graph based on the dividing line and the size of the first graph.

Wherein the second graphic is capable of receiving the first graphic and the parting line is a portion of a contour of the second graphic.

Specifically, a circumscribed rectangle of the first pattern may be drawn according to the size of the first pattern, and further, one side of the circumscribed rectangle may be replaced with a dividing line, and the replaced pattern may be used as the second pattern. In order to enable the parting line to be matched with the first graph when the subsequent effect graph is generated, the second graph can be expanded according to a preset proportion, for example: enlarging by 1.5 times, etc., and taking the enlarged pattern as a second pattern. The preset proportion can be set according to actual requirements. The first pattern and the second pattern may be as shown in fig. 12, the first pattern being heart-shaped, the second pattern being a circumscribed rectangle of the first pattern.

And step two, determining a target distance value between the dividing line and a preset part of the first graph according to the proportion value.

The preset portion may be a position representing a preset ratio, and in general, the preset portion is used to represent a position corresponding to 100% or 0. The target distance value is a distance value between a dividing line and a preset part, which is determined according to a proportion value occupied by the element.

Specifically, a proportion value occupied by the element is obtained, and a target distance value between the dividing line and the preset part is determined according to the proportion value and the proportion corresponding to the preset part and the preset part.

For example, the proportion information is determined to be 30% according to the proportion value occupied by the element, and if the preset part is the bottom edge of the circumscribed rectangle of the first graph, the proportion corresponding to the preset part is 0. According to the size information of the circumscribed rectangle of the first graph, the length information of the left side or the right side can be determined to be L, and according to the length information L and the proportion information of 30%, the target distance value between the dividing line and the preset part can be determined to be L multiplied by 30%. If the preset portion is the bottom edge of the circumscribed rectangle of the first pattern, the ratio of the preset portion is 100%, and according to the size information of the circumscribed rectangle of the first pattern, the length information of the left side or the right side can be determined to be L, and the schematic diagram of the preset portion and the dividing line is shown in fig. 13. Based on the length information L and the proportion information 30%, it is possible to determine that the target distance value between the dividing line and the preset portion is lx (1-30%).

And thirdly, synthesizing the second graph and the first graph according to the target distance value, and generating an effect graph comprising the dividing line and the first graph.

The distance value between the dividing line and the preset part of the first graph in the effect graph is equal to the target distance value, and the area, which is not overlapped with the first graph, in the second graph is invisible.

Specifically, the second pattern and the first pattern are synthesized in a manner of superposition, that is, the second pattern and the first pattern are superposed, and the distance value between the dividing line and the preset position of the first pattern is equal to the target distance value. Further, the superimposed graphics are processed: the area of the second pattern, which does not overlap the first pattern, may be set to be invisible, and the transparency value of the corresponding pixel point may be set to be zero.

Alternatively, the drawing control parameters may include color filling parameters in order to make the display effect of the effect map more attractive.

Wherein the color filling parameter may be color information, i.e. a color value or a value in a 24-bit color configuration table, and the color filling parameter may further comprise whether the filling effect is an gradient or a solid color.

The color filling parameters may be used in the following manner: after the second pattern is drawn based on the dividing line and the size of the first pattern, the second pattern is color-filled according to the color filling parameters.

Specifically, after the second graph is determined, color filling parameters are acquired, and color filling is performed on the second graph based on color information and/or filling effects in the color filling parameters.

When color filling is performed, an english color list [ red, blue ] or an RGB color list [ #000, # fff ] may be used, where the two color lists may be directly configured by an application developer to be used for displaying, or may also be controls developed by the application developer, for example: input boxes or buttons, etc., can be dynamically configured by a common user.

Optionally, when the dividing line is a wavy line, in order to enable the display of the effect graph to have dynamic characteristics, the method for generating the effect graph may be: and adding the animation effect of the wave scrolling in the effect graph by executing the animation logic of the preset wave scrolling.

The animation logic may be a method flow to scroll the wavy line.

In particular, in order to match the animation effect of the wave scrolling to the first graphic, the second graphic may be larger in size than the first graphic when executing the animation logic. The animation logic for wave scrolling, which is preset, is read, and the animation logic is executed by superposing the first graph and the second graph, and moving the second graph to enable the second graph to be relatively displaced from the first graph, so that the effect of wave scrolling can be considered visually.

For example, the second graph may be enlarged according to a preset ratio when the second graph is generated, for example: the length of the circumscribed rectangle of the first pattern in the horizontal direction may be taken as the length of the first pattern, the length of the second pattern in the horizontal direction may be taken as the length of the second pattern, and the length of the second pattern may be enlarged to 4 times the length of the first pattern. The animation logic of the preset wave scrolling may be that if the wave line scrolls from left to right, the first graphic may be overlaid on the right 1/4 of the second graphic, and this state is taken as an initial state, where the second graphic may slide rightward at a preset speed. The preset speed is a preset wave linear sliding speed, and can be a default value or a speed value input by a user. When the sliding displacement value is equal to two times the first pattern width, a reset operation is performed to make the sliding displacement value be 0, i.e., return to the initial state. Further, the animation logic described above may be repeated to continue scrolling the wavy line.

If the dividing line does not add an animation effect, the length of the second pattern may be equal to the length of the first pattern. The length of the second pattern in the vertical direction may be taken as the width of the second pattern, and if the dividing line is a wavy line, the width of the second pattern may be set to be equal to or greater than the sum of the height of the first pattern and the distance value of the crest and trough of the wavy line in order to match the wavy line with the first pattern.

S350, obtaining an effect diagram, and visually displaying the effect diagram.

Specifically, the generated effect diagram can be obtained, and the effect diagram is visually displayed at a preset position, and the effect diagram when the wave line shapes are different is shown in fig. 14. At this time, a dynamic or static display effect can be set, so that the dividing line in the effect graph is displayed with the dynamic or static effect, and the visual experience of the user is enhanced.

S360, when the change of the proportion value is detected, regenerating an effect graph containing the dividing line and the first graph according to the changed proportion value.

In order to realize the change of the effect graph along with the change of the proportion value occupied by the element, the dynamically changed proportion value can be received, and when the change of the proportion value is detected, the position of the dividing line is continuously adjusted, namely, the target distance value between the dividing line and the preset part of the first graph is adjusted, so that the position of the dividing line is matched with the proportion value occupied by the element.

Specifically, the method can detect the proportion value occupied by the element periodically or in real time, and when the proportion value is detected to change, the current effect diagram is not matched with the current proportion value. At this time, a new effect map may be generated based on the changed scale value, for indicating the proportion of the element at the current time.

And S370, acquiring a regenerated effect diagram, and updating the currently displayed effect diagram by using the regenerated effect diagram.

Specifically, the regenerated effect diagram is obtained, and the currently displayed effect diagram is updated based on the regenerated effect diagram, which may be that the currently displayed effect diagram is replaced by the regenerated effect diagram. In order to make the change of the effect map smooth, the effect map may be changed from the current effect map to the regenerated effect map according to a preset change speed.

Based on the above embodiment, the first graph may be replaced by replacing the first graph, so as to generate an effect graph with different outer contours. The first graphic may be dynamically configured while the first graphic is configured. And when the configuration is carried out, a pure-color background picture can be transmitted, the pure-color background picture can be subjected to matting processing to obtain a first graph, and the original first graph is output and replaced to be a newly generated first graph.

Based on the above embodiments, to implement a color configuration of the first graphic, user input may be received or a color value may be selected, the configuration of the color supporting solid or gradual color change. From this color value, a user-configured color may be used in drawing the second graphic. For the waveform configuration of the dividing line, a wave amplitude parameter may be received, and the second pattern may output the positions of a set of intermediate turning points according to the wave amplitude parameter, for example: and drawing a dividing line according to the position coordinate information and each middle turning point so as to realize the effect of changing the wave amplitude of the dividing line by configuring wave amplitude parameters.

On the basis of the above embodiment, after the drawing control parameter and the proportion value occupied by the element are acquired, the drawing control parameter and the proportion value occupied by the element may be transferred to the graphic drawing module installed in the current application, so that the graphic drawing module performs the operation of acquiring the first picture according to the drawing control parameter and drawing the effect graph for displaying the proportion occupied by the element based on the first picture and the proportion value. The graphic drawing module can be installed in the current application in the form of components or in the form of plug-ins, and an effect graph for displaying the proportion of the elements can be generated in different applications through the components or the plug-ins so as to achieve the effects of high convenience and high practicability. And, can add and use the detailed solution in the assembly or plug-in components, and support parameter configuration and rule configuration, etc. in order to support installing and configuring and using under different scenes.

According to the technical scheme, the first picture is obtained according to the drawing control parameters and the proportion value occupied by the element, the first picture is identified, the dividing line is drawn based on the dividing line drawing parameters, further, the effect graph comprising the dividing line and the first picture is generated according to the proportion value, visual display is carried out on the effect graph, when the change of the proportion value is detected, the effect graph comprising the dividing line and the first picture can be regenerated according to the changed proportion value, the effect graph displayed currently is updated, according to the drawing control parameters and the dividing line drawing parameters, the first picture and the dividing line which are different in drawing can be drawn, multiple groups of codes are not required to be developed to achieve drawing of the effect graph, the problem that the outline effect of the effect graph and the dividing line effect are single in different application scenes is solved, the effect graph with different outlines and/or different dividing line effects can be flexibly and conveniently generated in different scenes is achieved, the effect of the user visual experience is further improved, the effect graph with different outline effects can be supported, the effect graph with personalized configuration and customized configuration can be achieved, the development cost is reduced, and development efficiency of the code is improved.

The following is an embodiment of an image display device provided by the embodiment of the present invention, which belongs to the same inventive concept as the image display method of the above embodiments, and details of the embodiment of the image display device, which are not described in detail, may refer to the embodiment of the image display method.

Example IV

Fig. 15 is a schematic structural diagram of an image display device according to a fourth embodiment of the present invention, where the embodiment is applicable to a case where a proportion of elements is displayed on a display interface of a user terminal, and the specific structure of the image display device is as follows:

The image display device includes an information acquisition module 410, a graphic rendering module 420, and an effect graph display module 430.

The information obtaining module 410 is configured to obtain a drawing control parameter and a proportion value occupied by an element; the drawing control parameters comprise addresses of the first pictures; the graphic drawing module 420 is configured to obtain a first picture according to a drawing control parameter, and draw and generate an effect graph for displaying the proportion of the element based on the first picture and the proportion value; the effect diagram display module 430 is configured to obtain the effect diagram output by the graphic drawing module 420, and visually display the effect diagram.

Optionally, the information obtaining module 410 is specifically configured to obtain drawing control parameters input through the current page; or obtaining a preset drawing control parameter; or acquiring the drawing control parameters determined according to the current values of the preset parameters.

Optionally, the address of the first picture input through the current page includes: an online link address of the first picture, or a local storage address of the first picture.

Optionally, the information obtaining module 410 is specifically configured to determine a current value of the preset parameter; and determining the drawing control parameter corresponding to the current value of the preset parameter according to the current value of the preset parameter and the corresponding relation between the preset parameter value and the drawing control parameter.

Optionally, the preset parameters include: at least one of personal information parameters, scene parameters, and business parameters of the current user.

Optionally, the drawing control parameters further include: drawing parameters of parting lines; the graphics drawing module 420 is specifically configured to obtain a first picture according to drawing control parameters, and identify a first graphic in the first picture; drawing a parting line based on the parting line drawing parameters; and generating an effect graph comprising a dividing line and a first graph according to the proportion value, wherein the dividing line divides the first graph into two parts in the effect graph, and different positions of the dividing line reflect different proportions of the elements.

Optionally, the dividing line drawing parameters include: parting line shape parameters; the graph drawing module 420 is specifically configured to determine a dividing line length parameter according to the size of the first graph, and draw the dividing line according to the dividing line length parameter and the dividing line shape parameter.

Optionally, the parting line is a wavy line; the parting line shape parameters include: wave amplitude parameters; the graph drawing module 420 is specifically configured to determine a start point and an end point of the wavy line according to a length or a width of the circumscribed rectangle of the first graph in the first picture; determining at least one intermediate turning point of the wave line according to the wave amplitude parameter; and drawing a curve based on the starting point, the ending point and the middle turning point to obtain a generated wavy line.

Optionally, the graphics drawing module 420 is specifically configured to draw a second graphic based on the dividing line and the size of the first graphic, where the second graphic is capable of accommodating the first graphic and the dividing line is a part of an outline of the second graphic; determining a target distance value between the dividing line and a preset part of the first graph according to the proportion value; and synthesizing the second graph and the first graph according to the target distance value to generate an effect graph comprising a dividing line and the first graph, wherein the distance value between the dividing line and the preset part of the first graph in the effect graph is equal to the target distance value, and the area, which is not overlapped with the first graph, in the second graph is invisible.

Optionally, the drawing control parameters further include color filling parameters; the graphics rendering module 420 is further configured to color fill the second graphics according to the color filling parameter.

Optionally, the parting line is a wavy line; the graphics drawing module 420 is further configured to add an animation effect of the wave scrolling to the effect map by executing animation logic of the preset wave scrolling.

Optionally, the graphic drawing module 420 is further configured to regenerate an effect graph including the parting line and the first graphic according to the changed scale value; the effect diagram display module 430 obtains the effect diagram regenerated by the graphic drawing module 420, and updates the currently displayed effect diagram using the regenerated effect diagram.

Optionally, the graphics drawing module 420 is further configured to perform matting processing on the first picture to obtain a solid hollowed-out first picture.

Optionally, the graphics rendering module 420 is further configured to determine whether the background color of the first picture is a solid color; and when the background color is determined to be the pure color, modifying the transparency value of the pixel point with the color unequal to the background color in the first picture so as to hide the pixel point.

The image display device provided by the embodiment of the invention can execute the method provided by any embodiment of the invention, and has the corresponding functional modules and beneficial effects of the execution method.

It should be noted that, in the embodiment of the image display apparatus, each unit and module included are only divided according to the functional logic, but not limited to the above-mentioned division, so long as the corresponding functions can be implemented; in addition, the specific names of the functional units are also only for distinguishing from each other, and are not used to limit the protection scope of the present invention.

Example five

Fig. 16 is a schematic structural diagram of an electronic device according to a fifth embodiment of the present invention. Fig. 16 illustrates a block diagram of an exemplary electronic device 12 suitable for use in implementing embodiments of the present invention. The electronic device 12 shown in fig. 16 is merely an example and should not be construed as limiting the functionality and scope of use of embodiments of the present invention.

As shown in fig. 16, the electronic device 12 is in the form of a general purpose computing device. Components of the electronic device 12 may include, but are not limited to: one or more processors or processing units 16, a system memory (memory) 28, a bus 18 that connects the various system components, including the system memory 28 and the processing units 16.

Bus 18 represents one or more of several types of bus structures, including a memory bus or memory controller, a peripheral bus, an accelerated graphics port, a processor, and a local bus using any of a variety of bus architectures. By way of example, and not limitation, such architectures include Industry Standard Architecture (ISA) bus, micro channel architecture (MAC) bus, enhanced ISA bus, video Electronics Standards Association (VESA) local bus, and Peripheral Component Interconnect (PCI) bus.

Electronic device 12 typically includes a variety of computer system readable media. Such media can be any available media that is accessible by electronic device 12 and includes both volatile and nonvolatile media, removable and non-removable media.

The system memory 28 may include computer system readable media in the form of volatile memory, such as Random Access Memory (RAM) 30 and/or cache memory. The electronic device 12 may further include other removable/non-removable, volatile/nonvolatile computer system storage media. By way of example only, storage system 34 may be used to read from or write to non-removable, nonvolatile magnetic media (not shown in FIG. 16, commonly referred to as a "hard disk drive"). Although not shown in fig. 16, a magnetic disk drive for reading from and writing to a removable non-volatile magnetic disk (e.g., a "floppy disk"), and an optical disk drive for reading from or writing to a removable non-volatile optical disk (e.g., a CD-ROM, DVD-ROM, or other optical media) may be provided. In such cases, each drive may be coupled to bus 18 through one or more data medium interfaces. The system memory 28 may include at least one program product having a set (e.g., at least one) of program modules configured to carry out the functions of the embodiments of the invention.

A program/utility 40 having a set (at least one) of program modules 42 may be stored in, for example, system memory 28, such program modules 42 including, but not limited to, an operating system, one or more application programs, other program modules, and program data, each or some combination of which may include an implementation of a network environment. Program modules 42 generally perform the functions and/or methods of the embodiments described herein.

The electronic device 12 may also communicate with one or more external devices 14 (e.g., keyboard, pointing device, display 24, etc.), one or more devices that enable a user to interact with the electronic device 12, and/or any devices (e.g., network card, modem, etc.) that enable the electronic device 12 to communicate with one or more other computing devices. Such communication may occur through an input/output (I/O) interface 22. Also, the electronic device 12 may communicate with one or more networks such as a Local Area Network (LAN), a Wide Area Network (WAN) and/or a public network, such as the Internet, through a network adapter 20. As shown, the network adapter 20 communicates with other modules of the electronic device 12 over the bus 18. It should be appreciated that although not shown, other hardware and/or software modules may be used in connection with electronic device 12, including, but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, data backup storage systems, and the like.

The processing unit 16 executes various functional applications and data processing by running programs stored in the system memory 28, for example, implementing the steps of an image presentation method provided in the present embodiment, the method includes:

Acquiring drawing control parameters and proportion values occupied by elements; the drawing control parameters comprise addresses of the first pictures;

Acquiring a first picture according to drawing control parameters, and drawing and generating an effect diagram for displaying the proportion of the element based on the first picture and the proportion value;

and obtaining the generated effect graph, and visually displaying the effect graph.

Example six

A sixth embodiment of the present invention provides a computer readable storage medium having stored thereon a computer program which, when executed by a processor, implements the steps of the image display method according to any embodiment of the present invention, the method comprising:

The computer storage media of embodiments of the invention may take the form of any combination of one or more computer-readable media. The computer readable medium may be a computer readable signal medium or a computer readable storage medium. The computer readable storage medium may be, for example, but not limited to: an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or a combination of any of the foregoing. More specific examples (a non-exhaustive list) of the computer-readable storage medium would include the following: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In this document, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device.

The computer readable signal medium may include a propagated data signal with computer readable program code embodied therein, either in baseband or as part of a carrier wave. Such a propagated data signal may take any of a variety of forms, including, but not limited to, electro-magnetic, optical, or any suitable combination of the foregoing. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device.

Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wire, fiber optic cable, RF, etc., or any suitable combination of the foregoing.

Computer program code for carrying out operations of the present invention may be written in one or more programming languages, including an object oriented programming language such as JavaScript or the like, or combinations thereof. The program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any kind of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or may be connected to an external computer (for example, through the Internet using an Internet service provider).

It will be appreciated by those of ordinary skill in the art that the modules or steps of the invention described above may be implemented in a general purpose computing device, they may be centralized on a single computing device, or distributed over a network of computing devices, or they may alternatively be implemented in program code executable by a computer device, such that they are stored in a memory device and executed by the computing device, or they may be separately fabricated as individual integrated circuit modules, or multiple modules or steps within them may be fabricated as a single integrated circuit module. Thus, the present invention is not limited to any specific combination of hardware and software.

Note that the above is only a preferred embodiment of the present invention and the technical principle applied. It will be understood by those skilled in the art that the present invention is not limited to the particular embodiments described herein, but is capable of various obvious changes, rearrangements and substitutions as will now become apparent to those skilled in the art without departing from the scope of the invention. Therefore, while the invention has been described in connection with the above embodiments, the invention is not limited to the embodiments, but may be embodied in many other equivalent forms without departing from the spirit or scope of the invention, which is set forth in the following claims.

Claims

1. An image display method, comprising:

The effect diagram is obtained, and the effect diagram is visually displayed;

The drawing control parameters further include: drawing parameters of parting lines;

Correspondingly, the step of obtaining the first picture according to the drawing control parameter, and drawing and generating an effect diagram for displaying the proportion of the element based on the first picture and the proportion value comprises the following steps:

Acquiring a first picture according to the drawing control parameters, and identifying a first graph in the first picture;

drawing a parting line based on the parting line drawing parameters;

generating an effect graph comprising the dividing line and the first graph according to the proportion value, wherein the dividing line divides the first graph into two parts in the effect graph, and different positions of the dividing line reflect different proportions occupied by the element;

the parting line drawing parameters include: parting line shape parameters;

correspondingly, the drawing the parting line based on the parting line drawing parameter comprises the following steps:

determining a dividing line length parameter according to the size of the first graph, and drawing a dividing line according to the dividing line length parameter and the dividing line shape parameter;

The dividing line is a wavy line; the parting line shape parameters include: wave amplitude parameters;

correspondingly, the determining the dividing line length parameter according to the size of the first graph, and drawing the dividing line according to the dividing line length parameter and the dividing line shape parameter includes:

determining a starting point and an ending point of a wave line according to the length or the width of the circumscribed rectangle of the first graph in the first picture;

Determining at least one middle turning point of the wave line according to the wave amplitude parameter, wherein the middle turning point is a point corresponding to a wave crest or a wave trough of the wave line;

And drawing a curve based on the starting point, the ending point and the middle turning point to obtain a generated wavy line.

2. The method of claim 1, wherein the obtaining drawing control parameters comprises:

Drawing control parameters input through a current page are obtained; or alternatively

Obtaining a preset drawing control parameter; or alternatively

And acquiring the drawing control parameters determined according to the current values of the preset parameters.

3. The method of claim 2, wherein the address of the first picture entered through the current page comprises: an online link address of the first picture, or a local storage address of the first picture.

4. The method according to claim 2, wherein the obtaining the drawing control parameter determined according to the current value of the preset parameter includes:

determining the current value of a preset parameter;

And determining the drawing control parameter corresponding to the current value of the preset parameter according to the current value of the preset parameter and the corresponding relation between the preset parameter value and the drawing control parameter.

5. The method of claim 2, wherein the preset parameters include: at least one of personal information parameters, scene parameters, and business parameters of the current user.

6. The method of claim 1, wherein generating an effect graph comprising the split line and the first graph from the scale value comprises:

drawing a second graphic based on the dividing line and the size of the first graphic, wherein the second graphic is capable of accommodating the first graphic and the dividing line is a part of the contour line of the second graphic;

Determining a target distance value between the dividing line and a preset part of the first graph according to the proportion value;

And synthesizing the second graph and the first graph according to the target distance value to generate an effect graph comprising the dividing line and the first graph, wherein the distance value between the dividing line and the preset part of the first graph in the effect graph is equal to the target distance value, and a region, which is not overlapped with the first graph, in the second graph is invisible.

7. The method of claim 6, wherein the rendering control parameters further comprise color fill parameters;

accordingly, after drawing the second pattern based on the dividing line and the size of the first pattern, the method further includes:

and performing color filling on the second graph according to the color filling parameters.

8. The method of claim 1, wherein the parting line is a wavy line;

Accordingly, when generating the effect graph, the method further includes:

and adding the animation effect of the wave rolling in the effect graph by executing animation logic of preset wave rolling.

9. The method according to claim 1, wherein the method further comprises:

when the change of the proportion value is detected, regenerating an effect graph containing the dividing line and the first graph according to the changed proportion value;

and acquiring a regenerated effect diagram, and updating the currently displayed effect diagram by using the regenerated effect diagram.

10. The method of claim 1, wherein prior to generating an effect graph comprising the split line and the first graphic from the scale value, the method further comprises:

and carrying out matting processing on the first picture to obtain a first picture with a hollow solid color.

11. The method of claim 10, wherein the matting the first picture to obtain a solid hollowed-out first picture comprises:

determining whether a background color of the first picture is a solid color;

And when the background color is determined to be the pure color, modifying the transparency value of the pixel point with the color unequal to the background color in the first picture so as to hide the pixel point.

12. An image display device, comprising:

the effect diagram display module is used for obtaining the effect diagram output by the graph drawing module and visually displaying the effect diagram;

The graphic drawing module is specifically configured to:

drawing a parting line based on the parting line drawing parameters;

the parting line drawing parameters include: parting line shape parameters;

The graphic drawing module is specifically configured to:

13. An electronic device, the electronic device comprising:

one or more processors;

A memory for storing one or more programs;

the one or more programs, when executed by the one or more processors, cause the one or more processors to implement the image presentation method of any of claims 1-11.

14. A computer readable storage medium, on which a computer program is stored, characterized in that the program, when being executed by a processor, implements the image presentation method according to any one of claims 1-11.