Bubble frame corner point icon display method and device, terminal and medium

Abstract

The application provides a bubble frame corner point icon display method, system, terminal and computer storage medium, wherein the method comprises the following steps: acquiring distribution information of each corner point icon in a bubble frame; in response to a trigger instruction, acquiring position information of the bubble frame in a display interface; based on the position information of the bubble frame and the distribution information of the corner point icon, acquiring a display position of the corner point icon in the display interface, so that the corner point icon is displayed at the display position; the application can realize normal display of the corner point icon in different size display interfaces, effectively solve the problems of deformation of the corner point icon when the bubble frame is loaded in different display interfaces or the bubble frame is stretched, and improve the interface rendering effect and user experience.

Description

Technical Field

[0001] This invention relates to the field of Internet technology, and in particular to a method, apparatus, terminal, and computer storage medium for displaying corner icons in a speech bubble. Background Technology

[0002] With the rapid development of internet technology, especially the rise of live streaming and self-media, users have increasingly personalized needs in the information interaction process. For example, users can set personalized icons provided by the platform or set their favorite pictures or photos as icons, which are then rendered and displayed at the corner of the speech bubble, so that they can be displayed on the platform at the same time as the speech bubble appears.

[0003] However, due to the different screen sizes and aspect ratios of various user terminals, the same speech bubble icon will usually be stretched and deformed when displayed on screens of different sizes, resulting in a decrease in the rendering effect of the icon and greatly affecting the user experience. Summary of the Invention

[0004] In view of the shortcomings of the prior art described above, the purpose of this invention is to provide a method, system, terminal and medium for displaying bubble corner icons, which solves the problem that existing bubble corner icons will be stretched and deformed when displayed on display screens of different sizes.

[0005] To address the aforementioned technical problems, the present invention provides a method for displaying corner icons in a speech bubble, comprising: acquiring distribution information of each corner icon in the speech bubble; acquiring position information of the speech bubble in a display interface in response to a trigger command; and acquiring the display position of the corner icon in the display interface based on the position information of the speech bubble and the distribution information of the corner icon in the speech bubble, so that the corner icon is displayed at the display position.

[0006] In one embodiment of the present invention, obtaining the distribution information of corner icons in the bubble frame includes: obtaining the distribution area of ​​the bounding rectangle corresponding to the corner icon in the bubble frame, and obtaining the range information of the distribution area within the bubble frame, including: obtaining the coordinate information of each sub-corner of the distribution area within the bubble frame; or obtaining the length and width of the distribution area.

[0007] In one embodiment of the present invention, the triggering command includes a bubble frame stretching command, and the step of obtaining the position information of the bubble frame in the display interface includes: obtaining the coordinate information of each corner point of the bubble frame after stretching.

[0008] In one embodiment of the present invention, after obtaining the position information of the bubble frame in the display interface, the bubble frame corner icon display method further includes: obtaining the initial size of the bubble frame, and obtaining the display size of the bubble frame according to the position information of the bubble frame; and determining the deformation ratio of the bubble frame according to the initial size and the display size.

[0009] Based on the deformation ratio, update the distribution information of the corner icons in the bubble box.

[0010] In one embodiment of the present invention, the display size includes a display length and a display width, and the initial size includes an initial length and an initial width. The method for obtaining the deformation ratio of the bubble frame includes: comparing the display length and the initial length to obtain a first deformation ratio; and comparing the display width and the initial width to obtain a second deformation ratio.

[0011] In one embodiment of the present invention, updating the distribution information of the corner icons in the bubble based on the deformation ratio includes: updating the length of the distribution area of ​​the corner icons in the bubble based on the first deformation ratio or the second deformation ratio; and updating the width of the distribution area of ​​the corner icons in the bubble based on the first deformation ratio or the second deformation ratio.

