Picture display method and device, picture processing method and device

Abstract

The application provides a picture display method and device, and a picture processing method and device. The picture display method responds to a trigger instruction for an object display interface, rotates, translates, and presents a target display picture received from a server by a plurality of object pictures of target objects according to a preset rotation angle, a preset translation speed, a translation distance, and a preset translation direction, improves the rolling individuality, and loads only one target display picture instead of all object pictures of target objects, thereby greatly saving the memory consumption and improving the loading speed of the target display picture.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of computers, in particular to a picture display method and a picture processing method. The present application also relates to a picture display device, a picture processing device, a computing device, and a computer-readable storage medium. BACKGROUND

[0002] At present, an icon picture wall mainly exists in an application market. Taking a mobile phone as an example, an application market in the mobile phone provides an icon picture wall of an application program in a horizontal scrolling or waterfall mode, and simultaneously provides a relatively beautiful UI (User Interface) display effect.

[0003] However, only the horizontal scrolling or waterfall mode (i.e., vertical) scrolling effect can be supported, and the personalization is poor; and the client needs to download pictures of multiple icons when displaying the icon picture wall, the memory consumption is too large, and the picture wall loading speed is slow. SUMMARY

[0004] Therefore, an embodiment of the present application provides a picture display method. The present application also relates to a picture processing method, a picture display device, a picture processing device, a computing device, and a computer-readable storage medium, so as to solve the technical problems of poor personalization of a scrolling effect of a picture wall, the need of a client to download pictures of multiple icons when displaying an icon picture wall, too large memory consumption, and slow picture wall loading speed in the prior art.

[0005] According to a first aspect of an embodiment of the present application, a picture display method is provided, applied to a client, and including:

[0006] S2, in response to a trigger instruction for an object display interface, determining a target display picture received from a server, wherein the target display picture includes object pictures of at least two target objects;

[0007] S4, placing the target display picture in a display area of the object display interface, and rotating the target display picture according to a preset rotation angle, with any alignment angle of the target display picture and the display area as an origin;

[0008] S6, in a case where it is determined that the display area has a blank area, filling a copy picture of the target display picture into the blank area to form a to-be-displayed picture with a display picture of the display area;

[0009] S8, moving the to-be-displayed picture according to a preset translation direction, a preset translation speed, and a translation distance, and continuing to execute step S6.

[0010] According to a second aspect of an embodiment of the present application, a picture display device is provided, which is applied to a client and includes:

[0011] a trigger instruction response module, configured to determine, in response to a trigger instruction for the object display interface, a target display image received from the server, wherein the target display image includes object images of at least two target objects;

[0012] An image rotation module is configured to place the target display image in the display area of ​​the object display interface, and rotate the target display image according to a preset rotation angle with any alignment angle between the target display image and the display area as an origin;

[0013] An image filling module is configured to fill a blank area in the display area with a copy of the target display image to form a to-be-displayed image together with the display image in the display area when determining that the blank area exists in the display area;

[0014] The picture moving module is configured to move the picture to be displayed in a preset translation direction according to a preset translation speed and translation distance, and continue to execute, when it is determined that there is a blank area in the display area, filling the blank area with a copy of the target display picture to form a picture to be displayed together with the displayed picture in the display area.

[0015] According to a third aspect of an embodiment of the present application, a method for processing an image is provided, which is applied to a server and includes:

[0016] Determining an object picture set, wherein the object picture set includes object pictures of at least two target objects;

[0017] Arranging the object images of the at least two target objects according to a preset arrangement rule, and splicing the object images of the at least two target objects according to the arrangement result to obtain a spliced ​​target display image;

[0018] The target display image is sent to the client, so that the target display image is displayed on the client according to a preset display rule.

[0019] According to a fourth aspect of an embodiment of the present application, there is provided an image processing device, which is applied to a server and includes:

[0020] A picture set determining module is configured to determine an object picture set, wherein the object picture set includes object pictures of at least two target objects;

[0021] The splicing module is configured to arrange the object pictures of the at least two target objects according to a preset arrangement rule, and splice the object pictures of the at least two target objects according to a splicing result, to obtain a spliced target display picture.

[0022] The picture sending module is configured to send the target display picture to a client, so that the target display picture is displayed on the client according to a preset display rule.

[0023] According to a fifth aspect of the embodiments of the present application, a computing device is provided, including a memory, a processor, and computer instructions stored in the memory and executable on the processor, and the processor implements the steps of the picture display method or the picture processing method.

[0024] According to a sixth aspect of the embodiments of the present application, a computer readable storage medium is provided, which stores computer instructions, and the computer instructions are executed by a processor to implement the steps of the picture display method or the picture processing method.

[0025] The picture display method provided by the present application is applied to a client, and includes: in response to a trigger instruction for an object display interface, determining a target display picture received from a server; placing the target display picture in a display area of the object display interface, rotating the target display picture according to a preset rotation angle, with any alignment angle of the target display picture and the display area as an origin; in a case where it is determined that there is a blank area in the display area, filling a copy picture of the target display picture into the blank area to form a to-be-displayed picture with a display picture in the display area; and moving the to-be-displayed picture according to a preset translation direction, a preset translation speed, and a translation distance, and continuing to perform the step of filling the copy picture of the target display picture into the blank area to form the to-be-displayed picture with the display picture in the display area in a case where it is determined that there is a blank area in the display area.

[0026] The picture display method implemented by the embodiment of the present application responds to a trigger instruction for an object display interface, rotates a target display picture composed of object pictures of multiple target objects sent by a server according to a preset rotation angle, a preset translation speed, a translation distance, and a preset translation direction, so that the target display picture presents a rolling effect with an inclination angle, improves the rolling individuality, and the client only needs to load one target display picture instead of all object pictures of target objects, which greatly saves memory consumption and improves the loading speed of the target display picture. BRIEF DESCRIPTION OF DRAWINGS

[0027] Figure 1 is a flowchart of a picture processing method provided by an embodiment of the present application;

