Method and device for quickly arranging disordered layers in canvas page

Abstract

The invention discloses a method and a device for quickly arranging disordered layers in a canvas page, and the method comprises the following steps: reading layer attributes, creation time and use frequency of each layer in the canvas page in design software, the layer attributes comprising names, styles, colors, positions, sizes, types and hierarchical relationships of the layers; in response to an intelligent layer sorting operation, sorting the selected layers from left to right and from top to bottom according to the selected sorting types according to the layer attributes, the creation time and the use frequency; wherein the sorting type comprises a letter sequence, creation time, use frequency and a layer sequence; and adjusting the horizontal spacing and the vertical spacing of the sorted layers in a numerical value or manual dragging adjustment mode. According to the method, a designer is helped to quickly arrange and adjust the layers, the designer does not need to repeatedly and manually adjust the position and sequence of each layer, the design time is remarkably shortened, and the design experience feeling is improved.

Description

Technical Field

[0001] The present invention relates to the technical field of software design, and in particular to a method and device for quickly arranging chaotic layers in a canvas page. Background Art

[0002] With the rapid development of digital media and graphic design industry, designers often need to deal with a large number of layer elements (including images, texts, shapes, color blocks, etc.) in the creative process. These layer elements are often disorganized in the early stage of design. Especially in complex design projects, designers need to quickly organize and adjust the chaotic layers to reduce design time and ensure visual coordination and functional integrity.

[0003] However, existing design software usually adopts manual organization, which is not flexible and intelligent enough. Manual organization of layers is not only inefficient but also prone to errors. Especially when facing complex design projects, manual organization becomes very difficult. For example, in the process of manual organization of layers, designers need to move and adjust the position and spacing of each layer one by one. The relationship between layers is intricate. Once improperly adjusted, it will destroy the balance and beauty of the entire design. In addition, designers often need to sort and group layers differently according to the different needs of the project. Manual organization is increasingly difficult to adapt to these changes in needs.

[0004] To solve the above problems, the present invention develops a method and device for quickly organizing chaotic layers in a canvas page, so that designers can quickly organize and adjust the layers, significantly reducing the design time and improving the design experience. Summary of the invention

[0005] In view of the above problems, a method and device for quickly organizing chaotic layers in a canvas page are proposed to facilitate designers to quickly organize and adjust the layers.

[0006] According to one aspect of the present invention, a method for quickly arranging chaotic layers in a canvas page is provided, comprising:

[0007] In the canvas page of the design software, read the layer properties, creation time and usage frequency of each layer, wherein the layer properties include the name, style, color, position, size, type and hierarchical relationship of the layer;

[0008] In response to the intelligent layer sorting operation, sorting the selected layers from left to right and from top to bottom according to the layer attributes, creation time and usage frequency according to the selected sorting type; wherein the sorting type includes alphabetical order, creation time, usage frequency and layer order;

[0009] Adjust the horizontal and vertical spacing of the sorted layers by adjusting the value or manually dragging.

[0010] In an optional manner, the layer includes images, texts, shapes and color blocks;

[0011] The function entry of the intelligent layer arrangement operation is a shortcut key or a one-key activation intelligent layer arrangement button set in the layer property operation panel;

[0012] The layer property operation panel includes operations for changing the layer width, layer height, rounded corners and spacing of each layer.

[0013] In an optional manner, when the sorting type is alphabetical order, the layers are sorted in AZ order according to the first letters of the layer names in the canvas page;

[0014] When the sorting type is usage frequency, the layers are sorted according to the frequency of use by the user, wherein the layer with the highest frequency of use is placed at the front;

[0015] When the sorting type is layer order, the sorting is performed according to the hierarchical relationship of the layer tree in the canvas page, wherein the top layer is at the front.

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

[0017] Group the sorted layers to obtain multiple grouped layers;

[0018] The grouping layer is locked and unlocked; after the locking operation is performed, the position and spacing adjustment operations are prohibited for the locked grouping layer, and a locking mark is marked on the right side.

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

[0020] After sorting and adjusting each layer, the design draft is automatically saved in real time;

[0021] After the design draft is automatically saved, the sorting and adjustment operations of each layer are allowed to be undone and redone a preset number of times.

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

