Batch selection and adjustment method and device for same layer elements in canvas page

Abstract

The invention discloses a batch selection and adjustment method and device for same layer elements in a canvas page, and the method comprises the steps: reading a layer type and a layer attribute of each layer element in the canvas page, and obtaining a layer attribute screening condition in response to an attribute screening operation of the layer elements; matching the layer attribute of each layer element in the canvas page according to the layer attribute screening condition, and performing selection operation and real-time preview on each layer element meeting the layer attribute screening condition; and carrying out batch adjustment and real-time preview on the layer attribute of each selected layer element. According to the method, the map layer attributes in the canvas page are quickly matched and screened, so that a designer can adjust the map layer attributes of the map layer elements in batches, the time for selecting and adjusting the map layers one by one is saved, and the design efficiency and the user experience are 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 batch selecting and adjusting elements of the same layer in a canvas page. Background Art

[0002] When drawing designs, designers often repeatedly adjust the layers in the design draft to optimize the design details. There are often situations where overall adjustments are required, for example, the fonts of all text layers in Kaiti are uniformly adjusted to Songti, or the font size of text layers with a 10px font size is uniformly adjusted to 15px. Since there are a large number of text layers that need to be uniformly adjusted (dozens or hundreds), designers have to select the Kaiti text layers one by one dozens or even hundreds of times, and then select all to make uniform font adjustments. For another example, to adjust the shape layer with a stroke color of "#FFEFD5" to a similar color "#FFEBCD", designers need to check the color values ​​of dozens or even hundreds of shape layers one by one (or convert the RGB color code to the corresponding hexadecimal color code), select the shape layers with a stroke color of "#FFEFD5" one by one, and then uniformly adjust the color. For another example, shape layers with stroke colors of “#FFEFD5” and “#FFEBCD” (the two colors are similar, the former is “PapayaWhip” and the latter is “BlanchedAlmond”) are uniformly adjusted to “#FFFAFA” (the color is “Snow”). Designers need to check the shape layers with stroke colors of “#FFEFD5” or “#FFEBCD” one by one, select them one by one, and then uniformly adjust them to the color “#FFFAFA”.

[0003] It can be seen that when designers modify the properties of a large number of layers, they need to select and modify the layers one by one, which takes a lot of time, has low design efficiency and is prone to errors, and has a poor user experience.

[0004] To solve the above problems, the present invention develops a method and device for batch selection and adjustment of the same layer elements in a canvas page, so as to enable designers to batch adjust the layer properties of the layer elements, save time for selecting and adjusting layers one by one, and improve design efficiency and user experience. Summary of the invention

[0005] In view of the above problems, a method and device for batch selection and adjustment of elements of the same layer in a canvas page are proposed, so that designers can perform batch selection and adjustment operations more efficiently and accurately.

[0006] According to one aspect of the present invention, a method for batch selecting and adjusting elements of the same layer in a canvas page is provided, comprising:

[0007] Read the layer type and layer properties of each layer element in the canvas page, and obtain the layer property filtering condition in response to the property filtering operation of the layer element;

[0008] Matching the layer attributes of each layer element in the canvas page according to the layer attribute filtering condition, selecting each layer element that meets the layer attribute filtering condition and performing a real-time preview;

[0009] Batch adjust the layer properties of selected layer elements and preview them in real time.

[0010] In an optional manner, the layer types include shapes, containers, regions, text, images, and connecting lines;

[0011] The layer properties include fill color, stroke thickness, stroke color, special effect properties, rounded corner properties, font color, font, font size and font weight.

[0012] In an optional manner, the step of obtaining the layer attribute filtering condition in response to the attribute filtering operation of the layer element further includes:

[0013] For any selected layer element, obtain a set of optional layer attributes according to the layer type of the layer element;

[0014] Perform the same layer attribute selection operation through the right-click menu or the toolbar, and display the selectable layer attribute set through the secondary menu;

[0015] The optional layer attribute set is subjected to multiple combination screening to obtain the layer attribute screening condition.

[0016] In an optional manner, the step of obtaining the layer attribute filtering condition in response to the attribute filtering operation of the layer element further includes:

[0017] Select multiple layer elements in the canvas page, and obtain a selectable layer attribute set according to the intersection of the layer attributes of the multiple layer elements;

