CN111209066A - Card layout method and device, electronic equipment and storage medium - Google Patents

Card layout method and device, electronic equipment and storage medium Download PDF

Info

Publication number
CN111209066A
CN111209066A CN201911418974.0A CN201911418974A CN111209066A CN 111209066 A CN111209066 A CN 111209066A CN 201911418974 A CN201911418974 A CN 201911418974A CN 111209066 A CN111209066 A CN 111209066A
Authority
CN
China
Prior art keywords
card
cards
display interface
collision
preset direction
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201911418974.0A
Other languages
Chinese (zh)
Inventor
徐展
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Alipay Hangzhou Information Technology Co Ltd
Original Assignee
Alipay Hangzhou Information Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Alipay Hangzhou Information Technology Co Ltd filed Critical Alipay Hangzhou Information Technology Co Ltd
Priority to CN201911418974.0A priority Critical patent/CN111209066A/en
Publication of CN111209066A publication Critical patent/CN111209066A/en
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/451Execution arrangements for user interfaces
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/904Browsing; Visualisation therefor

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Data Mining & Analysis (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

The specification provides a card layout method and device, an electronic device and a storage medium, wherein the method comprises the following steps: sorting the cards on the display interface according to a preset direction on the display interface; performing collision solving operation on the cards on the display interface in sequence; wherein the collision resolution operation performed for any card includes: determining a collision card colliding with any one of the cards; and moving the collision card to a vacant position which is behind any card and does not collide with any card according to the preset direction.

Description

Card layout method and device, electronic equipment and storage medium
Technical Field
One or more embodiments of the present disclosure relate to the field of image processing technologies, and in particular, to a card layout method and apparatus, an electronic device, and a storage medium.
Background
Compared with the traditional tabular or textual presentation, the data visualization has stronger abstract capability for high-dimensional complex scenes and is easier to understand. The large data disc/large screen is a typical application scene of data visualization, and can intuitively and effectively show trend changes in a certain field. In practical situations, the layout of a user for a data large disk may change as the importance of the dimension of interest changes.
Disclosure of Invention
In view of this, one or more embodiments of the present disclosure provide a card layout method and apparatus, an electronic device, and a storage medium.
To achieve the above object, one or more embodiments of the present disclosure provide the following technical solutions:
according to a first aspect of one or more embodiments of the present specification, a card layout method is provided, which is applied to a display device, where a display interface of the display device includes a plurality of cards; the method comprises the following steps:
sorting the cards on the display interface according to a preset direction on the display interface;
performing collision solving operation on the cards on the display interface in sequence; wherein the collision resolution operation performed for any card includes:
determining a collision card colliding with any one of the cards;
and moving the collision card to a vacant position which is behind any card and does not collide with any card according to the preset direction.
Optionally, the sorting the cards on the display interface according to the preset direction on the display interface includes:
when the card in the display interface is moved, taking the moved card as a first card;
sorting cards that are located after the moved card in the preset direction.
Optionally, the sorting the cards on the display interface according to the preset direction on the display interface includes:
when at least one of the following conditions is met, sorting all cards in the display interface according to the preset direction:
the size specification of the display interface changes, the cards in the display interface are enlarged, and the cards in the display interface are reduced.
Optionally, before sorting the cards on the display interface, the method further includes:
tightening the cards on the display interface along the preset direction;
wherein any card stops deflating in the event of a collision or a boundary coinciding with a boundary of the display interface.
Optionally, the moving the collision card to a vacant position behind the any card and not colliding with the any card according to the preset direction includes:
determining an obstacle card located behind and colliding with the collision card;
moving the barrier card to a specific position according to the preset direction, wherein the specific position is a position where the collision card does not collide with the collision card after moving to the vacant position;
and moving the collision card to the vacant position according to the preset direction.
Optionally, the determining an obstacle card that is located behind the collision card and collides with the collision card includes:
traversing the cards behind the collision card according to the preset direction;
and when the current card in the traversing process does not collide with the collision card, stopping the traversing operation, and taking the card before the current card as the barrier card.
Optionally, the display interface is divided into a plurality of grids according to a preset number of pixel points, and the cards on the display interface move by taking the grids as units.
Optionally, when the preset direction includes a vertical direction on the display interface, the cards that are the same in the vertical direction are sorted according to a horizontal direction, and when the preset direction includes a horizontal direction on the display interface, the cards that are the same in the horizontal direction are sorted according to the vertical direction.
Optionally, the method further includes:
when at least one of the following conditions is monitored, the visual elements borne by each card are adjusted to adapt to the width and height of the card after change:
the cards in the display interface are enlarged, the cards in the display interface are reduced, and the size specification of the display interface is changed.
According to a second aspect of one or more embodiments of the present specification, a card layout apparatus is provided, which is applied to a display device, where a display interface of the display device includes a plurality of cards; the device comprises:
the sorting unit is used for sorting the cards on the display interface according to a preset direction on the display interface;
the layout unit is used for sequentially executing collision solving operation on the cards on the display interface; wherein the collision resolution operation performed for any card includes:
determining a collision card colliding with any one of the cards;
and moving the collision card to a vacant position which is behind any card and does not collide with any card according to the preset direction.
Optionally, the sorting unit is specifically configured to:
when the card in the display interface is moved, taking the moved card as a first card;
sorting cards that are located after the moved card in the preset direction.
Optionally, the sorting unit is specifically configured to:
when at least one of the following conditions is met, sorting all cards in the display interface according to the preset direction:
the size specification of the display interface changes, the cards in the display interface are enlarged, and the cards in the display interface are reduced.
Optionally, before sorting the cards on the display interface, the apparatus further includes:
the contraction unit contracts the cards on the display interface along the preset direction;
wherein any card stops deflating in the event of a collision or a boundary coinciding with a boundary of the display interface.
Optionally, the layout unit is specifically configured to:
determining an obstacle card located behind and colliding with the collision card;
moving the barrier card to a specific position according to the preset direction, wherein the specific position is a position where the collision card does not collide with the collision card after moving to the vacant position;
and moving the collision card to the vacant position according to the preset direction.
Optionally, the layout unit is further configured to:
traversing the cards behind the collision card according to the preset direction;
and when the current card in the traversing process does not collide with the collision card, stopping the traversing operation, and taking the card before the current card as the barrier card.
Optionally, the display interface is divided into a plurality of grids according to a preset number of pixel points, and the cards on the display interface move by taking the grids as units.
Optionally, when the preset direction includes a vertical direction on the display interface, the cards that are the same in the vertical direction are sorted according to a horizontal direction, and when the preset direction includes a horizontal direction on the display interface, the cards that are the same in the horizontal direction are sorted according to the vertical direction.
Optionally, the method further includes:
the adjusting unit is used for adjusting the visual elements borne by the cards to adapt to the width and height of the changed cards when monitoring that at least one of the following conditions is met:
the cards in the display interface are enlarged, the cards in the display interface are reduced, and the size specification of the display interface is changed.
According to a third aspect of one or more embodiments of the present specification, there is provided an electronic apparatus including:
a processor;
a memory for storing processor-executable instructions;
wherein the processor implements the card layout method as described in any of the above embodiments by executing the executable instructions.
According to a fourth aspect of embodiments of the present disclosure, there is provided a computer readable storage medium having stored thereon computer instructions which, when executed by a processor, implement the steps of the card layout method as described in any one of the above embodiments.
Drawings
FIG. 1 is a flowchart of a card layout method provided in an exemplary embodiment.
FIG. 2 is a flow diagram of another card layout method provided by an exemplary embodiment.
FIG. 3 is a diagram of initializing a screen coordinate system provided by an exemplary embodiment.
Fig. 4-7 are schematic diagrams of the layout of a card re-creation provided by an exemplary embodiment.
Fig. 8 is a schematic structural diagram of an apparatus according to an exemplary embodiment.
Fig. 9 is a block diagram of a card layout apparatus according to an exemplary embodiment.
Detailed Description
Reference will now be made in detail to the exemplary embodiments, examples of which are illustrated in the accompanying drawings. When the following description refers to the accompanying drawings, like numbers in different drawings represent the same or similar elements unless otherwise indicated. The implementations described in the following exemplary embodiments do not represent all implementations consistent with one or more embodiments of the present specification. Rather, they are merely examples of apparatus and methods consistent with certain aspects of one or more embodiments of the specification, as detailed in the claims which follow.
It should be noted that: in other embodiments, the steps of the corresponding methods are not necessarily performed in the order shown and described herein. In some other embodiments, the method may include more or fewer steps than those described herein. Moreover, a single step described in this specification may be broken down into multiple steps for description in other embodiments; multiple steps described in this specification may be combined into a single step in other embodiments.
Referring to fig. 1, fig. 1 is a flowchart illustrating a card layout method according to an exemplary embodiment. As shown in fig. 1, the method may include the steps of:
and 102, sorting the cards on the display interface according to a preset direction on the display interface.
In this embodiment, the display device may perform a visual presentation by creating a card on the display interface. For example, a data large disk (also called a data large screen) may display some key indexes of a service in a data visualization manner. The card container of the card is used for bearing the visual elements, so that the data can be displayed visually for a user. And when cards in the display interface are laid out, the display interface can be defined on the basis of the unit grid. Specifically, the display interface may be divided into a plurality of unit grids by taking a preset number of pixel points as a unit, and based on the division of the unit grids, the cards in the subsequent target card set may move according to the unit grids, that is, one unit grid is used as the minimum moving distance when the cards move. The number of the pixel points contained in the unit grid can be flexibly set according to the actual situation. For example, when a user requires high layout precision or requires a compact space between cards, a display interface may be divided into a plurality of unit grids by using a small number of pixels as units. The layout speed can be increased by adopting grid rounding calculation, the fluency of dragging and dropping the card is improved, and meanwhile, the layout information can be persisted by the abstraction of a coordinate system of a layout system.
Meanwhile, cards in the display interface are sequenced according to a preset direction, so that the cards can be traversed according to the serial numbers of the cards subsequently to complete the layout of the cards. The preset direction comprises a vertical direction and/or a horizontal direction. Specifically, when the preset direction includes a vertical direction, cards that are the same in the vertical direction are sorted in the horizontal direction in sorting the cards. For example, cards with the same y-axis coordinate are sorted in left-to-right (or right-to-left) order. Similarly, when the predetermined direction includes a horizontal direction, the cards that are the same in the horizontal direction are sorted in the vertical direction. For example, cards with the same X-axis coordinate are sorted in top-to-bottom (or bottom-to-top) order. It should be noted that when the cards in the display interface are arranged, the principles in the vertical direction and the horizontal direction are the same, so that the cards can be moved in the vertical direction and the horizontal direction simultaneously during arrangement, the adjustment of the positions of the cards in the display interface is further completed, and the cards are ensured not to collide with each other.
In one case, the attention degrees of the users to different dimensions at different periods are different, and the arrangement of data index display needs to be customized by the users along with the change of the attention degrees, for example, the users can move (drag and drop) visual elements displayed on a data large disk/large screen. Therefore, when a card in the display interface is moved, the moved card can be used as a first card, and cards behind the moved card in a preset direction are sequenced, so that the card layout scheme of the specification is executed to automatically adapt to display interfaces with different resolutions or sizes.
In another case, the card may be pinched or stretched when at least one of the following conditions is monitored: the size specification of the display interface changes, the cards in the display interface are enlarged, and the cards in the display interface are reduced. For example, the user adjusts the dimensional specification of the display interface; or, when the screen resolution of the display interface is adjusted, if the scaling ratio of the display interface is not adjusted according to the aspect ratio, the cards may be squeezed or stretched, which may cause collision between the cards. In this case, all cards in the display interface may be sorted, and then the card layout scheme of this specification may be executed to solve the problem of collision between cards.
Further, for the condition that the display interface meets the above condition, before cards on the display interface are sorted, each card in the display interface can be contracted along the preset direction; wherein any card stops deflating in the event of a collision or a boundary coinciding with a boundary of the display interface. For example, taking the preset direction as the vertical direction (i.e., vertical compaction) as an example, the compaction may be performed first according to the vertical direction (i.e., the y-axis is compacted in the opposite direction to the y-axis) and the compaction may be stopped when any of the following conditions is satisfied: when collision with other cards is detected, the boundary of the card is coincided with the boundary of the display interface (namely, y is 0).
And step 104, sequentially executing collision solving operation on the cards on the display interface.
In this embodiment, after the cards of the display interface are sorted according to the preset direction, the collision of each card is sequentially solved according to the preset direction. Wherein the collision solving operation performed for any card may include: the collision card colliding with any card is determined firstly, and then the collision card is moved to a vacant position which is behind the any card and does not collide with the any card according to the preset direction. Based on the operation of solving the collision, after the collision operation is performed on the last card, the collision problem does not exist among all the cards of the display interface.
In this embodiment, when performing collision resolution operation for any card, a barrier card that is located behind the collision card and collides with the collision card may be determined first, and then the barrier card is moved to a specific position according to a preset direction; wherein, the special position is the position that does not collide with the collision card after moving to the vacant position. After the collision card is in the spare position 'free' mode, the collision card is moved to the spare position according to the preset direction.
Further, in practical application, the target card set and the solved collision sequence can be introduced to complete the collision solving process. As an exemplary embodiment, the cards sorted in the display interface are taken as a target card set, a first card in the target card set is added into the solved collision sequence, collision solving operation is sequentially performed on the remaining cards in the target card set to avoid collision with other cards different from the target card set, and the cards which have performed collision solving operation are added into the solved collision sequence. Wherein the collision resolution operation performed for any card includes: determining a first collision card which collides with any card in a solved collision sequence and a vacant position at which the any card does not collide with the first collision card in a preset direction, determining a second collision card which collides with any card in cards behind the any card, moving the second collision card to a specific position (a position at which the second collision card does not collide with any card after moving to the vacant position) according to the preset direction, and moving the any card to the vacant position.
The cards in the target card set are sorted according to the preset direction, traversal can be performed on the basis of the sorted cards, the first collision card colliding with the current card is determined, and before the current card is moved to the vacant position, the second collision card colliding with the current card is moved to the specific position to 'vacate the vacant position' (namely, the card colliding with the current card is traversed and moved to the specific position until no card colliding with the current card exists), so that the current card cannot collide with the following card after being moved to the vacant position. And circularly executing the process of traversing the sorted cards until all cards in the target card set are recorded in the collision sequence, namely finishing the re-layout of the target card set and ensuring that all cards in the target card set cannot collide.
When determining the barrier card which is behind the collision card and collides with the collision card, the card behind the collision card can be traversed according to the preset direction, and when the current card in the traversing process does not collide with the collision card, the card after the explanation does not collide with the current card. The traversal operation may be stopped and the card preceding the current card may be considered the barrier card.
For example, based on sorting the cards in the target card set according to a preset direction, when a card belonging to a second collision card is determined, the card behind the current card may be traversed according to the preset direction, and when any card in the traversing process does not collide with the current card, the operation of traversing the card behind the current card may be stopped, and the card ahead of the current card may be used as the second collision card. Because the cards behind the current card are traversed according to the preset direction, once the first card which does not collide with the current card is determined in the traversing process, the cards behind the description do not collide with the current card. Therefore, the traversal operation is stopped, and unnecessary operations can be reduced, thereby improving the layout efficiency.
In the present embodiment, when an event such as a card in the target card set being enlarged, a card in the target card set being reduced, a size specification of a display interface for displaying the target card set being changed, a resolution of the display interface being changed occurs, the size specification of the card is changed (squeezed or stretched). Therefore, the visual elements carried by each card container can be adjusted correspondingly to adapt to the width and height of the changed cards.
For ease of understanding, the layout process of the present specification is described in detail below with reference to examples and schematic drawings.
Referring to fig. 2, fig. 2 is a flowchart illustrating another card layout method according to an exemplary embodiment. As shown in fig. 2, the method may include the steps of:
step 202, initializing a screen coordinate system.
In this embodiment, when a card in the display interface moves, or the specification of the display interface changes, or the resolution of the display interface changes, the display interface may be initialized to the coordinate system in the form of a drawing board. As shown in fig. 3, the drawing board P may be divided into n parts (hereinafter, each part is referred to as cols), and the size of the space occupied by each card is defined in terms of cols. Meanwhile, the coordinates (x, y) of the upper left corner of the card and the height h occupied by the card are defined. For example, the width of the drawing board P is 1200px, n is 12 (i.e., 100 pixels per unit grid), container feeding [0] (container internal distance [0]) is 24px, and container feeding [1] (container internal distance [1]) is 24px (i.e., container feeding [24px, 24px ]). Then, the coordinates of the card 1 are [0,0], which is converted into the coordinates of the relative canvas of [24px, 24px ]; card 1 has a width (w) of 2 and a height (h) of 2, and thus has an actual width (1200/12) × 2 of 200 px. The drawing board P is in the positive direction of the y axis from vertical to downward, and in the positive direction of the x axis from horizontal to right.
At step 204, the card is vertically collapsed.
Taking the preset direction as a vertical direction as an example, cards in the drawing board are compacted in a negative y-axis direction according to a unit grid (namely, y ═ 1). Wherein the compaction is stopped when any one of the following conditions is satisfied: when collision with other cards is detected, the boundary of the card is coincident with the boundary of the drawing board (namely, y is 0).
As shown in fig. 4, the target card set of palette a (fig. 4 including the layout process of a1-a 4) includes cards 1-3 (the ordering is described below), taking the change in the screen size specification as an example. The size specification of the drawing board A is changed to obtain a drawing board A1, and the drawing board A1 is firstly vertically contracted, and the card 1 is contracted in the negative direction of the y axis (namely, the vertical upward direction in the drawing) until the upper boundary of the card 1 is overlapped with the boundary of the drawing board A1 (namely, y is 0); while the cards 2-3 are not contracted due to the collision.
Step 206, the target card set is traversed in sequence.
Accepting the above example, the first card in the target card set is card 1, and card 1 is added to the resolved collision sequence S.
At step 208, a first bump card is determined to obtain a free location.
And step 210, releasing the collision with the second collision card.
Step 212, the current card is moved to the free position.
In the present embodiment, after stopping the vertical contraction, the current card is subjected to collision monitoring with the card in the solved collision sequence S (in a non-collision state). If there is a collision between the current card and the card in the resolved collision sequence S, assuming that the current card is a and the card colliding with the card a is B (first collision card), it is planned to move the card a to B.y + B.h (i.e., the free position below the card B). Before moving the card a, it is detected whether the card a collides with another card below, and if so, the card (second collision card) colliding with the card a is moved to B.y + B.h + A.h (i.e., a specific position) until the card a does not collide with another card below, and then the card a is moved to B.y + B.h.
Step 214, add the current card to the resolved collision sequence.
For example, after the card 1 is added to the solved collision sequence S, the current card in the process of traversing the target card set comes to the card 2, the card 2 collides with the solved collision sequence S, it is determined that the card 2 collides with the card 1 in the solved collision sequence S (that is, the card 1 is the first collision card), and it is further determined that the card 2 needs to be moved to the card 1.y + the card 1.h (that is, the vacant position below the card 1). Before moving the card 2, whether the card 2 collides with other cards below is detected, if so, the card (second collision card) colliding with the card 2 is moved to the card 1.y + the card 1.h + the card 2.h (i.e. a specific position) until the card 2 does not collide with other cards below, and then the card 2 is moved to the card 1.y + the card 1. h. As can be seen from fig. 4, since card 3 collides with card 2, card 3 is moved to card 1.y + card 1.h + card 2.h, resulting in the drawing board layout shown in a 3. At this time, since card 2 does not collide with the other cards below, card 2 is moved to card 1.y + card 1.h, and the drawing board layout shown in a4 is obtained. Further, the card 2 is added to the resolved collision sequence S to continue the subsequent traversal process. When all the cards in the target card set are contained in the solved collision sequence S, the traversal process can be determined to be finished.
It should be noted that, when the traversal detects whether the card 2 collides with another card below, if the y value of a certain card ranked after the card 2 is greater than the card 2.y + the card 2.h (i.e., there is no collision with the card 2), then the card located after the certain card must also have no collision with the card 2. Thus, the traversal operation may be stopped when the traversal process is performed to the card and it is determined that there is no collision of the card with the card 2. The following is a detailed description of the sorting method.
As shown in fig. 5, the preset direction is taken as a vertical direction, a vertical downward direction is taken as a positive y-axis direction, and a horizontal rightward direction is taken as a positive x-axis direction. Cards with the same y-axis coordinate are sorted from left to right. That is, the ordering rule for cards a and b is a.y < b.y, if (a, y ═ b.y) a.x < b.x. Thus, during traversal to free the collision, the cards that collide with card 3 are cards 4-5, while the y value of card 6 > card 3.y + card 3. h. It can be seen that the value of y for the card 7 after the card 6 must also be greater than the value of card 3.y + the value of card 3.h, so that the card after the card 6 need not be traversed.
Step 216, if the target card set is traversed, step 218 is carried out; otherwise, go to step 208 to continue the traversal process.
At step 218, it is determined that the re-layout in the predetermined direction is complete.
As shown in fig. 6 to 7, the description will be made by taking a scene of moving a card as an example. As shown in fig. 6, panel B1 includes a tab A, B, F, and card a is moved to form the layout shown in panel B2. With card a as the card in the target set of cards. Since the card a collides with the card B, the card B needs to be moved to release the collision with the card a. Thus, card B (upper left corner) is moved to card A.y + card A.h, resulting in the layout shown in palette B3. Of course, before moving the card B, it is detected whether the card B collides with another card below, and if there is a collision, the card having a collision with the card B is moved to the position of the card A.y + the card A.h + the card B.h until there is no collision with another card below, and then the card B is moved to the card A.y + the card A.h. The process principle is similar to that described above and is not described in detail here.
Of course, the collision can also be relieved by moving upwards. As shown in fig. 7, palette C1 includes cards A, B, F, and card a is moved to form the layout shown in palette C2. Since the card a collides with the card B, the card B needs to be moved to release the collision with the card a. Thus, card B (upper left corner) is moved to card A.y-card B.h, forming the layout shown in panel B3. Of course, before moving the card B, it is detected whether or not the card B collides with another card above, and if there is a collision (the card having a collision is referred to as a card C), the card having a collision with the card B is moved to the position of the card A.y-the card B.h-the card C.h, and the card B is further moved to the card A.y-the card B.h. The process principle is similar to that described above and is not described in detail here.
In the present embodiment, when events such as enlargement of a card in the target card set, reduction of a card in the target card set, change in the size specification of a drawing board for displaying the target card set, and change in the resolution of the drawing board occur, the size specification of the card changes (squeezes or stretches). Therefore, the visual elements carried by each card container can be adjusted correspondingly to adapt to the width and height of the changed cards.
As can be seen from the above embodiments, by sorting the cards in the target card set according to the preset direction, traversal may be performed based on the sorted cards, a first collision card colliding with the current card is determined, and before the current card is moved to the free position, a second collision card colliding with the current card is moved to a specific position to "leave the free position" (i.e., the card colliding with the current card is traversed and moved to the specific position until there is no card colliding with the current card), so that after the current card is moved to the free position, there is no collision with the following card. And circularly executing the process of traversing the sorted cards until all cards in the target card set are recorded in the collision sequence, namely finishing the re-layout of the target card set and ensuring that all cards in the target card set cannot collide.
FIG. 8 is a schematic block diagram of an apparatus provided in an exemplary embodiment. Referring to fig. 8, at the hardware level, the apparatus includes a processor 802, an internal bus 804, a network interface 806, a memory 808, and a non-volatile memory 810, but may also include hardware required for other services. The processor 802 reads the corresponding computer program from the non-volatile memory 810 into the memory 808 and then runs the computer program to form the card layout apparatus on a logical level. Of course, besides software implementation, the one or more embodiments in this specification do not exclude other implementations, such as logic devices or combinations of software and hardware, and so on, that is, the execution subject of the following processing flow is not limited to each logic unit, and may also be hardware or logic devices.
Referring to fig. 9, in a software implementation, the card layout apparatus is applied to a display device, where a display interface of the display device includes a plurality of cards, and may include:
the sorting unit 91 sorts the cards on the display interface according to a preset direction on the display interface;
a layout unit 92, which sequentially executes collision solving operation for the cards on the display interface; wherein the collision resolution operation performed for any card includes:
determining a collision card colliding with any one of the cards;
and moving the collision card to a vacant position which is behind any card and does not collide with any card according to the preset direction.
Optionally, the sorting unit 91 is specifically configured to:
when the card in the display interface is moved, taking the moved card as a first card;
sorting cards that are located after the moved card in the preset direction.
Optionally, the sorting unit 91 is specifically configured to:
when at least one of the following conditions is met, sorting all cards in the display interface according to the preset direction:
the size specification of the display interface changes, the cards in the display interface are enlarged, and the cards in the display interface are reduced.
Optionally, before sorting the cards on the display interface, the apparatus further includes:
the contraction unit 93 contracts the cards on the display interface along the preset direction;
wherein any card stops deflating in the event of a collision or a boundary coinciding with a boundary of the display interface.
Optionally, the layout unit 92 is specifically configured to:
determining an obstacle card located behind and colliding with the collision card;
moving the barrier card to a specific position according to the preset direction, wherein the specific position is a position where the collision card does not collide with the collision card after moving to the vacant position;
and moving the collision card to the vacant position according to the preset direction.
Optionally, the layout unit 92 is further configured to:
traversing the cards behind the collision card according to the preset direction;
and when the current card in the traversing process does not collide with the collision card, stopping the traversing operation, and taking the card before the current card as the barrier card.
Optionally, the display interface is divided into a plurality of grids according to a preset number of pixel points, and the cards on the display interface move by taking the grids as units.
Optionally, when the preset direction includes a vertical direction on the display interface, the cards that are the same in the vertical direction are sorted according to a horizontal direction, and when the preset direction includes a horizontal direction on the display interface, the cards that are the same in the horizontal direction are sorted according to the vertical direction.
Optionally, the method further includes:
the adjusting unit 94 adjusts the visual elements carried by each card to adapt to the width and height of the changed card when at least one of the following conditions is monitored:
the cards in the display interface are enlarged, the cards in the display interface are reduced, and the size specification of the display interface is changed.
The systems, devices, modules or units illustrated in the above embodiments may be implemented by a computer chip or an entity, or by a product with certain functions. A typical implementation device is a computer, which may take the form of a personal computer, laptop computer, cellular telephone, camera phone, smart phone, personal digital assistant, media player, navigation device, email messaging device, game console, tablet computer, wearable device, or a combination of any of these devices.
In a typical configuration, a computer includes one or more processors (CPUs), input/output interfaces, network interfaces, and memory.
The memory may include forms of volatile memory in a computer readable medium, Random Access Memory (RAM) and/or non-volatile memory, such as Read Only Memory (ROM) or flash memory (flash RAM). Memory is an example of a computer-readable medium.
Computer-readable media, including both non-transitory and non-transitory, removable and non-removable media, may implement information storage by any method or technology. The information may be computer readable instructions, data structures, modules of a program, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), Static Random Access Memory (SRAM), Dynamic Random Access Memory (DRAM), other types of Random Access Memory (RAM), Read Only Memory (ROM), Electrically Erasable Programmable Read Only Memory (EEPROM), flash memory or other memory technology, compact disc read only memory (CD-ROM), Digital Versatile Discs (DVD) or other optical storage, magnetic cassettes, magnetic disk storage, quantum memory, graphene-based storage media or other magnetic storage devices, or any other non-transmission medium that can be used to store information that can be accessed by a computing device. As defined herein, a computer readable medium does not include a transitory computer readable medium such as a modulated data signal and a carrier wave.
It should also be noted that the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises the element.
The foregoing description has been directed to specific embodiments of this disclosure. Other embodiments are within the scope of the following claims. In some cases, the actions or steps recited in the claims may be performed in a different order than in the embodiments and still achieve desirable results. In addition, the processes depicted in the accompanying figures do not necessarily require the particular order shown, or sequential order, to achieve desirable results. In some embodiments, multitasking and parallel processing may also be possible or may be advantageous.
The terminology used in the description of the one or more embodiments is for the purpose of describing the particular embodiments only and is not intended to be limiting of the description of the one or more embodiments. As used in one or more embodiments of the present specification and the appended claims, the singular forms "a," "an," and "the" are intended to include the plural forms as well, unless the context clearly indicates otherwise. It should also be understood that the term "and/or" as used herein refers to and encompasses any and all possible combinations of one or more of the associated listed items.
It should be understood that although the terms first, second, third, etc. may be used in one or more embodiments of the present description to describe various information, such information should not be limited to these terms. These terms are only used to distinguish one type of information from another. For example, first information may also be referred to as second information, and similarly, second information may also be referred to as first information, without departing from the scope of one or more embodiments herein. The word "if" as used herein may be interpreted as "at … …" or "when … …" or "in response to a determination", depending on the context.
The above description is only for the purpose of illustrating the preferred embodiments of the one or more embodiments of the present disclosure, and is not intended to limit the scope of the one or more embodiments of the present disclosure, and any modifications, equivalent substitutions, improvements, etc. made within the spirit and principle of the one or more embodiments of the present disclosure should be included in the scope of the one or more embodiments of the present disclosure.

