A card metaphor interface implementation method

Abstract

The present invention provides a card metaphor interface implementation method, the method comprising: step 1, constructing an initial card metaphor list, wherein the initial card metaphor list contains at least one card metaphor; step 2, setting focus card metaphor parameters and a focus area; step 3, responding to a user's card metaphor switching operation, obtaining a current card metaphor in the focus area, and displaying the current card metaphor as a focus card metaphor. The present invention improves the fun of human-computer interaction and meets the aesthetic needs of users.

Description

Technical Field

[0001] The present invention relates to the technical field of human-computer interaction, and in particular to a method for realizing a card metaphor interface. Background Art

[0002] Human-computer interaction is an important part of electronic product design. The quality of human-computer interaction directly determines whether the operation is simple. The basic requirement of human-computer interaction is to facilitate users to obtain or input interactive information, so as to achieve the purpose of controlling the product.

[0003] With the continuous development of human-computer interaction technology, more and more human-computer interaction methods have emerged (such as touch control, voice control, gesture control, etc.), which have greatly improved the speed of human-computer interaction and the usability of products.

[0004] Due to its good recognition, icon-based touch control is still the mainstream human-computer interaction method. However, the current human-computer interaction layout of touch control is relatively simple and fixed, such as the nine-square grid and waterfall layout. Users cannot switch the layout of the interface during use, which is easy to cause aesthetic fatigue after long-term use. Summary of the invention

[0005] The present invention provides a card metaphor interface implementation method, aiming to solve the defects in the prior art, improve the fun of human-computer interaction, and meet the aesthetic needs of users.

[0006] In order to achieve the above object, the technical solution adopted by the present invention is:

[0007] The present invention provides a card metaphor interface implementation method, comprising:

[0008] Step 1: construct an initial card metaphor list, wherein the initial card metaphor list contains at least one card metaphor;

[0009] Step 2: Set the focus card metaphor parameters and focus area;

[0010] Step 3: In response to the user's card metaphor switching operation, obtain the current card metaphor in the focus area, and display the current card metaphor as the focus card metaphor.

[0011] Furthermore, after step 3, the method further includes:

[0012] Step 4: In response to the user's metaphor deletion operation, the selected visible metaphor is deleted from the current card metaphor list, and the current card metaphor list is updated according to the first preset rule;

[0013] Step 5: Add the deleted metaphor to the list of candidate metaphors.

[0014] Furthermore, after step 5, the method further includes:

[0015] Step 6: respond to the user's metaphor adding operation, add the selected metaphor to the current card metaphor list, and update the current card metaphor list according to the second preset rule;

[0016] Step 7: Delete the added metaphor from the list of metaphors to be selected.

[0017] Specifically, the step 1 includes:

[0018] Step 101, storing metaphor elements of each card;

[0019] Step 102: Establish a layout coordinate system and obtain layout size parameters of the card container, wherein the layout size parameters include the height and width of the container layout, and the horizontal coordinate and vertical coordinate of the starting position of the container layout;

[0020] Step 103: Obtain the display mode and corresponding display track of the card metaphor list in the container;

[0021] Step 104, calculating the coordinates of each pixel segmentation point on the display trajectory;

[0022] Step 105, determining the vertex coordinates of each card according to the number of cards in the container and the display mode;

[0023] Step 106, determining the matching pixel segmentation point of each vertex of each card;

[0024] Step 107, connecting the matching pixel segmentation points to complete the drawing of each card;

[0025] Step 108: Read each card metaphor element, and fill it into each card according to the initial order of each card metaphor in the list to generate an initial card metaphor list.

[0026] Specifically, the display mode is an arc.

[0027] Specifically, the step 104 includes:

[0028] Step 104A, setting a first trajectory point set and a second trajectory point set according to a first rule and a second rule respectively, wherein the first trajectory point set is the pixel segmentation points of the upper trajectory circle corresponding to the upper arc of the trajectory, and the second trajectory point set is the pixel segmentation points of the lower trajectory circle corresponding to the lower arc of the trajectory;

[0029] Step 104B, coordinates of the first trajectory point set and the second trajectory point set according to the total number of the pixel segmentation points;

[0030] Step 104C: determine whether the current pixel segmentation point in the first trajectory point set and the second trajectory point set is within the card container, if yes, retain it, otherwise discard it.