[0018] Perform the same layer attribute selection operation through the right-click menu or the toolbar, and display the selectable layer attribute set through the secondary menu;

[0019] The optional layer attribute set is subjected to multiple combination screening to obtain the layer attribute screening condition.

[0020] In an optional manner, matching the layer properties of each layer element in the canvas page according to the layer property screening condition further includes:

[0021] According to the layer attribute screening condition, obtaining a layer element in the canvas page with the same or similar layer attributes as those in any of the layer attribute screening conditions;

[0022] The layer attribute screening condition is a combination of multiple layer attributes including fill color, stroke thickness, stroke color, special effect attribute, rounded corner attribute, font, font size and font weight.

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

[0024] Responding to a selection operation of a layer element;

[0025] Using the layer element as a screening criterion, using the layer attribute of the layer element as a screening layer attribute, and matching the layer attribute of each layer element in the canvas page according to the screening layer attribute;

[0026] The layer elements in the canvas page that have the same or similar attributes to any of the filter layers are selected and previewed in real time.

[0027] In an optional manner, the type of the layer attribute of the layer element includes a quantized layer attribute type, a non-quantized layer attribute type and a color attribute type;

[0028] The method for calculating similar layer elements further includes:

[0029] According to the type of the layer attribute of the layer element, the similarity between the filtered layer attribute and the layer attribute of each layer element in the canvas page is calculated;

[0030] For the quantitative layer attribute type, the numerical difference between the filter layer attribute and the layer attribute of each layer element in the canvas page is directly compared; if the numerical difference is less than a preset quantitative threshold, the layer elements are judged to be similar; wherein the quantitative layer attribute type includes stroke thickness, font size, font weight and corner radius attributes;

[0031] For non-quantitative layer attribute types, determine whether the filter layer attribute and the layer attribute of each layer element in the canvas page are within the range of a preset similar layer attribute set; if they are within the range of the preset similar layer attribute set, determine them as similar layer elements; wherein the non-quantitative layer attribute types include font and special effect attributes;

[0032] For the color attribute type, the similarity is calculated based on the color space distance between the filter layer attribute and the layer attribute of each layer element in the canvas page; if the similarity is greater than the preset color proximity threshold, it is determined to be a similar layer element; wherein, the color attribute type includes fill color, stroke color and font color, and the color code includes RGB and hexadecimal.

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

[0034] According to the layer type of the layer element and the type of the layer attribute, weighting the similarity of the layer attribute to obtain the overall similarity;

[0035] If the overall similarity exceeds a preset overall similarity threshold, the elements are determined to be similar layer elements.

[0036] In an optional manner, the batch adjustment of the layer attributes of each selected layer element and real-time preview further includes:

[0037] Extracting a set of identical or similar layer elements in the canvas page that have identical or similar layer elements with any of the filtered layer attributes;

[0038] Dynamically setting a unified layer property setting panel according to the same or similar layer element set;

[0039] According to the layer properties set in the unified layer property setting panel, the layer properties of similar layer elements are batch adjusted and previewed in real time; or, according to the layer type, the layer properties of similar layer elements are batch adjusted and previewed in real time.

[0040] According to another aspect of the present application, a device for batch selecting and adjusting elements of the same layer in a canvas page is provided, comprising:

[0041] A layer property filtering module, used to read the layer type and layer property of each layer element in the canvas page, and obtain the layer property filtering condition in response to the property filtering operation of the layer element;

[0042] A screening condition matching module, used for matching the layer properties of each layer element in the canvas page according to the layer property screening condition, selecting each layer element that meets the layer property screening condition and performing a real-time preview;

[0043] The batch adjustment and preview module is used to batch adjust the layer properties of each selected layer element and preview them in real time.

[0044] The solution provided by the above embodiment of the present invention reads the layer type and layer properties of each layer element in the canvas page, and obtains the layer property screening condition in response to the property screening operation of the layer element; matches the layer properties of each layer element in the canvas page according to the layer property screening condition, selects each layer element that meets the layer property screening condition and previews it in real time; and adjusts the layer properties of each selected layer element in batches and previews it in real time. The present invention enables designers to adjust the layer properties of layer elements in batches by quickly matching and screening the layer properties in the canvas page, saving time for selecting and adjusting layers one by one, and improving design efficiency and user experience.

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

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