[0023] Selecting at least one first layer as a first heuristic layer for row sorting, and selecting at least one second layer as a second heuristic layer for column sorting;

[0024] Layers with the same or similar type, style and color as the first heuristic layer are sorted from left to right as the first row of layers according to the selected sorting type;

[0025] Layers with the same or similar type, style and color as the second heuristic layer are sequentially sorted from left to right as the next row of layers according to the selected sorting type.

[0026] In an optional manner, the method for determining the layers with the same or similar colors is:

[0027] For any first layer, traverse each pixel point of the second layer in the remaining layers respectively;

[0028] Calculate a local sensitive hash value according to the RGB values ​​of the first layer and the second layer;

[0029] If the local sensitive hash value is within a preset range, determining that the first layer is identical or similar to the second layer;

[0030] or,

[0031] A Gaussian weighting function with a standard deviation of 1.5 is used as a weighting window, wherein the weighting window covers any current pixel and its surrounding pixels;

[0032] Calculating the local structure similarity index according to the pixel points in each weighted window to obtain an index mapping matrix composed of the local structure similarity index;

[0033] If the average value of the index mapping matrix exceeds a preset threshold, it is determined that the first layer is identical to or similar to the second layer.

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

[0035] Transpose the sorted rows and columns;

[0036] and / or,

[0037] Select a row or column of layers as a layer group, and use other rows or columns of layers as target layer groups.

[0038] When you hold down the left mouse button to drag, drag the selected layer group to any target replacement layer group range;

[0039] After releasing the left mouse button, the selected layer group and the target replacement layer group will be replaced.

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

[0041] Cross-analyze the layer type, name, style, and corresponding layer arrangement and design type to obtain the differences in user preferences for layer arrangement of each layer attribute;

[0042] According to the differences in layer arrangement preferences of various layer attributes, the layer arrangement method expected by the user is obtained;

[0043] Among them, the layer arrangement methods include waterfall arrangement, matrix arrangement, multiple groups of toolbar arrangement and corresponding layer spacing and layer order; the design types include news, posters, games, e-commerce, reading, audio and video.

[0044] According to another aspect of the present application, a device for quickly arranging chaotic layers in a canvas page is provided, comprising:

[0045] A layer reading module is used to read the layer properties, creation time and usage frequency of each layer in the canvas page of the design software, wherein the layer properties include the name, style, color, position, size, type and hierarchical relationship of the layer;

[0046] A layer sorting module, for responding to the intelligent layer sorting operation, sorting each selected layer from left to right and from top to bottom according to the layer attributes, creation time and usage frequency according to the selected sorting type; wherein the sorting type includes alphabetical order, creation time, usage frequency and layer order;

[0047] The layer adjustment module is used to adjust the horizontal and vertical spacing of each sorted layer by numerical adjustment or manual dragging.

[0048] The solution provided by the above embodiment of the present invention reads the layer properties, creation time and frequency of use of each layer in the canvas page of the design software, wherein the layer properties include the name, style, color, position, size, type and hierarchical relationship of the layer; in response to the intelligent layer sorting operation, sorts the selected layers from left to right and from top to bottom according to the layer properties, creation time and frequency of use according to the selected sorting type; wherein the sorting type includes alphabetical order, creation time, frequency of use and layer order; and adjusts the horizontal spacing and vertical spacing of each layer after sorting by numerical value or manual dragging. The present invention helps designers to quickly sort and adjust layers, and designers do not need to repeatedly manually adjust the position and order of each layer, which significantly reduces design time and improves the design experience.

[0049] 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

[0050] 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:

[0051] Figure 1 A schematic diagram showing a flow chart of a method for quickly arranging chaotic layers in a canvas page according to an embodiment of the present invention;

[0052] Figure 2 A schematic diagram of an entry for the intelligent layer arrangement function according to an embodiment of the present invention is shown;

[0053] Figure 3 A schematic diagram showing a comparison of layer sorting before and after an embodiment of the present invention is shown;

[0054] Figure 4 A schematic diagram showing digital adjustment of the layer spacing according to an embodiment of the present invention is shown;

[0055] Figure 5 A schematic diagram of manually dragging and adjusting the layer spacing according to an embodiment of the present invention is shown;

[0056] Figure 6 A schematic diagram of layer locking according to an embodiment of the present invention is shown;

