CN116909462A

CN116909462A - Canvas element layout adjustment method and device, electronic equipment and storage medium

Info

Publication number: CN116909462A
Application number: CN202310886272.5A
Authority: CN
Inventors: 康健
Original assignee: 3600 Technology Group Co ltd
Current assignee: 3600 Technology Group Co ltd
Priority date: 2023-07-18
Filing date: 2023-07-18
Publication date: 2023-10-20

Abstract

The application provides a canvas element layout adjustment method, a canvas element layout adjustment device, electronic equipment and a storage medium, and relates to the technical field of webpage design, wherein the canvas element layout adjustment method comprises the following steps: displaying a thumbnail interface in the canvas interface; the size of the thumbnail interface has a proportional relation with the size of the canvas; displaying a mapping element corresponding to a target element in the canvas interface in the thumbnail interface; displaying a second moving track of the target element in the canvas interface according to a first moving track of the mapping element in the thumbnail interface under the condition that the mapping element is dragged; and displaying the target element at a first position where the tail end of the second moving track is positioned in the canvas interface under the condition that the mapping element is released. The application can realize the rapid movement of the elements in the large-size webpage canvas and simplify the movement process of the elements.

Description

Canvas element layout adjustment method and device, electronic equipment and storage medium

Technical Field

The present application relates to the field of web page design technologies, and in particular, to a canvas element layout adjustment method and apparatus, an electronic device, and a storage medium.

Background

In the conventional webpage logic, the size of the webpage canvas is large, and since the size of the display screen is fixed, the complete webpage canvas cannot be displayed in the screen, and part of the webpage canvas is displayed in the screen. When a user moves an element in a webpage canvas, the target position of the element to be moved is not in the current part of the webpage canvas displayed on the screen, the user is required to select the element to move towards the target position in the webpage canvas for a long time, and the element movement cannot be realized quickly.

It should be noted that the information disclosed in the above background section is only for enhancing understanding of the background of the application and thus may include information that does not form the prior art that is already known to those of ordinary skill in the art.

Disclosure of Invention

The application aims to provide a canvas element layout adjustment method, a canvas element layout adjustment device, electronic equipment and a storage medium, which can realize rapid movement of elements in a large-size webpage canvas.

Other features and advantages of the application will be apparent from the following detailed description, or may be learned by the practice of the application.

In a first aspect, a canvas element layout adjustment method is provided, the method comprising: displaying a thumbnail interface in the canvas interface; the size of the thumbnail interface has a proportional relation with the size of the canvas; displaying a mapping element corresponding to a target element in the canvas interface in the thumbnail interface; displaying a second moving track of the target element in the canvas interface according to a first moving track of the mapping element in the thumbnail interface under the condition that the mapping element is dragged; and displaying the target element at a first position where the tail end of the second moving track is positioned in the canvas interface under the condition that the mapping element is released.

With reference to the first aspect, in some possible implementations, displaying, in the thumbnail interface, a mapping element corresponding to a target element in the canvas interface includes: and displaying a mapping element corresponding to the target element in the canvas interface in the thumbnail interface under the condition that the target element is selected.

With reference to the first aspect and the foregoing implementation manner, in some possible implementation manners, the displaying, in the thumbnail interface, a mapping element corresponding to a target element in the canvas interface includes: and displaying a mapping element corresponding to the target element in the canvas interface in the thumbnail interface under the condition that the target element is dragged from the canvas interface into the thumbnail interface.

With reference to the first aspect and the foregoing implementation manner, in some possible implementation manners, the displaying, in the thumbnail interface, a mapping element corresponding to a target element in the canvas interface includes: reducing the target element according to the proportional relation to obtain the mapping element; and displaying the mapping element in the thumbnail interface.

With reference to the first aspect and the foregoing implementation manner, in some possible implementation manners, displaying, in a first position where an end of the second movement track is located in the canvas interface, the target element includes: acquiring a second position of the terminal of the first moving track in the thumbnail interface; expanding the second position according to the proportional relation to obtain a theoretical position of the tail end of the second movement track in the canvas interface; displaying the target element at the first position if the first position is the same as the theoretical position; and determining the theoretical position as the first position when the first position is different from the theoretical position, and displaying the target element at the first position.