[0047] Figure 1 A schematic diagram showing a flow chart of a method for batch selecting and adjusting elements of the same layer in a canvas page according to an embodiment of the present invention;

[0048] Figure 2 The schematic diagram of layer attribute screening in an embodiment of the present invention is shown. Figure 1 ;

[0049] Figure 3 The schematic diagram of layer attribute screening in an embodiment of the present invention is shown. Figure 2 ;

[0050] Figure 4 A functional structure diagram of a method and device for batch selecting and adjusting elements of the same layer in a canvas page according to an embodiment of the present invention is shown. DETAILED DESCRIPTION

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

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

[0053] Container: Formerly known as "drawing board", it is an important design component of design software, such as iPhone container and A4 paper container. In this application, in addition to defining the scope of the interface like the drawing board in traditional design software, the container can also add layout grid, rounded corner filling and other attributes to it, and can also nest another container in the container.

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

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

[0056] Instance: An instance refers to 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.

[0057] The method and device for batch selecting and adjusting elements of the same layer in a canvas page proposed by the present invention are described in detail below through specific embodiments.

[0058] Embodiment 1:

[0059] Figure 1 The functional structure diagram of the method for batch selecting and adjusting the same layer elements in a canvas page according to an embodiment of the present invention is shown. Figure 1 As shown, the following steps are included:

[0060] Step S101, read the layer type and layer attribute of each layer element in the canvas page, and obtain the layer attribute filtering condition in response to the attribute filtering operation of the layer element.

[0061] In this embodiment, Figure 2 , Figure 3As shown, when the designer selects layer elements with the same layer attributes in a batch on a canvas page, a quick selection method is provided, allowing the designer to quickly filter and select all layers with the same or similar layer attributes in the canvas according to specific layer attributes (such as color, font size, stroke thickness, etc.). For example, layers with the same color, layers with the same font size, layers with the same stroke thickness, etc., and according to the selected layer attributes (such as layers with the same rounded corners, or layers with the same fill color + the same font + the same font size), after all layers are automatically selected according to the selected layer attributes, the designer can make unified modifications and adjustments, saving the modification and adjustment time of the design draft.

[0062] To facilitate understanding of the overall technical solution of the present embodiment, an example is given for schematic illustration. For example, the fonts of all text layers in Kaiti are uniformly adjusted to Songti, or the text layers with a font size of 10px are uniformly adjusted to 15px. The designer only needs to select one of the text layers with a font size of 10px, and then the system selects all text layers with the same font size of 10px, and finally performs a unified font adjustment according to the layer properties panel. For another example, to adjust a shape layer with a stroke color of "#FFEFD5" to a similar color "#FFEBCD", the designer only needs to select one of the shape layers with a stroke color of "#FFEFD5", and then the system selects all shape layers with the same stroke color of "#FFEFD5", and finally performs a unified stroke color adjustment according to the layer properties panel. For example, to adjust the shape layers with stroke colors of "#FFEFD5" and "#FFEBCD" (the two colors are similar, the former is "PapayaWhip" and the latter is "BlanchedAlmond") to "#FFFAFA" (the color is "Snow"), the designer only needs to select one of the shape layers with a stroke color of "#FFEFD5", and then the system selects all shape layers with the same or similar stroke colors of "#FFEFD5" and "#FFEBCD", and finally adjusts the stroke color uniformly (adjusted to "#FFFAFA") according to the layer properties panel.

[0063] In an optional manner, the layer types include shapes, containers, regions, text, images, and connecting lines;

[0064] The layer properties include fill color, stroke thickness, stroke color, special effect properties, rounded corner properties, font color, font, font size and font weight.

[0065] In this embodiment, the batch selected layer types support the following types:

[0066] Shapes, such as circles, ovals, rectangles, etc., usually have properties such as fill color, stroke weight, and stroke color.

[0067] Containers, including general container class components (such as buttons, panels, cards, etc.), instances (such as specific instantiation objects of components), etc., are all container classes.

[0068] Region refers to a specific area defined in a canvas page (such as with a specific color, transparency or border), which is usually used to mark or separate different parts of the canvas page.

