Design element custom rotation method and device

By providing customized rotation methods and preview functions in the UI interface design tool, the problem of design elements being unable to customize rotation and batch rotation is solved, improving the designer's rotation operation efficiency and accuracy.

CN119105745APending Publication Date: 2024-12-10BEIJING CHUANGZUOMEIHAO TECH CO LTD
View PDF 0 Cites 0 Cited by

Patent Information

Application Number
CN202411178938.2
Authority / Receiving Office
CN · China
Patent Type
Applications(China)
Current Assignee / Owner
Filing Date
2024-08-27
Publication Date
2024-12-10

AI Technical Summary

Technical Problem

In the existing UI interface design tools, design elements cannot be rotated in custom, and the rotation center is fixed at the center of the element layer, and cannot be rotated in batches. The lack of preview function makes designers expensive operation and difficult to meet expectations.

Method used

Provides custom rotation methods in design software, allowing designers to select target layers in the canvas, initialize the rotation center logo, and customize rotation through handle operations and panel operations, generate preview copies in real time, and support rotation and copying and resetting Adjustment of center point, radius length and rotation angle.

Benefits of technology

It improves the accuracy and efficiency of the designer in rotation operation, reduces the time for adjusting the rotation effect, provides a preview function to facilitate prediction of the rotation effect, and reduces the operating cost.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN119105745A_ABST
    Figure CN119105745A_ABST
Patent Text Reader

Abstract

The invention discloses a design element custom rotation method and device, and the method comprises the steps: selecting a target layer comprising at least one design element in a canvas page in design software; initializing a rotation center identifier at a preset position of the target layer, wherein the position of the rotation center identifier can be freely dragged; responding to self-defined rotation operation of the target layer based on the rotation center, wherein operation modes of the self-defined rotation operation comprise handle operation and panel operation; the operation attributes of the panel operation include but are not limited to rotation, copying and resetting of a center point, radius length and a rotation angle; and according to the rotation center, radius length, rotation angle and / or rotation number of the target layer, generating at least one preview copy of the target layer in real time, and determining a rotation layer of the target layer from the preview copy. According to the method, multiple flexible adjustment modes are provided for custom rotation operation of the design elements, and the preview copy is generated in real time, so that a designer can perform rotation operation more efficiently and accurately.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The present invention relates to the technical field of software design, and in particular to a method and device for user-defined rotation of design elements. Background Art

[0002] So far, in UI interface design tools, all layers (including design elements in the design draft such as text, shapes, icons, etc.) do not support custom rotation. They can only rotate around the center point of the element layer itself, and the rotation center point cannot be customized. In addition, it is not possible to perform batch rotation operations multiple times at a time, and it is not possible to retain each rotated layer during batch rotation. There is no preview function for the rotation effect before batch operation.

[0003] The above problems result in higher operating costs for designers to rotate layers, and the rotation effect is difficult to meet the expected design requirements. Designers cannot perform rotation operations more efficiently and accurately, and it is difficult to determine in advance whether the rotated position is correct.

[0004] To solve the above problems, the present invention develops a method and device for customizing the rotation of design elements, which provides a variety of flexible adjustment methods for customizing the rotation operation of design elements and generates preview copies in real time, so that designers can perform rotation operations more efficiently and accurately. Summary of the invention

[0005] In view of the above problems, a method and device for customizing the rotation of design elements are proposed to facilitate designers to perform rotation operations more efficiently and accurately.

[0006] According to one aspect of the present invention, a method for customizing rotation of a design element is provided, comprising:

[0007] In the canvas page of the design software, select a target layer that includes at least one design element;

[0008] Initializing a rotation center mark at a preset position of the target layer, wherein the preset position is by default directly below the target layer, and the position of the rotation center mark can be freely dragged;

[0009] In response to a custom rotation operation of the target layer based on the rotation center, wherein the operation mode of the custom rotation operation includes a handle operation and a panel operation; the operation properties of the panel operation include but are not limited to rotate and copy, reset center point, radius length, and rotation angle;

[0010] At least one preview copy of the target layer is generated in real time according to the rotation center, radius length, rotation angle and / or rotation amount of the target layer, and a rotation layer of the target layer is determined from the preview copy.

[0011] In an optional manner, the method further includes:

[0012] When the radius length of the target layer is adjusted by the operation mode of the handle operation, the value of the radius length in the panel operation changes accordingly;

[0013] After editing the radius length of the panel operation, the handle angle of the handle operation no longer changes.

[0014] In an optional manner, the method further includes:

[0015] After the operation of resetting the center point of the target layer is performed, the rotation center mark is restored to the preset position.

[0016] In an optional manner, the method further includes:

[0017] When the operation attribute of rotating and copying the target layer is selected, a preset number of copy layers are displayed in the preview area or preview window of the panel operation, and the copy layers are evenly distributed in a ring matrix; wherein the shape of the ring matrix includes but is not limited to an ellipse, a perfect circle, a rectangle and a square;

[0018] The copied layer inherits the style of the target layer. When the style of the target layer is modified, the first layer style of the copied layer follows the style of the target layer and changes accordingly to obtain the second layer style. Also, during the operation of rotating and copying the target layer, if the target layer is deleted, the copy operation is interrupted and the style of the copied layer returns from the second layer style to the first layer style.

[0019] In an optional manner, the method further includes:

[0020] After performing the first rotational copying on the target layer, automatically creating the copied first copy layer and the first target layer as a first-level grouping;

[0021] Automatically convert the first target layer in the first level group into a first component, and automatically convert the first copy layer into a first instance;

[0022] If a single graphic in the first-level group is rotated and copied for a second time, a second-level group will be automatically created in the first-level group for the second copy layer, and so on.

[0023] In an optional manner, the method further includes:

[0024] When the rotation angle of the target layer is adjusted by the operation mode of the handle operation, the value of the rotation angle in the panel operation changes accordingly; at the same time, after the rotation angle of the panel operation is edited, the rotation range of the handle operation changes accordingly with the value of the rotation angle;

[0025] Wherein, when the handle node position of the handle operation is equal to 360 degrees, only the drag handle is dragged counterclockwise;

[0026] When the handle node position of the handle operation is less than 360 degrees, the drag handle is dragged clockwise or counterclockwise;

[0027] When the handle node position of the handle operation is equal to 0 degrees, the drag handle is only dragged clockwise, and all the copied layers are set to overlap 100%.

[0028] In an optional manner, the method further includes:

[0029] During the process of rotating and duplicating the target layer on the authoring side, the collaborator can freely delete the target layer or the duplicate layer;

[0030] After the target layer or the copy layer is deleted on the collaboration side, on the creation side, if the target layer or the copy layer is in an editable state, the layer deleted on the collaboration side is automatically restored.

[0031] In an optional manner, the method further includes:

[0032] In the preview area of ​​the panel operation, the rotation amount of the target layer is automatically calculated according to the input radius length and rotation angle; or, the rotation angle of the target layer is automatically calculated according to the input radius length and rotation amount.

[0033] In an optional manner, the method further includes:

[0034] Automatically marking the serial numbers of the layers in the annular matrix in a pseudo-clockwise or clockwise direction, wherein the target layer in the annular matrix is ​​highlighted;

[0035] When part of the duplicated layers are deleted, the sequence numbers of the layers in the annular matrix are readjusted.

[0036] According to another aspect of the present application, a design element custom rotation device is provided, comprising:

[0037] A target layer selection module is used to select a target layer including at least one design element in a canvas page in a design software;

[0038] A rotation center identification module, used to initialize the rotation center identification at a preset position of the target layer, wherein the preset position is by default directly below the target layer, and the position of the rotation center identification can be freely dragged;

[0039] A custom rotation module, used to respond to the custom rotation operation of the target layer based on the rotation center, wherein the operation mode of the custom rotation operation includes handle operation and panel operation; the operation properties of the panel operation include but are not limited to rotate and copy, reset center point, radius length and rotation angle;

[0040] The layer preview and determination module is used to generate at least one preview copy of the target layer in real time according to the rotation center, radius length, rotation angle and / or rotation amount of the target layer, and determine the rotation layer of the target layer from the preview copy.

[0041] The solution provided by the above embodiment of the present invention is, in the canvas page in the design software, selecting a target layer including at least one design element; initializing a rotation center mark at a preset position of the target layer, wherein the preset position defaults to being directly below the target layer, and the position of the rotation center mark can be freely dragged; responding to a custom rotation operation of the target layer based on the rotation center, wherein the operation mode of the custom rotation operation includes handle operation and panel operation; the operation properties of the panel operation include but are not limited to rotate and copy, reset center point, radius length, and rotation angle; generating at least one preview copy of the target layer in real time according to the rotation center, radius length, rotation angle, and / or rotation amount of the target layer, and determining the rotation layer of the target layer from the preview copy. The present invention provides a variety of flexible adjustment methods for custom rotation operations of design elements and generates preview copies in real time, so that designers can perform rotation operations more efficiently and accurately.