With reference to the first aspect and the foregoing implementation manner, in some possible implementation manners, the expanding the second position according to the proportional relationship, to obtain a theoretical position of the end of the second movement track in the canvas interface includes: acquiring a third position of the initial end of the first moving track in the thumbnail interface; determining a distance between the third location and the second location; and expanding the second position according to the proportional relation under the condition that the distance is larger than a preset value to obtain the theoretical position.

With reference to the first aspect and the foregoing implementation manner, in some possible implementation manners, in a case where the mapping element is released, after displaying the target element at a first position where an end of the second movement track is located in the canvas interface, the canvas element layout adjustment method further includes: and displaying the layout of each element in the canvas in the thumbnail interface.

In a second aspect, there is provided a canvas element layout adjustment apparatus, the canvas element layout adjustment apparatus comprising:

the interface display module is used for displaying a thumbnail interface in the canvas interface; the size of the thumbnail interface has a proportional relation with the size of the canvas;

The element display module is used for displaying a mapping element corresponding to the target element in the canvas interface in the thumbnail interface;

the track synchronization module is used for displaying a second moving track of the target element in the canvas interface according to a first moving track of the mapping element in the thumbnail interface under the condition that the mapping element is dragged;

and the interface updating module is used for displaying the target element at a first position where the tail end of the second movement track is positioned in the canvas interface under the condition that the mapping element is released.

With reference to the second aspect, in some possible implementations, the element display module includes:

and the first display unit is used for displaying the mapping element corresponding to the target element in the canvas interface in the thumbnail interface under the condition that the target element is selected.

With reference to the second aspect, in some possible implementations, the element display module further includes:

and the second display unit is used for displaying the mapping element corresponding to the target element in the canvas interface in the thumbnail interface under the condition that the target element is dragged into the thumbnail interface from the canvas interface.

With reference to the second aspect and the foregoing implementation manner, in some possible implementation manners, the element display module further includes:

a scaling subunit, configured to scale down the target element according to the scaling relationship to obtain the mapping element;

and the display subunit is used for displaying the mapping element in the thumbnail interface.

With reference to the second aspect and the foregoing implementation manner, in some possible implementation manners, the interface updating module includes:

the position acquisition unit is used for acquiring a second position where the tail end of the first moving track is located in the thumbnail interface;

the position calculation unit is used for expanding the second position according to the proportional relation to obtain the theoretical position of the tail end of the second movement track in the canvas interface;

a first updating unit configured to display the target element at the first position if the first position is the same as the theoretical position;

and the second updating unit is used for determining the theoretical position as the first position and displaying the target element at the first position when the first position is different from the theoretical position.

With reference to the second aspect and the foregoing implementation manner, in some possible implementation manners, the position calculating unit includes:

The position acquisition subunit is used for acquiring a third position where the initial end of the first moving track is located in the thumbnail interface;

a distance calculation subunit for determining a distance between the third location and the second location;

and the position calculating subunit is used for expanding the second position according to the proportional relation to obtain the theoretical position under the condition that the distance is larger than a preset value.

With reference to the second aspect and the foregoing implementation manner, in some possible implementation manners, the canvas element layout adjustment device further includes:

and the layout display unit is used for displaying the layout of each element in the canvas in the thumbnail interface.

In a third aspect, an electronic device is provided, where the electronic device includes a memory, a processor, and a computer program stored in the memory and executable on the processor, where the processor implements the canvas element layout adjustment method described in the above embodiment when the processor executes the computer program.

In a fourth aspect, a computer readable storage medium is provided having stored thereon a computer program which, when executed by a processor, implements a canvas element layout adjustment method as described in the above embodiments.

The canvas element layout adjustment method, the canvas element layout adjustment device, the electronic equipment and the storage medium provided by the embodiment of the application have the following technical effects:

according to the embodiment of the application, the thumbnail interface with the proportional relation with the size of the canvas is displayed in the canvas interface, the mapping element corresponding to the target element in the canvas interface is displayed in the thumbnail interface, under the condition that the mapping element is dragged, the second movement track of the target element is displayed in the canvas interface, under the condition that the mapping element is released, the first position of the tail end of the second movement track in the canvas interface is displayed, the technical scheme of the target element is adopted, when a user needs to move one element displayed in the canvas, the mapping element corresponding to the element to be moved can be directly dragged in the thumbnail interface, when the mapping element moves in the thumbnail interface, the movement track of the mapping element in the thumbnail interface is amplified and presented in the canvas interface, namely, the movement track of the element to be moved and the movement track of the mapping element are synchronously presented, if the user stops dragging of the mapping element in the thumbnail interface, the corresponding element to be moved in the canvas interface is synchronously stopped, the movement of the canvas is realized, the movement of the element to be moved is required to be moved in the canvas interface, the webpage is not required to be dragged in the webpage is realized, the new position of the user is required to be moved, the size of the user is not required to be dragged in the webpage is greatly, and the user is required to be moved, and the size of the user is required to be moved in the webpage is required to be moved.