Claims (20)

1. A card layout method is applied to display equipment, and a display interface of the display equipment comprises a plurality of cards; the method comprises the following steps:
sorting the cards on the display interface according to a preset direction on the display interface;
performing collision solving operation on the cards on the display interface in sequence; wherein the collision resolution operation performed for any card includes:
determining a collision card colliding with any one of the cards;
and moving the collision card to a vacant position which is behind any card and does not collide with any card according to the preset direction.
2. The method of claim 1, wherein sorting the cards on the display interface according to the preset direction on the display interface comprises:
when the card in the display interface is moved, taking the moved card as a first card;
sorting cards that are located after the moved card in the preset direction.
3. The method of claim 1, wherein sorting the cards on the display interface according to the preset direction on the display interface comprises:
when at least one of the following conditions is met, sorting all cards in the display interface according to the preset direction:
the size specification of the display interface changes, the cards in the display interface are enlarged, and the cards in the display interface are reduced.
4. The method of claim 3, prior to sorting cards on the display interface, further comprising:
tightening the cards on the display interface along the preset direction;
wherein any card stops deflating in the event of a collision or a boundary coinciding with a boundary of the display interface.
5. The method of claim 1, wherein moving the collision card in the preset direction to a free position behind the any card and not colliding with the any card comprises:
determining an obstacle card located behind and colliding with the collision card;
moving the barrier card to a specific position according to the preset direction, wherein the specific position is a position where the collision card does not collide with the collision card after moving to the vacant position;
and moving the collision card to the vacant position according to the preset direction.
6. The method of claim 5, the determining an obstacle card that is located after and collides with the collision card, comprising:
traversing the cards behind the collision card according to the preset direction;
and when the current card in the traversing process does not collide with the collision card, stopping the traversing operation, and taking the card before the current card as the barrier card.
7. The method of claim 1, wherein the display interface is divided into a plurality of grids according to a preset number of pixel points, and the cards on the display interface move in the grids.
8. The method of claim 1, wherein cards that are the same in the vertical direction are ordered in the horizontal direction when the predetermined direction comprises a vertical direction on the display interface, and wherein cards that are the same in the horizontal direction are ordered in the vertical direction when the predetermined direction comprises a horizontal direction on the display interface.
9. The method of claim 1, further comprising:
when at least one of the following conditions is monitored, the visual elements borne by each card are adjusted to adapt to the width and height of the card after change:
the cards in the display interface are enlarged, the cards in the display interface are reduced, and the size specification of the display interface is changed.
10. A card layout device is applied to display equipment, and a display interface of the display equipment comprises a plurality of cards; the device comprises:
the sorting unit is used for sorting the cards on the display interface according to a preset direction on the display interface;
the layout unit is used for sequentially executing collision solving operation on the cards on the display interface; wherein the collision resolution operation performed for any card includes:
determining a collision card colliding with any one of the cards;
and moving the collision card to a vacant position which is behind any card and does not collide with any card according to the preset direction.
11. The apparatus according to claim 10, wherein the sorting unit is specifically configured to:
when the card in the display interface is moved, taking the moved card as a first card;
sorting cards that are located after the moved card in the preset direction.
12. The apparatus according to claim 10, wherein the sorting unit is specifically configured to:
when at least one of the following conditions is met, sorting all cards in the display interface according to the preset direction:
the size specification of the display interface changes, the cards in the display interface are enlarged, and the cards in the display interface are reduced.
13. The apparatus of claim 12, prior to sorting cards on the display interface, further comprising:
the contraction unit contracts the cards on the display interface along the preset direction;
wherein any card stops deflating in the event of a collision or a boundary coinciding with a boundary of the display interface.
14. The apparatus of claim 10, the placement unit to be specifically configured to:
determining an obstacle card located behind and colliding with the collision card;
moving the barrier card to a specific position according to the preset direction, wherein the specific position is a position where the collision card does not collide with the collision card after moving to the vacant position;
and moving the collision card to the vacant position according to the preset direction.
15. The apparatus of claim 14, the placement unit further to:
traversing the cards behind the collision card according to the preset direction;
and when the current card in the traversing process does not collide with the collision card, stopping the traversing operation, and taking the card before the current card as the barrier card.
16. The device of claim 10, wherein the display interface is divided into a plurality of grids according to a preset number of pixel points, and the cards on the display interface move in the grids.
17. The apparatus of claim 10, wherein cards that are the same in the vertical direction are ordered in the horizontal direction when the predetermined direction comprises the vertical direction on the display interface, and wherein cards that are the same in the horizontal direction are ordered in the vertical direction when the predetermined direction comprises the horizontal direction on the display interface.
18. The apparatus of claim 10, further comprising:
the adjusting unit is used for adjusting the visual elements borne by the cards to adapt to the width and height of the changed cards when monitoring that at least one of the following conditions is met:
the cards in the display interface are enlarged, the cards in the display interface are reduced, and the size specification of the display interface is changed.
19. An electronic device, comprising:
a processor;
a memory for storing processor-executable instructions;
wherein the processor implements the method of any one of claims 1-9 by executing the executable instructions.
20. A computer readable storage medium having stored thereon computer instructions which, when executed by a processor, carry out the steps of the method according to any one of claims 1 to 9.
CN201911418974.0A 2019-12-31 2019-12-31 Card layout method and device, electronic equipment and storage medium Pending CN111209066A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201911418974.0A CN111209066A (en) 2019-12-31 2019-12-31 Card layout method and device, electronic equipment and storage medium

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201911418974.0A CN111209066A (en) 2019-12-31 2019-12-31 Card layout method and device, electronic equipment and storage medium