[0042] The above description is only an overview of the technical solution of the present invention. In order to more clearly understand the technical means of the present invention, it can be implemented according to the contents of the specification. In order to make the above description and other purposes, features and advantages of the present invention more obvious and easy to understand, the specific implementation methods of the present invention are listed below. BRIEF DESCRIPTION OF THE DRAWINGS

[0043] Various other advantages and benefits will become apparent to those of ordinary skill in the art by reading the detailed description of the preferred embodiments below. The accompanying drawings are only for the purpose of illustrating the preferred embodiments and are not to be considered as limiting the present invention. Moreover, the same reference symbols are used throughout the accompanying drawings to represent the same components. In the accompanying drawings:

[0044] Figure 1A schematic diagram showing a flow chart of a method for customizing rotation of design elements according to an embodiment of the present invention is shown;

[0045] Figure 2 A schematic diagram showing the panel operation of an embodiment of the present invention;

[0046] Figure 3 Schematic diagram showing layer preview and confirmation operation of an embodiment of the present invention Figure 1 ;

[0047] Figure 4 A schematic diagram of layer preview according to an embodiment of the present invention is shown;

[0048] Figure 5 Schematic diagram showing layer preview and confirmation operation of an embodiment of the present invention Figure 2 ;

[0049] Figure 6 A functional structure diagram of a design element custom rotation method device according to an embodiment of the present invention is shown. DETAILED DESCRIPTION

[0050] The exemplary embodiments of the present invention will be described in more detail below with reference to the accompanying drawings. Although the exemplary embodiments of the present invention are shown in the accompanying drawings, it should be understood that the present invention can be implemented in various forms and should not be limited by the embodiments set forth herein. On the contrary, these embodiments are provided in order to enable a more thorough understanding of the present invention and to enable the scope of the present invention to be fully communicated to those skilled in the art.

[0051] Before implementing the embodiments of the present invention, the technical terms or custom terms involved below are uniformly explained here:

[0052] Components: They allow the UI to be divided into independent, reusable parts. In practical applications, components are often organized into a nested tree structure.

[0053] Instance: An instance is a specific reference to a component. What the user drags from the component list or copies and pastes from a component is an "instance" rather than the component itself.

[0054] The following describes in detail the design element custom rotation method and device proposed by the present invention through specific embodiments.

[0055] Embodiment 1:

[0056] Figure 1 FIG. 1 is a functional structure diagram of a method for self-defined rotation of design elements according to an embodiment of the present invention. Specifically, Figure 1 As shown, the following steps are included:

[0057] Step S101, in a canvas page in a design software, select a target layer including at least one design element.

[0058] like Figure 3 As shown, select any layer that needs to be rotated (such as the original graphic effect on the canvas on the left) as the target layer, find and click the "Rotate Copy" plug-in or button in the menu or quick operation of the design draft, and then you can set the rotation parameters of the target layer (such as rotation angle, number of copies, rotation center point, etc.).

[0059] Step S102, initializing a rotation center mark at a preset position of the target layer, wherein the preset position is by default directly below the target layer, and the position of the rotation center mark can be freely dragged.

[0060] In this embodiment, a rotation center mark is automatically created on the canvas in a visual form for the preset position of the target layer. The preset position is by default directly below the target layer, but the designer can freely adjust it as needed (such as freely dragging the rotation center mark to any position on the canvas). In addition, after the designer drags the rotation center mark to the desired position, he can choose to lock the position to prevent it from being accidentally moved in subsequent operations. After determining the position of the rotation center mark, the rotated and copied layer can be generated through subsequent rotation operations. Figure 4 As shown, there is a small gray dot directly below the ellipse, which serves as the initial rotation center mark of the target layer. The ellipse can be rotated through this small gray dot.

[0061] The rotation operation in current design software usually uses the geometric center of the layer as the default rotation point. Each time the layer is reselected, the rotation center needs to be readjusted, which consumes a lot of time and limits the designer's creative expression. In this embodiment, the designer can customize the position of the rotation center according to the design requirements and fix it (for example, set the rotation center at a specific corner, or determine the position of the rotation center according to the distribution of elements in the layer), and is no longer limited to the fixed center point of the layer. By visualizing the position of the rotation center, it is easier for the designer to grasp the exact position of the rotation center (the icon can be easily rotated around the center point), providing better interactivity and control, making the entire design process smoother and more natural, improving the accuracy of the rotation operation, and reducing the time of repeated attempts when adjusting the rotation effect.