It is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the application as claimed.

Drawings

The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the application and together with the description, serve to explain the principles of the application. It is evident that the drawings in the following description are only some embodiments of the present application and that other drawings may be obtained from these drawings without inventive effort for a person of ordinary skill in the art.

FIG. 1 is a flow diagram illustrating a canvas element layout adjustment method in accordance with an exemplary embodiment of the present application;

FIG. 2 shows a schematic diagram of a canvas interface for a terminal display;

FIG. 3 shows another schematic diagram of a canvas interface for a terminal display;

FIG. 4 shows a schematic diagram of a canvas;

FIG. 5 shows yet another schematic diagram of a canvas interface for a terminal display;

FIG. 6 shows yet another schematic diagram of a canvas interface for a terminal display;

FIG. 7 is a schematic diagram of a canvas element layout adjustment apparatus;

fig. 8 shows a schematic structural diagram of the electronic device.

Detailed Description

In order to make the objects, technical solutions and advantages of the present application more apparent, the following detailed description of the embodiments of the present application will be given with reference to the accompanying drawings.

When the following description refers to the accompanying drawings, the same numbers in different drawings refer to the same or similar elements, unless otherwise indicated. The implementations described in the following exemplary examples do not represent all implementations consistent with the application. Rather, they are merely examples of apparatus and methods consistent with certain aspects of the application as detailed in the accompanying claims.

It is noted that the above-described figures are only schematic illustrations of processes involved in a method according to an exemplary embodiment of the application, and are not intended to be limiting. It will be readily appreciated that the processes shown in the above figures do not indicate or limit the temporal order of these processes. In addition, it is also readily understood that these processes may be performed synchronously or asynchronously, for example, among a plurality of modules.

The following is a description of an embodiment of a canvas element layout adjustment method provided by the present application. FIG. 1 is a flow chart illustrating a canvas element layout adjustment method in an exemplary embodiment of the present application. As shown in FIG. 1, the canvas element layout adjustment method provided by one embodiment of the method of the present application comprises the following steps:

Step S110: displaying a thumbnail interface in the canvas interface; the size of the thumbnail interface has a proportional relation with the size of the canvas.

In an exemplary embodiment, in the case that a canvas interface is displayed in a display screen of a terminal, a thumbnail interface is displayed in the canvas interface, which may be understood as a small window, the area of the thumbnail interface being smaller than the canvas interface. The size of the abbreviated interface has a proportional relationship with the size of the canvas, which is referred to as the webpage canvas, i.e., the abbreviated interface can be understood as a scaled down canvas. For example, the canvas and the thumbnail interface are rectangular in shape, the length and the width of the canvas and the thumbnail interface are in proportional relation, for example, the length of the canvas is 200cm, the width is 50cm, the length of the canvas interface is 100cm, the width is 50cm, the length of the thumbnail interface can be set to 20cm, and the width can be set to 5cm, namely, the proportional relation is 10:1. As shown in FIG. 2, FIG. 2 shows a schematic diagram of a canvas interface displayed by a terminal, A representing the display screen of the terminal, B1 representing the canvas interface, and B2 representing the abbreviated interface.

Step S120: and displaying the mapping element corresponding to the target element in the canvas interface in the thumbnail interface.

As shown in fig. 2, a plurality of different elements are displayed in the canvas interface, and the elements are different icons, such as a function option icon C1 of a design item, a material pattern icon C2 under the function option, a new event frame icon C3, a toolbar icon C4, an upload flow icon C5, a component library icon C6, and the like. After the thumbnail interface is displayed in the canvas interface, a mapping element corresponding to the target element in the canvas interface is also displayed in the thumbnail interface, wherein the target element is at least one of a plurality of elements displayed in the canvas interface, and the mapping element is a reduced element of the target element or is a copy of the target element. As shown in fig. 2, for example, a map element with element Y2 being C2 is displayed in the thumbnail interface.

