CN112579083A

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

Info

Publication number: CN112579083A
Application number: CN202011449309.0A
Authority: CN
Inventors: 王少康
Original assignee: JD Digital Technology Holdings Co Ltd
Current assignee: JD Digital Technology Holdings Co Ltd
Priority date: 2020-12-09
Filing date: 2020-12-09
Publication date: 2021-03-30
Anticipated expiration: 2040-12-09
Also published as: CN112579083B

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: obtaining drawing control parameters and proportion values of elements; wherein the drawing control parameter comprises an address of the first picture; acquiring a first picture according to the drawing control parameters, and drawing and generating an effect graph for showing the proportion of the elements based on the first picture and the proportion value; and acquiring an effect picture, and visually displaying the effect picture. According to the technical scheme of the embodiment of the invention, the proportion of the elements can be conveniently and flexibly displayed through the configurable drawing control parameters, the display effect is improved, the development efficiency of the display codes is improved, and the development cost is reduced.

Description

Image display method and device, electronic equipment and storage medium

Technical Field

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

Background

Currently, progress bars or sector charts, pie charts, etc. are often used on pages to show the rate of progress or elements of an event. For example, a progress bar is used to show the loading progress of the page, and a sector graph is used to show the proportion of the population number of a certain age group to the total population number.

In the process of implementing the invention, at least the following problems are found in the prior art:

the scheme for displaying the event progress or the proportion of the elements needs to respectively develop the display codes for each application scene, is low in development efficiency and high in cost, and has a single display effect and a poor display effect for 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, and aims to achieve 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, where the method includes:

obtaining drawing control parameters and proportion values of elements; wherein the drawing control parameter comprises an address of the first picture;

acquiring a first picture according to the drawing control parameter, and drawing and generating an effect graph for displaying the proportion of the elements based on the first picture and the proportion value;

and acquiring the effect diagram, and visually displaying the effect diagram.

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

the information acquisition module is used for acquiring the drawing control parameters and the proportion values of the elements; wherein the drawing control parameter comprises an address of the first picture;

the graph drawing module is used for acquiring a first picture according to the drawing control parameter and drawing and generating an effect graph for displaying the proportion of the elements on the basis of the first picture and the proportion value;

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

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

one or more processors;

a memory for storing one or more programs;

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

In a fourth aspect, the embodiment of the present invention further provides a computer-readable storage medium, on which a computer program is stored, where the computer program, when executed by a processor, implements the image displaying method according to any one of the embodiments of the present invention.

According to the technical scheme of the embodiment of the invention, the drawing control parameter and the proportion value of the element are firstly obtained, then the first picture is obtained according to the drawing control parameter, the effect diagram for displaying the proportion of the element is generated based on the first picture and the proportion value, and the effect diagram is obtained and visually displayed. According to the method, the effect graphs are drawn according to the addresses of the obtained first pictures, the obtained first pictures have different addresses, different first pictures can be obtained based on the addresses, or different first pictures can be obtained based on the addresses when the same addresses are obtained 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 effects that the effect graphs can be flexibly and conveniently generated under different scenes and the effect graphs support personalized and customized configuration are achieved; meanwhile, the effect graph can be drawn according to different first pictures, and development of the effect graph drawing codes is not required to be performed according to different application scenes, so that the code development efficiency 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 technical solutions in the prior art, and it is obvious that the drawings in the following description are some embodiments of the present invention, and for those skilled in the art, other drawings can be obtained according to these drawings without creative efforts.

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

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

fig. 3 is a schematic diagram of an effect diagram in which a first graph is a large figure according to an embodiment of the present invention;

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

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

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

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

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

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

FIG. 10 is a schematic view of a second wavy line provided in accordance with a third embodiment of the present invention;

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

fig. 12 is a schematic diagram of a first graph and a second graph provided in the third embodiment of the present invention;

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

FIG. 14 is a schematic diagram of an effect graph of different wavy line shapes provided by a third embodiment of the present 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 present invention will be described in further detail with reference to the accompanying drawings and examples. It is to be understood that the specific embodiments described herein are merely illustrative of the invention and are not limiting of the invention. It should be further noted that, for the convenience of description, only some of the structures related to the present invention are shown in the drawings, not all of the structures.

Example one