[0069] Text, such as text contained in a text layer, shape, container, or region, can be part of other layer elements and have properties such as font, size, weight, and color.

[0070] Pictures, layers containing images, usually have properties such as transparency and filter effects.

[0071] Connecting lines are used to connect elements on different layers or represent process relationships. They usually have attributes such as color, thickness, and arrowheads.

[0072] In this embodiment, the layer attributes include fill color, stroke thickness, stroke color, special effect attributes, rounded corner attributes, font color, font, font size, and font weight. For example, the fill color is #FF5733 (orange); the stroke thickness is 5px solid#000000, which is a 5-pixel wide black solid stroke; the special effect attribute is a shadow effect of 10px 10px 20px rgba (0,0,0,0.5); and the rounded corner radius is 20 pixels.

[0073] In an optional manner, the step of obtaining the layer attribute filtering condition in response to the attribute filtering operation of the layer element further includes:

[0074] For any selected layer element, obtain a set of optional layer attributes according to the layer type of the layer element;

[0075] Perform the same layer attribute selection operation through the right-click menu or the toolbar, and display the selectable layer attribute set through the secondary menu;

[0076] The optional layer attribute set is subjected to multiple combination screening to obtain the layer attribute screening condition.

[0077] In this embodiment, Figure 2 , Figure 3 As shown in the figure, by performing multiple combination screening on the optional layer properties, the complex screening needs of designers are met.

[0078] Specifically, when a designer selects a layer element, the type of the layer element (such as shape, text, image, etc.) is identified, and optional layer attributes applicable to the type are filtered according to the layer type.

[0079] Displays a set of optional layer properties through the right-click menu or toolbar button entry. When the designer clicks the entry, a secondary menu pops up and lists all the optional layer properties.

[0080] In the secondary menu, select multiple attributes for combined filtering, such as checking, single selection, or multiple selection to specify the filtering conditions. After completing the setting of the filtering conditions, the layer elements that meet the conditions are automatically filtered out according to the filtering conditions.

[0081] In an optional manner, the step of obtaining the layer attribute filtering condition in response to the attribute filtering operation of the layer element further includes:

[0082] Select multiple layer elements in the canvas page, and obtain a selectable layer attribute set according to the intersection of the layer attributes of the multiple layer elements;

[0083] Perform the same layer attribute selection operation through the right-click menu or the toolbar, and display the selectable layer attribute set through the secondary menu;

[0084] The optional layer attribute set is subjected to multiple combination screening to obtain the layer attribute screening condition.

[0085] In this embodiment, by selecting multiple layer elements for attribute screening, a selectable layer attribute set is generated according to the intersection of layer attributes of the multiple layer elements, thereby further significantly improving the design efficiency.

[0086] Step S102, matching the layer attributes of each layer element in the canvas page according to the layer attribute filtering condition, selecting each layer element that meets the layer attribute filtering condition and performing a real-time preview.

[0087] In this embodiment, according to the set layer property screening conditions, the layer elements in the canvas page can be accurately matched to ensure that only elements that meet the conditions are selected (such as highlighted, etc.), and the canvas page is updated in real time while the layer elements are selected, so that the screening results can be seen immediately. Designers do not need to select one by one dozens or even hundreds of times, and can select all the layer elements whose layer properties are to be adjusted according to the screening conditions, which significantly improves design efficiency and reduces misoperation.

[0088] In an optional manner, matching the layer properties of each layer element in the canvas page according to the layer property screening condition further includes:

[0089] According to the layer attribute screening condition, obtaining a layer element in the canvas page with the same or similar layer attributes as those in any of the layer attribute screening conditions;

[0090] The layer attribute screening condition is a combination of multiple layer attributes including fill color, stroke thickness, stroke color, special effect attribute, rounded corner attribute, font, font size and font weight.

[0091] In this embodiment, the matching algorithm can quickly and accurately find layer elements similar to the screening conditions, and the layer elements in the design project can be edited more efficiently, which significantly saves the designer's time and energy. For example, for the fill color attribute, not only can layer elements that are completely blue be found, but also layer elements of similar colors such as dark blue and light blue can be found; for the font size attribute, layer elements with font sizes between 12pt and 13pt can be found.

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

[0093] Responding to a selection operation of a layer element;