Step S130: and displaying a second moving track of the target element in the canvas interface according to the first moving track of the mapping element in the thumbnail interface under the condition that the mapping element is dragged.

After the mapping elements are displayed in the thumbnail interface, if the user wants to drag a certain target element to other positions of the canvas, the corresponding mapping elements can be directly dragged in the thumbnail interface without dragging the target element in the canvas interface. Because the thumbnail interface is a reduced canvas, after the corresponding mapping element is dragged in the thumbnail interface, the target element corresponding to the mapping element also moves in the canvas interface according to the proportional relation.

In the case that the user drags the mapping element in the thumbnail interface, the system will display the first movement track of the mapping element in the thumbnail interface. As shown in FIG. 3, FIG. 3 shows another schematic diagram of a canvas interface for a terminal display. The user drags the mapping element to be Y2 in the thumbnail interface, the target element corresponding to Y2 is C2, and G1 represents a first moving track, namely, how the user drags Y2 in the thumbnail interface is shown through G1.

In the process that the user drags the mapping element in the thumbnail interface, according to the first movement track of the mapping element in the thumbnail interface, displaying the second movement track of the target element in the canvas interface, namely, amplifying the first movement track through the proportional relation between the size of the thumbnail interface and the size of the canvas to obtain the second movement track of the target element, then displaying the second movement track of the target element in the canvas interface, and G2 represents the second movement track.

As shown in FIG. 4, FIG. 4 shows a schematic diagram of a canvas. Assuming that the canvas is divided into N regions, i.e., F1, F2,..fw., fn, e.g., B1 in the left diagram in fig. 3 corresponds to F1, as the position of the dragging of Y2 in the thumbnail interface gradually moves away from the initial position of Y2, the canvas interface displayed in the display screen of the terminal changes from F1 to other areas, for example, when the user drags Y2 to a position close to the right edge of B2, the canvas interface displayed in the display screen of the terminal is specifically Fn, that is, fn corresponds to B1 in the right diagram.

Step S140: and displaying the target element at a first position where the tail end of the second moving track is positioned in the canvas interface under the condition that the mapping element is released.

If the user stops dragging the mapping element in the abbreviated interface, namely the mapping element is released, displaying the target element at a first position at the tail end of the second movement track in the canvas interface, so that the target element is moved from an initial position to a new position where the user needs to place, the user does not need to drag the target element in the canvas interface for a long time to move the target element, the rapid movement of the element in the webpage canvas with a larger size is realized, and the user experience is improved. The first position is a position where the target element stops moving in the canvas interface. As shown in fig. 3, the position of C2 in the left diagram of fig. 3 is the initial position, the position of C '2 is the new position of C2, i.e. the moved position, and both C2 and C'2 are target elements.

The following describes a specific implementation of each step in the embodiment shown in fig. 1:

in a possible implementation manner, in the thumbnail interface, displaying the mapping element corresponding to the target element in the canvas interface includes the following scheme:

and displaying a mapping element corresponding to the target element in the canvas interface in the thumbnail interface under the condition that the target element is selected.

The displaying of the mapping element corresponding to the target element in the canvas interface in the abbreviated interface may be triggered by the user selecting the target element, i.e. no element is displayed in the abbreviated interface initially, and if the user selects a certain target element in the canvas interface, the mapping element corresponding to the target element is displayed in the abbreviated interface.

and displaying a mapping element corresponding to the target element in the canvas interface in the thumbnail interface under the condition that the target element is dragged from the canvas interface into the thumbnail interface.

The display of the mapping element corresponding to the target element in the canvas interface in the thumbnail interface may be triggered by the user dragging the selected target element to the thumbnail interface, i.e. no element is displayed in the thumbnail interface at first, if the user drags a certain target element selected in the canvas interface to the thumbnail interface, the target element is reduced according to the proportional relationship, so as to obtain the corresponding mapping element, and the mapping element is displayed in the thumbnail interface. The target element dragged to the thumbnail interface can be an entity of the target element displayed in the canvas interface or a copy of the target element displayed in the canvas interface.

reducing the target element according to the proportional relation to obtain the mapping element;

and displaying the mapping element in the thumbnail interface.