[0031] Specifically, the step 105 includes:

[0032] Step 105A, calculating the width of each card according to the number of cards in the container;

[0033] Step 105B, obtain the starting point horizontal coordinate and the ending point horizontal coordinate of the starting side of the current card, and the starting point horizontal coordinate and the ending point horizontal coordinate of the ending side.

[0034] Specifically, the step 106 includes:

[0035] Step 106A, traversing the first trajectory point set, extracting a first trajectory point subset, wherein the first trajectory point subset is pixel segmentation points in the first trajectory point set that meet a first preset condition;

[0036] Step 106B, traversing the second trajectory point set, extracting a second trajectory point subset, where the second trajectory point subset is pixel segmentation points in the second trajectory point set that meet a second preset condition;

[0037] Step 106C, determine whether the horizontal coordinate of the starting point of the starting edge of the current card is greater than or equal to the horizontal coordinate of the center of the upper track circle or the horizontal coordinate of the center of the lower track circle. If so, determine the coordinates of each pixel segmentation point corresponding to the starting point and end point of the starting edge of the current card and the starting point and end point of the terminating edge according to the third rule; otherwise, determine the coordinates of each pixel segmentation point corresponding to the starting point and end point of the starting edge of the current card and the starting point and end point of the terminating edge according to the fourth rule.

[0038] Specifically, the third rule is: determine the point with the largest ordinate in the first trajectory point subset as the starting point ordinate of the starting edge, and determine the point with the smallest ordinate as the starting point ordinate of the ending edge;

[0039] The point with the smallest ordinate in the second trajectory point subset is determined as the ordinate of the end point of the starting edge, and the point with the largest ordinate is determined as the ordinate of the end point of the terminating edge.

[0040] Specifically, the fourth rule is: determine the point with the smallest ordinate in the first trajectory point subset as the starting point ordinate of the starting edge, and determine the point with the largest ordinate as the starting point ordinate of the ending edge;

[0041] The point with the largest ordinate in the second trajectory point subset is determined as the ordinate of the end point of the starting edge, and the point with the smallest ordinate is determined as the ordinate of the end point of the terminating edge.

[0042] The beneficial effects of the present invention are as follows: the present invention constructs an initial card metaphor list, sets focus card metaphor parameters and focus areas, responds to the user's card metaphor switching operation, displays the current card metaphor as the focus card metaphor, and can switch the display layout of the card metaphor according to the display mode selected by the user, thereby improving the fun of human-computer interaction and meeting the user's aesthetic needs. BRIEF DESCRIPTION OF THE DRAWINGS

[0043] Figure 1 It is a flowchart of the card metaphor interface implementation method of the present invention;

[0044] Figure 2 It is a schematic diagram of the card metaphor list of the present invention;

[0045] Figure 3 It is a schematic diagram of the deletion metaphor of the present invention;

[0046] Figure 4 It is an increased metaphorical schematic diagram of the present invention;

[0047] Figure 5 It is a schematic diagram of displaying the arc card metaphor list of the present invention. DETAILED DESCRIPTION

[0048] The following specifically describes the embodiments of the present invention in conjunction with the accompanying drawings, which are only for reference and illustration and do not constitute a limitation on the scope of patent protection of the present invention.

[0049] Example 1

[0050] like Figure 1 As shown, this embodiment provides a card metaphor interface implementation method, including:

[0051] Step 1: construct an initial card metaphor list, wherein the initial card metaphor list contains at least one card metaphor.

[0052] In this embodiment, the card metaphor consists of two parts: a card and a metaphor. The card is an area on the user interface used to indicate that the user can interact with the metaphor, and the metaphor is an expression used to indicate the content of the interaction; the metaphor is displayed in the card. Figure 2 As shown, the word "NAVI" is used as a metaphor to represent the navigation function to be interacted with, and the card is a rectangular area with a center coordinate of (10,10). After clicking on the rectangular area, the navigation APP will be opened.

[0053] In this embodiment, the card metaphor can be a metaphor of different applications (APPs), that is, each card metaphor in the card metaphor list corresponds to an APP, such as a radio APP, a navigation APP, a music APP, etc.; it can also be a metaphor of several identical or similar setting items in the same application, that is, each card metaphor in the card metaphor list corresponds to a setting item, such as radio stations of different frequencies of a radio APP.