[0012] The present invention provides a bubble corner icon display device in a second aspect, comprising: a distribution information acquisition unit for acquiring distribution information of each corner icon in the bubble; a position information acquisition unit for acquiring position information of the bubble in a display interface in response to a trigger command; and a display unit for acquiring the display position of the corner icon in the display interface based on the position information of the bubble and the distribution information of the corner icon in the bubble, so that the corner icon is displayed at the display position.

[0013] In one embodiment of the present invention, the bubble corner icon display device further includes: a deformation ratio acquisition unit, configured to acquire the initial size of the bubble, and acquire the display size of the bubble based on the position information of the bubble; determine the deformation ratio of the bubble based on the display size and the initial size of the bubble; and a distribution information update unit, configured to update the distribution information of the corner icons in the bubble based on the deformation ratio acquired by the deformation ratio acquisition unit.

[0014] The present invention provides a terminal in a third aspect, comprising: a processor and a memory, wherein the memory is communicatively connected to the processor; the memory is used to store a computer program, and the processor is used to execute the computer program stored in the memory, so that the terminal performs the bubble corner icon display method as described above.

[0015] In a fourth aspect, the present invention provides a computer storage medium storing a computer program, characterized in that the computer program, when executed by a processor, implements the method for displaying bubble corner icons as described above.

[0016] As described above, the method, apparatus, terminal, and computer storage medium for displaying corner icons in a speech bubble provided by the present invention utilize the position information of the speech bubble in the display interface and the distribution information of the corner icons in the speech bubble to obtain the display position of the corner icons in the display interface. This enables the corner icons to be displayed normally in display interfaces of different sizes, avoiding deformation of the corner icons when the speech bubble is loaded in different display interfaces or when the speech bubble is stretched, which would lead to a reduction in rendering effect and an impact on user experience.

[0017] Other features and advantages of the invention will be set forth in the description which follows, and will be apparent in part from the description, or may be learned by practicing the invention. The objects and other advantages of the invention may be realized and obtained by means of the structures particularly pointed out in the description, claims, and drawings. Attached Figure Description

[0018] Figure 1 The diagram illustrates a flowchart of one embodiment of the method for displaying corner icons in a bubble frame according to the present invention.

[0019] Figure 2 A schematic diagram of the bubble frame according to one embodiment of the present invention is shown;

[0020] Figure 3 A flowchart illustrating another embodiment of the bubble corner icon display method of the present invention is shown;

[0021] Figure 4 A schematic diagram of the bubble corner icon display device of the present invention is shown in one embodiment;

[0022] Figure 5 A schematic diagram of the bubble frame corner icon display device of the present invention in another embodiment is shown;

[0023] Figure 6 A schematic diagram of the terminal described in one embodiment of the present invention is shown. Detailed Implementation

[0024] The following specific examples illustrate the implementation of the present invention. Those skilled in the art can easily understand other advantages and effects of the present invention from the content disclosed in this specification. The present invention can also be implemented or applied through other different specific embodiments, and various details in this specification can also be modified or changed based on different viewpoints and applications without departing from the spirit of the present invention. It should be noted that, unless otherwise specified, the following embodiments and features described therein can be combined with each other.

[0025] It should be noted that the illustrations provided in the following embodiments are only schematic representations of the basic concept of the present invention. Therefore, the drawings only show the components related to the present invention and are not drawn according to the actual number, shape and size of the components in the actual implementation. In the actual implementation, the form, quantity and proportion of each component can be arbitrarily changed, and the layout of the components may also be more complex.

[0026] It should also be noted that if the embodiments of the present invention involve descriptions such as "first" and "second," such descriptions are for descriptive purposes only and should not be construed as indicating or implying their relative importance or implicitly specifying the number of technical features indicated. Therefore, a feature defined with "first" and "second" may explicitly or implicitly include at least one of those features.