[0062] Step S103, responding to the custom rotation operation of the target layer based on the rotation center, wherein the operation mode of the custom rotation operation includes handle operation and panel operation; the operation properties of the panel operation include but are not limited to rotate and copy, reset center point, radius length and rotation angle.

[0063] Through handle operation and panel operation, designers can control the rotation effect of the layer more flexibly and accurately. Among them, the handle operation directly interacts with the rotation handle of the target layer to perform the rotation operation. The designer can directly drag the rotation handle to change the rotation angle of the layer. During the dragging process, the rotation status of the target layer is updated in real time, which is convenient for instant adjustment. The panel operation is to control the various parameters of the rotation operation through controls such as text boxes in the UI panel. Figure 2 As shown, Rotate and Copy (checkbox) allows the designer to create copies of the layer while rotating, spaced at a specified rotation angle or amount. Reset Center Point resets the rotation center point to the default position or another user-defined position. Radius Length controls the distance between the rotated layer and the rotation center. Rotation Angle sets the exact angle value of the layer rotation for more fine-grained control.

[0064] like Figures 2 to 5 As shown, use the handle operation or the "Reset Center Point" function in the panel operation to set the position of the rotation center, or set the rotation center to any position on the canvas. Use the handle operation to directly drag the rotation handle to adjust the rotation angle. Alternatively, enter a precise angle value in the panel operation for more precise control. Use the "Rotate and Copy" function in the panel operation to create a copy of the target layer and automatically arrange these copies at a preset angle interval. Fine-tune the rotation angle or position of each layer as needed until a satisfactory design effect is achieved. The above two methods can more accurately control the rotation effect of the layer.

[0065] In an optional manner, when the radius length of the target layer is adjusted by the operation of the handle, the value of the radius length in the panel operation changes accordingly;

[0066] After editing the radius length of the panel operation, the handle angle of the handle operation no longer changes.

[0067] In this embodiment, when the designer changes the radius length by dragging the handle, the radius length value in the panel operation is immediately updated, ensuring that the designer can view the current radius length value at any time. After the radius length is edited in the panel operation, the handle angle of the handle operation will no longer change, which means that the handle angle of the handle operation will be locked in the current position, which can prevent accidental changes to the radius length value that has been accurately set. Designers can make quick adjustments and intuitive operations through handle operations, and make precise settings and subtle adjustments through panel operations.

[0068] In an optional manner, after the operation of resetting the center point of the target layer is performed, the rotation center marker is restored to the preset position.

[0069] In this embodiment, after manually dragging the rotation center point, click the reset center point button to return the rotation center point to its initial position regardless of the current position of the rotation center point, so that the designer can quickly return the rotation center point and avoid errors caused by inaccurate manual adjustment of the position.

[0070] In an optional manner, when the rotation angle of the target layer is adjusted by the operation mode of the handle operation, the value of the rotation angle in the panel operation changes accordingly; at the same time, after the rotation angle of the panel operation is edited, the rotation range of the handle operation changes accordingly with the value of the rotation angle;

[0071] Wherein, when the handle node position of the handle operation is equal to 360 degrees, only the drag handle is dragged counterclockwise;

[0072] When the handle node position of the handle operation is less than 360 degrees, the drag handle is dragged clockwise or counterclockwise;

[0073] When the handle node position of the handle operation is equal to 0 degrees, the drag handle is only dragged clockwise, and all the copied layers are set to overlap 100%.

[0074] In this embodiment, clockwise and counterclockwise operations refer to the direction in which the handle moves around the rotation center point. When the handle node position is 360 degrees (i.e., a complete rotation), the handle can only be dragged counterclockwise. When the handle node position is less than 360 degrees, the handle can be dragged clockwise or counterclockwise. When the handle node position is 0 degrees, the handle can only be dragged clockwise, and all duplicate layers will be set to 100% overlap.

[0075] In an optional manner, in the preview area of ​​the panel operation, the rotation amount of the target layer is automatically calculated based on the input radius length and rotation angle; or, the rotation angle of the target layer is automatically calculated based on the input radius length and rotation amount.

[0076] In this embodiment, when the designer inputs the radius length and the rotation angle, the required rotation amount is automatically calculated. Alternatively, when the radius length and the rotation amount are input, the corresponding rotation angle is automatically calculated. The designer can focus on the creative part without spending time on complex mathematical calculations. At the same time, the automatic calculation can ensure the high accuracy required for the rotation operation and avoid design deviations caused by manual calculation errors.