Fig. 1 is a flowchart of an image displaying method according to an embodiment of the present invention, which is applicable to a situation where a ratio value of an element is displayed on a display interface of a user terminal, and especially applicable to a scene of information statistics and an application scene of progress bar display. The method can be executed by an image presentation device, which can be implemented by software and/or hardware, and is integrated in a user terminal with a display function. The method can be generally integrated in intelligent terminals such as a PC (personal computer), a smart phone, a tablet personal computer or a handheld game console.

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

s110, obtaining drawing control parameters and proportion values of elements, wherein the drawing control parameters comprise addresses of the first picture.

The drawing control parameters may further include at least one of a dividing line drawing parameter and a color filling parameter, and the first picture may be acquired according to an address of the first picture; the dividing line drawing parameter includes a dividing line shape parameter and the like. The first picture may include a first graphic, and the first graphic is used for determining the outer contour shape of the subsequently generated effect picture, and the first graphic may be a graphic of any shape. The proportion value of the element may include a proportion value of a time element of the event, i.e., a progress value, for example: a page loading progress value; the proportion value of the element may also include other statistically derived proportion values of the element besides the time element, such as: the proportion of the users of the male and the female in the purchasing crowd of a certain article. In general, the ratio of the elements may be in the form of a percentage.

Specifically, the proportion value of the element may be determined by the application program through information statistics or according to program running information. The drawing control parameter may be input by a user through a page, may be pre-configured in a preset location such as a program code, or may be dynamically determined according to a current value of the preset parameter.

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

Specifically, the first picture may be obtained according to the 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 ratio value can be drawn on the basis of the first picture to obtain an effect graph for representing the ratio of the elements, the effect graph 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 ratios of the elements. At this time, the outer contour shape and the dividing line of the effect diagram are generated according to the drawing control parameter and the proportional value, and the effect diagram has the advantages of individuation and customization.

And S130, acquiring the effect graph, and visually displaying the effect graph.

Specifically, the generated effect graph is obtained, the schematic diagram of the effect graph is shown in fig. 2, the first graph 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 graph corresponding to the proportion value of the element, so that the proportion value can be displayed more clearly in the effect graph, and the user experience is improved. The first pattern may have other shapes as well, as shown in fig. 3, in which the first pattern in fig. 3 is a large figure. As shown in fig. 4, the effect graph of health degree is used for illustration, wherein the proportion of the health factors is shown, the first graph in the effect graph of health degree is heart-shaped, the dividing line is wave-shaped, when it is detected that the user selects "none above", the proportion value of the health elements can be determined to be 100%, and the effect graph of the heart-shaped full filling can be output; upon detecting that the user has selected only one of the options, for example: "love smoking", can confirm the proportion value that the healthy element accounts for 85%, can output the corresponding effect picture, wherein, the wave line divides the heart shape into two parts up and down, represent two parts of 85% and 15% respectively; upon detecting a user selecting multiple ones of the options, for example: the proportion value of the health elements is determined to be 30% and a corresponding effect graph can be output, wherein the heart shape is divided into an upper part and a lower part by a wave line, and the upper part and the lower part represent 70% and 30% respectively. The first graphic may be in the shape of a heart, but may be in any other shape, as shown in fig. 5, and may be in the shape of a dog. The effect diagram is displayed in a preset display position, for example, in a page of an APP, and it should be noted that parameter information such as the size of the effect diagram during display may be preset to match with the actual display effect. The effect graph is visually displayed on the interface, so that the proportion of the elements can be visually determined by a user.

According to the technical scheme of the embodiment of the invention, the drawing control parameter and the proportion value of the element are firstly obtained, then the first picture is obtained according to the drawing control parameter, the effect diagram for displaying the proportion of the element is generated based on the first picture and the proportion value, 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 addresses of the acquired first pictures are different, 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 at the addresses can be replaced at any time according to needs), the effect graphs drawn according to the different first pictures are different, so that the purpose of drawing different effect graphs by configuring different first pictures is achieved, and the effects that the effect graphs can be flexibly and conveniently generated under different scenes and the effect graphs support personalized and customized configuration are further achieved; meanwhile, the effect graph can be drawn according to different first pictures, and development of the effect graph drawing codes is not required to be performed according to different application scenes, so that the code development efficiency is improved, and the development cost is reduced.

Example two

Fig. 6 is a flowchart of an image displaying method according to a second embodiment of the present invention, and on the basis of the foregoing embodiments, the present embodiment preferably further optimizes the step "obtaining the drawing control parameter". The same or corresponding terms as those in the above embodiments are not explained in detail herein.

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