In order to keep the layout of the mapping elements in the thumbnail interface and the layout of the target elements corresponding to the mapping elements in the canvas interface in a one-to-one correspondence, the target elements are reduced according to the proportional relationship, the mapping elements are obtained, and then the mapping elements are displayed in the thumbnail interface. The area of the mapping element is smaller than that of the thumbnail interface, and the coordinates of the mapping element in the thumbnail interface are amplified according to the proportional relation, namely the coordinates of the corresponding target element in the canvas interface.

In a possible implementation manner, the displaying the target element at the first position where the end of the second movement track is located in the canvas interface includes the following schemes:

acquiring a second position of the terminal of the first moving track in the thumbnail interface;

expanding the second position according to the proportional relation to obtain a theoretical position of the tail end of the second movement track in the canvas interface;

Displaying the target element at the first position if the first position is the same as the theoretical position;

and determining the theoretical position as the first position when the first position is different from the theoretical position, and displaying the target element at the first position.

After the user stops dragging the mapping element in the thumbnail interface, the end position of the first movement track of the mapping element in the thumbnail interface, namely the second position, namely the new coordinate of the mapping element in the thumbnail interface, can be obtained, and then the second position is expanded according to the proportional relation to obtain the theoretical position of the end of the second movement track in the canvas interface, namely the theoretical coordinate of the new position of the target element after moving in the canvas interface. After the first position and the theoretical position are obtained, judging whether the first position and the theoretical position are the same, and if so, displaying the target element in the canvas interface according to the coordinates corresponding to the first position, namely, the first position is the new position of the target element. If the target element is different from the target element, determining the theoretical position as a first position, namely displaying the target element in the canvas interface according to the coordinates corresponding to the theoretical position, namely, determining the theoretical position as a new position of the target element, thereby ensuring the accuracy of the movement of the target element.

In a possible implementation manner, the expanding the second position according to the proportional relationship to obtain the theoretical position of the end of the second movement track in the canvas interface includes the following schemes:

acquiring a third position of the initial end of the first moving track in the thumbnail interface;

determining a distance between the third location and the second location;

and expanding the second position according to the proportional relation under the condition that the distance is larger than a preset value to obtain the theoretical position.

Considering an actual application scene, although the user drags the mapping element, the new position of the mapping element is the same as the original position or is almost close to the original position, and belongs to invalid dragging. Therefore, when calculating the theoretical position, whether the movement of the mapping element is effective or not needs to be judged, namely, a third position where the initial end of the first movement track is located is obtained, then the distance between the third position and the second position is calculated, if the distance is larger than a preset value, the second position is enlarged according to a proportion relation to obtain the theoretical position, and the updating of the target element position is realized; if the distance is less than or equal to the preset value, it indicates that the movement of the mapping element is invalid, and the updating of the target element position is not realized, i.e. the initial position of the target element is kept unchanged, i.e. the target element is not moved.

In a possible implementation manner, in the case that the mapping element is released, after the target element is displayed at the first position where the end of the second movement track is located in the canvas interface, the canvas element layout adjustment method further includes the following scheme:

and displaying the layout of each element in the canvas in the thumbnail interface.

After the new location of the target element is displayed in the canvas interface, i.e., the target element is moved from the initial location to the first location, the initial location no longer displays the target element, i.e., the layout of each element in the canvas interface is updated, so that the new layout of each element in the canvas interface is displayed in the abbreviated interface. As shown in FIG. 2, the initial layout of C1-C6 in the canvas interface is displayed in B1, as shown in FIG. 5, FIG. 5 shows a further schematic diagram of the canvas interface displayed by the terminal, the new layout of C1, C3-C6 in the canvas interface is displayed in B1, and as C2 moves, the new layout of C1-C6 in the canvas interface can be obtained by moving to other areas of the canvas, such as to the Fn area, at the moment that the new layout of the mapping elements Y1-Y6 corresponding to C1-C6 in the thumbnail interface is not displayed in B1, the new layout of Y1-Y6 in the thumbnail interface corresponds to the new layout of C1-C6 in the canvas, i.e. the new layout of Y1-Y6 in the thumbnail interface is enlarged according to the proportional relation, and the new layout of C1-C6 in the canvas can be visually seen through the new layout of Y1-Y6 in the thumbnail interface. If a certain target element in the canvas needs to be found quickly, the mapping element corresponding to the target element to be found can be directly selected in the abbreviated interface, the system can display the area where the target element corresponding to the selected mapping element is located, namely the currently displayed area of the canvas interface can be changed, namely the currently displayed area is replaced by the area where the target element corresponding to the selected mapping element is located, and therefore a user can see the target element to be found in the canvas interface.