[0077] Step S104, generating at least one preview copy of the target layer in real time according to the rotation center, radius length, rotation angle and / or rotation amount of the target layer, and determining the rotation layer of the target layer from the preview copy.

[0078] In this embodiment, a function of creating a reserved preview copy is provided, such as Figure 5 As shown, when rotating a layer, at least one copy is created based on the original layer (target layer) and retained in the canvas. Designers can quickly evaluate the visual effects under different rotation parameters, making it easier to determine in advance whether the rotation effect meets expectations.

[0079] In an optional manner, when the operation attribute of rotating and copying the target layer is selected, a preset number of copy layers are displayed in the preview area or preview window of the panel operation, and the copy layers are evenly distributed in a ring matrix; wherein the shape of the ring matrix includes but is not limited to an ellipse, a perfect circle, a rectangle and a square;

[0080] The copied layer inherits the style of the target layer. When the style of the target layer is modified, the first layer style of the copied layer follows the style of the target layer and changes accordingly to obtain the second layer style. Also, during the operation of rotating and copying the target layer, if the target layer is deleted, the copy operation is interrupted and the style of the copied layer returns from the second layer style to the first layer style.

[0081] In this embodiment, Figures 2 to 5 As shown in the figure, when the user selects the "Rotate and Copy" operation, a series of preview effects of the copied layers are displayed in the preview area or preview window. The copied layers are evenly distributed in a ring matrix, which can be in the shape of an ellipse, a perfect circle, a rectangle or a square. The copied layers inherit all the style attributes of the target layer (including color, transparency, border, etc.). When the style of the target layer changes, the style of the copied layer also changes accordingly. If the target layer is deleted during the operation, the copied layer will be restored to its original state (that is, the style before modification).

[0082] In an optional manner, after the target layer is rotated and copied for the first time, the copied first copy layer and the first target layer are automatically created as a first-level grouping;

[0083] Automatically convert the first target layer in the first level group into a first component, and automatically convert the first copy layer into a first instance;

[0084] If a single graphic in the first-level group is rotated and copied for a second time, a second-level group will be automatically created in the first-level group for the second copy layer, and so on.

[0085] In this embodiment, the rotation copy operation is used to automatically copy and group, so that complex graphic designs can be built more quickly without manually repeating the same operation. The design draft can be kept consistent through components and instances, for example, by adjusting the component, all instances are affected. In addition, multi-level grouping can facilitate the management and organization of complex layers.

[0086] In an optional manner, during the process of rotating and duplicating the target layer on the authoring side, the collaborator can freely delete the target layer or the duplicate layer;

[0087] After the target layer or the copy layer is deleted on the collaboration side, on the creation side, if the target layer or the copy layer is in an editable state, the layer deleted on the collaboration side is automatically restored.

[0088] For example, collaborators can work on the same project in real time and see each other's changes immediately. If a collaborator accidentally deletes a layer, the creator can easily restore the deleted layer in the editing state. This reduces communication costs and improves team work efficiency.

[0089] In an optional manner, the serial numbers of the layers in the annular matrix are automatically marked in a pseudo-clockwise or clockwise direction, wherein the target layer in the annular matrix is ​​highlighted;

[0090] When part of the duplicated layers are deleted, the sequence numbers of the layers in the annular matrix are readjusted.

[0091] In this embodiment, the ring matrix is ​​used as a layout method, and all layers are distributed around a center point and arranged along the circumferential direction. The layers are numbered according to the order of their positions in the ring matrix (either clockwise or counterclockwise). The target layer is highlighted by different colors or border styles to facilitate quick identification and operation. When one or more layers are deleted, the serial numbers of all affected layers are moved forward or backward accordingly to maintain the continuity of the sequence.

[0092] The solution provided by the above embodiment of the present invention is, in the canvas page in the design software, selecting a target layer including at least one design element; initializing a rotation center mark at a preset position of the target layer, wherein the preset position defaults to being directly below the target layer, and the position of the rotation center mark can be freely dragged; responding to a custom rotation operation of the target layer based on the rotation center, wherein the operation mode of the custom rotation operation includes handle operation and panel operation; the operation properties of the panel operation include but are not limited to rotate and copy, reset center point, radius length, and rotation angle; generating at least one preview copy of the target layer in real time according to the rotation center, radius length, rotation angle, and / or rotation amount of the target layer, and determining the rotation layer of the target layer from the preview copy. The present invention provides a variety of flexible adjustment methods for custom rotation operations of design elements and generates preview copies in real time, so that designers can perform rotation operations more efficiently and accurately.

[0093] Embodiment 2:

[0094] Figure 6 The functional structure diagram of the device provided in the embodiment of the present application is shown. Figure 6 As shown, the device comprises:

[0095] The target layer selection module 601 is used to select a target layer including at least one design element in a canvas page in the design software;

[0096] A rotation center identification module 602 is used to initialize a rotation center identification at a preset position of the target layer, wherein the preset position is by default directly below the target layer, and the position of the rotation center identification can be freely dragged;

[0097] A custom rotation module 603 is used to respond to a custom rotation operation of the target layer based on the rotation center, wherein the operation mode of the custom rotation operation includes a handle operation and a panel operation; the operation properties of the panel operation include but are not limited to rotate and copy, reset center point, radius length and rotation angle;

[0098] The layer preview and determination module 604 is used to generate at least one preview copy of the target layer in real time according to the rotation center, radius length, rotation angle and / or rotation amount of the target layer, and determine the rotation layer of the target layer from the preview copy.

[0099] In an optional manner, the rotation center identification module 602 is further used to:

[0100] When the radius length of the target layer is adjusted by the operation mode of the handle operation, the value of the radius length in the panel operation changes accordingly;

[0101] After editing the radius length of the panel operation, the handle angle of the handle operation no longer changes.

[0102] In an optional manner, the custom rotation module 603 is further used to:

[0103] After the operation of resetting the center point of the target layer is performed, the rotation center mark is restored to the preset position.

[0104] In an optional manner, the custom rotation module 603 is further used to:

[0105] When the operation attribute of rotating and copying the target layer is selected, a preset number of copy layers are displayed in the preview area or preview window of the panel operation, and the copy layers are evenly distributed in a ring matrix; wherein the shape of the ring matrix includes but is not limited to an ellipse, a perfect circle, a rectangle and a square;

[0106] The copied layer inherits the style of the target layer. When the style of the target layer is modified, the first layer style of the copied layer follows the style of the target layer and changes accordingly to obtain the second layer style. Also, during the operation of rotating and copying the target layer, if the target layer is deleted, the copy operation is interrupted and the style of the copied layer returns from the second layer style to the first layer style.

[0107] In an optional manner, the custom rotation module 603 is further used to:

[0108] After performing the first rotational copying on the target layer, automatically creating the copied first copy layer and the first target layer as a first-level grouping;

[0109] Automatically convert the first target layer in the first level group into a first component, and automatically convert the first copy layer into a first instance;

[0110] If a single graphic in the first-level group is rotated and copied for a second time, a second-level group will be automatically created in the first-level group for the second copy layer, and so on.

[0111] In an optional manner, the custom rotation module 603 is further used to:

[0112] When the rotation angle of the target layer is adjusted by the operation mode of the handle operation, the value of the rotation angle in the panel operation changes accordingly; at the same time, after the rotation angle of the panel operation is edited, the rotation range of the handle operation changes accordingly with the value of the rotation angle;

[0113] Wherein, when the handle node position of the handle operation is equal to 360 degrees, only the drag handle is dragged counterclockwise;

[0114] When the handle node position of the handle operation is less than 360 degrees, the drag handle is dragged clockwise or counterclockwise;

[0115] When the handle node position of the handle operation is equal to 0 degrees, the drag handle is only dragged clockwise, and all the copied layers are set to overlap 100%.

[0116] In an optional manner, the custom rotation module 603 is further used to:

[0117] During the process of rotating and duplicating the target layer on the authoring side, the collaborator can freely delete the target layer or the duplicate layer;

[0118] After the target layer or the copy layer is deleted on the collaboration side, on the creation side, if the target layer or the copy layer is in an editable state, the layer deleted on the collaboration side is automatically restored.

[0119] In an optional manner, the custom rotation module 603 is further used to:

[0120] In the preview area of ​​the panel operation, the rotation amount of the target layer is automatically calculated according to the input radius length and rotation angle; or, the rotation angle of the target layer is automatically calculated according to the input radius length and rotation amount.

[0121] In an optional manner, the custom rotation module 603 is further used to:

[0122] Automatically marking the serial numbers of the layers in the annular matrix in a pseudo-clockwise or clockwise direction, wherein the target layer in the annular matrix is ​​highlighted;

[0123] When part of the duplicated layers are deleted, the sequence numbers of the layers in the annular matrix are readjusted.