and S210, acquiring the proportion value of the elements.

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

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

And S220, acquiring the drawing control parameters input through the current page.

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

Illustratively, the current page includes a control for inputting the drawing control parameter, and when the control is detected to be triggered by the user, an input dialog box of the drawing control parameter can be displayed for the user to input or select the drawing control parameter. The user may input an address of the first picture, a dividing line drawing parameter, a color filling parameter, and the like in the input dialog. In order to facilitate the user to determine the address of the first picture, a link button may be provided in the input dialog described above. When the link button is detected to be triggered, a selection box for selecting a first picture address can be called, and when the situation that a user selects a certain picture as the first picture is detected, 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 the online link address, the online link address may be a web page link for linking to a picture on the network or linking to a picture in the cloud storage space, and the picture corresponding to the online link address is used 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 the picture in the local storage path may be taken as the first picture.

And S230, acquiring preset drawing control parameters.

The pre-configured drawing control parameter may be a drawing control parameter written into application program code by an application developer when developing an application, for example: the address of the first picture, the dividing line drawing parameter, the color filling parameter, and the like are written in advance.

Specifically, the dividing line drawing parameters may be determined according to preset drawing control parameters, for example: a dividing line shape parameter, etc., to draw a dividing line according to the dividing line drawing parameter. The color filling parameters may be determined according to pre-configured rendering control parameters to fill the effect map according to the color filling 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.

And S240, obtaining the drawing control parameters determined according to the current values 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 ', and 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 then 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 dividing line drawing parameter.

Optionally, the current value of the preset parameter may 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 preset corresponding relationship between the 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 segmentation line corresponding to 10:00 can be determined to be a straight line, and the color is filled with red.

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

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

The personal information parameters may include gender information, age information, zodiac information, professional information, and any other information related to the user.

For example, if the personal information parameter is gender information, the correspondence between the gender information and the drawing control parameter may be: sex: male-first picture: square picture-cut line: straight line-color fill: blue; sex: woman-first picture: heart-shaped picture-cut line: wavy line-color fill: red. If the personal information parameter is age information, the correspondence between the age information and the rendering control parameter may be: under 10 years-first picture: flower picture-cut line: wavy line-color fill: yellow; 10-20 years-first picture: heart-shaped picture-cut line: broken line-color fill: pink, and the like. If the personal information parameter is the zodiac information, the first picture can be set as an animal picture corresponding to the user's zodiac, according to the zodiac information of different users. The method for determining the drawing control parameter according to the other personal information parameters 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 time information, geographical location information, weather information, and the like.

For example, if the scene parameter is time information, the first picture corresponding to 8:00 to 20:00 may be a sun picture, and the first picture corresponding to 20:00 to 8:00 may be a moon picture. If the scene parameter is the geographical location information, the first picture may be set as a landmark building picture corresponding to the geographical location information. If the scene parameter is weather information, the first picture corresponding to sunny days may be a sun picture, the first picture corresponding to cloudy days may be a cloud picture, and the first picture corresponding to snowing days 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.

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 and the like.

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

And S260, acquiring the effect diagram, and visually displaying the effect diagram.

According to the technical scheme of the embodiment, the proportion value of the elements is firstly obtained, and the drawing control parameters input through the current page can be obtained; or, obtaining a preset drawing control parameter; or, obtaining a drawing control parameter determined according to a current value of a preset parameter, then obtaining a first picture according to the drawing control parameter, drawing and generating an effect picture for displaying the proportion of elements based on the first picture and the proportion value of the elements, obtaining the effect picture and visually displaying the effect picture, wherein the method can obtain the first picture through multiple modes, solves the problems of single outline effect and poor user visual experience of the effect picture under different application scenes, realizes the flexible and convenient generation of the effect pictures with different outlines under different scenes, improves the effect of the user visual experience, realizes the effect that the effect picture can support the effect of user personalized and customized configuration, and simultaneously can improve the development efficiency of display codes and reduce the development cost.

EXAMPLE III

Fig. 7 is a flowchart of an image displaying method according to a third embodiment of the present invention, and on the basis of the foregoing embodiments, the present embodiment may refer to the technical solution of the present embodiment for a specific implementation manner of generating an effect graph when a drawing control parameter includes a dividing line drawing parameter. The same or corresponding terms as those in the above embodiments are not explained in detail herein.

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