Publications (1)

Publication Number Publication Date
CN111209066A true CN111209066A (en) 2020-05-29

Family

ID=70784207

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201911418974.0A Pending CN111209066A (en) 2019-12-31 2019-12-31 Card layout method and device, electronic equipment and storage medium

Country Status (1)

Country Link
CN (1) CN111209066A (en)

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20120311423A1 (en) * 2011-06-06 2012-12-06 Microsoft Corporation Dynamically Controlling Collisions of Form Controls in an Electronic Document
CN108319675A (en) * 2018-01-29 2018-07-24 出门问问信息科技有限公司 Information displaying method, device, electronic equipment and computer storage media
CN110058909A (en) * 2019-02-26 2019-07-26 阿里巴巴集团控股有限公司 Layout method, placement device, server and the readable storage medium storing program for executing of control

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20120311423A1 (en) * 2011-06-06 2012-12-06 Microsoft Corporation Dynamically Controlling Collisions of Form Controls in an Electronic Document
CN108319675A (en) * 2018-01-29 2018-07-24 出门问问信息科技有限公司 Information displaying method, device, electronic equipment and computer storage media
CN110058909A (en) * 2019-02-26 2019-07-26 阿里巴巴集团控股有限公司 Layout method, placement device, server and the readable storage medium storing program for executing of control