Referring to fig. 4-6, assuming that the area currently displayed by B1 in fig. 5 is F1, after the user moves the target element in the canvas, C1, C3-C6 are located in F1, C2 is located in Fn, the user selects Y2 in B2, and the area F1 currently displayed by B1 is replaced with Fn, i.e. C2 is displayed, and the user can directly operate C2. By displaying the layout of each element in the canvas in the thumbnail interface, the user can conveniently and quickly locate the element to be operated, the time for the user to find the element to be operated under the canvas is shortened, and the use experience of the user is improved.

The following are examples of the apparatus of the present application that may be used to perform the method embodiments of the present application. For details not disclosed in the embodiments of the apparatus of the present application, please refer to the embodiments of the method of the present application.

Fig. 7 shows a schematic structural diagram of a canvas element layout adjustment device. Referring to fig. 7, the canvas element layout adjustment device shown in the figure may be implemented as all or a part of the terminal by software, hardware or a combination of the two, or may be integrated in the terminal or on a server as a separate module.

The canvas element layout adjustment device 700 in the embodiment of the present application, where the canvas element layout adjustment device 700 includes:

an interface display module 710 for displaying a thumbnail interface in a canvas interface; the size of the thumbnail interface has a proportional relation with the size of the canvas;

an element display module 720, configured to display, in the abbreviated interface, a mapping element corresponding to a target element in the canvas interface;

the track synchronization module 730 is configured to display, in the canvas interface, a second movement track of the target element according to the first movement track of the mapping element in the thumbnail interface when the mapping element is dragged;

and the interface updating module 740 is configured to display the target element at a first position where the end of the second movement track is located in the canvas interface if the mapping element is released.

In one possible implementation, the element display module 720 includes:

In a possible implementation manner, the element display module 720 further includes:

In a possible implementation manner, the interface updating module 740 includes:

In a possible implementation manner, the position calculating unit includes:

In a possible implementation manner, the canvas element layout adjustment device 700 further includes:

It should be noted that, when the canvas element layout adjustment device provided in the above embodiment executes the canvas element layout adjustment method, only the division of the above functional modules is used for illustrating, in practical application, the above functional allocation may be completed by different functional modules according to needs, that is, the internal structure of the device is divided into different functional modules, so as to complete all or part of the functions described above. In addition, the canvas element layout adjustment device and the canvas element layout adjustment method provided in the above embodiments belong to the same concept, so for details not disclosed in the embodiments of the device of the present application, please refer to the embodiments of the canvas element layout adjustment method described in the above embodiments of the present application, and the details are not repeated here.

The foregoing embodiment numbers of the present application are merely for the purpose of description, and do not represent the advantages or disadvantages of the embodiments.

The present application also provides a computer readable storage medium having stored thereon a computer program which when executed by a processor performs the steps of the method of any of the previous embodiments. The computer readable storage medium may include, among other things, any type of disk including floppy disks, optical disks, DVDs, CD-ROMs, micro-drives, and magneto-optical disks, ROM, RAM, EPROM, EEPROM, DRAM, VRAM, flash memory devices, magnetic or optical cards, nanosystems (including molecular memory ICs), or any type of media or device suitable for storing instructions and/or data.

The embodiment of the application also provides an electronic device, which comprises a memory, a processor and a computer program stored on the memory and capable of running on the processor, wherein the processor realizes the steps of the method of any embodiment when executing the program.

Fig. 8 shows a schematic structural diagram of the electronic device. Referring to fig. 8, an electronic device 800 includes: a processor 801 and a memory 802.

In the embodiment of the present application, the processor 801 is a control center of a computer system, and may be a processor of a physical machine or a processor of a virtual machine. Processor 801 may include one or more processing cores, such as a 4-core processor, an 8-core processor, and the like. The processor 801 may be implemented in at least one hardware form of DSP (Digital Signal Processing ), FPGA (Field-Programmable Gate Array, field programmable gate array), PLA (Programmable Logic Array ). The processor 801 may also include a main processor, which is a processor for processing data in an awake state, also referred to as a CPU (Central Processing Unit ), and a coprocessor; a coprocessor is a low-power processor for processing data in a standby state.