and S310, obtaining the drawing control parameters and the proportion values of the elements.

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 outer contour graph obtained by processing the first picture.

Specifically, after the first picture is obtained according to the drawing control parameter, the outline of the graph in the first picture may be extracted, and the extracted outline graph is used as the first graph. For example: and taking the outline graph of the rabbit extracted from the rabbit picture as a first graph.

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

Optionally, in order to facilitate identification of the first graph in the first picture, the first picture may be further hollowed: and carrying out cutout processing on the first picture to obtain a pure-color hollowed first picture.

Specifically, the background and the foreground in the first picture can be determined, and the matting processing is performed on the foreground according to the boundary between the background and the foreground, so that the pixel points corresponding to the foreground are in a transparent state, and the pixel points corresponding to the background can be set to be pure color, for example: white. The background of the first picture may be adjusted to a solid color according to a 24-bit color profile 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 values are (255, 255, 255).

If the background color of the picture is pure, 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 pure color; and when the background color is determined to be the pure color, modifying the transparency value of the pixel point with the color not equal 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 pure color. Recording the color information of the background color, extracting the color information of all pixel points in the first picture, comparing the color information of all the pixel points with the color information of the background color, if the color information of all the pixel points is the same as the color information of the background color, not processing the pixel point, and if the color information of all the pixel points is different from the color information of the background color, adjusting the transparency value of the pixel point to be 0 so as to hide the pixel point.

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

For example, a hidden canvas (drawing processing graphics) may be created, the first picture is placed in the canvas, color values of one or more pixel points in four directions, i.e., right, bottom, and left, of the first picture are respectively obtained, and if the color values of all the pixel points are the same, it may be determined that the background color of the first picture is a pure color. Further, three primary colors (RGBA) are judged for all pixel points of the first picture. If any of R, G, B of a pixel is not equal to the corresponding value of the background color, the value A (opacity) of the pixel is changed to 0, so as to realize the effect of hiding the pixel. And re-rendering the canvas after traversing, and outputting the first pure-color hollow graph.

And S330, drawing the dividing line based on the dividing line drawing parameter.

The dividing line drawing parameters may include dividing line shape parameters, dividing line type parameters, and the like, and may be used for drawing the dividing lines. The dividing line shape parameters may include straight lines, zigzag lines, wave shapes, etc., and the dividing line shape parameters may include solid lines, dotted lines, etc. Specifically, the dividing line may be drawn at a preset position according to the dividing line drawing parameter.

If the parting line drawing parameter comprises a parting line shape parameter, the parting line can be drawn according to the following mode:

and determining a parting line length parameter according to the size of the first graph, and drawing a 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, and the length of the long side or the short side of the circumscribed rectangle may be determined 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 dividing line meets the requirement of subsequent generation of the effect graph, the length parameter of the dividing line can be properly expanded. The dividing line length parameter may be determined according to a preset multiple and the length of the long side or the short side in the circumscribed rectangle of the first figure. 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, the length parameter of the dividing line is based on the long side of the circumscribed rectangle of the first graph, and then the length parameter of the dividing line is 1.2 times of the length of the long side in the circumscribed rectangle of the first graph. For the following description, the length of the long side of the circumscribed rectangle of the first pattern may be defined as the length of the first pattern, and the length of the short side of the circumscribed rectangle of the first pattern may be defined as the width of the first pattern. It should be noted that the preset multiple may be set according to actual requirements.

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

step one, determining a starting point and an ending point of a wavy 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 graph 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 can be determined according to the length parameter of the divided line, for example: and taking one point on the short side of the circumscribed rectangle as a starting point, and the length parameter of the dividing line as the length of the circumscribed rectangle, and determining a point which is away from the starting point by the length parameter of the dividing line as an end point on the opposite side of the side where the starting point is positioned.

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 peak or a trough of the wavy line. The wave amplitude parameter may be a parameter for determining a wave amplitude value, such as: the wave amplitude parameter may be a wave amplitude value or may be multiple information. According to different use scenarios, the wave amplitude parameter may be configured by an application developer, or may be configured by an ordinary user through a configuration entry exposed by the application developer. If the wave amplitude parameter is the multiple information, the wave amplitude value may 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 the first pattern length or width. The multiple information and the reference amplitude value may be set according to actual conditions, and are not specifically limited in this embodiment.