Similar Documents

Publication Publication Date Title
JP6768695B2 (en) Methods and devices for generating composite pictures
KR101680924B1 (en) Dynamic image presentation
JP4696635B2 (en) Method, apparatus and program for generating highly condensed summary images of image regions
CN103902158A (en) Method and terminal for managing application icon
KR102591542B1 (en) Table processing methods, devices, smart interactive tablets and storage media
US20140149926A1 (en) Apparatus, method and computer readable recording medium for arranging a plurality of items automatically in a canvas
CN103702032A (en) Image processing method, device and terminal equipment
CN108346131A (en) A kind of digital image scaling method, device and display equipment
KR102317013B1 (en) Object management and visualization using computing devices
CN105247478A (en) Command instruction management
CN107766703B (en) Watermark adding processing method and device and client
CN111290680B (en) List display method, device, terminal and storage medium
CN107122104B (en) Data display method and device
US9171227B2 (en) Apparatus and method extracting feature information of a source image
CN109388306B (en) Information display method and device
CN108280135B (en) Method and device for realizing visualization of data structure and electronic equipment
WO2018176843A1 (en) Method and apparatus for searching for focus across boundary, intelligent device and readable storage medium
CN109885369B (en) Image linkage method and device
CN111209066A (en) Card layout method and device, electronic equipment and storage medium
JP6287498B2 (en) Electronic whiteboard device, electronic whiteboard input support method, and program
US20200341608A1 (en) Method of panning image
US20150286401A1 (en) Photo/video timeline display
CN113792237B (en) Optimization method and device for card layout, storage medium and processor
CN105447839A (en) Rectangular frame merging method and system
CN110321405B (en) Model matching method, model matching device, computer-readable storage medium and computer equipment

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20200529