[0054] The card metaphors in the card metaphor list include both visible card metaphors and invisible card metaphors. The invisible card metaphor can be turned into a visible card metaphor through user operations (such as sliding left or right), and at the same time, the previously partially visible card metaphor can be turned into an invisible card metaphor; the visible card metaphor and the invisible card metaphor can form a closed loop (i.e., the last card metaphor can be switched to the first card metaphor), or an open loop (i.e., after switching to the last card metaphor, you cannot switch to the next one, but go back and switch to the previous one).

[0055] The order of the card metaphors can be adjusted by the user, or they can be sorted according to the frequency of use.

[0056] Step 2: Set the focus card metaphor parameters and focus area.

[0057] The focus card metaphor refers to a card metaphor that is displayed in a prominent form. The focus card metaphor parameters include the shape and size of the focus card metaphor.

[0058] The focus area refers to a card metaphor that is displayed in the form of a focus card metaphor after it is in the area.

[0059] For example, Figure 2 As shown, the focus card metaphor is a rectangular card metaphor with a height of 100 pixels and a width of 150 pixels. The focus area is a rectangular area consisting of 20 pixels above, below, left and right of the center point of the screen, or a rectangular area consisting of 40 pixels on the leftmost side of the screen.

[0060] In one embodiment of the present invention, each card metaphor and the focus card metaphor are set in the form of a frame layout (FrameLayout). Frame layout is a type of Android layout that allows internal sub-controls to be displayed overlappingly. It is easy to understand that different implementation methods can be selected for each card metaphor and the focus card metaphor under different operating systems.

[0061] Step 3: In response to the user's card metaphor switching operation, obtain the current card metaphor in the focus area, and display the current card metaphor as the focus card metaphor.

[0062] In this embodiment, as an implementable method, the card metaphor switching operation is a left-slide or right-slide touch operation. Of course, the card metaphor switching operation can also be other operations defined by the user.

[0063] Example 2

[0064] Different from the first embodiment, this embodiment further includes, after the step 3:

[0065] Step 4: In response to the user's metaphor deletion operation, the selected visible metaphor is deleted from the current card metaphor list, and the current card metaphor list is updated according to the first preset rule.

[0066] In this embodiment, as an implementable method, the metaphorical deletion operation is an upward or downward touch operation. Of course, the metaphorical deletion operation can also be other operations defined by the user.

[0067] In this embodiment, the first preset rule includes: if the selected visible card metaphor is located on the left side of the focus card metaphor, the metaphor in the card on the left side of the focus card metaphor is updated in a manner of moving closer to the right; if the selected visible card metaphor is located on the right side of the focus card metaphor, the metaphor in the card on the right side of the focus card metaphor is updated in a manner of moving closer to the left.

[0068] For example, select Figure 2 , and perform a metaphor list deletion operation (swipe up or swipe down touch operation), then the Music metaphor is deleted from the current card metaphor list, the Radio metaphor is moved to the right and filled to the original Music card position, and the previously invisible Carplay metaphor is filled to the original Radio card position, and the card metaphor list is updated as follows Figure 3 shown.

[0069] Step 5: Add the deleted metaphor to the list of candidate metaphors.

[0070] For example, Figure 3 As shown, the deleted Music metaphor is recycled into the list of candidate metaphors above (e.g. Figure 3 + as shown in ).

[0071] Example 3

[0072] Different from the second embodiment, this embodiment further includes after the step 5:

[0073] Step 6: In response to the user's metaphor adding operation, the selected metaphor to be selected is added to the current card metaphor list, and the current card metaphor list is updated according to the second preset rule.

[0074] The second preset rule includes: if the added metaphor is located on the left side of the focus card metaphor, the metaphor in the card on the left side of the insertion point is updated by pushing to the left; if the added metaphor is located on the right side of the focus card metaphor, the metaphor in the card on the right side of the insertion point is updated by pushing to the right.

[0075] For example, from Figure 3 Select the Music metaphor from the list of candidate metaphors shown in the figure, and perform the metaphor adding operation by dragging the Music metaphor to a card metaphor position in the card metaphor list area (for example, the AUX card metaphor). The AUX metaphor will be pushed to the right and fill the position of the original Setting metaphor, turning the previously visible Setting metaphor into an invisible metaphor. The card metaphor list will be updated as shown below. Figure 4 shown.