[0124] The solution provided by the above embodiment of the present invention is, in the canvas page in the design software, selecting a target layer including at least one design element; initializing a rotation center mark at a preset position of the target layer, wherein the preset position defaults to being directly below the target layer, and the position of the rotation center mark can be freely dragged; responding to a custom rotation operation of the target layer based on the rotation center, wherein the operation mode of the custom rotation operation includes handle operation and panel operation; the operation properties of the panel operation include but are not limited to rotate and copy, reset center point, radius length, and rotation angle; generating at least one preview copy of the target layer in real time according to the rotation center, radius length, rotation angle, and / or rotation amount of the target layer, and determining the rotation layer of the target layer from the preview copy. The present invention provides a variety of flexible adjustment methods for custom rotation operations of design elements and generates preview copies in real time, so that designers can perform rotation operations more efficiently and accurately.

[0125] The algorithm or display provided herein is not inherently related to any particular computer, virtual system or other equipment. Various general purpose systems can also be used together with the teachings based on this. According to the above description, it is obvious to construct the structure required for this type of system. In addition, the embodiment of the present invention is not directed to any specific programming language yet. It should be understood that various programming languages ​​can be utilized to realize the content of the present invention described herein, and the description made to specific languages ​​above is for disclosing the best mode of the present invention.

[0126] In the description provided herein, a large number of specific details are described. However, it is understood that embodiments of the present invention can be practiced without these specific details. In some instances, well-known methods, structures and techniques are not shown in detail so as not to obscure the understanding of this description.

[0127] Similarly, it should be understood that in order to streamline the present invention and aid in understanding one or more of the various inventive aspects, in the above description of exemplary embodiments of the present invention, the various features of the embodiments of the present invention are sometimes grouped together into a single embodiment, figure, or description thereof. However, this disclosed method should not be interpreted as reflecting the following intention: that the claimed invention requires more features than the features explicitly recited in each claim. More specifically, as reflected in the claims below, inventive aspects lie in less than all the features of the individual embodiments disclosed above. Therefore, the claims that follow the specific embodiment are hereby expressly incorporated into the specific embodiment, with each claim itself serving as a separate embodiment of the present invention.

[0128] Those skilled in the art will appreciate that the modules in the devices in the embodiments may be adaptively changed and arranged in one or more devices different from the embodiments. The modules or units or components in the embodiments may be combined into one module or unit or component, and in addition they may be divided into a plurality of submodules or subunits or subcomponents. Except that at least some of such features and / or processes or units are mutually exclusive, all features disclosed in this specification (including the accompanying claims, abstracts and drawings) and all processes or units of any method or device disclosed in this manner may be combined in any combination. Unless otherwise expressly stated, each feature disclosed in this specification (including the accompanying claims, abstracts and drawings) may be replaced by an alternative feature providing the same, equivalent or similar purpose.

[0129] In addition, those skilled in the art will appreciate that, although some embodiments herein include certain features included in other embodiments but not other features, the combination of features of different embodiments is meant to be within the scope of the present invention and form different embodiments. For example, in the claims below, any one of the claimed embodiments may be used in any combination.

[0130] The various component embodiments of the present invention can be implemented in hardware, or in software modules running on one or more processors, or in a combination thereof. It should be understood by those skilled in the art that a microprocessor or digital signal processor (DSP) can be used in practice to implement some or all functions of some or all components according to embodiments of the present invention. The present invention can also be implemented as a device or apparatus program (e.g., computer program and computer program product) for executing part or all of the methods described herein. Such a program implementing the present invention can be stored on a computer-readable medium, or can have the form of one or more signals. Such a signal can be downloaded from an Internet website, or provided on a carrier signal, or provided in any other form.

[0131] It should be noted that the above embodiments illustrate the present invention rather than limit it, and that those skilled in the art may devise alternative embodiments without departing from the scope of the appended claims. In the claims, any reference symbol between brackets shall not be construed as a limitation on the claims. The word "comprising" does not exclude the presence of elements or steps not listed in the claims. The word "one" or "an" preceding an element does not exclude the presence of a plurality of such elements. The present invention may be implemented by means of hardware comprising a number of different elements and by means of a suitably programmed computer. In a unit claim enumerating a number of devices, several of these devices may be embodied by the same hardware item. The use of the words first, second, and third, etc. does not indicate any order. These words may be interpreted as names. The steps in the above embodiments, unless otherwise specified, should not be understood as limitations on the order of execution.

Claims