[0057] Figure 7 A schematic diagram of layer sorting preview according to an embodiment of the present invention is shown;

[0058] Figure 8 A schematic diagram showing chaotic arrangement of layers in an embodiment of the present invention is shown;

[0059] Fig. 9 A schematic diagram of heuristic layer selection according to an embodiment of the present invention is shown;

[0060] Fig.10 A schematic diagram of heuristic layer sorting according to an embodiment of the present invention is shown;

[0061] Fig.11 A schematic diagram of dragging and adjusting a layer group according to an embodiment of the present invention is shown;

[0062] Fig.12 A functional structure diagram of a method and device for quickly arranging chaotic layers in a canvas page according to an embodiment of the present invention is shown. DETAILED DESCRIPTION

[0063] 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.

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

[0065] Layers: are like images containing elements such as text or graphics, which are stacked together in order and combined to form the final effect of the page. Layers can accurately position elements on the page. In this application, text, shapes, pictures, etc. can be added to the layers, and layers can be nested in the layers.

[0066] The method and device for quickly organizing chaotic layers in a canvas page proposed by the present invention are described in detail below through specific embodiments.

[0067] Embodiment 1:

[0068] Figure 1 The functional structure diagram of the method for quickly arranging chaotic layers in a canvas page according to an embodiment of the present invention is shown. Figure 1 As shown, the following steps are included:

[0069] Step S101, in the canvas page of the design software, read the layer properties, creation time and usage frequency of each layer, wherein the layer properties include the name, style, color, position, size, type and hierarchical relationship of the layer.

[0070] In this embodiment, the hierarchical relationship is the blocking order between layers, and the usage frequency is the number of times a layer is selected or modified during the editing process, which is used to describe the importance and activity of the layer. The types of layers include images, texts, shapes, and color blocks. Figure 2 As shown, the function entry of the smart layer arrangement operation is a shortcut key or a one-key activation smart layer arrangement button set in the layer property operation panel; wherein the layer property operation panel includes operations for changing the layer width (W24), layer height (H 24), rounded corners (0) and spacing setting operations of each layer.

[0071] Step S102, in response to the intelligent layer sorting operation, sort the selected layers from left to right and from top to bottom according to the layer properties, creation time and usage frequency according to the selected sorting type; wherein the sorting type includes alphabetical order, creation time, usage frequency and layer order.

[0072] In this embodiment, the desired sorting type is selected through the drop-down menu or button group, and the selected layers are sorted from left to right and from top to bottom according to the selected sorting type (such as Figure 3 shown).

[0073] When the sorting type is alphabetical, the layers are sorted in AZ order according to the first letter of the layer name on the canvas page.

[0074] When the sorting type is usage frequency, the layers are sorted according to the frequency of use by users, where the layer with the highest frequency of use is at the front;

[0075] When the sorting type is layer order, the layers are sorted according to the hierarchical relationship of the layer tree in the canvas page, with the top layer at the front.

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

[0077] Group the sorted layers to obtain multiple grouped layers;

[0078] The grouping layer is locked and unlocked; after the locking operation is performed, the position and spacing adjustment operations are prohibited for the locked grouping layer, and a locking mark is marked on the right side.

[0079] In this embodiment, Figure 6 As shown, users can group related or similar layers together and lock them to facilitate layer management and avoid misoperation. After locking a layer, a small lock icon will be marked on the right side of the layer, and the position and spacing of the grouped layers will remain unchanged.

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

[0081] Selecting at least one first layer as a first heuristic layer for row sorting, and selecting at least one second layer as a second heuristic layer for column sorting;

[0082] Layers with the same or similar type, style and color as the first heuristic layer are sorted from left to right as the first row of layers according to the selected sorting type;

[0083] Layers with the same or similar type, style and color as the second heuristic layer are sequentially sorted from left to right as the next row of layers according to the selected sorting type.

[0084] In this embodiment, Figure 8 As shown, the surface appears to be a chaotic layer. In order to sort it out to generate Fig.10 The layers shown. Fig. 9 As shown, drag and select two pink layers (camera and video icons), select both layers, and use them as left-to-right heuristic layers (a flashing right arrow appears above the layers). You can also select multiple layers of other colors as top-to-bottom heuristic layers, for example, select all four layers (camera icons) of pink, blue, yellow, and green, and use them as top-to-bottom heuristic layers (a flashing down arrow appears on the left side of the layers).