[0028] Figure 2 This is a schematic diagram of a target display image in an image processing method provided in one embodiment of the present application;

[0029] Figure 3 This is a flowchart of a picture display method provided by an embodiment of the present application;

[0030] Figure 4 This is a flowchart of a method for displaying an image in a program icon display scenario of an application program provided by an embodiment of the present application;

[0031] Figure 5 This is a display effect diagram of a target display image in a display area of ​​an application display interface in a method for displaying images provided in one embodiment of the present application;

[0032] Figure 6 This is a schematic diagram of the display effect of a target display image on a client in a method for displaying images provided in one embodiment of the present application;

[0033] Figure 7 This is a structural diagram of a picture display device provided in one embodiment of the present application;

[0034] Figure 8 This is a structural diagram of an image processing device provided by an embodiment of the present application;

[0035] Figure 9 This is a structural block diagram of a computing device provided in one embodiment of the present application. DETAILED DESCRIPTION

[0036] The following description sets forth many specific details to facilitate a thorough understanding of the present application. However, the present application can be implemented in many other ways than those described herein, and those skilled in the art can make similar generalizations without violating the scope of the present application. Therefore, the present application is not limited to the specific implementations disclosed below.

[0037] The terms used in one or more embodiments of the present application are for the purpose of describing specific embodiments only and are not intended to limit one or more embodiments of the present application. The singular forms "a", "the" and "the" used in one or more embodiments of the present application and the appended claims are also intended to include plural forms, unless the context clearly indicates otherwise. It should also be understood that the term "and / or" used in one or more embodiments of the present application refers to and includes any or all possible combinations of one or more associated listed items.

[0038] It should be understood that although the terms first, second, etc. may be used to describe various information in one or more embodiments of the present application, such information should not be limited to these terms. These terms are only used to distinguish information of the same type from each other. For example, without departing from the scope of one or more embodiments of the present application, the first may also be referred to as the second, and similarly, the second may also be referred to as the first. Depending on the context, the word "if" as used herein may be interpreted as "at the time of" or "when" or "in response to determining".

[0039] First, the terms involved in one or more embodiments of the present application are explained.

[0040] Waterfall flow, also known as waterfall layout, is a commonly used page layout. It is visually presented as a jagged multi-column layout. As the page scrolls down, this layout will continue to load data to the end of the current page.

[0041] This application provides a method for displaying an image. This application also relates to a method for processing an image, a device for displaying an image, a device for processing an image, a computing device, and a computer-readable storage medium, each of which is described in detail in the following embodiments.

[0042] See also Figure 1 , Figure 1 A flowchart of an image processing method provided according to an embodiment of the present application is shown, wherein the image processing method is applied to the server and specifically includes the following steps.

[0043] Step 102: Determine an object picture set, wherein the object picture set includes object pictures of at least two target objects.

[0044] Specifically, the specific application scenarios of the image processing method provided in the embodiment of the present application are different, and its target objects are also different; for example, the image processing method is applied to the application display scenario of the application market, the target object is the application, and the object image is the icon of the application; and the image processing method is applied to the product display scenario of the shopping page, the target object can be understood as the product, and the object image can be understood as the icon of the product.

[0045] For ease of understanding, the following embodiments are described in detail by taking the target object as an application and the object image as an icon of the application as an example.

[0046] Then determining the object picture set can be understood as determining an object picture set including program icons of at least two applications; for example, the object picture set includes a program icon of application 1, a program icon of application 2, and a program icon of application 3.

[0047] In actual applications, the object images of at least two target objects included in the object image set will be arranged and spliced ​​to form a target display image, which will be sent to the client for display. Therefore, in order to ensure the display effect on the client, when determining the object images of at least two target objects included in the object image set, the object images of at least two target objects in the object image set can be determined according to the size of the client's display interface, that is, the number of object images of the target objects in the object image set can be determined according to the size of the client's display interface, so as to avoid the situation where the subsequently generated target display images are too large or too small when displayed on the client.

[0048] In addition, the object images of at least two target objects in the object image set may be determined based on the user preferences of the client, the user preference of the application, the update time, etc. The specific implementation method is as follows:

[0049] The determining of the object picture set includes:

[0050] The object picture set is determined according to the size of the display interface of the client, the attribute information of the client and / or the attribute information of the target object.

[0051] Among them, the size of the client's display interface can be understood as the size of the display interface in the client for displaying the program icon of the application; the client's attribute information can be understood as the client user's preference information for the application, for example, the client's attribute information can be determined based on the client's personal registration information, or based on the historically downloaded applications in the client; the target object's attribute information can be understood as the update time, popularity, etc. of the application.

[0052] In specific implementations, the object picture set can be determined based on the size of the client's display interface, the client's attribute information, or the target object's attribute information. Alternatively, the number of object pictures in the object picture set can be determined based on the size of the client's display interface, and then the corresponding number of object pictures can be determined based on the client's attribute information or the target object's attribute information. Alternatively, the number of object pictures in the object picture set can be determined based on the size of the client's display interface, and then the corresponding number of object pictures can be determined based on the client's attribute information and the target object's attribute information. The specific determination of the object pictures in the object picture set can be determined based on actual needs and is not limited in any way.

[0053] Step 104: Arrange the object images of the at least two target objects according to a preset arrangement rule, and splice the object images of the at least two target objects according to the arrangement result to obtain a spliced ​​target display image.

[0054] The preset arrangement rule can be set according to actual application, for example, when the program icons include 24 application programs, the preset arrangement rule can be an arrangement rule of 4 rows and 6 columns, and the like.

[0055] In a specific implementation, the subsequent target display picture is continuously inclined and scrolled in the client, and in order to realize the staggered effect between the upper and lower rows and improve the personalized display of the target display picture, the object pictures of the at least two target objects after arrangement can be processed and spliced to realize the staggered effect between the upper and lower rows and improve the personalized display of the target display picture. The specific implementation manner is as follows:

[0056] The object pictures of the at least two target objects are spliced according to the arrangement result to obtain the spliced target display picture.