In the embodiment of the present application, the processor 801 is specifically configured to: displaying a thumbnail interface in the canvas interface; the size of the thumbnail interface has a proportional relation with the size of the canvas; displaying a mapping element corresponding to a target element in the canvas interface in the thumbnail interface; displaying a second moving track of the target element in the canvas interface according to a first moving track of the mapping element in the thumbnail interface under the condition that the mapping element is dragged; and displaying the target element at a first position where the tail end of the second moving track is positioned in the canvas interface under the condition that the mapping element is released.

Further, the above processor 801 is further configured to: and displaying a mapping element corresponding to the target element in the canvas interface in the thumbnail interface under the condition that the target element is selected.

Further, the above processor 801 is further configured to: and displaying a mapping element corresponding to the target element in the canvas interface in the thumbnail interface under the condition that the target element is dragged from the canvas interface into the thumbnail interface.

Further, the above processor 801 is further configured to: reducing the target element according to the proportional relation to obtain the mapping element; and displaying the mapping element in the thumbnail interface.

Further, the above processor 801 is further configured to: acquiring a second position of the terminal of the first moving track in the thumbnail interface; expanding the second position according to the proportional relation to obtain a theoretical position of the tail end of the second movement track in the canvas interface; displaying the target element at the first position if the first position is the same as the theoretical position; and determining the theoretical position as the first position when the first position is different from the theoretical position, and displaying the target element at the first position.

Further, the above processor 801 is further configured to: acquiring a third position of the initial end of the first moving track in the thumbnail interface; determining a distance between the third location and the second location; and expanding the second position according to the proportional relation under the condition that the distance is larger than a preset value to obtain the theoretical position.

Further, the above processor 801 is further configured to: and displaying the layout of each element in the canvas in the thumbnail interface.

Memory 802 may include one or more computer-readable storage media, which may be non-transitory. Memory 802 may also include high-speed random access memory, as well as non-volatile memory, such as one or more magnetic disk storage devices, flash memory storage devices. In some embodiments of the application, a non-transitory computer readable storage medium in memory 802 is used to store at least one instruction for execution by processor 801 to implement the methods of embodiments of the application.

In some embodiments, the electronic device 800 further includes: a peripheral interface 803, and at least one peripheral. The processor 801, the memory 802, and the peripheral interface 803 may be connected by a bus or signal line. Individual peripheral devices may be connected to the peripheral device interface 803 by buses, signal lines, or a circuit board. Specifically, the peripheral device includes: at least one of a display 804, a camera 805, and an audio circuit 806.

Peripheral interface 803 may be used to connect at least one Input/Output (I/O) related peripheral to processor 801 and memory 802. In some embodiments of the application, processor 801, memory 802, and peripheral interface 803 are integrated on the same chip or circuit board; in some other embodiments of the application, either or both of the processor 801, memory 802, and peripheral interface 803 may be implemented on separate chips or circuit boards. The embodiment of the present application is not particularly limited thereto.

The display 804 is used to display a UI (User Interface). The UI may include graphics, text, icons, video, and any combination thereof. When the display 804 is a touch display, the display 804 also has the ability to collect touch signals at or above the surface of the display 804. The touch signal may be input as a control signal to the processor 801 for processing. At this point, the display 804 may also be used to provide virtual buttons and/or virtual keyboards, also referred to as soft buttons and/or soft keyboards. In some embodiments of the application, the display 804 may be one, providing a front panel of the electronic device 800; in other embodiments of the present application, the display 804 may be at least two, respectively disposed on different surfaces of the electronic device 800 or in a folded design; in still other embodiments of the present application, the display 804 may be a flexible display disposed on a curved surface or a folded surface of the electronic device 800. Even more, the display 804 may be arranged in a non-rectangular irregular pattern, i.e., a shaped screen. The display 804 may be made of LCD (Liquid Crystal Display ), OLED (Organic Light-Emitting Diode) or other materials.