[0085] The layers with the same or similar type, style and color as the first heuristic layer (the heuristic layer from left to right) are sorted from left to right as the first row of layers according to the selected sorting type. The layers with the same or similar type, style and color as the second heuristic layer (the heuristic layer from top to bottom) are sorted from left to right as the next row of layers according to the selected sorting type to generate the following: Fig.10 The arrangement of layers shown.

[0086] In an optional manner, the method for determining the layers with the same or similar colors is:

[0087] For any first layer, traverse each pixel point of the second layer in the remaining layers respectively;

[0088] Calculate a local sensitive hash value according to the RGB values ​​of the first layer and the second layer;

[0089] If the local sensitive hash value is within a preset range, determining that the first layer is identical or similar to the second layer;

[0090] or,

[0091] A Gaussian weighting function with a standard deviation of 1.5 is used as a weighting window, wherein the weighting window covers any current pixel and its surrounding pixels;

[0092] Calculating the local structure similarity index according to the pixel points in each weighted window to obtain an index mapping matrix composed of the local structure similarity index;

[0093] If the average value of the index mapping matrix exceeds a preset threshold, it is determined that the first layer is identical to or similar to the second layer.

[0094] In this embodiment, by calculating the local structure similarity index through the local sensitive hash value or the Gaussian weighted function, the similarity between the two layers in color can be quickly and accurately determined, avoiding the error caused by single color comparison.

[0095] Specifically, for the local sensitive hash value calculation method, for each pixel of the first layer and the second layer, the local sensitive hash value of its RGB value is calculated to retain the local similarity of color information. The hash values ​​of the first layer and the second layer are compared, and if the hash value is within a preset range (such as the Hamming distance is less than a certain threshold), it is determined that the two layers are the same or similar in color.

[0096] For the local structure similarity index judgment method, a Gaussian weighting function with a standard deviation of 1.5 is used to define a weighted window, and the window size covers the current pixel and its surrounding pixels. For each pixel of the first layer and the second layer, the local structure similarity index (such as the SSIM index) is calculated based on the pixel within the weighted window. The local structure similarity index of each pixel is combined into an index mapping matrix. The average value of the index mapping matrix is ​​calculated. If the average value exceeds a preset threshold, it is determined that the first layer and the second layer are the same or similar in color.

[0097] For example, taking C++ code as an example, the pixel matrix of the first layer (icon A) and the second layer (icon B) is:

[0098] std::vector <std::vector <rgb>>iconA={

[0099] {{255,0,0},{0,255,0},{0,0,255}},

[0100] {{255,0,0},{0,255,0},{0,0,255}},

[0101] {{255,0,0},{0,255,0},{0,0,255}}

[0102] };

[0103] std::vector<std::vector <rgb>>iconB={

[0104] {{250,5,5},{5,250,5},{5,5,250}},

[0105] {{250,5,10},{5,250,5},{10,5,250}},

[0106] {{250,10,5},{10,250,5},{5,10,250}}

[0107] };

[0108] Among them, the RGB structure is:

[0109] struct RGB{

[0110] unsigned char r,g,b;

[0111] };

[0112] The locality sensitive hash function is:

[0113] unsigned int localSensitiveHash(const RGB&pixel){

[0114] / / Calculate the hash value based on the RGB value, put the red value r in the lowest bit, shift the green value g left by 8 bits (multiplied by 256), and shift the blue value b left by 16 bits (multiplied by the square of 256) to generate the hash value.

[0115] unsigned int hash=pixel.r+pixel.g×256+pixel.b×256×256;

[0116] return hash;

[0117] }

[0118] The Gaussian weighting function is:

[0119] double gaussianWeight(int x,int y,double sigma){

[0120] / / Calculate the two-dimensional Gaussian function value based on the given coordinates (x, y) and standard deviation sigma, where PI is π.

[0121] return exp(-(x×x+y×y) / (2×sigma×sigma)) / (2×PI×sigma×sigma);

[0122] }

[0123] The calculation function of the local structural similarity index (SSIM) is:

[0124] double calculateSSIM(const RGB&pixel1,const RGB&pixel2,double C1=6.5025,double C2=58.5225){

[0125] / / Calculate brightness, contrast and structural similarity

[0126] / / Brightness is obtained by calculating the weighted average of the RGB values ​​of two pixels. The weights are selected according to the sensitivity of the human visual system to color and brightness. Usually, red (R) and blue (B) have higher weights than green.

[0127] double l=(2×pixel1.r+pixel1.g+2×pixel1.b+2×pixel2.r+pixel2.g+2×pixel2.b) / (6.0×255);

[0128] / / The contrast is obtained by calculating the sum of the squares of the difference between the RGB values ​​of two pixels. The result is normalized and a small constant C2 is added to avoid division by zero errors. The denominator is the sum of the squares of the RGB values ​​of the two pixels, which is used to standardize the contrast.

[0129] double c=(2×std::pow(pixel1.r-pixel2.r,2)+std::pow(pixel1.g-pixel2.g,2)+2×std::pow(pixel1.b-pixel2.b ,2)) / (2.0×(C2+std::pow(pixel1.r+pixel1.g+pixel1.b,2)+std::pow(pixel2.r+pixel2.g+pixel2.b,2)));

[0130] / / Structural similarity is obtained by calculating the ratio of the product of the RGB values ​​of two pixels and the square root of the sum of the squares of their respective RGB values, reflecting the correlation in different color channels.

[0131] double s=(pixel1.r×pixel2.r+pixel1.g×pixel2.g+pixel1.b×pixel2.b) / (std::sqrt(std::pow(pixel1.r,2)+std::pow(pixe l1.g,2)+std::pow(pixel1.b,))×std::sqrt(std::pow(pixel2.r,2)+std::pow(pixel2.g,2)+std::pow(pixel2.b,2)));

[0132] / / The SSIM value is obtained by combining the values ​​of brightness, contrast, and structural similarity according to a preset or empirical formula.

[0133] return(2×l+1)×(2×c+1)×(s+1) / (l+1) / (c+1) / (s+1);

[0134] }

[0135] It should be noted that the above codes are only for illustrative purposes, and other calculation formulas may also be used to implement the functions of the above functions, which is not limited in this article.

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

[0137] Transpose the sorted rows and columns;

[0138] and / or,

[0139] Select a row or column of layers as a layer group, and use other rows or columns of layers as target layer groups.

[0140] When you hold down the left mouse button to drag, drag the selected layer group to any target replacement layer group range;

[0141] After releasing the left mouse button, the selected layer group and the target replacement layer group will be replaced.

[0142] In this embodiment, the layers of each row and column after sorting are transposed, that is, the layers arranged in a two-dimensional array (rows and columns) are converted from the original row-column layout to the column-row layout. Fig.11 As shown in the figure, select a row or a column of layers as a layer group, and use other rows or columns of layers as target replacement layer groups (layer groups indicated by the lower arrows). When you hold down the left mouse button to drag, drag the selected layer group to any target replacement layer group. When you release the left mouse button, the selected layer group and the target replacement layer group will be replaced.

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

[0144] Cross-analyze the layer type, name, style, and corresponding layer arrangement and design type to obtain the differences in user preferences for layer arrangement of each layer attribute;

[0145] According to the differences in layer arrangement preferences of various layer attributes, the layer arrangement method expected by the user is obtained;

[0146] Among them, the layer arrangement methods include waterfall arrangement, matrix arrangement, multiple groups of toolbar arrangement and corresponding layer spacing and layer order; the design types include news, posters, games, e-commerce, reading, audio and video.

[0147] In this embodiment, the results of the cross-analysis reveal the differences in user preferences for layer arrangement. For example, some users prefer to place the text layer above the picture layer, or prefer to arrange layers of similar styles adjacent to each other. Based on the analysis of the differences in layer arrangement preferences, the user's expected layer arrangement is inferred. Not only the user's preference for layer arrangement is considered, but also the impact of the design type on the layer arrangement is considered. For example, in news design, news titles and pictures are displayed in a waterfall arrangement, and in game design, game characters and props are displayed in a matrix arrangement to facilitate user viewing and selection. For example, the layer attributes, layer arrangement, and design type are encoded, and the correlation between the layer attributes and the layer arrangement is analyzed using statistical methods such as chi-square test and correlation analysis, and the differences in user preferences for layer attributes and layer arrangement under different design types are analyzed, such as in news design, users like to use text layers and waterfall arrangements, and in poster design, users like to use picture layers and matrix arrangements.