[0094] Using the layer element as a screening criterion, using the layer attribute of the layer element as a screening layer attribute, and matching the layer attribute of each layer element in the canvas page according to the screening layer attribute;

[0095] The layer elements in the canvas page that have the same or similar attributes to any of the filter layers are selected and previewed in real time.

[0096] In this embodiment, by directly selecting the layer element as the screening basis, the screening process is more intuitive and easy to understand, and the complexity of the screening operation is reduced. Take a button as an example. The button has a fill color (such as light blue), a stroke thickness (such as 2px), a rounded corner attribute (such as 10px), etc. The designer hopes to find all button layers with similar styles in the canvas page for unified editing. The designer only needs to select the button layer as the screening basis, and then let the system complete the matching and select the layer elements that meet the matching conditions and highlight them. Specifically, the system first automatically obtains the layer attributes of the button layer, including fill color, stroke thickness, rounded corner attribute, etc., and then obtains the layer attributes of all layer elements in the canvas page. The layer attributes of each layer element are matched with the screening layer attributes according to the matching algorithm. For example, for the fill color attribute, match the layer elements with similar colors (such as dark blue, sky blue, etc.); for the stroke thickness attribute, match the layer elements with similar values ​​(such as 1.5-1.85px, etc.); for the rounded corner attribute, match the layer elements with similar values ​​(such as 8px-11px, etc.). All layer elements that are the same or similar to the filter layer attributes are marked and highlighted.

[0097] In an optional manner, the type of the layer attribute of the layer element includes a quantized layer attribute type, a non-quantized layer attribute type and a color attribute type;

[0098] The method for calculating similar layer elements further includes:

[0099] According to the type of the layer attribute of the layer element, the similarity between the filtered layer attribute and the layer attribute of each layer element in the canvas page is calculated;

[0100] For the quantitative layer attribute type, the numerical difference between the filter layer attribute and the layer attribute of each layer element in the canvas page is directly compared; if the numerical difference is less than a preset quantitative threshold, the layer elements are judged to be similar; wherein the quantitative layer attribute type includes stroke thickness, font size, font weight and corner radius attributes;

[0101] For non-quantitative layer attribute types, determine whether the filter layer attribute and the layer attribute of each layer element in the canvas page are within the range of a preset similar layer attribute set; if they are within the range of the preset similar layer attribute set, determine them as similar layer elements; wherein the non-quantitative layer attribute types include font and special effect attributes;

[0102] For the color attribute type, the similarity is calculated based on the color space distance between the filter layer attribute and the layer attribute of each layer element in the canvas page; if the similarity is greater than the preset color proximity threshold, it is determined to be a similar layer element; wherein, the color attribute type includes fill color, stroke color and font color, and the color code includes RGB and hexadecimal.

[0103] In this embodiment, by distinguishing quantitative layer attributes, non-quantitative layer attributes and color attributes, different matching methods such as numerical difference comparison, preset similarity set judgment, color space distance calculation, etc. are used for different types of layer attributes, so that layer elements can be screened more finely and the accuracy and practicality of screening can be improved. Among them, the color space distance can be calculated by Euclidean distance, Manhattan distance, etc., which is not limited in this article.

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

[0105] According to the layer type of the layer element and the type of the layer attribute, weighting the similarity of the layer attribute to obtain the overall similarity;

[0106] If the overall similarity exceeds a preset overall similarity threshold, the elements are determined to be similar layer elements.

[0107] In this embodiment, by weighting the similarity of layer attributes and comprehensively considering multiple attributes of layer elements, roughly similar layer elements can be found as a whole through overall similarity to improve the overall consistency of the design, thereby meeting the special needs of designers.

[0108] Step S103, batch adjust the layer properties of each selected layer element and preview them in real time.

[0109] In an optional manner, the batch adjustment of the layer attributes of each selected layer element and real-time preview further includes:

[0110] Extracting a set of identical or similar layer elements in the canvas page that have identical or similar layer elements with any of the filtered layer attributes;

[0111] Dynamically setting a unified layer property setting panel according to the same or similar layer element set;

[0112] According to the layer properties set in the unified layer property setting panel, the layer properties of similar layer elements are batch adjusted and previewed in real time; or, according to the layer type, the layer properties of similar layer elements are batch adjusted and previewed in real time.

