Method for calculating hierarchy through sketch design draft
By using the isContained, buildHierarchy, isSibling, and sortHierarchy functions to process the hierarchical data of the sketch design draft, the problem of inconsistent hierarchical structure in the sketch design draft is solved, and efficient and clear hierarchical relationship judgment and sorting is achieved, improving development efficiency and result continuity.
Patent Information
- Application Number
- CN202510954458.9
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-07-10
- Publication Date
- 2025-10-28
AI Technical Summary
The existing Sketch design drafts do not correspond to the layer hierarchy structure in the exported files as the actual component hierarchy in the development process, resulting in low development efficiency. The existing region growth algorithm has problems such as high computational complexity, high threshold sensitivity, and discontinuous segmentation results.
The `isContained`, `buildHierarchy`, `isSibling`, and `sortHierarchy` functions process the hierarchical data of the sketch design. The hierarchical relationship is determined by the rectangular boundary relationship, which is simplified to the rectangular containment relationship judgment, avoiding pixel-level comparison and complex models, and building a clear hierarchical structure.
It significantly improves the efficiency of processing and understanding sketch design draft hierarchical data, reduces over-segmentation, generates clear boundaries, reduces computational complexity and threshold sensitivity, and improves development efficiency and scalability.
Smart Images
Figure CN120849360A_ABST
Abstract
Description
Technical Field
[0001] This invention belongs to the field of computer graphics processing technology, specifically a method for calculating layers using a sketch design. Background Technology
[0002] Existing Sketch design drafts often suffer from inefficiency and high workload because the layer hierarchy in exported Sketch files reflects the layer editing process. Due to designer habits or development standards, the exported structure may not correspond to the actual component hierarchy during development. Existing technologies address this issue include region growing algorithms, a pixel-based image segmentation algorithm. The basic idea is to start with a seed point and iteratively group connected and similar pixels into the same region using appropriate growth rules, ultimately segmenting connected regions in the image. However, this method has drawbacks. Typical region growing algorithms exhibit high computational complexity in image segmentation, especially in high-resolution images, due to their pixel-level computational demands. Furthermore, region growing algorithms require careful setting of similarity thresholds, and the results are easily affected by the choice of seed point, potentially leading to oversegmentation. Additionally, the segmented region boundaries are discontinuous, requiring additional smoothing. Therefore, an algorithm based on rectangular hierarchy relationships needs to be designed. Summary of the Invention
[0003] The purpose of this invention is to provide a method for calculating hierarchy using a sketch design, in order to solve the problems mentioned in the background art.
[0004] To achieve the above objectives, the present invention provides the following technical solution: a method for calculating hierarchy using a sketch design, wherein the calculation method comprises the following steps:
[0005] Step 1: Unzip the file with the ".sketch" extension, extract the page and layer information, and export the ".json" file under the "pages" path as input data for subsequent processing;
[0006] Step 2: Process the hierarchical data by converting the original hierarchical data into a one-dimensional array and processing the data using four methods: isContained, buildHierarchy, isSibling, and sortHierarchy.
[0007] (1) By using the isContained(rectA,rectB) function, determine whether rectangle rectA is contained within rectangle rectB; by comparing the position and size of the two rectangles, determine whether one rectangle is completely inside the other.
[0008] (2) Using the output of the isContained function as the data input, the buildHierarchy function is used to find rectangles that are contained by other rectangles and add them to the "children" list of the parent rectangle as child nodes; rectangles that are not contained are directly added to the top level of the hierarchy.
[0009] (3) Input the hierarchical relationship output by the buildHierarchy function into the sortHierarchy1(hierarchy) function, and sort the hierarchical structure according to the distance of each rectangle from the origin coordinates;
[0010] (4) Further optimize the sorting method by using the isSibling(a,b,hierarchy) function to check whether two elements are at the same level; if so, sort them according to their xy coordinates; otherwise, sort them according to their distance from the origin.
[0011] Preferably, the isContained function determines the containment relationship by adjusting the rectangle boundary to not exceed a preset maximum value and ensuring that the coordinates are non-negative, and by comparing the positions and sizes of the two rectangles.
[0012] Preferably, the buildHierarchy function finds rectangles contained by other rectangles based on the result of the isContained function and adds them to the "children" list of the parent rectangle to form a hierarchical structure.
[0013] Preferably, the sortHierarchy1 function sorts the hierarchical structure by calculating the Euclidean distance between the coordinates of the top left corner of the rectangle and the origin.
[0014] Preferably, the sortHierarchy function sorts elements according to the direction of the parent node of the element's hierarchy, which can be either vertical or horizontal.
[0015] Preferably, the buildHierarchy function adds rectangles to child nodes, ultimately generating a hierarchical rectangular structure.
[0016] Preferably, the full name of the sortHierarchy function is sortHierarchy(hierarchy, parentOrientation='vertical') function.
[0017] Preferably, this hierarchical calculation method only needs to determine whether the rectangular boundaries contain each other, without requiring precise pixel-level comparisons or complex seed growth or boundary growth models.
[0018] The beneficial effects of the present invention are as follows:
[0019] 1. This invention utilizes a carefully defined series of functions to construct and sort hierarchical relationships for data containing rectangular regions. The scheme significantly optimizes the hierarchical transformation calculation method, greatly improving the efficiency and intuitiveness of processing and understanding this type of data. Overall, this technical solution not only effectively improves work efficiency and reduces the workload of developers, but also demonstrates strong scalability.
[0020] 2. This invention presents an algorithm based on rectangular hierarchical relationships. Compared to traditional region growing algorithms, traditional algorithms face high computational complexity in image segmentation tasks, especially when processing high-resolution images. This is because traditional algorithms rely on pixel-level calculations, resulting in a massive computational load. Furthermore, region growing algorithms require precise setting of similarity thresholds, and their segmentation results are highly susceptible to the selection of seed points, potentially leading to oversegmentation. Additionally, the segmented region boundaries are often discontinuous, requiring further smoothing. In contrast, the rectangular-based algorithm does not require setting thresholds and is less sensitive to initial conditions, thus reducing the likelihood of oversegmentation. Moreover, this algorithm generates clear boundaries and inherently supports rectangular shapes, giving it a significant advantage when processing data containing rectangular regions. Attached Figure Description
[0021] Figure 1 This is a functional flowchart of the present invention;
[0022] Figure 2 This is a UI design draft for the present invention;
[0023] Figure 3 This is a diagram illustrating the conversion effect of the present invention. Detailed Implementation
[0024] The following will clearly and completely describe the technical solutions in the embodiments of the present invention in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative efforts are within the scope of protection of the present invention.
[0025] like Figures 1 to 3 As shown, this embodiment of the invention provides a method for calculating hierarchy using a sketch design. The steps of this hierarchy calculation method are as follows:
[0026] Step 1: Unzip the file with the ".sketch" extension, extract the page and layer information, and export the ".json" file under the "pages" path as input data for subsequent processing;
[0027] Step 2: Process the hierarchical data by converting the original hierarchical data into a one-dimensional array and processing the data using four methods: isContained, buildHierarchy, isSibling, and sortHierarchy.
[0028] (1) By using the isContained(rectA,rectB) function, determine whether rectangle rectA is contained within rectangle rectB; by comparing the position and size of the two rectangles, determine whether one rectangle is completely inside the other.
[0029] (2) Using the output of the isContained function as the data input, the buildHierarchy function is used to find rectangles that are contained by other rectangles and add them to the "children" list of the parent rectangle as child nodes; rectangles that are not contained are directly added to the top level of the hierarchy.
[0030] (3) Input the hierarchical relationship output by the buildHierarchy function into the sortHierarchy1(hierarchy) function, and sort the hierarchical structure according to the distance of each rectangle from the origin coordinates;
[0031] (4) Further optimize the sorting method by using the isSibling(a,b,hierarchy) function to check whether two elements are at the same level; if so, sort them according to their xy coordinates; otherwise, sort them according to their distance from the origin.
[0032] The basic idea of the algorithm is to treat each rectangle as an independent region. It then determines whether one region completely contains another; if so, the two regions have an inclusion relationship. This inclusion relationship is recursively checked between all regions, ultimately forming the hierarchical result of image segmentation.
[0033] Unlike common morphological image segmentation algorithms, this method applies to rectangles, thus simplifying computation: it only requires determining whether the rectangle boundaries contain each other, without needing precise pixel-level comparisons. Calculating the containment relationship between rectangles is relatively straightforward. Complex seed growing or boundary growing models are not required.
[0034] The detailed steps are as follows: First, by using the `isContained(rectA, rectB)` function, we can determine whether one rectangle (rectA) is contained within another rectangle (rectB). In this process, we first adjust the boundaries of each rectangle to ensure they do not exceed a preset maximum value, and that the rectangle's coordinates are always non-negative. Then, by comparing the positions and sizes of the two rectangles, we can determine whether one rectangle is completely inside the other.
[0035] Next, using the `buildHierarchy(data)` function, given a set of rectangles as input, we determine which rectangles are contained within other rectangles based on the results of the previous step. For each contained rectangle, it is added to the parent rectangle's "children" list, becoming its child node. All rectangles not contained within other rectangles are directly added to the top level of the hierarchy. This step ultimately produces a hierarchical rectangle structure.
[0036] Next, we use the `sortHierarchy1(hierarchy)` function, which takes the hierarchical relationship described above as input and sorts the hierarchy based on the distance of each rectangle from the origin (coordinates 0, 0). This step is accomplished by calculating the Euclidean distance between the top-left corner of the rectangle and the origin.
[0037] Building upon this, we further optimize the sorting method. Using the `isSibling(a, b, hierarchy)` function, we can check if two elements are at the same level. If so, we sort them based on their y-coordinate (vertical) or x-coordinate (horizontal). Otherwise, we sort them based on their distance from the origin. The specific sorting method depends on the orientation of the parent node of their level, which is achieved using the `sortHierarchy(hierarchy, parentOrientation = 'vertical')` function.
[0038] At this point, we have established a clear hierarchical structure based on the containment relationships between the rectangles and sorted this structure according to their relative positions. This entire process allows us to more effectively process and understand data containing rectangular regions.
[0039] The isContained function determines the containment relationship by adjusting the rectangle boundary to not exceed a preset maximum value and ensuring that the coordinates are non-negative, and by comparing the position and size of the two rectangles.
[0040] The buildHierarchy function finds rectangles contained by other rectangles based on the result of the isContained function and adds them to the "children" list of the parent rectangle to form a hierarchical structure.
[0041] The sortHierarchy1 function sorts the hierarchical structure by calculating the Euclidean distance between the coordinates of the top-left corner of the rectangle and the origin.
[0042] The sortHierarchy function sorts elements by the direction of the parent node of the element's hierarchy, which can be either vertical or horizontal.
[0043] The buildHierarchy function adds rectangles to child nodes, ultimately generating a hierarchical rectangular structure.
[0044] The full name of the sortHierarchy function is sortHierarchy(hierarchy, parentOrientation='vertical') function.
[0045] This hierarchical calculation method only needs to determine whether the rectangular boundaries contain each other, without requiring precise pixel-level comparisons or complex seed growth or boundary growth models.
[0046] The key logic code is as follows:
[0047] The function isContained takes rectA and rectB as input parameters.
[0048] Set the maximum width (maxWidth) to 377.
[0049] Adjust rectA:
[0050] Let x be the larger of rectA.x and 0;
[0051] Set y to be the larger of rectA.y and 0;
[0052] If rectA.x is less than 0, subtract the absolute value of rectA.x from rectA.width; otherwise, take rectA.width and compare the result with maxWidth, taking the smaller value as width.
[0053] If rectA.y is less than 0, subtract the absolute value of rectA.y from rectA.height; otherwise, take rectA.height, compare the result with 0, and take the larger value as the height.
[0054] Make similar adjustments to rectB;
[0055] If the adjusted rectA and rectB are exactly equal;
[0056] Returns false;
[0057] Otherwise, check if rectA is contained within rectB:
[0058] Return true if the top left corner of rectA is below the top left corner of rectB and the bottom right corner of rectA is above the bottom right corner of rectB.
[0059] Otherwise, return false;
[0060] Define the function buildHierarchy(data):
[0061] Initialize an empty hierarchy array (hierarchy);
[0062] Initialize variables aaa and bbb to 0;
[0063] For each element in data, add an empty sub-element array;
[0064] Iterate through each element i in the dataset:
[0065] Initialize parentId to -1 and minAreaDiff to infinity;
[0066] Iterate through each element j in the dataset again:
[0067] If i equals j, skip the current loop;
[0068] If element j contains element i:
[0069] Calculate the area difference, areaDiff.
[0070] If areaDiff is less than minAreaDiff:
[0071] Update parentId to j and minAreaDiff to areaDiff;
[0072] If parentId is not equal to -1 (parent node found):
[0073] Add data item i to the parent node's child element array;
[0074] Increase the count of aaa;
[0075] Otherwise: Add data item i directly to the hierarchy array hierarchy and increment the count of bbb;
[0076] Returns an array of hierarchical structures.
[0077] Define the function isSibling(a, b, hierarchy):
[0078] Iterate through each element of the hierarchy:
[0079] Return true if the current node has children that contain both a and b;
[0080] Otherwise, if the current node has child nodes:
[0081] Then the isSibling function is called again to check if a and b are sibling nodes. If they are, it returns true and the traversal ends; otherwise, it returns false.
[0082] Define the function sortHierarchy(hierarchy, parentOrientation, defaults to 'vertical'):
[0083] Sort the hierarchy according to the following rules:
[0084] For any two elements a and b:
[0085] If a and b are sibling nodes and parentOrientation is 'vertical', sort them according to their y-coordinates;
[0086] If a and b are sibling nodes and parentOrientation is not 'vertical', sort them according to their x-coordinates;
[0087] If a and b are not sibling nodes, calculate their distances from the origin and compare them.
[0088] Traverse each node in the hierarchy:
[0089] If a node has child nodes:
[0090] Get the value of the node's android:orientation attribute and use it as the new parentOrientation;
[0091] Call the sortHierarchy function again to sort the child nodes.
[0092] It should be noted that, in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such process, method, article, or apparatus.
[0093] While embodiments of the present invention have been shown and described, it will be appreciated by those skilled in the art that various changes, modifications, substitutions, and variations may be made to these embodiments without departing from the principles and spirit of the invention, and that the scope of the invention is defined by the appended claims and their equivalents.
Claims
1. A method for calculating hierarchy using a sketch design, characterized in that: The calculation steps for this level are as follows: Step 1: Unzip the file with the ".sketch" extension, extract the page and layer information, and export the ".json" file under the "pages" path as input data for subsequent processing; Step 2: Process the hierarchical data by converting the original hierarchical data into a one-dimensional array and processing the data using four methods: isContained, buildHierarchy, isSibling, and sortHierarchy. (1) By using the isContained(rectA,rectB) function, determine whether rectangle rectA is contained within rectangle rectB; by comparing the position and size of the two rectangles, determine whether one rectangle is completely inside the other. (2) Using the output of the isContained function as the data input, the buildHierarchy function is used to find rectangles that are contained by other rectangles and add them to the "children" list of the parent rectangle as child nodes; rectangles that are not contained are directly added to the top level of the hierarchy. (3) Input the hierarchical relationship output by the buildHierarchy function into the sortHierarchy1(hierarchy) function, and sort the hierarchical structure according to the distance of each rectangle from the origin coordinates; (4) Further optimize the sorting method by using the isSibling(a,b,hierarchy) function to check whether two elements are at the same level; if so, sort them according to their xy coordinates; otherwise, sort them according to their distance from the origin.
2. The method for calculating hierarchy using a sketch design as described in claim 1, characterized in that: The isContained function determines the containment relationship by adjusting the rectangle boundary to not exceed a preset maximum value and ensuring that the coordinates are non-negative, and by comparing the position and size of the two rectangles.
3. The method for calculating hierarchy using a sketch design as described in claim 1, characterized in that: The buildHierarchy function finds rectangles contained by other rectangles based on the result of the isContained function and adds them to the "children" list of the parent rectangle to form a hierarchical structure.
4. The method for calculating hierarchy using a sketch design as described in claim 1, characterized in that: The sortHierarchy1 function sorts the hierarchical structure by calculating the Euclidean distance between the coordinates of the top-left corner of the rectangle and the origin.
5. The method for calculating hierarchy using a sketch design as described in claim 1, characterized in that: The sortHierarchy function sorts elements by the direction of the parent node of the element's hierarchy, which can be either vertical or horizontal.
6. The method for calculating hierarchy using a sketch design as described in claim 1, characterized in that: The `buildHierarchy` function adds rectangles to child nodes, ultimately producing a hierarchical rectangular structure.
7. The method for calculating hierarchy using a sketch design as described in claim 1, characterized in that: The full name of the sortHierarchy function is sortHierarchy(hierarchy, parentOrientation='vertical') function.
8. The method for calculating hierarchy using a sketch design as described in claim 1, characterized in that: This hierarchical calculation method only needs to determine whether the rectangular boundaries contain each other, without requiring precise pixel-level comparisons or complex seed growth or boundary growth models.