[0148] Step S103, adjusting the horizontal spacing and vertical spacing of each layer after sorting by numerical adjustment or manual dragging.

[0149] In this embodiment, Figure 4 As shown, the horizontal spacing (36) and vertical spacing (55) of each layer after sorting are adjusted by numerical adjustment. Or, Figure 5 As shown in the figure, hover the mouse over the layer and manually drag to adjust the horizontal and vertical spacing of the sorted layers. Figure 7 As shown, a real-time preview function is provided, and users can make fine adjustments as needed.

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

[0151] After sorting and adjusting each layer, the design draft is automatically saved in real time;

[0152] After the design draft is automatically saved, the sorting and adjustment operations of each layer are allowed to be undone and redone a preset number of times.

[0153] Usually, after saving the design draft, the existing design software cannot undo the previous operation, and after changing the design layer, it is necessary to save it manually or automatically (such as every 10 minutes). In this embodiment, when the user sorts, moves, resizes, modifies the properties of the layers in the design draft, the automatic save function is triggered immediately. After the design draft is automatically saved, the user is allowed to undo and redo the previous sorting and adjustment operations for a preset number of times (such as 50 times), which reduces the user's anxiety and further improves the design efficiency and user experience.

[0154] The solution provided by the above embodiment of the present invention reads the layer properties, creation time and frequency of use of each layer in the canvas page of the design software, wherein the layer properties include the name, style, color, position, size, type and hierarchical relationship of the layer; in response to the intelligent layer sorting operation, sorts the selected layers from left to right and from top to bottom according to the layer properties, creation time and frequency of use according to the selected sorting type; wherein the sorting type includes alphabetical order, creation time, frequency of use and layer order; and adjusts the horizontal spacing and vertical spacing of each layer after sorting by numerical value or manual dragging. The present invention helps designers to quickly sort and adjust layers, and designers do not need to repeatedly manually adjust the position and order of each layer, which significantly reduces design time and improves the design experience.

[0155] Embodiment 2:

[0156] Fig.12 The functional structure diagram of the device provided in the embodiment of the present application is shown. Fig.12 As shown, the device comprises:

[0157] The layer reading module 1201 is used to read the layer properties, creation time and usage frequency of each layer in the canvas page of the design software, wherein the layer properties include the name, style, color, position, size, type and hierarchical relationship of the layer;

[0158] The layer sorting module 1202 is used to respond to the intelligent layer sorting operation and sort the selected layers from left to right and from top to bottom according to the layer attributes, creation time and usage frequency according to the selected sorting type; wherein the sorting type includes alphabetical order, creation time, usage frequency and layer order;

[0159] The layer adjustment module 1203 is used to adjust the horizontal spacing and vertical spacing of each layer after sorting by adjusting the value or manually dragging.

[0160] In an optional manner, the layer includes images, texts, shapes and color blocks;

[0161] The function entry of the intelligent layer arrangement operation is a shortcut key or a one-key activation intelligent layer arrangement button set in the layer property operation panel;

[0162] The layer property operation panel includes operations for changing the layer width, layer height, rounded corners and spacing of each layer.

[0163] In an optional manner, the layer sorting module 1202 is further used to:

[0164] When the sorting type is alphabetical, the layers are sorted in AZ order according to the first letters of the layer names on the canvas page;

[0165] When the sorting type is usage frequency, the layers are sorted according to the frequency of use by the user, wherein the layer with the highest frequency of use is placed at the front;

[0166] When the sorting type is layer order, the sorting is performed according to the hierarchical relationship of the layer tree in the canvas page, wherein the top layer is at the front.

[0167] In an optional manner, a grouping module is further included, which is further used to:

[0168] Group the sorted layers to obtain multiple grouped layers;

[0169] The grouping layer is locked and unlocked; after the locking operation is performed, the position and spacing adjustment operations are prohibited for the locked grouping layer, and a locking mark is marked on the right side.