[0057] According to the arrangement result, the first target object of the target row is cropped into a first part and a second part, the second part is reserved at the head of the target row, and the first part is spliced at the tail of the target row to obtain the spliced target display picture.

[0058] The target row can be understood as any row of the object pictures of the at least two target objects after arrangement, for example, an odd row, an even row, or a first row, a fifth row, and the like; specifically, in order to realize the staggered effect, in the case of two or more rows, the two target rows are non-adjacent rows.

[0059] Specifically, the odd row is taken as an example for detailed description.

[0060] That is, according to the arrangement result, the first target object of the odd row is cropped into a first part and a second part, the second part is reserved at the head of the odd row, and the first part is spliced at the tail of the odd row to obtain the spliced target display picture.

[0061] Referring to Figure 2 , Figure 2 A schematic diagram of a target display picture in a picture processing method provided by an embodiment of the application is shown.

[0062] The object pictures of the at least two target objects are taken as the program icons of 24 application programs as an example.

[0063] First, the program icons of 24 application programs are arranged into 4 rows and 6 columns; in order to realize the staggered effect display, the program icons of the first (icon1, icon13) application programs of the odd rows (i.e., the first row and the third row) are cropped into two parts, the latter half is reserved at the head of the odd row, and the former half is spliced at the tail of the odd row, to finally form the target display picture with the staggered effect.

[0064] Of course, in actual applications, the above method can also be used to process even-numbered rows, or other rows. The specific processing methods are the same and will not be described in detail here.

[0065] Step 106: Send the target display image to the client, so that the target display image is displayed on the client according to a preset display rule.

[0066] Specifically, after the target display image is generated according to the above steps, the target display image may be sent to the client, so that the client may display the target display image according to a preset display rule (such as tilt scrolling).

[0067] In the image processing method provided in one embodiment of the present application, multiple object images of the target object to be displayed on the client can be obtained in advance on the server side. After the server side generates a complete target display image according to the preset arrangement rules and splicing method, it is sent to the client for display, saving the client's processing flow and better improving the client's image display performance; and the client only needs to download one image for subsequent display, saving user traffic and storage space, and providing a good user experience.

[0068] See also Figure 3 , Figure 3 A flowchart of a picture display method provided according to an embodiment of the present application is shown, wherein the picture display method is applied to a client and specifically includes the following steps.

[0069] Step 302: In response to a trigger instruction for the object display interface, determine a target display image received from the server, wherein the target display image includes object images of at least two target objects.

[0070] Specifically, the specific application scenarios of the image display method provided in the embodiment of the present application are different, and its target objects are also different; for example, the image display method is applied to the application display scenario of the application market, the target object is the application, and the object image is the icon of the application; and the image display method is applied to the product display scenario of the shopping page, the target object can be understood as the product, and the object image can be understood as the icon of the product.

[0071] For ease of understanding, the following embodiments are described in detail by taking the target object as an application and the object image as an icon of the application as an example.

[0072] The object display interface can be understood as an interface for displaying an object, such as an interface for displaying an application's program icon, such as the program icon display interface for an application in a mobile app market. A trigger instruction for an object display interface can be understood as a trigger instruction for triggering the object display interface via a click or voice, such as a trigger instruction for the program icon display interface for the application triggered by a user clicking the application market icon on a mobile phone.

[0073] In a specific implementation, the target display image received from the server can be the target display image obtained from the server in response to the trigger instruction for the object display interface, or the target display image received from the server before the trigger instruction for the object display interface is received. The specific timing of receiving the target display image from the server can be set according to the actual application and is not limited here.

[0074] In practical applications, the specific method for generating the target display image can be referred to the detailed description of the above-mentioned image processing method, which will not be repeated here. That is, the target display image can be understood as the target display image generated in the above-mentioned image processing method.

[0075] Step 304: placing the target display image in the display area of ​​the object display interface, and rotating the target display image according to a preset rotation angle with any alignment angle between the target display image and the display area as an origin.

[0076] Specifically, after determining the target display image received from the server, the target display image can be placed in the display area of ​​the object display interface, and then the target display image can be rotated according to a preset rotation angle with any alignment angle between the target display image and the display area as the origin, so that the target display image presents a tilted display effect.

[0077] In actual applications, the target display image and the display area of ​​the object display interface are both regular rectangular or square shapes. Therefore, when rotating the target display image according to the preset rotation angle, in order to ensure a more complete rotation effect, the rotation can be performed with any alignment angle of the target display image and the display area of ​​the object display interface as the origin. For example, when aligned on the left, the rotation can be performed with any upper or lower alignment angle on the left as the origin, or when aligned on the right, the rotation can be performed with any upper or lower alignment angle on the right as the origin.

[0078] First, we will take the example of left-aligned rotation with any of the upper and lower alignment angles on the left as the origin to explain in detail. The specific implementation is as follows:

[0079] Placing the target display image in the display area of ​​the object display interface, and rotating the target display image according to a preset rotation angle with any alignment angle between the target display image and the display area as an origin, includes:

[0080] Align the left side of the target display image with the left side of the display area of ​​the object display interface and place it in the display area of ​​the object display interface;

[0081] The target display image is rotated according to a preset rotation angle with any alignment angle between the target display image and the left side of the display area as an origin.

[0082] Specifically, the target display image is placed in the display area of ​​the object display interface, and the left side of the target display image is aligned with the left side of the display area of ​​the object display interface. At this time, if the target display image is the same width as the display area of ​​the object display interface, the upper and lower corners on the left side are both alignment angles. If the target display image is different from the width of the display area of ​​the object display interface, the upper or lower corner on the left side is the alignment angle; then after determining the alignment angle, the target display image can be rotated according to a preset rotation angle with any alignment angle between the target display image and the left side of the display area as the origin, so that the target display image presents a tilted effect; wherein, the preset rotation angle is set according to actual application.

[0083] Specifically, taking the case where the left alignment angle of the target display image and the display area is the upper left alignment angle as an example, the rotation of the target display image is described in detail. The specific implementation method is as follows:

[0084] The step of rotating the target display image according to a preset rotation angle with any alignment angle between the target display image and the left side of the display area as an origin includes:

[0085] The target display image is rotated downward according to a preset rotation angle, with the upper left alignment angle of the target display image and the display area as the origin.

[0086] In actual applications, users' visual habits are better when rotating clockwise. Therefore, with the target display image and the upper left alignment angle of the display area as the origin, rotating the target display image downward according to the preset rotation angle can present a clockwise tilt rotation effect, thereby enhancing the user's visual experience.

[0087] Of course, in actual applications, the target display image can be rotated upward according to the preset rotation angle with the upper left alignment angle of the target display image and the display area as the origin; or the target display image can be rotated downward or upward according to the preset rotation angle with the lower left alignment angle of the target display image and the display area as the origin; only the visual display effects are different, but the tilt scrolling effect can be achieved later.

[0088] In a specific implementation, after the target display image is rotated downward according to a preset rotation angle, in order to prevent a blank area from appearing in the upper right corner of the display area, which would give the user a poor visual experience, an upward translation distance can be calculated based on the preset rotation angle of the target display image and the width of the display area, and the target display image can be moved upward according to the upward translation distance. The specific implementation method is as follows:

[0089] After rotating the target display image downward according to the preset rotation angle, the method further includes:

[0090] An upward translation distance is determined according to the preset rotation angle and the width of the display area, and the target display image is moved according to the upward translation distance.

[0091] The preset rotation angle may be understood as the downward rotation angle of the target display image in the above embodiment.

[0092] Specifically, based on the preset rotation angle and the width of the display area, an upward translation distance can be calculated. By moving the target display image upward according to the upward translation distance, a blank area can be avoided in the upper right corner of the display area after the target display image is rotated downward.

[0093] Of course, after the target display image is rotated downward or upward with other alignment angles as the origin, the target display image can be translated upward or downward according to the implementation method to avoid the occurrence of blank areas in the display area.

[0094] Next, we will take the case of right alignment and use any upper or lower alignment angle on the right side as the origin to perform rotation as an example. The specific implementation method is as follows:

[0095] Placing the target display image in the display area of ​​the object display interface, and rotating the target display image according to a preset rotation angle with any alignment angle between the target display image and the display area as an origin, includes:

[0096] Align the right side of the target display image with the right side of the display area of ​​the object display interface and place it in the display area of ​​the object display interface;

[0097] The target display image is rotated according to a preset rotation angle with any alignment angle between the target display image and the right side of the display area as an origin.

[0098] Specifically, the target display image is placed in the display area of ​​the object display interface, and the right side of the target display image is aligned with the right side of the display area of ​​the object display interface. At this time, if the target display image and the display area of ​​the object display interface have the same width, the upper and lower corners on the right side are both alignment angles. If the target display image and the display area of ​​the object display interface have different widths, the upper or lower corner on the right side is the alignment angle; then after determining the alignment angle, the target display image can be rotated according to a preset rotation angle with any alignment angle on the right side of the display area as the origin, so that the target display image presents a tilted effect; wherein the preset rotation angle is set according to actual application.

[0099] Specifically, taking the case where the left alignment angle of the target display image and the display area is the lower right alignment angle as an example, the rotation of the target display image is described in detail. The specific implementation method is as follows:

[0100] The step of rotating the target display image according to a preset rotation angle with any alignment angle between the target display image and the right side of the display area as an origin includes:

[0101] The target display image is rotated upward according to a preset rotation angle, with the lower right alignment angle between the target display image and the display area as the origin.

[0102] In actual applications, users' visual habits are better when rotating clockwise. Therefore, with the target display image and the lower right alignment angle of the display area as the origin, rotating the target display image upward according to the preset rotation angle can present a clockwise tilt rotation effect, thereby enhancing the user's visual experience.

[0103] Of course, in actual applications, the target display image can also be rotated downward according to the preset rotation angle with the lower right alignment angle of the target display image and the display area as the origin; or the target display image can be rotated downward or upward according to the preset rotation angle with the upper right alignment angle of the target display image and the display area as the origin; only the visual display effects are different, but the tilt scrolling effect can be achieved later; and when the target display image is rotated downward according to the preset rotation angle with the lower right alignment angle of the target display image and the display area as the origin; or the target display image is rotated downward according to the preset rotation angle with the upper right alignment angle of the target display image and the display area as the origin, in order to avoid a blank area in the upper left corner of the display area, the upward translation distance can also be calculated according to the above method, and the target display image can be moved upward according to the upward translation distance.

[0104] Step 306: When it is determined that there is a blank area in the display area, a copy of the target display image is filled into the blank area to form a to-be-displayed image together with the display image in the display area.

[0105] The copied image of the target display image may be understood as a copied image that is identical to the target display image.

[0106] Specifically, if it is determined that there is a blank in the display area, the copy of the target display image can be filled into the blank area to form a picture to be displayed together with the target display image. However, since the area of ​​the blank area is small and a part of the target display image cannot be displayed in the display area, if the entire target display image and the copy are drawn later, it will cause a waste of resources; therefore, after the copy of the target display image is filled into the blank area, the target display image and the copy will be cropped and drawn to improve loading efficiency and resource usage. The specific implementation method is as follows:

[0107] Filling the blank area with the copy of the target display image to form a to-be-displayed image together with the display image in the display area includes:

[0108] The blank area is filled with the copy of the target display image, and the display image of the display area and the copy of the target display image are cropped according to the display area to form a picture to be displayed.

[0109] Among them, the display image in the display area of ​​the first frame can be understood as the target display image, and the display images in the display areas of subsequent frames can be understood as the images to be displayed in the previous frame.

[0110] Specifically, after filling the blank area of ​​the display area with the copied image of the target display image, the target display image and the copied image of the target display image that can be displayed in the display area can be cropped according to the size of the display area, so that only the target display image and the copied image part of the target display image that can be displayed in the display area are guaranteed to form the image to be displayed; subsequently, only the image to be displayed can be rendered to improve rendering efficiency.