[0076] Step 7: Delete the added metaphor from the list of metaphors to be selected.

[0077] Example 4

[0078] Different from Example 1, this example provides a specific implementation method of step 1, including:

[0079] Step 101: Store each card metaphor element.

[0080] In this embodiment, the card metaphor elements refer to the content required to constitute the corresponding card metaphor. For example, the card metaphor elements of the radio APP include the icon, name (text), and commonly used control button icons (such as previous radio station, next radio station, etc.) of the radio APP; the card metaphor elements of the navigation APP include the icon of the navigation APP, commonly used control button icons (such as navigation broadcast mute, etc.), and so on.

[0081] Step 102: Establish a layout coordinate system and obtain layout size parameters of the card container, wherein the layout size parameters include the height H and width W of the container layout, and the horizontal coordinate x0 and the vertical coordinate y0 of the starting position (upper left corner) of the container layout.

[0082] In this embodiment, the card container is a ViewPager, which allows the user to change the data display by sliding left and right to turn pages.

[0083] In this embodiment, the layout coordinate system takes the upper left corner of the display screen as the origin, the horizontal rightward direction as the positive direction of the X axis, and the vertical downward direction as the positive direction of the Y axis. The starting position of the container layout is the upper left corner of the layout.

[0084] Step 103: Obtain the display mode and corresponding display track of the card metaphor list in the container.

[0085] The display mode refers to the overall shape presented by all card metaphors, such as straight line, arc, convex, concave, etc., which can be selected by the user through the menu, and the system selects arc by default. The display track is the shape formed by the connection lines of all card vertices.

[0086] For example, if the display mode is an arc, the corresponding display track is composed of upper and lower arcs.

[0087] Step 104: Calculate the coordinates of each pixel segmentation point on the display trajectory.

[0088] Step 105: Determine the vertex coordinates of each card according to the number of cards in the container and the display mode.

[0089] Generally, for the sake of symmetry and beauty of the interface, the number n of cards in the container is an odd number, for example, in this embodiment, n=7.

[0090] Step 106: Determine the matching pixel segmentation points of each vertex of each card.

[0091] Step 107: Connect the matching pixel segmentation points to complete the drawing of each card.

[0092] Step 108: Read each card metaphor element, and fill it into each card according to the initial order of each card metaphor in the list to generate an initial card metaphor list.

[0093] In this embodiment, the filling of each card metaphor element is achieved through PagerAdapter.

[0094] In one embodiment of the present invention, the display mode is an arc.

[0095] In one embodiment of the present invention, step 104 includes:

[0096] Step 104A, setting a first trajectory point set and a second trajectory point set according to a first rule and a second rule respectively, wherein the first trajectory point set is the pixel segmentation points of the upper trajectory circle corresponding to the upper arc of the trajectory, and the second trajectory point set is the pixel segmentation points of the lower trajectory circle corresponding to the lower arc of the trajectory.

[0097] like Figure 5 As shown, the first rule is: the angle between the line connecting the first pixel segmentation point and the center of the circle and the positive direction of the X-axis is 2π-2π / m, and the other pixel segmentation points are set in a counterclockwise direction until the angle between the last point and the positive direction of the X-axis is 0°;

[0098] The second rule is: the angle between the line connecting the first pixel segmentation point and the center of the circle and the positive direction of the X-axis is 2π / m, and the other pixel segmentation points are set in a counterclockwise direction until the angle between the last point and the positive direction of the X-axis is 360°; where m represents the total number of pixel segmentation points.

[0099] The center coordinates and radius of the upper and lower trajectory circles can be preset when setting the arc.

[0100] The total number of pixel division points m needs to be set to ensure that the number of pixel division points located in the container is greater than 2n; the more the total number of pixel division points m is set, the more accurate the arc shape presented by each card. In this embodiment, the total number of pixel division points m=3600.

[0101] Step 104B: coordinates of the first trajectory point set and the second trajectory point set according to the total number of the pixel segmentation points.