[0170] In an optional manner, the device further includes a maintaining and restoring module, further configured to:

[0171] After sorting and adjusting each layer, the design draft is automatically saved in real time;

[0172] After the design draft is automatically saved, the sorting and adjustment operations of each layer are allowed to be undone and redone a preset number of times.

[0173] In an optional manner, the layer sorting module 1202 is further used to:

[0174] Selecting at least one first layer as a first heuristic layer for row sorting, and selecting at least one second layer as a second heuristic layer for column sorting;

[0175] Layers with the same or similar type, style and color as the first heuristic layer are sorted from left to right as the first row of layers according to the selected sorting type;

[0176] Layers with the same or similar type, style and color as the second heuristic layer are sequentially sorted from left to right as the next row of layers according to the selected sorting type.

[0177] In an optional manner, a layer similarity judgment module is further included, which is further used to:

[0178] For any first layer, traverse each pixel point of the second layer in the remaining layers respectively;

[0179] Calculate a local sensitive hash value according to the RGB values ​​of the first layer and the second layer;

[0180] If the local sensitive hash value is within a preset range, determining that the first layer is identical or similar to the second layer;

[0181] or,

[0182] A Gaussian weighting function with a standard deviation of 1.5 is used as a weighting window, wherein the weighting window covers any current pixel and its surrounding pixels;

[0183] Calculating the local structure similarity index according to the pixel points in each weighted window to obtain an index mapping matrix composed of the local structure similarity index;

[0184] If the average value of the index mapping matrix exceeds a preset threshold, it is determined that the first layer is identical to or similar to the second layer.

[0185] In an optional manner, a transposition and row-column replacement module is further included, which is further used to:

[0186] Transpose the sorted rows and columns;

[0187] and / or,

[0188] Select a row or column of layers as a layer group, and use other rows or columns of layers as target layer groups.

[0189] When you hold down the left mouse button to drag, drag the selected layer group to any target replacement layer group range;

[0190] After releasing the left mouse button, the selected layer group and the target replacement layer group will be replaced.

[0191] In an optional manner, the layer sorting module 1202 is further used to:

[0192] Cross-analyze the layer type, name, style, and corresponding layer arrangement and design type to obtain the differences in user preferences for layer arrangement of each layer attribute;

[0193] According to the differences in layer arrangement preferences of various layer attributes, the layer arrangement method expected by the user is obtained;

[0194] Among them, the layer arrangement methods include waterfall arrangement, matrix arrangement, multiple groups of toolbar arrangement and corresponding layer spacing and layer order; the design types include news, posters, games, e-commerce, reading, audio and video.

[0195] The solution provided by the above embodiment of the present invention reads the layer properties, creation time and frequency of use of each layer in the canvas page of the design software, wherein the layer properties include the name, style, color, position, size, type and hierarchical relationship of the layer; in response to the intelligent layer sorting operation, sorts the selected layers from left to right and from top to bottom according to the layer properties, creation time and frequency of use according to the selected sorting type; wherein the sorting type includes alphabetical order, creation time, frequency of use and layer order; and adjusts the horizontal spacing and vertical spacing of each layer after sorting by numerical value or manual dragging. The present invention helps designers to quickly sort and adjust layers, and designers do not need to repeatedly manually adjust the position and order of each layer, which significantly reduces design time and improves the design experience.

[0196] 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.

[0197] 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.

[0198] 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.

[0199] 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.

[0200] 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.

[0201] 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.

[0202] 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.< / rgb> < / rgb>

Claims

1. A method for quickly arranging chaotic layers in a canvas page, characterized in that: include: In the canvas page of the design software, read the layer properties, creation time and usage frequency of each layer, wherein the layer properties include the name, style, color, position, size, type and hierarchical relationship of the layer; In response to the intelligent layer sorting operation, sorting the selected layers from left to right and from top to bottom according to the layer attributes, creation time and usage frequency according to the selected sorting type; wherein the sorting type includes alphabetical order, creation time, usage frequency and layer order; Adjust the horizontal and vertical spacing of the sorted layers by adjusting the value or manually dragging.