Specifically, the number of the intermediate turning points may be preset, and the setting manner may be set according to a user requirement or an aesthetic requirement when displaying. Between the start point and the end point of the wave line, the position of each intermediate turning point can be determined according to the number of the intermediate turning points and the wave amplitude parameter.

For example, assuming that the length and width of the circumscribed rectangle of the first graph are both 120 pixels, and the coordinates of the upper left vertex of the circumscribed rectangle are (0, 0), the start point coordinates may be set below the upper left vertex of the circumscribed rectangle at a distance from the upper left vertex: the length of the circumscribed rectangle is-1/10, where the start point coordinates are (0, -12), and similarly, the end point coordinates are (120, -12). The positions of 7 bisectors and thus the turning points can be determined according to the width of the rectangle. Namely: [(15,0),(30, -12),(45,0),(60, -12),(75,0),(90, -12),(105,0)].

And step three, 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 plotting 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 a parabola, a wavy line can also be obtained. To make the wavy line more aesthetically pleasing, the wavy line may be generated using bezier curves. The bezier curve shown in fig. 8 is a third order bezier curve having a parameter t of 0.92. The specific way in which the wavy line is generated is not specifically limited in this embodiment. When the number of the middle turning points is different, the corresponding wavy lines are schematically shown in fig. 9 and 10. When the wave amplitude parameters are different, the corresponding wave line schematic diagrams are shown in fig. 9 and fig. 11.

It should be noted that the canvas may be used to generate the wave line, and the reference wave curve may be constructed based on a curve algorithm, such as a bezier curve algorithm, based on the start point, the end point and the intermediate turning point. And wave curves with different amplitudes can be constructed according to the configured wave amplitude parameters, so that the effect of controlling and displaying the wave amplitudes of different parting lines is realized.

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

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

Specifically, the proportion value of the current element can be determined according to different proportions of the element. 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 by the proportional value using a dividing line, or the area of the circumscribed rectangle of the first pattern may be divided by the proportional value using a dividing line. After the first graph is divided by the dividing lines, different positions of the dividing lines can reflect different proportions of the elements.

In order to make the drawing result of the dividing line more accurate, the dividing line can be drawn by 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 figure is capable of receiving the first figure and the parting line is a part of the outline of the second figure.

Specifically, the circumscribed rectangle of the first graph can be drawn according to the size of the first graph, and then one edge of the circumscribed rectangle can be replaced by a dividing line, and the replaced graph is used as the second graph. In order to make the dividing line fit with the first graph when the subsequent effect graph is generated, the second graph may be enlarged according to a preset scale, for example: and enlarging by 1.5 times, and the enlarged pattern is used 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 a heart shape and 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 indicating a preset ratio, and in general, the preset portion is used to indicate a position corresponding to 100% or 0. The target distance value is a distance value between the dividing line and the preset position determined according to the proportion value of the elements.

Specifically, a proportion value of 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.

Illustratively, the proportion information is determined to be 30% according to the proportion value of 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 position can be determined to be L multiplied by 30%. If the preset portion is the bottom edge of the circumscribed rectangle of the first graph and the corresponding proportion of the preset portion is 100%, it may be determined that the length information of the left or right side is L according to the size information of the circumscribed rectangle of the first graph, and a schematic diagram of the preset portion and the dividing line is shown in fig. 13. According to the length information L and the proportion information 30%, the target distance value between the dividing line and the preset position can be determined to be L x (1-30%).

And step three, 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 position 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 graph and the first graph are synthesized in a manner of overlaying, that is, the second graph and the first graph are overlaid, and the distance value between the dividing line and the preset position of the first graph is equal to the target distance value. Further, processing the superposed graph: the region of the second graph, which is not overlapped with the first graph, is set to be invisible, and the transparency value of the corresponding pixel point may be set to be zero.

Optionally, in order to make the display effect of the effect map more beautiful, the drawing control parameter may include a color filling parameter.

The color filling parameter may be color information, i.e. a color value or a value in a 24-bit color configuration table, and may further include that the filling effect is a gradient color or a pure color.

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

Specifically, after the second graph is determined, a color filling parameter is obtained, and the second graph is color-filled based on color information and/or a filling effect in the color filling parameter.