[0027] To address the technical problems existing in the prior art, the present invention provides a method, device, terminal, and medium for displaying corner icons of a speech bubble, which ensures that the corner icons of the speech bubble are displayed normally without deformation when the graphic display range of the speech bubble changes (such as loading the speech bubble into a new display interface or stretching the speech bubble).

[0028] Wherein, the boundary outline of the bubble frame is an n-sided polygon; the corner icon is the icon located at the corner of the n-sided polygon; n is the number of sides of the bubble frame;

[0029] Optionally, the number of corner icons in the bubble box can be any integer from 1 to n.

[0030] Please see Figure 1 The diagram shows a flowchart of one embodiment of the bubble corner icon display method provided by the present invention.

[0031] In this embodiment, as Figure 2 As shown, the bubble frame is a rectangle, i.e., n is 4; the corner icons are icons located at the four corners of the rectangle, including the top-left icon at the top-left corner, the top-right icon at the top-right corner, the bottom-left icon at the bottom-left corner, and the bottom-right icon at the bottom-right corner.

[0032] like Figure 1As shown, the method for displaying the corner icons of the speech bubble includes the following steps:

[0033] S100, Obtain the distribution information of the corner icon in the bubble box;

[0034] The distribution information refers to the distribution area of ​​each corner point icon within the bubble box.

[0035] Specifically, the distribution area of ​​the bounding rectangle corresponding to the corner icon within the bubble frame is obtained, and the range information of this distribution area within the bubble frame is also obtained.

[0036] Optionally, the range information includes the coordinate information of each sub-corner point in the distribution area within the bubble frame.

[0037] Optionally, the range information includes the length and width of the distribution area.

[0038] S300, in response to a trigger command, obtains the position information of the bubble box in the display interface;

[0039] The location information refers to the coordinates of each corner point of the bubble frame on the display interface.

[0040] The triggering commands include, but are not limited to, commands to load the speech bubble, commands to stretch the speech bubble, or other commands that can change the display area of ​​the speech bubble.

[0041] For example, when loading a speech bubble in the display interface according to the loading instruction, the coordinate information of each corner point of the speech bubble in the display interface is obtained.

[0042] S500: Based on the position information of the bubble frame in the display interface and the distribution information of the corner icon in the bubble frame, obtain the display position of the corner icon in the display interface so that the corner icon is displayed at the display position.

[0043] Specifically, based on the coordinate information of each corner point of the bubble frame in the display interface and the distribution range of the corner point icons in the bubble frame, the coordinate information of the distribution area of ​​the corner point icons in the display interface is determined.

[0044] For example, when the lower left corner of the display interface is used as the origin of the XY axis, the coordinates of the upper right corner of the bubble (X1, Y1) are determined as (X1-a, Y1), the coordinates of the upper right corner of the icon are (X1, Y1), the coordinates of the lower left corner of the icon are (X1-a, Y1-b), and the coordinates of the lower right corner of the icon are (X1, Y1-b).

[0045] Similarly, based on the coordinates (X2, Y2) of the bottom left corner of the bubble, and the length c and width d of the distribution area of ​​the bottom left icon in the bubble, the coordinates of the top left sub-corner of the bottom left icon are determined to be (X2, Y2+d), the coordinates of its top right sub-corner are (X2+c, Y2+d), the coordinates of its bottom left sub-corner are (X2, Y2), and the coordinates of its bottom right sub-corner are (X2+c, Y2).

[0046] Optionally, after executing S500, the bubble corner icon method further includes: connecting adjacent bubble borders in the area outside the distribution area of ​​the corner icons within the bubble to obtain the total border of the bubble.

[0047] Please see Figure 3 The diagram shows a flowchart of another embodiment of the bubble corner icon display method provided by the present invention.

[0048] In this embodiment, the method for displaying the corner icons of the speech bubble is as follows: Figure 1 Based on the method shown, after executing step S300, the method further includes:

[0049] S400, obtain the initial size of the speech bubble, and obtain the display size of the speech bubble based on the position information of the speech bubble; determine the deformation ratio of the speech bubble based on the initial size and the display size; update the distribution information of the corner icons in the speech bubble based on the deformation ratio;

[0050] Wherein, the initial size is the initial display area size of the speech bubble, and the display size is the current display area size of the speech bubble in the display interface; for example, when the trigger command is a speech bubble stretch command, the initial size is the display area size of the speech bubble before stretching, and the display size is the display area size of the speech bubble after stretching; when the trigger command is a speech bubble load command, the initial size is the display area size of the speech bubble before loading, and the display size is the display area size of the speech bubble after loading.

[0051] Specifically, the outer rectangle of the speech bubble is constructed; based on the coordinate information of each corner point of the speech bubble in the display interface, the display length and display width of the outer rectangle of the speech bubble are obtained through graphic calculation, and used as the display length and display width of the speech bubble; and the initial length and initial width of the outer rectangle of the speech bubble are obtained, and used as the initial length and initial width of the speech bubble.

[0052] The display length is compared with the initial length to obtain the deformation ratio of the bubble in the length direction, which is taken as the first deformation ratio; and the display width is compared with the initial width to obtain the deformation ratio of the bubble in the width direction, which is taken as the second deformation ratio.

[0053] Based on the first deformation ratio or the second deformation ratio, the length of the distribution area of ​​the corner icon in the bubble is updated by multiplying the length of the distribution area by the first deformation ratio or the second deformation ratio to obtain a new length. Similarly, based on the first deformation ratio or the second deformation ratio, the width of the distribution area of ​​the corner icon in the bubble is updated by multiplying the width of the distribution area by the first deformation ratio or the second deformation ratio to obtain a new width. The display unit then displays the corner icon at the new display position according to the updated corner icon distribution information and the bubble position information. That is, based on the above step S400, when step S500 is executed, it obtains the new display position of the corner icon in the interface based on the bubble position information and the updated distribution information of the corner icon, so that the corner icon is displayed at the new display position.

[0054] To address the technical problems existing in the prior art, the present invention also provides a bubble corner icon display device, which allows the bubble corner icons to be displayed normally without deformation when the graphic display range of the bubble changes (such as loading the bubble in a new display interface or stretching the bubble).

[0055] It should be noted that the bubble corner icon display device is used to perform... Figure 1 The steps in the bubble corner icon display method shown are only those related to the embodiments of the present invention for ease of explanation. For specific technical details not disclosed, please refer to the embodiments of the bubble corner icon display method of the present invention.

[0056] See Figure 4 This is a schematic diagram of the structure of the bubble corner icon display device provided by the present invention in one embodiment; as shown below. Figure 4 As shown, the bubble corner icon display device 40 includes: a distribution information acquisition unit 41, a position information acquisition unit 42, and a display unit 43.

[0057] The distribution information acquisition unit 41 is used to acquire the distribution information of each corner icon in the bubble box.

[0058] The location information acquisition unit 42 is used to respond to the trigger command and acquire the location information of the bubble box in the display interface;

[0059] The display unit 43 is used to obtain the display position of the corner icon in the display interface based on the position information of the bubble frame and the distribution information of the corner icon in the bubble frame, so that the corner icon is displayed at the display position.

[0060] Optionally, the bubble corner icon display device 40 further includes a sideline connection unit, used to connect adjacent bubble edgelines in the area outside the distribution area of ​​the corner icons in the bubble to obtain the total edgeline of the bubble.

[0061] See Figure 5 This is a schematic diagram of the structure of the bubble corner icon display device provided by the present invention in another embodiment; as shown below. Figure 5 As shown, the bubble corner icon display device 40 is in Figure 4 Based on the device shown, it also includes: a deformation ratio acquisition unit 44 and a distribution information update unit 45;

[0062] The deformation ratio acquisition unit 44 is used to acquire the display size of the bubble frame in the display interface and the initial size of the bubble frame based on the bubble frame position information acquired by the position information acquisition unit; and to determine the deformation ratio of the bubble frame based on the display size and the initial size of the bubble frame.