[0111] Step 308: According to the preset translation speed and translation distance, the picture to be displayed is moved in the preset translation direction, and when it is determined that there is a blank area in the display area, the copy of the target display picture is filled into the blank area to form the picture to be displayed together with the display picture in the display area.

[0112] The preset translation speed is set according to actual application.

[0113] In actual applications, in order to achieve the tilt scrolling effect, it is necessary to continuously move the image to be displayed according to the preset translation speed and translation distance and in the preset translation direction. The specific implementation method is as follows:

[0114] The step of moving the image to be displayed in a preset translation direction according to a preset translation speed and a preset translation distance includes:

[0115] The translation distance is calculated according to a preset translation speed, and the picture to be displayed is translated to the left according to the preset translation speed and the translation distance.

[0116] The translation distance can be calculated based on the preset translation speed and the display time of one frame. For example, if the display time of one frame is 16ms, the translation distance is equal to the preset translation speed*16ms.

[0117] Specifically, firstly, the translation distance is calculated according to the preset translation speed and the display time of each frame, and then the picture to be displayed is translated to the left according to the preset translation speed and the translation distance.

[0118] In actual applications, the image to be displayed can also be translated to the right, with only a different visual effect, and both can present a tilt scrolling effect.

[0119] After moving the image to be displayed, if it is determined that there is a blank area in the display area, the copy of the target display image will continue to fill the blank area, and form a new image to be displayed together with the display image in the display area, and continue to move the image to be displayed in the preset translation direction according to the preset translation speed and translation distance, so as to present a continuous tilt scrolling effect in the display area of ​​the object display interface of the client.

[0120] The image display method implemented in one embodiment of the present application responds to a trigger instruction for an object display interface, and rotates and translates a target display image composed of object images of multiple target objects sent by a server according to a preset rotation angle, preset translation speed, translation distance, and preset translation direction, so that it presents a scrolling effect with a tilt angle, thereby improving its scrolling personalization, and the client only needs to load one target display image instead of object images of all target objects, which greatly saves memory consumption and improves the loading speed of the target display images.

[0121] When a closing instruction for the object display interface is received, the above loop steps can be ended. The specific implementation method is as follows:

[0122] When a close instruction for the object display interface is received, the step of filling the blank area with a copy of the target display image to form a picture to be displayed together with the display picture of the display area is terminated when it is determined that there is a blank area in the display area.

[0123] Among them, the closing instruction of the object display interface can be understood as a closing instruction of the object display interface triggered by clicking or voice, for example, a closing instruction triggered by a user clicking a close control of the object display interface.

[0124] According to an image display method implemented in an embodiment of the present application, after the server generates a target display image, the client only needs to receive and download a target display image, and can display the target display image with a tilted scrolling effect according to preset display rules, thereby saving the user's process and storage space; at the same time, it avoids the problem of failure to download program icons of some applications, resulting in abnormal client display; and the client can also display a scrolling effect with a tilt angle according to the target display image according to the above-mentioned display method, thereby enhancing the user's visual personalized experience.

[0125] See also Figure 4 , Figure 4 A flowchart of a method for displaying an image in a program icon display scenario of an application program provided in an embodiment of the present application is shown, which specifically includes the following steps.

[0126] Step 402: Receive a target display image sent by the server, wherein the target display image is composed of program icons of multiple application programs.

[0127] Step 404: placing the target display image in the display area of ​​the application display interface, aligning the target display image with the left side of the display area, and rotating the target display image according to a preset rotation angle with the upper left corner as the origin.

[0128] See also Figure 5 , Figure 5 A display effect diagram of a target display image in a display area of ​​an application display interface in a method for displaying images provided in one embodiment of the present application is shown.

[0129] Figure 5 Icon 1 shows a schematic diagram of aligning the target display image with the left side of the display area; Icon 2 shows a schematic diagram after rotating the target display image according to a preset rotation angle with the upper left corner as the origin.

[0130] Step 406: When it is determined that there is a blank area in the upper right corner of the display area, an upward translation distance is calculated according to the preset rotation angle and the width of the display area, and the target display image is moved upward according to the upward translation distance.

[0131] See also Figure 5 , Figure 5 Icon 3 shows a schematic diagram of the target display image being moved upward according to the upward translation distance.

[0132] Step 408: When it is determined that there is a blank area in the lower left corner of the display area, copy the target display image, add the copied image of the target display image to the blank area, and crop the target display image and the copied image of the target display image according to the display area to obtain the image to be displayed. Subsequently, only the part of the image to be displayed displayed in the display area is drawn.

[0133] See also Figure 5 , Figure 5 The icon 4 shows a schematic diagram of adding a copy of the target display image to the blank area.

[0134] Step 410: Calculate the translation distance based on the preset translation speed and the display time of one frame, and move the image to be displayed to the left by the translation distance according to the preset translation speed; and when it is determined that there is a blank area on the right side of the display area, add a copy of the target display image to the blank area, and crop the previous image to be displayed and the copy of the target display image according to the display area to obtain an updated image to be displayed.

[0135] See also Figure 5 , Figure 5 Icon 5 shows a schematic diagram of adding two copies of the target display image to the blank area on the right side of the display area.

[0136] Step 412: Continue to execute step 410, that is, move the updated picture to be displayed to the left by the translation distance according to the preset translation speed; and when it is determined that there is a blank area in the display area, add a copy of the target display picture to the blank area, and crop the previous picture to be displayed and the copy of the target display picture according to the display area to obtain the updated picture to be displayed, thereby demonstrating the loop effect of tilt scrolling.

[0137] See also Figure 5 , Figure 5Icon 6 shows a schematic diagram of the first target display picture and the second target display picture (i.e., the first copy of the first target display picture) completely exceeding the display area; in actual application, when the first target display picture and the second target display picture are translated to completely exceed the display area, they will no longer be drawn, and subsequently during the translation process, copies of other target display pictures will be spliced ​​to the right of the third target display picture (i.e., the second copy of the first target display picture) and the fourth target display picture (i.e., the third copy of the first target display picture) to achieve a continuous loop effect.