2. The method for quickly arranging chaotic layers in a canvas page according to claim 1, characterized in that: The layers include images, texts, shapes, and color blocks; The function entry of the intelligent layer arrangement operation is a shortcut key or a one-key activation intelligent layer arrangement button set in the layer property operation panel; The layer property operation panel includes operations for changing the layer width, layer height, rounded corners and spacing of each layer.

3. The method for quickly arranging chaotic layers in a canvas page according to claim 1, characterized in that: When the sorting type is alphabetical, the layers are sorted in AZ order according to the first letters of the layer names on the canvas page; When the sorting type is usage frequency, the layers are sorted according to the frequency of use by the user, wherein the layer with the highest frequency of use is placed at the front; When the sorting type is layer order, the sorting is performed according to the hierarchical relationship of the layer tree in the canvas page, wherein the top layer is at the front.

4. The method for quickly arranging chaotic layers in a canvas page according to any one of claims 1 to 3, characterized in that: The method further comprises: Group the sorted layers to obtain multiple grouped layers; The grouping layer is locked and unlocked; after the locking operation is performed, the position and spacing adjustment operations are prohibited for the locked grouping layer, and a locking mark is marked on the right side.

5. The method for quickly arranging chaotic layers in a canvas page according to any one of claims 1 to 3, characterized in that: The method further comprises: After sorting and adjusting each layer, the design draft is automatically saved in real time; After the design draft is automatically saved, the sorting and adjustment operations of each layer are allowed to be undone and redone a preset number of times.

6. The method for quickly arranging chaotic layers in a canvas page according to claim 1, characterized in that: The method further comprises: Selecting at least one first layer as a first heuristic layer for row sorting, and selecting at least one second layer as a second heuristic layer for column sorting; Layers with the same or similar type, style and color as the first heuristic layer are sorted from left to right as the first row of layers according to the selected sorting type; Layers with the same or similar type, style and color as the second heuristic layer are sequentially sorted from left to right as the next row of layers according to the selected sorting type.

7. The method for quickly arranging chaotic layers in a canvas page according to claim 6, characterized in that: The method for determining the layers with the same or similar colors is as follows: For any first layer, traverse each pixel point of the second layer in the remaining layers respectively; Calculate a local sensitive hash value according to the RGB values ​​of the first layer and the second layer; If the local sensitive hash value is within a preset range, determining that the first layer is identical or similar to the second layer; or, A Gaussian weighting function with a standard deviation of 1.5 is used as a weighting window, wherein the weighting window covers any current pixel and its surrounding pixels; Calculating the local structure similarity index according to the pixel points in each weighted window to obtain an index mapping matrix composed of the local structure similarity index; If the average value of the index mapping matrix exceeds a preset threshold, it is determined that the first layer is identical to or similar to the second layer.

8. The method for quickly arranging chaotic layers in a canvas page according to claim 1, characterized in that: The method further comprises: Transpose the sorted rows and columns; and / or, Select a row or column of layers as a layer group, and use other rows or columns of layers as target layer groups. When you hold down the left mouse button to drag, drag the selected layer group to any target replacement layer group range; After releasing the left mouse button, the selected layer group and the target replacement layer group will be replaced.

9. The method for quickly arranging chaotic layers in a canvas page according to claim 1, characterized in that: The method further comprises: Cross-analyze the layer type, name, style, and corresponding layer arrangement and design type to obtain the differences in user preferences for layer arrangement of each layer attribute; According to the differences in layer arrangement preferences of various layer attributes, the layer arrangement method expected by the user is obtained; Among them, the layer arrangement methods include waterfall arrangement, matrix arrangement, multiple groups of toolbar arrangement and corresponding layer spacing and layer order; the design types include news, posters, games, e-commerce, reading, audio and video.

10. A device for quickly arranging chaotic layers in a canvas page, characterized in that: include: A layer reading module is used to read the layer properties, creation time and usage frequency of each layer in the canvas page of the design software, wherein the layer properties include the name, style, color, position, size, type and hierarchical relationship of the layer; A layer sorting module, for responding to the intelligent layer sorting operation, sorting each selected layer from left to right and from top to bottom according to the layer attributes, creation time and usage frequency according to the selected sorting type; wherein the sorting type includes alphabetical order, creation time, usage frequency and layer order; The layer adjustment module is used to adjust the horizontal and vertical spacing of each sorted layer by numerical adjustment or manual dragging.

Images