In color filling, an english color list [ red, blue ] or an RGB color list [ #000, # fff ] may be used, and the two color lists may be directly configured for presentation by an application developer or may be controlled by the application developer, such as: input boxes or buttons and the like, which can be dynamically configured by a common user.

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

Wherein the animation logic may be a method flow that causes the wavy lines to roll up.

In particular, to match the animation effect of wave scrolling to the first graphic, the size of the second graphic when the animation logic is executed may be larger than the first graphic. The preset animation logic for wave rolling is read, and the animation logic is executed, namely, the first graph and the second graph are superposed, the second graph is moved to enable the second graph to be displaced relative to the first graph, and the effect of wave rolling can be visually considered.

For example, when the second graph is generated, the second graph may be enlarged according to a preset scale, for example: the length of the circumscribed rectangle of the first pattern in the horizontal direction may be set as the length of the first pattern, the length of the second pattern in the horizontal direction may be set 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 for the preset wave scrolling may be that if the wave line scrolls from left to right, the first graphic may be overlaid on the portion 1/4 on the right side of the second graphic, and this state is used as the initial state, and the second graphic may slide to the right at the preset speed. The preset speed is a preset wave line sliding speed, may be a default value, and may also be a speed value obtained by user input. When the displacement value of the slip is equal to twice the first pattern width, a reset operation is performed to make the slip displacement value 0, i.e., to return to the initial state. Further, the animation logic described above may be repeated to continue the scrolling of the wavy lines.

Note that, if the dividing line does not add an animation effect, the length of the second graphic may be equal to the length of the first graphic. 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 between the peak and the valley of the wavy line in order to match the wavy line with the first pattern.

And S350, acquiring the effect diagram, and visually displaying the effect diagram.

Specifically, the generated effect graph can be acquired, and the effect graph is visually displayed at a preset position, and the effect graph when the wave lines are different in shape is shown in fig. 14. At this time, a dynamic or static display effect may be set, so that the dividing line in the effect map is displayed with a dynamic or static effect, enhancing the user visual experience.

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

In order to realize that the effect graph changes along with the change of the proportion value occupied by the elements, the proportion value which changes dynamically 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 position of the first graph is adjusted, so that the position of the dividing line is matched with the proportion value occupied by the elements.

Specifically, the ratio of the elements may be periodically or in real time, and when a change in the ratio is detected, it is indicated that the current effect graph does not match the current ratio. At this time, a new effect diagram indicating the proportion of the element at the current time may be generated based on the changed proportion value.

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

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

On the basis of the embodiment, the first graph can be replaced by replacing the first graph, and then effect graphs with different outer outlines are generated. The first graphic may be dynamically configured while the first graphic is configured. During configuration, 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 first graph is output and replaced by the original first graph to be a newly generated first graph.

On the basis of the above embodiment, in order to implement the color configuration of the first graphic, a user input or selection of a color value may be received, and the color configuration supports a solid color or a gradient color. The user-configured color may be used in drawing the second graphic in accordance with the color value. For the waveform configuration of the dividing line, a wave amplitude parameter may be received, and the second graph may output a set of positions of intermediate turning points according to the wave amplitude parameter, for example: and position coordinate information can be used for drawing the dividing line according to each intermediate turning point so as to realize the effect of changing the wave amplitude of the dividing line by configuring the wave amplitude parameter.

On the basis of the above embodiment, after the drawing control parameter and the proportion value of the element are obtained, the drawing control parameter and the proportion value of the element may be transmitted to the graphics drawing module installed in the current application, so that the graphics drawing module performs an operation of obtaining a first picture according to the drawing control parameter and generating an effect graph for showing the proportion of the element based on the first picture and the proportion value. The graph drawing module can be installed in the current application in the form of an assembly or in the form of a plug-in, and an effect graph for showing the proportion of elements can be generated in different applications through the assembly or the plug-in, so that the effects of high convenience and strong practicability are achieved. In addition, the use details can be added in the components or the plug-ins, and parameter configuration, rule configuration and the like are supported, so that the installation and configuration use under different scenes are supported.

According to the technical scheme of the embodiment, the drawing control parameters and the proportion values of the elements are obtained, the first picture is obtained according to the drawing control parameters, the first graph is identified, the dividing line is drawn based on the dividing line drawing parameters, the effect graph comprising the dividing line and the first graph is generated according to the proportion values, the effect graph is visually displayed, when the change of the proportion values is detected, the effect graph comprising the dividing line and the first graph can be regenerated according to the changed proportion values, the currently displayed effect graph is updated, the method can draw different first graphs and dividing lines according to the drawing control parameters and the dividing line drawing parameters, the drawing of the effect graph is realized without developing multiple groups of codes, the problems that the outer contour effect and the dividing line effect of the effect graph are single and the user visual experience is poor under different application scenes are solved, the effect graphs with different outlines and/or different dividing line effects can be flexibly and conveniently generated in different scenes, the visual experience effect of a user is further improved, the effect that the effect graphs can support the personalized and customized configuration of the user is achieved, meanwhile, the development efficiency of the display codes can be improved, and the development cost is reduced.

The following is an embodiment of an image displaying apparatus provided in an embodiment of the present invention, which belongs to the same inventive concept as the image displaying methods of the above embodiments, and reference may be made to the above embodiment of the image displaying method for details that are not described in detail in the embodiment of the image displaying apparatus.

Example four

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

the image display apparatus includes an information acquisition module 410, a graphic drawing module 420, and an effect diagram presentation module 430.

The information obtaining module 410 is configured to obtain a drawing control parameter and a ratio value of an element; wherein the drawing control parameter comprises an address of the first picture; the graph drawing module 420 is configured to obtain a first picture according to the drawing control parameter, and draw and generate an effect graph for showing the proportion of the elements based on the first picture and the proportion value; and the effect diagram display module 430 is configured to obtain the effect diagram output by the graph drawing module 420, and visually display the effect diagram.

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

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 the control parameter further includes: drawing parameters of the dividing lines; the graph drawing module 420 is specifically configured to obtain a first picture according to the drawing control parameter, and identify a first graph in the first picture; drawing a parting line based on the parting line drawing parameters; and generating an effect graph containing 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 of the elements.

Optionally, the dividing line drawing parameters include: dividing 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 a dividing line according to the dividing line length parameter and the dividing line shape parameter.

Optionally, the dividing line is a wavy line; the parting line shape parameters include: a wave amplitude parameter; the graph drawing module 420 is specifically configured to determine a starting point and an ending point of a wavy line according to the length or the 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 graph drawing module 420 is specifically configured to draw a second graph based on the dividing line and the size of the first graph, where the second graph can accommodate the first graph and the dividing line is a part of a contour line of the second graph; 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 position 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 not visible.

Optionally, the drawing control parameter further includes a color filling parameter; the graph drawing module 420 is further configured to perform color filling on the second graph according to the color filling parameter.

Optionally, the dividing line is a wavy line; the graph drawing module 420 is further configured to add an animation effect of the wave rolling in the effect graph by executing animation logic of preset wave rolling.

Optionally, the graph drawing module 420 is further configured to regenerate the effect graph including the dividing line and the first graph according to the changed scale value; the effect diagram presentation module 430 obtains the effect diagram regenerated by the graphics rendering module 420, and updates the currently presented effect diagram by using the regenerated effect diagram.

Optionally, the graph drawing module 420 is further configured to perform matting processing on the first picture to obtain a pure-color hollowed first picture.

Optionally, the graphics rendering module 420 is further configured to determine whether the background color of the first picture is a pure color; and when the background color is determined to be the pure color, modifying the transparency value of the pixel point with the color not equal 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 displaying apparatus, the included units and modules are only divided according to functional logic, but are not limited to the above division as long as the corresponding functions can be implemented; in addition, specific names of the functional units are only for convenience of distinguishing from each other, and are not used for limiting 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 only an example, and should not bring any limitation to the functions and the scope of use of the embodiment of the present invention.

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

Bus 18 represents one or more of any of several types of bus structures, including a memory bus or memory controller, a peripheral bus, an accelerated graphics port, and a processor or local bus using any of a variety of bus architectures. By way of example, such architectures include, but are not limited to, 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 may 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 and write to non-removable, nonvolatile magnetic media (not shown in FIG. 16, and commonly referred to as a "hard drive"). Although not shown in FIG. 16, a magnetic disk drive for reading from and writing to a removable, nonvolatile magnetic disk (e.g., a "floppy disk") and an optical disk drive for reading from or writing to a removable, nonvolatile optical disk (e.g., a CD-ROM, DVD-ROM, or other optical media) may be provided. In these cases, each drive may be connected to bus 18 by one or more data media interfaces. System memory 28 may include at least one program product having a set (e.g., at least one) of program modules that are configured to carry out the functions of embodiments of the invention.

A program/utility 40 having a set (at least one) of program modules 42 may be stored, for example, in 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 of which examples or some combination thereof may comprise an implementation of a network environment. Program modules 42 generally carry out the functions and/or methodologies of the described embodiments of the invention.

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

The processing unit 16 executes various functional applications and data processing by executing programs stored in the system memory 28, for example, to implement steps of an image presentation method provided by the embodiment of the present invention, the method including:

acquiring a first picture according to the drawing control parameters, and drawing and generating an effect graph for showing the proportion of the elements based on the first picture and the proportion value;

and acquiring the generated effect diagram, and visually displaying the effect diagram.

EXAMPLE six

An embodiment of the present invention provides a computer-readable storage medium, on which a computer program is stored, where the computer program, when executed by a processor, implements the steps of the image display method according to any embodiment of the present invention, where the method includes:

Computer storage media for embodiments of the invention may employ 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 any combination thereof. 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 the context of 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.

A computer readable signal medium may include a propagated data signal with computer readable program code embodied therein, for example, in baseband or as part of a carrier wave. Such a propagated data signal may take many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. 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 a JavaScript programming language, or a combination 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 type of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or the connection may be made to an external computer (for example, through the Internet using an Internet service provider).

It will be understood by those skilled in the art that the modules or steps of the invention described above may be implemented by a general purpose computing device, they may be centralized on a single computing device or distributed across a network of computing devices, and optionally they may be implemented by program code executable by a computing device, such that it may be stored in a memory device and executed by a computing device, or it may be separately fabricated into various integrated circuit modules, or it may be fabricated by fabricating a plurality of modules or steps thereof into a single integrated circuit module. Thus, the present invention is not limited to any specific combination of hardware and software.

It is to be noted that the foregoing is only illustrative of the preferred embodiments of the present invention and the technical principles employed. 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, although the present invention has been described in greater detail by the above embodiments, the present invention is not limited to the above embodiments, and may include other equivalent embodiments without departing from the spirit of the present invention, and the scope of the present invention is determined by the scope of the appended claims.

Claims

1. An image presentation method, comprising:

and acquiring the effect diagram, and visually displaying the effect diagram.

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

acquiring drawing control parameters input through a current page; or,

obtaining a preset drawing control parameter; or,

and obtaining the drawing control parameter determined according to the current value of the preset parameter.

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

4. The method according to claim 2, wherein the obtaining of 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 comprise: at least one of personal information parameters, scene parameters, and business parameters of the current user.

6. The method of any of claims 1-5, wherein the mapping control parameters further comprises: drawing parameters of the dividing lines;

correspondingly, the obtaining a first picture according to the drawing control parameter, and drawing and generating an effect graph for showing the proportion of the elements based on the first picture and the proportion value includes:

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;

and 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 of the elements.

7. The method of claim 6, wherein the partition line drawing parameters comprise: dividing line shape parameters;

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

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

8. The method of claim 7, wherein the split line is a wavy line; the parting line shape parameters include: a wave amplitude parameter;

correspondingly, the 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 includes:

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

determining at least one intermediate turning point of a 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 wave line.

9. The method according to claim 6, wherein the generating an effect map including the dividing line and the first graphic according to the scale value includes:

drawing a second graphic based on the parting line and the size of the first graphic, wherein the second graphic can accommodate the first graphic and the parting 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 of the dividing line and a preset position 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 not visible.

10. The method of claim 9, wherein the rendering control parameters further comprise a color fill parameter;

accordingly, after drawing a second graphic based on the parting line and the size of the first graphic, the method further comprises:

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

11. The method of claim 6, wherein the split line is a wavy line;

correspondingly, when the effect graph is generated, the method further comprises the following steps:

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

12. The method of claim 6, further comprising:

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

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

13. The method according to claim 6, wherein before generating an effect map containing the dividing line and the first graphic according to the scale value, the method further comprises:

and carrying out cutout processing on the first picture to obtain a pure-color hollowed first picture.

14. The method of claim 13, wherein matting the first picture to obtain a solid-color hollowed first picture comprises:

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

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

15. An image display apparatus, comprising:

16. An electronic device, characterized in that the electronic device comprises:

one or more processors;

a memory for storing 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 one of claims 1-14.

17. A computer-readable storage medium, on which a computer program is stored which, when being executed by a processor, carries out the image presentation method according to any one of claims 1 to 14.