[0113] For example, according to the extracted text layer element set, a unified layer property setting panel is dynamically generated, which contains the common properties of the text layer elements (such as font, font size, font weight, color, etc.) and corresponding edit input boxes or drop-down lists, etc., and the font size property is selected in the panel and its value is set to 14pt. After clicking the Apply or OK button, according to the settings in the unified layer property setting panel, the font sizes of all text layer elements in the text layer element set are automatically adjusted to 14pt in batches, and the adjustment effect is previewed in real time. Optionally, the state before multiple adjustments can be restored by clicking the Undo button. It can be seen that the present embodiment has the following technical effects:

[0114] First, the operation is more convenient. You only need to select a supported layer and then right-click the layer to perform attribute matching operations.

[0115] Second, it provides multi-attribute filtering capabilities. It can quickly filter based on multiple attributes such as layer color, font size, stroke thickness, etc., while existing tools require manual selection or only support selection based on a single attribute (such as selecting all text layers and then setting the font uniformly, which is too simple and far from meeting actual needs).

[0116] Third, improve batch modification efficiency. Designers can select all layers of the same type at one time and modify them uniformly, saving the time of selecting and modifying layers one by one and improving work efficiency.

[0117] Fourth, it is highly adaptable. It is suitable for design projects of different scales and complexities, from UI interface design projects to vector illustration design projects, regardless of the size of the project and the number of layers.

[0118] In summary, the solution provided by the above embodiment of the present invention reads the layer type and layer properties of each layer element in the canvas page, and obtains the layer property screening condition in response to the property screening operation of the layer element; matches the layer properties of each layer element in the canvas page according to the layer property screening condition, selects each layer element that meets the layer property screening condition and previews it in real time; and adjusts the layer properties of each selected layer element in batches and previews it in real time. The present invention enables designers to adjust the layer properties of layer elements in batches by quickly matching and screening the layer properties in the canvas page, saving time for selecting and adjusting layers one by one, and improving design efficiency and user experience.

[0119] Embodiment 2:

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

[0121] The layer property filtering module 401 is used to read the layer type and layer property of each layer element in the canvas page, and obtain the layer property filtering condition in response to the property filtering operation of the layer element;

[0122] A screening condition matching module 402 is used to match the layer properties of each layer element in the canvas page according to the layer property screening condition, select each layer element that meets the layer property screening condition and preview it in real time;

[0123] The batch adjustment and preview module 403 is used to batch adjust the layer properties of each selected layer element and preview them in real time.

[0124] In an optional manner, the layer types include shapes, containers, regions, text, images, and connecting lines;

[0125] The layer properties include fill color, stroke thickness, stroke color, special effect properties, rounded corner properties, font color, font, font size and font weight.

[0126] In an optional manner, the layer attribute screening module 401 is further used to:

[0127] For any selected layer element, obtain a set of optional layer attributes according to the layer type of the layer element;

[0128] Perform the same layer attribute selection operation through the right-click menu or the toolbar, and display the selectable layer attribute set through the secondary menu;

[0129] The optional layer attribute set is subjected to multiple combination screening to obtain the layer attribute screening condition.

[0130] In an optional manner, the layer attribute screening module 401 is further used to:

[0131] Select multiple layer elements in the canvas page, and obtain a selectable layer attribute set according to the intersection of the layer attributes of the multiple layer elements;

[0132] Perform the same layer attribute selection operation through the right-click menu or the toolbar, and display the selectable layer attribute set through the secondary menu;

[0133] The optional layer attribute set is subjected to multiple combination screening to obtain the layer attribute screening condition.

[0134] In an optional manner, the screening condition matching module 402 is further used to:

[0135] According to the layer attribute screening condition, obtaining a layer element in the canvas page with the same or similar layer attributes as those in any of the layer attribute screening conditions;

[0136] The layer attribute screening condition is a combination of multiple layer attributes including fill color, stroke thickness, stroke color, special effect attribute, rounded corner attribute, font, font size and font weight.

[0137] In an optional manner, the screening condition matching module 402 is further used to:

[0138] Responding to a selection operation of a layer element;

[0139] Using the layer element as a screening criterion, using the layer attribute of the layer element as a screening layer attribute, and matching the layer attribute of each layer element in the canvas page according to the screening layer attribute;