[0138] See also Figure 6 , Figure 6 A schematic diagram showing the display effect of a target display image on a client in a method for displaying images provided in an embodiment of the present application is shown.

[0139] like Figure 6 It can be seen that the final display effect of the target display image on the client is a tilt scrolling effect.

[0140] According to an image display method implemented in an embodiment of the present application, after the server generates a target display image, the client only needs to receive and download a target display image, and can display the target display image with a tilted scrolling effect according to preset display rules, thereby saving the user's process and storage space; at the same time, it avoids the problem of failure to download program icons of some applications, resulting in abnormal client display; and the client can also display a scrolling effect with a tilt angle according to the target display image according to the above-mentioned display method, thereby enhancing the user's visual personalized experience.

[0141] Corresponding to the above method embodiment, the present application also provides an embodiment of a picture display device, Figure 7 FIG. 1 shows a schematic diagram of the structure of a picture display device provided by an embodiment of the present application. Figure 7 As shown, the device is applied to the client and includes:

[0142] A trigger instruction response module 702 is configured to determine target display images received from a server in response to a trigger instruction for an object display interface, wherein the target display images include object images of at least two target objects;

[0143] The image rotation module 704 is configured to place the target display image in the display area of ​​the object display interface, and rotate the target display image according to a preset rotation angle with any alignment angle between the target display image and the display area as an origin;

[0144] The picture filling module 706 is configured to fill the blank area with a copy of the target display picture when determining that the blank area exists in the display area, so as to form a picture to be displayed together with the display picture in the display area;

[0145] The picture moving module 708 is configured to move the picture to be displayed in a preset translation direction according to a preset translation speed and translation distance, and continue to execute, when it is determined that there is a blank area in the display area, filling the blank area with a copy of the target display picture to form a picture to be displayed together with the displayed picture in the display area.

[0146] Optionally, the image rotation module 704 is further configured to:

[0147] Align the left side of the target display image with the left side of the display area of ​​the object display interface and place it in the display area of ​​the object display interface;

[0148] The target display image is rotated according to a preset rotation angle with any alignment angle between the target display image and the left side of the display area as an origin.

[0149] Optionally, the image rotation module 704 is further configured to:

[0150] The target display image is rotated downward according to a preset rotation angle, with the upper left alignment angle of the target display image and the display area as the origin.

[0151] Optionally, the device further includes:

[0152] The image translation module is configured as follows:

[0153] An upward translation distance is determined according to the preset rotation angle and the width of the display area, and the target display image is moved according to the upward translation distance.

[0154] Optionally, the image rotation module 704 is further configured to:

[0155] Align the right side of the target display image with the right side of the display area of ​​the object display interface and place it in the display area of ​​the object display interface;

[0156] The target display image is rotated according to a preset rotation angle with any alignment angle between the target display image and the right side of the display area as an origin.

[0157] Optionally, the image rotation module 704 is further configured to:

[0158] Rotate the target display picture upward according to a preset rotation angle, with the right lower alignment angle of the target display picture and the display area as the origin.

[0159] Optionally, the picture filling module 706 is further configured to:

[0160] Fill the copied picture of the target display picture to the blank area, and crop the display picture of the display area and the copied picture of the target display picture according to the display area to form a to-be-displayed picture.

[0161] Optionally, the picture moving module 708 is further configured to:

[0162] Calculate a translation distance according to a preset translation speed, and translate the to-be-displayed picture left according to the preset translation speed and the translation distance.

[0163] Optionally, the apparatus further comprises:

[0164] The loop ending module is configured to:

[0165] In a case where a closing instruction for the object display interface is received, end the step of filling the copied picture of the target display picture to the blank area to form a to-be-displayed picture with the display picture of the display area in a case where it is determined that the display area has a blank area.

[0166] Optionally, the target object is an application program, and the object picture is an icon of the application program.

[0167] The picture display apparatus implemented by the embodiment of the present application responds to a triggering instruction for an object display interface, rotates, translates, and so on a target display picture composed of object pictures of a plurality of target objects received from a server according to a preset rotation angle, a preset translation speed, a translation distance, and a preset translation direction, so that the target display picture presents a scrolling effect with an inclination angle, improves the scrolling personalization, and the client only needs to load one target display picture instead of all object pictures of the target objects, which greatly saves the memory consumption and improves the loading speed of the target display picture.

[0168] The above is a schematic scheme of the picture display apparatus of the embodiment. It should be noted that the technical scheme of the picture display apparatus and the technical scheme of the picture display method described above belong to the same concept, and the details of the technical scheme of the picture display apparatus that are not described in detail can be referred to the description of the technical scheme of the picture display method.

[0169] Corresponding to the method embodiments described above, the present application also provides picture processing apparatus embodiments, Figure 8FIG. 1 shows a schematic diagram of the structure of an image processing device provided by an embodiment of the present application. Figure 8 As shown, the device is applied to the server and includes:

[0170] The picture set determining module 802 is configured to determine an object picture set, wherein the object picture set includes object pictures of at least two target objects;

[0171] The splicing module 804 is configured to arrange the object images of the at least two target objects according to a preset arrangement rule, and splice the object images of the at least two target objects according to the arrangement result to obtain a spliced ​​target display image;

[0172] The picture sending module 806 is configured to send the target display picture to the client, so that the target display picture is displayed on the client according to a preset display rule.

[0173] Optionally, the picture set determination module 802 is further configured to:

[0174] The object picture set is determined according to the size of the display interface of the client, the attribute information of the client and / or the attribute information of the target object.

[0175] Optionally, the splicing module 804 is further configured to:

[0176] According to the arrangement result, the first target object of the target row is cut into a first part and a second part, the second part is retained at the head of the target row, and the first part is spliced ​​at the tail of the target row to obtain a spliced ​​target display picture.

[0177] Optionally, the target object is an application, and the object image is an icon of the application.