[0063] Specifically, the deformation ratio acquisition unit obtains the display length and display width of the outer rectangle of the bubble frame through graphic calculation based on the coordinate information of each corner point of the bubble frame in the display interface, and uses them as the display length and display width of the bubble frame; and obtains the initial length and initial width of the outer rectangle of the bubble frame, and uses them as the initial length and initial width of the bubble frame.

[0064] The displayed length is compared with the initial length to obtain the deformation ratio of the bubble in the length direction, which is taken as the first deformation ratio. The displayed width is compared with the initial width to obtain the deformation ratio of the bubble in the width direction, which is taken as the second deformation ratio.

[0065] The distribution information update unit 45 is used to update the distribution information of the corner icon in the bubble box according to the deformation ratio obtained by the deformation ratio acquisition unit.

[0066] Specifically, the distribution information update unit updates the length of the distribution area of ​​the corner icon in the bubble frame based on the first deformation ratio or the second deformation ratio, that is, multiplying the length of the distribution area by the first deformation ratio or the second deformation ratio to obtain a new length; similarly, based on the first deformation ratio or the second deformation ratio, the width of the distribution area of ​​the corner icon in the bubble frame is updated, that is, multiplying the width of the distribution area by the first deformation ratio or the second deformation ratio to obtain a new width; so that the display unit can obtain the new display position of the corner icon in the display interface according to the updated corner icon distribution information and the position information of the bubble frame, and then display the corner icon at the new display position.

[0067] To address the technical problems existing in the prior art, embodiments of the present invention also provide a terminal. Please refer to Figure 6, which shows a schematic diagram of the structure of the terminal described in the present invention; Figure 6 As shown, the terminal 6 includes a memory 61 and a processor 62 connected to each other; the memory 61 is used to store computer programs, and the processor 62 is used to execute the computer programs stored in the memory, so that when the terminal is executed, it can implement the steps in any of the bubble corner icon display methods described above.

[0068] Optionally, the number of memories can be one or more, and the number of processors can be one or more. Figure 6 Each example is taken as an instance.

[0069] Optionally, the processor in the terminal is configured as follows: Figure 1 The steps in the bubble corner icon display method shown involve loading one or more instructions corresponding to an application process into memory, and having the processor run the application stored in memory to achieve the functions described in the bubble corner icon display method. These will not be elaborated further here.

[0070] It should be noted that memory includes, but is not limited to, random access memory (RAM), and may also include non-volatile memory, such as at least one disk storage device. Similarly, processors can be general-purpose processors, including central processing units (CPUs), network processors (NPs), etc.; they can also be digital signal processors (DSPs), application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components.

[0071] This invention also provides a computer-readable storage medium storing a computer program that, when invoked by a processor, executes the steps in any of the bubble corner icon display methods described above. The computer-readable storage medium may include random access memory (RAM) and may also include non-volatile memory, such as at least one disk storage device.

[0072] In summary, the method, apparatus, terminal, and computer storage medium for displaying corner icons in a speech bubble provided by this invention utilize the position information of the speech bubble in the display interface and the distribution information of the corner icons within the speech bubble to obtain the display position of the corner icons in the display interface. This ensures the normal display of the corner icons in the display interface and avoids deformation of the corner icons when the speech bubble is loaded in different display interfaces or stretched, which would otherwise reduce the rendering effect. Furthermore, by obtaining the deformation ratio of the speech bubble in length or width, the corner icons are enlarged or reduced by the same ratio. This not only avoids deformation of the corner icons but also ensures that the display size of the icons matches the size of the speech bubble, further improving the rendering effect.