[0140] The layer elements in the canvas page that have the same or similar attributes to any of the filter layers are selected and previewed in real time.

[0141] In an optional manner, the type of the layer attribute of the layer element includes a quantitative layer attribute type, a non-quantitative layer attribute type and a color attribute type.

[0142] In an optional manner, the screening condition matching module 402 is further used to:

[0143] According to the type of the layer attribute of the layer element, the similarity between the filtered layer attribute and the layer attribute of each layer element in the canvas page is calculated;

[0144] For the quantitative layer attribute type, the numerical difference between the filter layer attribute and the layer attribute of each layer element in the canvas page is directly compared; if the numerical difference is less than a preset quantitative threshold, the layer elements are judged to be similar; wherein the quantitative layer attribute type includes stroke thickness, font size, font weight and corner radius attributes;

[0145] For non-quantitative layer attribute types, determine whether the filter layer attribute and the layer attribute of each layer element in the canvas page are within the range of a preset similar layer attribute set; if they are within the range of the preset similar layer attribute set, determine them as similar layer elements; wherein the non-quantitative layer attribute types include font and special effect attributes;

[0146] For the color attribute type, the similarity is calculated based on the color space distance between the filter layer attribute and the layer attribute of each layer element in the canvas page; if the similarity is greater than the preset color proximity threshold, it is determined to be a similar layer element; wherein, the color attribute type includes fill color, stroke color and font color, and the color code includes RGB and hexadecimal.

[0147] In an optional manner, the screening condition matching module 402 is further used to:

[0148] According to the layer type of the layer element and the type of the layer attribute, weighting the similarity of the layer attribute to obtain the overall similarity;

[0149] If the overall similarity exceeds a preset overall similarity threshold, the elements are determined to be similar layer elements.

[0150] In an optional manner, the batch adjustment and preview module 403 is further used to:

[0151] Extracting a set of identical or similar layer elements in the canvas page that have identical or similar layer elements with any of the filtered layer attributes;

[0152] Dynamically setting a unified layer property setting panel according to the same or similar layer element set;

[0153] According to the layer properties set in the unified layer property setting panel, the layer properties of similar layer elements are batch adjusted and previewed in real time; or, according to the layer type, the layer properties of similar layer elements are batch adjusted and previewed in real time.

[0154] The solution provided by the above embodiment of the present invention reads the layer type and layer properties of each layer element in the canvas page, and obtains the layer property screening condition in response to the property screening operation of the layer element; matches the layer properties of each layer element in the canvas page according to the layer property screening condition, selects each layer element that meets the layer property screening condition and previews it in real time; and adjusts the layer properties of each selected layer element in batches and previews it in real time. The present invention enables designers to adjust the layer properties of layer elements in batches by quickly matching and screening the layer properties in the canvas page, saving time for selecting and adjusting layers one by one, and improving design efficiency and user experience.

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

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

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

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

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

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

[0161] 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 batch selecting and adjusting elements of the same layer in a canvas page, characterized in that: include: Read the layer type and layer properties of each layer element in the canvas page, and obtain the layer property filtering condition in response to the property filtering operation of the layer element; Matching the layer attributes of each layer element in the canvas page according to the layer attribute filtering condition, selecting each layer element that meets the layer attribute filtering condition and performing a real-time preview; Batch adjust the layer properties of selected layer elements and preview them in real time.

2. The method for batch selecting and adjusting elements of the same layer in a canvas page according to claim 1, characterized in that: The layer types include shapes, containers, areas, text, images, and connecting lines; The layer properties include fill color, stroke thickness, stroke color, special effect properties, rounded corner properties, font color, font, font size and font weight.

3. The method for batch selecting and adjusting elements of the same layer in a canvas page according to claim 1, characterized in that: The obtaining of the layer attribute filtering condition in response to the attribute filtering operation of the layer element further comprises: For any selected layer element, obtain a set of optional layer attributes according to the layer type of the layer element; Perform the same layer attribute selection operation through the right-click menu or the toolbar, and display the selectable layer attribute set through the secondary menu; The optional layer attribute set is subjected to multiple combination screening to obtain the layer attribute screening condition.