[0102] It is easy to understand that the coordinates of each pixel segmentation point of the first trajectory point set located in the container are greater than the coordinates of the center of the upper trajectory circle, and the coordinates of each pixel segmentation point of the second trajectory point set located in the container are smaller than the coordinates of the center of the lower trajectory circle.

[0103] In this embodiment, if Figure 5 As shown, the coordinate calculation formula of the first trajectory point set Q(i) is:

[0104] x Q (i)=x(c1)+R Q *cos(2π*i / m),y(i) Q =y(c1)+R Q *sin(2π*i / m);

[0105] The coordinate calculation formula of the second trajectory point set P(i) is:

[0106] x P (i)=x(c2)-R P *cos(2π*i / m),y(i) P =y(c2)-R P *sin(2π*i / m);

[0107] Among them, (x(c1), y(c1)) represents the coordinates of the center of the lower trajectory circle, (x(c2), y(c2)) represents the coordinates of the center of the upper trajectory circle, R P , R Q They represent the radii of the upper and lower trajectory circles respectively, i=1,2,3…m represents the sequence number of the current pixel segmentation point, and m represents the total number of pixel segmentation points.

[0108] Step 104C: determine whether the current pixel segmentation point in the first trajectory point set and the second trajectory point set is within the card container, if yes, retain it, otherwise discard it.

[0109] For example, when the coordinates of point P(i) meet the following conditions, it is judged to be within the card container:

[0110] x0≤x(i) P ≤x0+W,y0≤y(i) P ≤y0+H;

[0111] x0≤x(i) Q ≤x0+W,y0≤y(i) Q ≤y0+H.

[0112] In another embodiment of the present invention, step 105 includes:

[0113] Step 105A: Calculate the width of each card according to the number of cards in the container.

[0114] Wb=[Wc-(n-1)*Ws] / n,

[0115] Among them, Wb represents the width of each card, Wc represents the container width, Ws represents the card spacing, and n represents the number of cards in the container, all of which are fixed and known.

[0116] In this embodiment, the width Wb of each card is equal to the height of each trapezoid.

[0117] Step 105B, get the starting edge of the current card (SS k SE k ) of the starting point x ss (k), the end point horizontal coordinate x se (k), and the terminal edge (ES k EE k ) of the starting point x es (k), the end point horizontal coordinate x ee (k).

[0118] In this embodiment, the card starting edge refers to the edge with a smaller horizontal coordinate, and the ending edge refers to the edge with a larger horizontal coordinate. The starting edge and the ending edge are both composed of a starting point (SS k ,ES k ) and an end point (SE k EE k ) is formed by connecting the starting point (SS k ,ES k ) is located on the upper arc, and the end point (SE k EE k ) is located on the lower arc.

[0119] x ss (k)=x se (k)=(Wb+Ws)*(k-1)+Ws,x es (k)=x ee (k)=x s (k)+Wb,

[0120] Among them, k=1,2,3…n, which represents the serial number of the current card.

[0121] In another embodiment of the present invention, step 106 includes the following steps:

[0122] Step 106A: traverse the first trajectory point set Q(i) and extract a first trajectory point subset Q(j), where the first trajectory point subset Q(j) is the pixel segmentation points in the first trajectory point set Q(i) that meet a first preset condition.

[0123] The first preset condition is: ss (k)<x Q (j)<x es (k) (1≤j≤i)

[0124] Step 106B, traverse the second trajectory point set P(i), extract the second trajectory point subset P(j), where the second trajectory point subset P(j) is the pixel segmentation points in the second trajectory point set P(i) that meet the second preset condition.

[0125] The second preset condition is: se (k)<x P (j)<x ee (k) (1≤j≤i)

[0126] Step 106C: Determine the horizontal coordinate x of the starting point of the current card starting edge ss (k) Is it greater than or equal to the horizontal coordinate x(c1) of the center of the upper trajectory circle or the horizontal coordinate x(c2) of the center of the lower trajectory circle? If so, determine the coordinates of the pixel division points corresponding to the starting point and end point of the starting edge of the current card and the starting point and end point of the terminating edge according to the third rule; otherwise, determine the coordinates of the pixel division points corresponding to the starting point and end point of the starting edge of the current card and the starting point and end point of the terminating edge according to the fourth rule.