1. A method for customizing rotation of design elements, characterized in that: include: In the canvas page of the design software, select a target layer that includes at least one design element; Initializing a rotation center mark at a preset position of the target layer, wherein the preset position is by default directly below the target layer, and the position of the rotation center mark can be freely dragged; In response to a custom rotation operation of the target layer based on the rotation center, wherein the operation mode of the custom rotation operation includes a handle operation and a panel operation; the operation properties of the panel operation include but are not limited to rotate and copy, reset center point, radius length, and rotation angle; At least one preview copy of the target layer is generated in real time according to the rotation center, radius length, rotation angle and / or rotation amount of the target layer, and a rotation layer of the target layer is determined from the preview copy.

2. The method for customizing the rotation of design elements according to claim 1, characterized in that: The method further comprises: When the radius length of the target layer is adjusted by the operation mode of the handle operation, the value of the radius length in the panel operation changes accordingly; After editing the radius length of the panel operation, the handle angle of the handle operation no longer changes.

3. The method for customizing rotation of design elements according to claim 1 or 2, characterized in that: The method further comprises: After the operation of resetting the center point of the target layer is performed, the rotation center mark is restored to the preset position.

4. The method for customizing the rotation of design elements according to claim 1, characterized in that: The method further comprises: When the operation attribute of rotating and copying the target layer is selected, a preset number of copy layers are displayed in the preview area or preview window of the panel operation, and the copy layers are evenly distributed in a ring matrix; wherein the shape of the ring matrix includes but is not limited to an ellipse, a perfect circle, a rectangle and a square; The copied layer inherits the style of the target layer. When the style of the target layer is modified, the first layer style of the copied layer follows the style of the target layer and changes accordingly to obtain the second layer style. Also, during the operation of rotating and copying the target layer, if the target layer is deleted, the copy operation is interrupted and the style of the copied layer returns from the second layer style to the first layer style.

5. The method for customizing the rotation of design elements according to claim 4, characterized in that: The method further comprises: After performing the first rotational copying on the target layer, automatically creating the copied first copy layer and the first target layer as a first-level grouping; Automatically convert the first target layer in the first level group into a first component, and automatically convert the first copy layer into a first instance; If a single graphic in the first-level group is rotated and copied for a second time, a second-level group will be automatically created in the first-level group for the second copy layer, and so on.

6. The design element custom rotation method according to claim 1, characterized in that: The method further comprises: When the rotation angle of the target layer is adjusted by the operation mode of the handle operation, the value of the rotation angle in the panel operation changes accordingly; at the same time, after the rotation angle of the panel operation is edited, the rotation range of the handle operation changes accordingly with the value of the rotation angle; Wherein, when the handle node position of the handle operation is equal to 360 degrees, only the drag handle is dragged counterclockwise; When the handle node position of the handle operation is less than 360 degrees, the drag handle is dragged clockwise or counterclockwise; When the handle node position of the handle operation is equal to 0 degrees, the drag handle is only dragged clockwise, and all the copy layers are set to overlap 100%.

7. The method for customizing rotation of design elements according to claim 4 or 5, characterized in that: The method further comprises: During the process of rotating and duplicating the target layer on the authoring side, the collaborator can freely delete the target layer or the duplicate layer; After the target layer or the copy layer is deleted on the collaboration side, on the creation side, if the target layer or the copy layer is in an editable state, the layer deleted on the collaboration side is automatically restored.

8. The method for customizing the rotation of design elements according to claim 4, characterized in that: The method further comprises: In the preview area of ​​the panel operation, the rotation amount of the target layer is automatically calculated according to the input radius length and rotation angle; or, the rotation angle of the target layer is automatically calculated according to the input radius length and rotation amount.

9. The method for customizing rotation of design elements according to claim 4 or 8, characterized in that: The method further comprises: Automatically marking the serial numbers of the layers in the annular matrix in a pseudo-clockwise or clockwise direction, wherein the target layer in the annular matrix is ​​highlighted; When part of the duplicated layers are deleted, the sequence numbers of the layers in the ring matrix are readjusted.

10. A design element custom rotation device, characterized in that: include: A target layer selection module is used to select a target layer including at least one design element in a canvas page in a design software; A rotation center identification module, used to initialize the rotation center identification at a preset position of the target layer, wherein the preset position is by default directly below the target layer, and the position of the rotation center identification can be freely dragged; A custom rotation module, used to respond to the custom rotation operation of the target layer based on the rotation center, wherein the operation mode of the custom rotation operation includes handle operation and panel operation; the operation properties of the panel operation include but are not limited to rotate and copy, reset center point, radius length and rotation angle; The layer preview and determination module is used to generate at least one preview copy of the target layer in real time according to the rotation center, radius length, rotation angle and / or rotation amount of the target layer, and determine the rotation layer of the target layer from the preview copy.