The camera 805 is used to capture images or video. Optionally, the camera 805 includes a front camera and a rear camera. Typically, a front camera is disposed on a front panel of the electronic device 800, and a rear camera is disposed on a rear surface of the electronic device 800. In some embodiments, the at least two rear cameras are any one of a main camera, a depth camera, a wide-angle camera and a tele camera, so as to realize that the main camera and the depth camera are fused to realize a background blurring function, and the main camera and the wide-angle camera are fused to realize a panoramic shooting and Virtual Reality (VR) shooting function or other fusion shooting functions. In some embodiments of the application, camera 805 may also include a flash. The flash lamp can be a single-color temperature flash lamp or a double-color temperature flash lamp. The dual-color temperature flash lamp refers to a combination of a warm light flash lamp and a cold light flash lamp, and can be used for light compensation under different color temperatures.

The audio circuitry 806 may include a microphone and a speaker. The microphone is used for collecting sound waves of users and the environment, converting the sound waves into electric signals and inputting the electric signals to the processor 801 for processing. For purposes of stereo acquisition or noise reduction, the microphone may be multiple and separately disposed at different locations of the electronic device 800. The microphone may also be an array microphone or an omni-directional pickup microphone.

The power supply 807 is used to power the various components in the electronic device 800. The power source 807 may be alternating current, direct current, disposable or rechargeable. When the power source 807 includes a rechargeable battery, the rechargeable battery may be a wired rechargeable battery or a wireless rechargeable battery. The wired rechargeable battery is a battery charged through a wired line, and the wireless rechargeable battery is a battery charged through a wireless coil. The rechargeable battery may also be used to support fast charge technology.

The block diagram of the electronic device 800 shown in the embodiments of the present application is not limiting of the electronic device 800, and the electronic device 800 may include more or less components than illustrated, or may combine some of the components, or may employ a different arrangement of components.

In the description of the present application, it should be understood that the terms "first," "second," and the like are used for descriptive purposes only and are not to be construed as indicating or implying relative importance. The specific meaning of the above terms in the present application will be understood in specific cases by those of ordinary skill in the art. Furthermore, in the description of the present application, unless otherwise indicated, "a plurality" means two or more. "and/or", describes an association relationship of an association object, and indicates that there may be three relationships, for example, a and/or B, and may indicate: a exists alone, A and B exist together, and B exists alone. The character "/" generally indicates that the context-dependent object is an "or" relationship.

The foregoing is merely illustrative of the present application, and the present application is not limited thereto, and any person skilled in the art will readily recognize that variations or substitutions are within the scope of the present application. Accordingly, equivalent variations from the claims of the present application are intended to be covered by the present application.

Claims

1. A canvas element layout adjustment method, the canvas element layout adjustment method comprising:

displaying a thumbnail interface in the canvas interface; the size of the thumbnail interface has a proportional relation with the size of the canvas;

displaying a mapping element corresponding to a target element in the canvas interface in the thumbnail interface;

displaying a second moving track of the target element in the canvas interface according to a first moving track of the mapping element in the thumbnail interface under the condition that the mapping element is dragged;

and displaying the target element at a first position where the tail end of the second moving track is positioned in the canvas interface under the condition that the mapping element is released.

2. The canvas element layout adjustment method according to claim 1, wherein displaying, in the abbreviated interface, a mapping element corresponding to a target element in the canvas interface comprises:

3. The canvas element layout adjustment method according to claim 1, wherein displaying, in the abbreviated interface, a mapping element corresponding to a target element in the canvas interface comprises:

4. The canvas element layout adjustment method as claimed in any one of claims 1 to 3, wherein said displaying, in said abbreviated interface, a mapping element corresponding to a target element in said canvas interface comprises:

and displaying the mapping element in the thumbnail interface.

5. The canvas element layout adjustment method as claimed in any one of claims 1 to 3, wherein said displaying said target element at a first location in said canvas interface where an end of said second movement track is located comprises:

6. The canvas element layout adjustment method according to claim 5, wherein said expanding said second position according to said scaling relationship to obtain a theoretical position of an end of said second movement trajectory in said canvas interface comprises:

determining a distance between the third location and the second location;

7. The canvas element layout adjustment method as claimed in any one of claims 1 to 3, wherein, in the case where the mapped element is released, after the target element is displayed at the first position in the canvas interface where the end of the second movement track is located, the canvas element layout adjustment method further comprises:

8. A canvas element layout adjustment device, the canvas element layout adjustment device comprising:

9. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the canvas element layout adjustment method as claimed in any one of claims 1 to 7 when the computer program is executed by the processor.

10. A computer readable storage medium having stored thereon a computer program which when executed by a processor implements the canvas element layout adjustment method as claimed in any one of claims 1 to 7.