[0127] In this embodiment, the third rule is: take the point with the largest ordinate [y Q (j)] max Determine the starting point y coordinate of the starting edge ss (k), the one with the smallest ordinate [y Q (j)] min Determine the y coordinate of the starting point of the terminal edge es(k);

[0128] The point with the smallest ordinate [y P (j)] min Determine the y coordinate of the end point of the starting edge se (k), the one with the largest ordinate [y P (j)] max Determine the y coordinate of the end point of the terminating edge ee (k).

[0129] In this embodiment, the fourth rule is: take the point with the smallest ordinate [y Q (j)] min Determine the starting point y coordinate of the starting edge ss (n), the one with the largest ordinate [y Q (j)] max Determine the y coordinate of the starting point of the terminal edge es (k);

[0130] The point with the largest ordinate [y P (j)] max Determine the y coordinate of the end point of the starting edge se (k), the one with the smallest ordinate [y P (j)] min Determine the y coordinate of the end point of the terminating edge ee (k).

[0131] The above disclosure is only a preferred embodiment of the present invention, which cannot be used to limit the scope of protection of the present invention. Therefore, equivalent changes made according to the scope of the patent application of the present invention are still within the scope covered by the present invention.

Claims

1. A card metaphor interface implementation method, characterized in that: include: Step 1: construct an initial card metaphor list, wherein the initial card metaphor list contains at least one card metaphor; Step 2: Set the focus card metaphor parameters and focus area; Step 3: In response to the user's card metaphor switching operation, obtain the current card metaphor in the focus area, and display the current card metaphor as the focus card metaphor; The step 1 comprises: Step 101, storing metaphor elements of each card; Step 102: Establish a layout coordinate system and obtain layout size parameters of the card container, wherein the layout size parameters include the height and width of the container layout, and the horizontal coordinate and vertical coordinate of the starting position of the container layout; Step 103: Obtain the display mode and corresponding display track of the card metaphor list in the container; Step 104, calculating the coordinates of each pixel segmentation point on the display trajectory; Step 105, determining the vertex coordinates of each card according to the number of cards in the container and the display mode; Step 106, determining the matching pixel segmentation point of each vertex of each card; Step 107, connecting the matching pixel segmentation points to complete the drawing of each card; Step 108, read each card metaphor element, fill it into each card according to the initial order of each card metaphor in the list, and generate an initial card metaphor list; The step 104 includes: Step 104A, setting a first trajectory point set and a second trajectory point set according to a first rule and a second rule respectively, wherein the first trajectory point set is the pixel segmentation points of the upper trajectory circle corresponding to the upper arc of the trajectory, and the second trajectory point set is the pixel segmentation points of the lower trajectory circle corresponding to the lower arc of the trajectory; Step 104B, coordinates of the first trajectory point set and the second trajectory point set according to the total number of the pixel segmentation points; Step 104C, determining whether the current pixel segmentation point in the first trajectory point set and the second trajectory point set is within the card container, if yes, retain it, otherwise discard it; The step 105 comprises: Step 105A, calculating the width of each card according to the number of cards in the container; Step 105B, obtaining the starting point abscissa and the ending point abscissa of the starting edge of the current card, as well as the starting point abscissa and the ending point abscissa of the ending edge, wherein the starting edge of the card refers to the edge with a smaller abscissa, and the ending edge refers to the edge with a larger abscissa, and the starting edge and the ending edge are both formed by a line connecting a starting point and an ending point, wherein the starting point is located on the upper arc line, and the ending point is located on the lower arc line; The step 105A includes: Wb=[Wc-(n-1)*Ws] / n, where Wb represents the width of each card, Wc represents the container width, Ws represents the card spacing, and n represents the number of cards in the container; The step 105B comprises: x ss (k) = x se (k) = (Wb + Ws) * (k-1) + Ws, x es (k) = x ee (k) = x s (k)+Wb, where x ss (k) indicates The starting point horizontal coordinate of the current card's starting edge, x se (k) represents the horizontal coordinate of the end point of the current card’s starting edge, x es (k) represents the horizontal coordinate of the starting point of the end edge of the current card, x ee (k) represents the end point abscissa of the end edge of the current card, k = 1, 2, 3...n, represents the sequence number of the current card; The step 106 includes: Step 106A, traversing the first trajectory point set, extracting a first trajectory point subset, wherein the first trajectory point subset is pixel segmentation points in the first trajectory point set that meet a first preset condition; Step 106B, traversing the second trajectory point set, extracting a second trajectory point subset, where the second trajectory point subset is pixel segmentation points in the second trajectory point set that meet a second preset condition; Step 106C, determine whether the horizontal coordinate of the starting point of the starting edge of the current card is greater than or equal to the horizontal coordinate of the center of the upper track circle or the horizontal coordinate of the center of the lower track circle. If so, determine the coordinates of each pixel segmentation point corresponding to the starting point and end point of the starting edge of the current card and the starting point and end point of the terminating edge according to the third rule; otherwise, determine the coordinates of each pixel segmentation point corresponding to the starting point and end point of the starting edge of the current card and the starting point and end point of the terminating edge according to the fourth rule; The first rule is: the angle between the line connecting the first pixel segmentation point and the center of the circle and the positive direction of the X-axis is 2π-2π / m, and the other pixel segmentation points are set in a counterclockwise direction until the angle between the last point and the positive direction of the X-axis is 0°; The second rule is: the angle between the line connecting the first pixel segmentation point and the center of the circle and the positive direction of the X-axis is 2π / m, and the other pixel segmentation points are set in a counterclockwise direction until the angle between the last point and the positive direction of the X-axis is 360°; where m represents the total number of pixel segmentation points; The third rule is: the point with the largest ordinate in the first trajectory point subset is determined as the starting point ordinate of the starting edge, and the point with the smallest ordinate is determined as the starting point ordinate of the ending edge; The point with the smallest ordinate in the second trajectory point subset is determined as the ordinate of the end point of the starting edge, and the point with the largest ordinate is determined as the ordinate of the end point of the terminating edge; The fourth rule is: the point with the smallest ordinate in the first trajectory point subset is determined as the starting point ordinate of the starting edge, and the point with the largest ordinate is determined as the starting point ordinate of the ending edge; The point with the largest ordinate in the second trajectory point subset is determined as the end point ordinate of the starting edge, and the point with the smallest ordinate is determined as the end point ordinate of the terminating edge; The coordinate calculation formula of the first trajectory point set is: x Q (i)=x(c1)+R Q *cos(2π*i / m),y(i) Q =y(c1)+R Q *sin(2π*i / m); The coordinate calculation formula of the second trajectory point set is: x P (i)=x(c2)-R P *cos(2π*i / m),y(i) P =y(c2)-R P *sin(2π*i / m); Among them, (x(c1), y(c1)) represents the coordinates of the center of the lower trajectory circle, (x(c2), y(c2)) represents the coordinates of the center of the upper trajectory circle, R P , R Q They represent the radii of the upper and lower trajectory circles respectively, i=1,2,3…m represents the sequence number of the current pixel segmentation point, and m represents the total number of pixel segmentation points.