4. The method for batch selecting and adjusting elements of the same layer in a canvas page according to claim 1, characterized in that: The obtaining of the layer attribute filtering condition in response to the attribute filtering operation of the layer element further comprises: Select multiple layer elements in the canvas page, and obtain a selectable layer attribute set according to the intersection of the layer attributes of the multiple layer elements; Perform the same layer attribute selection operation through the right-click menu or the toolbar, and display the selectable layer attribute set through the secondary menu; The optional layer attribute set is subjected to multiple combination screening to obtain the layer attribute screening condition.

5. The method for batch selecting and adjusting elements of the same layer in a canvas page according to any one of claims 1 to 4, characterized in that: The step of matching the layer attributes of each layer element in the canvas page according to the layer attribute screening condition further includes: According to the layer attribute screening condition, obtaining a layer element in the canvas page with the same or similar layer attributes as those in any of the layer attribute screening conditions; The layer attribute screening condition is a combination of multiple layer attributes including fill color, stroke thickness, stroke color, special effect attribute, rounded corner attribute, font, font size and font weight.

6. The method for batch selecting and adjusting elements of the same layer in a canvas page according to claim 5, characterized in that: The method further comprises: Responding to a selection operation of a layer element; Using the layer element as a screening criterion, using the layer attribute of the layer element as a screening layer attribute, and matching the layer attribute of each layer element in the canvas page according to the screening layer attribute; The layer elements in the canvas page that have the same or similar attributes to any of the filter layers are selected and previewed in real time.

7. The method for batch selecting and adjusting elements of the same layer in a canvas page according to claim 6, characterized in that: The types of layer attributes of the layer elements include quantized layer attribute types, non-quantized layer attribute types and color attribute types; The method for calculating similar layer elements further includes: According to the type of the layer attribute of the layer element, the similarity between the filtered layer attribute and the layer attribute of each layer element in the canvas page is calculated; For the quantitative layer attribute type, the numerical difference between the filter layer attribute and the layer attribute of each layer element in the canvas page is directly compared; if the numerical difference is less than a preset quantitative threshold, the layer elements are judged to be similar; wherein the quantitative layer attribute type includes stroke thickness, font size, font weight and corner radius attributes; For non-quantitative layer attribute types, determine whether the filter layer attribute and the layer attribute of each layer element in the canvas page are within the range of a preset similar layer attribute set; if they are within the range of the preset similar layer attribute set, determine them as similar layer elements; wherein the non-quantitative layer attribute types include font and special effect attributes; For the color attribute type, the similarity is calculated based on the color space distance between the filter layer attribute and the layer attribute of each layer element in the canvas page; if the similarity is greater than the preset color proximity threshold, it is determined to be a similar layer element; wherein, the color attribute type includes fill color, stroke color and font color, and the color code includes RGB and hexadecimal.

8. The method for batch selecting and adjusting elements of the same layer in a canvas page according to claim 7, characterized in that: The method further comprises: According to the layer type of the layer element and the type of the layer attribute, weighting the similarity of the layer attribute to obtain the overall similarity; If the overall similarity exceeds a preset overall similarity threshold, the elements are determined to be similar layer elements.

9. The method for batch selecting and adjusting elements of the same layer in a canvas page according to claim 8, characterized in that: The batch adjustment of the layer attributes of each selected layer element and real-time preview further includes: Extracting a set of identical or similar layer elements in the canvas page that have identical or similar layer elements with any of the filtered layer attributes; Dynamically setting a unified layer property setting panel according to the same or similar layer element set; According to the layer properties set in the unified layer property setting panel, the layer properties of similar layer elements are batch adjusted and previewed in real time; or, according to the layer type, the layer properties of similar layer elements are batch adjusted and previewed in real time.

10. A device for batch selection and adjustment of elements of the same layer in a canvas page, characterized in that: include: A layer property filtering module, used to read the layer type and layer property of each layer element in the canvas page, and obtain the layer property filtering condition in response to the property filtering operation of the layer element; A screening condition matching module, used for matching the layer properties of each layer element in the canvas page according to the layer property screening condition, selecting each layer element that meets the layer property screening condition and performing a real-time preview; The batch adjustment and preview module is used to batch adjust the layer properties of each selected layer element and preview them in real time.

Images