[0178] In the image processing device provided in one embodiment of the present application, multiple object images of the target object to be displayed on the client can be obtained in advance on the server side. After the server side generates a complete target display image according to the preset arrangement rules and splicing method, it is sent to the client for display, saving the client's processing flow and better improving the client's image display performance; and the client only needs to download one image for subsequent display, saving user traffic and storage space, and providing a good user experience.

[0179] The above is a schematic diagram of an image processing device according to this embodiment. It should be noted that the technical solution of the image processing device and the technical solution of the above-mentioned image processing method are based on the same concept. For details not described in detail in the technical solution of the image processing device, please refer to the description of the technical solution of the above-mentioned image processing method.

[0180] Figure 9 A structural block diagram of a computing device 900 is shown, according to one embodiment of the present specification. The components of the computing device 900 include, but are not limited to, a memory 910 and a processor 920. The processor 920 is connected with the memory 910 through a bus 930, and a database 950 is used to save data.

[0181] The computing device 900 also includes an access device 940, which enables the computing device 900 to communicate via one or more networks 960. Examples of these networks include the Public Switched Telephone Network (PSTN), a Local Area Network (LAN), a Wide Area Network (WAN), a Personal Area Network (PAN), or a combination of communication networks such as the Internet. The access device 940 can include one or more of any type of network interface (e.g., a network interface card (NIC)), wired or wireless, such as an IEEE 802.11 Wireless Local Area Network (WLAN) wireless interface, a Worldwide Interoperability for Microwave Access (Wi-MAX) interface, an Ethernet interface, a Universal Serial Bus (USB) interface, a cellular network interface, a Bluetooth interface, a Near Field Communication (NFC) interface, and the like.

[0182] In one embodiment of the present specification, the above-mentioned components of the computing device 900 and other components not shown in the Figure 9 may be connected with each other, for example, through a bus. It should be understood that Figure 9 The structural block diagram of the computing device shown is only for the purpose of example, and is not a limitation on the scope of the present specification. Other components can be added or replaced as needed by those skilled in the art.

[0183] The computing device 900 can be any type of stationary or mobile computing device, including a mobile computer or mobile computing device (e.g., a tablet computer, a personal digital assistant, a laptop computer, a notebook computer, a netbook, etc.), a mobile phone (e.g., a smartphone), a wearable computing device (e.g., a smart watch, smart glasses, etc.), or other type of mobile device, or a stationary computing device such as a desktop computer or a personal computer (PC). The computing device 900 can also be a mobile or stationary server.

[0184] The processor 920 implements the steps of the picture display method or the picture processing method described above when executing the computer instructions.

[0185] The above is a schematic scheme of the computing device of the embodiment. It should be noted that the technical scheme of the computing device and the technical scheme of the picture display method or the picture processing method belong to the same concept, and the details of the technical scheme of the computing device that are not described in detail can be referred to the description of the technical scheme of the picture display method or the picture processing method.

[0186] An embodiment of the present application further provides a computer readable storage medium storing computer instructions, which, when executed by a processor, implement the steps of the picture display method or the picture processing method.

[0187] The above is a schematic scheme of the computer readable storage medium of the embodiment. It should be noted that the technical scheme of the storage medium and the technical scheme of the picture display method or the picture processing method belong to the same concept, and the details of the technical scheme of the storage medium that are not described in detail can be referred to the description of the technical scheme of the picture display method or the picture processing method.

[0188] The specific embodiments of the present application are described above. Other embodiments are within the scope of the claims. In some cases, the actions or steps recited in the claims can be performed in a different order and still achieve desirable results. In addition, the process depicted in the figures does not necessarily require the particular order shown, or sequential order to achieve the desired results. In certain implementations, multitasking and parallel processing can be advantageous.

[0189] The computer instructions include computer program code, which may be in source code form, object code form, executable file, or some intermediate form. The computer-readable medium may include: any entity or device capable of carrying the computer program code, recording medium, USB flash drive, mobile hard disk, magnetic disk, optical disk, computer memory, read-only memory (ROM), random access memory (RAM), electric carrier signal, telecommunication signal, and software distribution medium, etc. It should be noted that the content contained in the computer-readable medium may be appropriately increased or decreased according to the requirements of legislation and patent practice in the jurisdiction. For example, in some jurisdictions, according to legislation and patent practice, computer-readable media do not include electric carrier signals and telecommunication signals.

[0190] It should be noted that for the aforementioned method embodiments, for ease of description, they are all expressed as a series of action combinations, but those skilled in the art should be aware that this application is not limited by the order of the actions described, because according to this application, certain steps can be performed in other orders or simultaneously. Secondly, those skilled in the art should also be aware that the embodiments described in this specification are all preferred embodiments, and the actions and modules involved are not necessarily required by this application.

[0191] In the above embodiments, the description of each embodiment has its own focus. For parts that are not described in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0192] The preferred embodiments of the present application disclosed above are intended only to help illustrate the present application. The optional embodiments do not describe all details in detail, nor do they limit the invention to the specific embodiments described. Obviously, many modifications and variations can be made based on the content of this application. This application selects and describes these embodiments in detail in order to better explain the principles and practical applications of this application, so that those skilled in the art can better understand and utilize this application. This application is limited only by the claims and their full scope and equivalents.

Claims

1. A method for displaying a picture, characterized in that: Applied to the client, including: S2. In response to a trigger instruction for the object display interface, determining target display images received from the server, wherein the target display images include object images of at least two target objects; S4, placing the target display image in the display area of ​​the object display interface, and rotating the target display image according to a preset rotation angle with any alignment angle between the target display image and the display area as an origin; S6. If it is determined that there is a blank area in the display area, fill the blank area with a copy of the target display image to form a to-be-displayed image together with the displayed image in the display area; S8. Move the image to be displayed in a preset translation direction according to a preset translation speed and translation distance, and continue to execute step S6.