2. The card metaphor interface implementation method according to claim 1, characterized in that: After step 3, the method further includes: Step 4: In response to the user's metaphor deletion operation, the selected visible metaphor is deleted from the current card metaphor list, and the current card metaphor list is updated according to the first preset rule; Step 5, adding the deleted metaphor to the list of candidate metaphors; The first preset rule includes: if the selected visible card metaphor is located on the left side of the focus card metaphor, the metaphor in the card on the left side of the focus card metaphor is updated in a manner of moving closer to the right; if the selected visible card metaphor is located on the right side of the focus card metaphor, the metaphor in the card on the right side of the focus card metaphor is updated in a manner of moving closer to the left.

3. The card metaphor interface implementation method according to claim 2, characterized in that: After step 5, the method further includes: Step 6: respond to the user's metaphor adding operation, add the selected metaphor to the current card metaphor list, and update the current card metaphor list according to the second preset rule; Step 7: deleting the added metaphor from the list of metaphors to be selected; The second preset rule includes: if the added metaphor is located on the left side of the focus card metaphor, the metaphor in the card on the left side of the insertion point is updated by pushing to the left; if the added metaphor is located on the right side of the focus card metaphor, the metaphor in the card on the right side of the insertion point is updated by pushing to the right.

4. The card metaphor interface implementation method according to claim 1, characterized in that: The display mode is arc.

Images