[0073] While the embodiments disclosed in this invention are as described above, the content is merely for the purpose of facilitating understanding of the invention and is not intended to limit the invention. Any person skilled in the art to which this invention pertains may make any modifications and changes in form and detail of the implementation without departing from the spirit and scope disclosed herein; however, the scope of protection of this invention shall still be determined by the scope defined in the appended claims.

Claims

1. A method for displaying corner icons in a speech bubble, characterized in that, include: Obtain the distribution information of each corner icon in the bubble frame; including: obtaining the distribution area of ​​the bounding rectangle corresponding to the corner icon in the bubble frame, and obtaining the range information of the distribution area within the bubble frame, including: obtaining the coordinate information of each sub-corner point of the distribution area within the bubble frame; or obtaining the length and width of the distribution area; In response to a trigger command, the position information of the speech bubble in the display interface is obtained; the trigger command includes a stretch command for the speech bubble, and obtaining the position information of the speech bubble in the display interface includes: obtaining the coordinate information of each corner point of the speech bubble after stretching; Based on the position information of the bubble frame and the distribution information of the corner icon in the bubble frame, the display position of the corner icon in the display interface is obtained so that the corner icon is displayed at the display position; After obtaining the position information of the speech bubble in the display interface, the method for displaying the corner icons of the speech bubble further includes: Obtain the initial size of the speech bubble, and obtain the display size of the speech bubble based on its position information; determine the deformation ratio of the speech bubble based on the initial size and the display size; Based on the deformation ratio, update the distribution information of the corner icons in the bubble box.

2. The method for displaying corner icons in a speech bubble according to claim 1, characterized in that, The display size includes display length and display width, and the initial size includes initial length and initial width. Therefore, the method for obtaining the deformation ratio of the speech bubble includes: The first deformation ratio is obtained by comparing the displayed length with the initial length; and the second deformation ratio is obtained by comparing the displayed width with the initial width.

3. The method for displaying corner icons in a speech bubble according to claim 2, characterized in that, The step of updating the distribution information of the corner icons in the bubble frame based on the deformation ratio includes: Based on the first deformation ratio or the second deformation ratio, update the length of the distribution area of ​​the corner icon in the bubble box; and based on the first deformation ratio or the second deformation ratio, update the width of the distribution area of ​​the corner icon in the bubble box.

4. A bubble corner icon display device, characterized in that, include: A distribution information acquisition unit is used to acquire the distribution information of each corner icon in a bubble frame; including: acquiring the distribution area of ​​the bounding rectangle corresponding to the corner icon in the bubble frame, and acquiring the range information of the distribution area within the bubble frame, including: acquiring the coordinate information of each sub-corner point of the distribution area within the bubble frame; or acquiring the length and width of the distribution area; A position information acquisition unit is used to respond to a trigger command and acquire the position information of the bubble frame in the display interface; the trigger command includes a stretch command for the bubble frame, and acquiring the position information of the bubble frame in the display interface includes: acquiring the coordinate information of each corner point of the bubble frame after stretching; The display unit is configured to obtain the display position of the corner icon in the display interface based on the position information of the bubble frame and the distribution information of the corner icon in the bubble frame, so that the corner icon is displayed at the display position; The deformation ratio acquisition unit is used to acquire the initial size of the bubble frame, and acquire the display size of the bubble frame based on the position information of the bubble frame; and determine the deformation ratio of the bubble frame based on the display size and the initial size of the bubble frame. The distribution information update unit is used to update the distribution information of the corner icon in the bubble box according to the deformation ratio obtained by the deformation ratio acquisition unit.

5. A terminal, characterized in that, include: A processor and a memory, wherein the memory and the processor are communicatively connected; The memory is used to store computer programs, and the processor is used to execute the computer programs stored in the memory to cause the terminal to perform the bubble corner icon display method as described in any one of claims 1 to 3.

6. A computer storage medium storing a computer program, characterized in that, When the computer program is executed by the processor, it implements the method for displaying the corner icons of the bubble frame as described in any one of claims 1 to 3.

Images