2. The image display method according to claim 1, wherein: Placing the target display image in the display area of ​​the object display interface, and rotating the target display image according to a preset rotation angle with any alignment angle between the target display image and the display area as an origin, includes: Align the left side of the target display image with the left side of the display area of ​​the object display interface and place it in the display area of ​​the object display interface; The target display image is rotated according to a preset rotation angle with any alignment angle between the target display image and the left side of the display area as an origin.

3. The picture display method according to claim 2, characterized in that: The step of rotating the target display image according to a preset rotation angle with any alignment angle between the target display image and the left side of the display area as an origin includes: The target display image is rotated downward according to a preset rotation angle, with the upper left alignment angle of the target display image and the display area as the origin.

4. The picture display method according to claim 3, characterized in that: After rotating the target display image downward according to the preset rotation angle, the method further includes: An upward translation distance is determined according to the preset rotation angle and the width of the display area, and the target display image is moved according to the upward translation distance.

5. The picture display method according to claim 1, characterized in that: Placing the target display image in the display area of ​​the object display interface, and rotating the target display image according to a preset rotation angle with any alignment angle between the target display image and the display area as an origin, includes: Align the right side of the target display image with the right side of the display area of ​​the object display interface and place it in the display area of ​​the object display interface; The target display image is rotated according to a preset rotation angle with any alignment angle between the target display image and the right side of the display area as an origin.

6. The picture display method according to claim 5, characterized in that: The step of rotating the target display image according to a preset rotation angle with any alignment angle between the target display image and the right side of the display area as an origin includes: The target display image is rotated upward according to a preset rotation angle, with the lower right alignment angle between the target display image and the display area as the origin.

7. The picture display method according to claim 1, 4 or 6, characterized in that: Filling the blank area with the copy of the target display image to form a to-be-displayed image together with the display image in the display area includes: The blank area is filled with the copy of the target display image, and the display image of the display area and the copy of the target display image are cropped according to the display area to form a picture to be displayed.

8. The picture display method according to claim 1, 4 or 6, characterized in that: The step of moving the image to be displayed in a preset translation direction according to a preset translation speed and a preset translation distance includes: The translation distance is calculated according to a preset translation speed, and the picture to be displayed is translated to the left according to the preset translation speed and the translation distance.

9. The picture display method according to claim 1, 4 or 6, characterized in that: Also includes: When a closing instruction for the object display interface is received, step S6 is terminated.

10. The picture display method according to claim 1, characterized in that: The target object is an application, and the object image is an icon of the application.

11. A method for image processing, characterized in that: Applied to the server, including: Determining an object picture set, wherein the object picture set includes object pictures of at least two target objects; Arranging the object images of the at least two target objects according to a preset arrangement rule, and splicing the object images of the at least two target objects according to the arrangement result to obtain a spliced ​​target display image; Sending the target display image to the client, so that the target display image is displayed on the client according to a preset display rule; The client displays the target display image by executing the following steps: S4, placing the target display image in the display area of ​​the object display interface, and rotating the target display image according to a preset rotation angle with any alignment angle between the target display image and the display area as an origin; S6. If it is determined that there is a blank area in the display area, fill the blank area with a copy of the target display image to form a to-be-displayed image together with the displayed image in the display area; S8. Move the image to be displayed in a preset translation direction according to a preset translation speed and translation distance, and continue to execute step S6.

12. The image processing method according to claim 11, characterized in that: The determining of the object picture set includes: The object picture set is determined according to the size of the display interface of the client, the attribute information of the client and / or the attribute information of the target object.

13. The image processing method according to claim 11, wherein: The step of splicing the object images of the at least two target objects according to the arrangement result to obtain a spliced ​​target display image includes: According to the arrangement result, the first target object of the target row is cut into a first part and a second part, the second part is retained at the head of the target row, and the first part is spliced ​​at the tail of the target row to obtain a spliced ​​target display picture.

14. The image processing method according to claim 11, wherein: The target object is an application, and the object image is an icon of the application.

15. A picture display device, characterized in that: Applied to the client, including: a trigger instruction response module, configured to determine, in response to a trigger instruction for the object display interface, a target display image received from the server, wherein the target display image includes object images of at least two target objects; An image rotation module is configured to place the target display image in the display area of ​​the object display interface, and rotate the target display image according to a preset rotation angle with any alignment angle between the target display image and the display area as an origin; An image filling module is configured to fill a blank area in the display area with a copy of the target display image to form a to-be-displayed image together with the display image in the display area when determining that the blank area exists in the display area; The picture moving module is configured to move the picture to be displayed in a preset translation direction according to a preset translation speed and translation distance, and continue to execute, when it is determined that there is a blank area in the display area, filling the blank area with a copy of the target display picture to form a picture to be displayed together with the displayed picture in the display area.

16. A picture processing device, characterized in that: Applied to the server, including: A picture set determining module is configured to determine an object picture set, wherein the object picture set includes object pictures of at least two target objects; a splicing module configured to arrange the object images of the at least two target objects according to a preset arrangement rule, and splice the object images of the at least two target objects according to the arrangement result to obtain a spliced ​​target display image; A picture sending module is configured to send the target display picture to the client, so that the target display picture is displayed on the client according to a preset display rule; The client displays the target display image by executing the following steps: S4, placing the target display image in the display area of ​​the object display interface, and rotating the target display image according to a preset rotation angle with any alignment angle between the target display image and the display area as an origin; S6. If it is determined that there is a blank area in the display area, fill the blank area with a copy of the target display image to form a to-be-displayed image together with the displayed image in the display area; S8. Move the image to be displayed in a preset translation direction according to a preset translation speed and translation distance, and continue to execute step S6.

17. A computing device comprising a memory, a processor, and computer instructions stored in the memory and executable on the processor, wherein: When the processor executes the computer instructions, the steps of the method according to any one of claims 1 to 10 or 11 to 14 are implemented.

18. A computer-readable storage medium storing computer instructions, characterized in that: When the computer instructions are executed by a processor, the steps of the method according to any one of claims 1 to 10 or 11 to 14 are implemented.

Images