Graph node shielding detection method and device, electronic equipment and storage medium

Abstract

The invention provides a graphic node shielding detection method and device, electronic equipment and a storage medium, relates to the technical field of front ends, and can obtain node information of a plurality of graphic nodes, determining a to-be-tested graph node and a target graph node which may shield the to-be-tested graph node in the plurality of graph nodes, and then sequentially stacking the target graph node and the to-be-tested graph node on a canvas object according to the position graph layer information; according to the method, the target graph node is stacked, the first image information of the canvas object is obtained when the target graph node is stacked, the second image information of the canvas object is obtained when the to-be-detected graph node is stacked, the first image information and the second image information can be compared, and the shielding condition of the to-be-detected graph node is determined according to the comparison result. Therefore, the shielding detection accuracy can be improved by comparing visible image information.

Description

Technical Field

[0001] The present application relates to the field of front-end technology, and in particular to a method, device, electronic device and storage medium for detecting occlusion of a graphic node. Background Art

[0002] Graphic nodes are basic editable units in vector graphics editing software (such as front-end page design software), which can be placed in design draft files as function control components. Common graphic nodes include rectangular nodes, ellipse nodes, polygonal nodes, star nodes, text nodes, etc. In the process of using the above software, it is often necessary to determine whether a certain graphic node is covered by other graphic nodes. In related technologies, it is usually based on the bounding box of the node to determine whether a graphic node is covered by other graphic nodes. However, this method has poor adaptability to scenarios where the graphic node is occluded by a combination of multiple other graphic nodes; at the same time, because the bounding box expands the occlusion detection range, it also significantly reduces the reliability of the detection results.

[0003] Therefore, how to effectively determine the occlusion status of a graphic node is a technical problem that technical personnel in this field need to solve urgently. Summary of the invention

[0004] The purpose of the present application is to provide a method, device, electronic device and storage medium for detecting occlusion of a graphic node, which can determine the occlusion condition of the graphic node to be tested by determining the image difference brought about by the graphic node to be tested before and after stacking, thereby improving the detection accuracy of the occlusion condition of the graphic node.

[0005] In order to solve the above technical problems, the present application provides a method for detecting occlusion of a graphic node, comprising:

[0006] Determine a graphic node to be tested among a plurality of graphic nodes, and obtain node information of the plurality of graphic nodes; wherein the node information includes position layer information;

[0007] According to the node information of each graphic node, a target graphic node that may cause occlusion to the graphic node to be tested is selected from the multiple graphic nodes;

[0008] The target graphic node and the graphic node to be tested are sequentially stacked on a canvas object according to the position layer information, and first image information of the canvas object is obtained when the stacking of the target graphic node is completed, and second image information of the canvas object is obtained when the stacking of the graphic node to be tested is completed;

[0009] Comparing the first image information with the second image information to obtain a comparison result;

[0010] The occlusion condition of the graphic node to be tested is determined according to the comparison result.

[0011] Optionally, the node information also includes transparency information;

[0012] The step of selecting a target graphic node that may block the graphic node to be tested from the plurality of graphic nodes according to the node information of each graphic node includes:

[0013] According to the position layer information, taking a graphic node whose layer level is above the graphic node to be tested as a candidate graphic node;

[0014] According to the transparency information, a candidate graphic node without transparency is used as the target graphic node.

[0015] Optionally, the acquiring node information of the plurality of graphic nodes includes:

[0016] According to the position layer information of the graphic node to be tested, a preset area is set around the graphic node to be tested;

[0017] According to the position layer information of each of the graphic nodes, the node information of the graphic nodes located in the preset area is obtained.

[0018] Optionally, stacking the target graphic node and the graphic node to be tested in sequence on the canvas object according to the position layer information includes:

[0019] The target graphic node and the graphic node to be tested are sequentially stacked on a canvas object with a transparent background set according to the position layer information.

[0020] Optionally, the node information also includes node type and node graph information;

[0021] The step of sequentially stacking the target graphic node and the graphic node to be tested on a canvas object with a transparent background set according to the position layer information includes:

[0022] Creating the canvas object and setting a transparent background attribute for the canvas object;

[0023] Determining the graphic nodes to be stacked from the target graphic nodes and the graphic nodes to be tested in turn, and determining the node types of the graphic nodes to be stacked;

[0024] If the node type is a regular shape node, the graphic node to be superimposed is drawn and superimposed on the canvas object according to the node graphic information and the position layer information;

[0025] If the node type is an irregular shape node, the graphic node to be superimposed is converted into a node image with transparency information, and the node image is superimposed on the canvas object according to the position layer information.

[0026] Optionally, the first image information is the number of first non-transparent pixels, and the second image information is the number of second non-transparent pixels;

[0027] Determining the occlusion condition of the to-be-tested graphic node according to the comparison result includes:

[0028] Determining whether the number of the first non-transparent pixels is the same as the number of the second non-transparent pixels;

[0029] If they are the same, it is determined that the graphic node to be tested is completely blocked;

[0030] If they are different, it is determined that the graphic node to be tested is not completely blocked.

[0031] Optionally, the first image information is a first image, and the second image information is a second image;

[0032] Determining the occlusion condition of the to-be-tested graphic node according to the comparison result includes:

[0033] determining whether the first image is identical to the second image;

[0034] If they are the same, it is determined that the graphic node to be tested is completely blocked;

[0035] If they are different, it is determined that the graphic node to be tested is not completely blocked.

[0036] The present application also provides a graphics node occlusion detection device, comprising:

[0037] An information acquisition module, used to determine a graphic node to be tested among a plurality of graphic nodes, and to acquire node information of the plurality of graphic nodes; wherein the node information includes position layer information;

[0038] A selection module, configured to select a target graphic node that may cause occlusion to the graphic node to be tested from the plurality of graphic nodes according to the node information of each graphic node;

[0039] A stacking module, used for stacking the target graphic node and the graphic node to be tested on the canvas object in sequence according to the position layer information, and obtaining the first image information of the canvas object when the stacking of the target graphic node is completed, and obtaining the second image information of the canvas object when the stacking of the graphic node to be tested is completed;

[0040] A comparison module, used to compare the first image information with the second image information to obtain a comparison result

[0041] The occlusion condition determination module is used to determine the occlusion condition of the graphic node to be tested according to the comparison result.

[0042] The present application also provides an electronic device, which includes a processor and a memory; wherein the memory is used to store a computer program, and the computer program is loaded and executed by the processor to implement the occlusion detection method for graphic nodes as described above.

[0043] The present application also provides a computer-readable storage medium for storing computer-executable instructions, which, when loaded and executed by a processor, implement the above-mentioned method for detecting occlusion of a graphic node.

[0044] The present application also provides a computer program product, including a computer program or instructions, which implement the above-mentioned occlusion detection method for graphic nodes when executed by a processor.

[0045] The present application provides an occlusion detection method for a graphic node, comprising: determining a graphic node to be tested among multiple graphic nodes, and obtaining node information of the multiple graphic nodes; wherein the node information includes position layer information; selecting a target graphic node that may cause occlusion to the graphic node to be tested among the multiple graphic nodes according to the node information of each graphic node; stacking the target graphic node and the graphic node to be tested on a canvas object in sequence according to the position layer information, and obtaining first image information of the canvas object when the stacking of the target graphic node is completed, and obtaining second image information of the canvas object when the stacking of the graphic node to be tested is completed; comparing the first image information with the second image information to obtain a comparison result; and determining the occlusion condition of the graphic node to be tested according to the comparison result.

[0046] It can be seen that the present application can first determine the graphic node to be tested among multiple graphic nodes, and obtain the node information of multiple graphic nodes; wherein the node information includes position layer information. Subsequently, the present application can select the target graphic node that may cause occlusion to the graphic node to be tested among multiple graphic nodes according to the node information of each graphic node, so as to screen out the graphic nodes that interfere with the occlusion detection. Subsequently, the target graphic node and the graphic node to be tested can be stacked on the canvas object in sequence according to the position layer information, and the first image information of the canvas object is obtained when the stacking of the target graphic node is completed, and the second image information of the canvas object is obtained when the stacking of the graphic node to be tested is completed. At this time, if the graphic node to be tested is not blocked or is only partially blocked, it is further stacked on the canvas object, which will cause the image information of the canvas object to change, that is, the second image information is inconsistent with the first image information; on the contrary, if the graphic node to be tested is completely blocked, it is further stacked on the canvas object, and the image information of the canvas object will not change, that is, the second image information is consistent with the first image information. Furthermore, the present application only needs to compare the first image information with the second image information, and determine the occlusion of the graphic node to be tested according to the comparison result, which can improve the accuracy of occlusion detection of the graphic node. The present application also provides an occlusion detection device for a graphic node, an electronic device, and a computer-readable storage medium, which have the above-mentioned beneficial effects. BRIEF DESCRIPTION OF THE DRAWINGS

[0047] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on the provided drawings without paying any creative work.

[0048] Figure 1 A schematic diagram of a bounding box provided in an embodiment of the present application;

[0049] Figure 2 A schematic diagram of a misjudgment scenario provided in an embodiment of the present application;

[0050] Figure 3 A schematic diagram of another misjudgment scenario provided in an embodiment of the present application;

[0051] Figure 4 A flowchart of a method for detecting occlusion of a graphic node provided in an embodiment of the present application;

[0052] Figure 5 A schematic diagram of a graphic node being completely blocked provided in an embodiment of the present application;

[0053] Figure 6 A schematic diagram of a graphic node provided in an embodiment of the present application that is not completely blocked;

[0054] Figure 7 A structural block diagram of an occlusion detection device for a graphic node provided in an embodiment of the present application;

[0055] Figure 8 A structural block diagram of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0056] In order to make the purpose, technical solution and advantages of the embodiments of the present application clearer, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0057] When using vector graphics editing software, it is usually necessary to determine whether a certain graphic node is covered by other graphic nodes. In related technologies, the coverage and occlusion of graphic nodes are usually detected based on the bounding box of the node. For easier understanding, please refer to Figure 1 , Figure 1 This is a schematic diagram of a bounding box provided by an embodiment of the present application, which includes a graphic node 1, a bounding box 2, and an extended area 3 between the graphic node 1 and the bounding box 2. It can be seen that the bounding box 2 is a rectangular frame that just surrounds the graphic node.

[0058] Based on the bounding box of the graphic node, the related technology can usually use the axis-aligned bounding box detection scheme or the full pixel point detection scheme for occlusion detection. The axis-aligned bounding box detection scheme can detect the bounding boxes of each graphic node in pairs. If the bounding box of the first graphic node completely covers the bounding box of the second graphic node, it can be determined that the first graphic node completely covers the second graphic node. The full pixel point detection scheme can determine whether the bounding box of a graphic node is covered by the combination of bounding boxes of multiple other graphic nodes by pixel point detection.

[0059] However, since the axis-aligned bounding box solution performs pairwise detection on the bounding boxes of graphic nodes, it may cause misjudgment when the target graphic node is occluded by multiple nodes at the same time. Figure 2 , Figure 2A schematic diagram of a misjudgment scenario provided by an embodiment of the present application. The white rectangular box, the light gray rectangular box, and the dark gray rectangular box represent three graphic nodes; the dotted rectangular box represents the target graphic node, which is completely covered under these three graphic nodes. However, since any graphic node and the target graphic node do not constitute a complete coverage, the axis-aligned bounding box solution will determine that the target graphic node is not completely covered, thereby generating an erroneous detection result.

[0060] In addition, since both the axis-aligned bounding box detection solution and the full pixel point detection solution use bounding boxes for detection, the detection range will be incorrectly expanded, which will lead to misjudgment. For easier understanding, please refer to Figure 3 , Figure 3 A schematic diagram of another misjudgment scenario provided by an embodiment of the present application. It includes a graphic node 1, a bounding box 2 of the graphic node 1, an extended area 3 between the graphic node 1 and the bounding box 2, and a graphic node 4. Obviously, the graphic node 4 is not completely covered by the graphic node 1, but because the graphic node 4 is completely covered by the bounding box 2 of the graphic node 1, the relevant technology will determine that the graphic node 4 is completely covered by the graphic node 1, thereby generating an erroneous detection result.

[0061] It can be seen that the relevant technology significantly reduces the reliability of the occlusion judgment of the graphic node. Therefore, in order to effectively determine the technical problem of the occlusion of the graphic node, the present application can provide a method for detecting the occlusion of the graphic node, which can stack multiple graphic nodes including the graphic node to be tested on the canvas object according to the position layer information of the graphic node in the original design manuscript file, and can collect the first image information corresponding to the canvas object when only the graphic node to be tested is not stacked and the second image information corresponding to all the graphic nodes are stacked, and then the first image information can be compared with the second image information, and the occlusion of the graphic node to be tested can be determined according to the comparison result, so as to improve the detection accuracy.

[0062] For easier understanding, please refer to Figure 4 , Figure 4 A flowchart of a method for detecting occlusion of a graphic node provided in an embodiment of the present application. The method may include:

[0063] S101. Determine a graphic node to be tested among multiple graphic nodes, and obtain node information of the multiple graphic nodes; wherein the node information includes location layer information.

[0064] This step first needs to obtain the node information of multiple graphic nodes, and determine the graphic node to be tested among these multiple graphic nodes. Among them, the graphic node to be tested refers to the graphic node that needs to be determined whether it is covered by other graphic nodes. The above-mentioned node information can be obtained from the design draft file created using vector graphics editing software. It should be pointed out that a key step in this embodiment is to stack each graphic node on the canvas object in sequence according to the stacking position information and stacking layer information of each graphic node in the original design draft file. Among them, the stacking position information includes the coordinate position of the graphic node in the design draft file, and the stacking layer information includes the layer level of the graphic node in the design draft file. Therefore, the above-mentioned node information needs to include position layer information, and the position layer information includes the above-mentioned stacking position information and stacking layer information. In addition, this embodiment does not limit other contents that can be included in the node information, for example, it can include node type, node graphic information, transparency information, etc., which can be set according to actual application requirements. The node type, node graphic information and transparency information will be introduced in detail later, please refer to the subsequent description.

[0065] Furthermore, considering that the design draft file contains many graphic nodes, and some graphic nodes may not be located around the graphic node to be tested, stacking these graphic nodes on the canvas object will only generate unnecessary resource consumption. Therefore, this embodiment can also set a preset area around the graphic node to be tested according to the position layer information of the graphic node to be tested, and obtain the node information of the graphic node located in the preset area according to the position layer information of each graphic node. Among them, "located" specifically means that the graphic node appears in the preset area. In this way, the number of graphic nodes to be stacked can also be effectively reduced.

[0066] Based on this, obtain the node information of multiple graphic nodes, including:

[0067] Step 11: according to the position layer information of the graphic node to be tested, a preset area is set around the graphic node to be tested;

[0068] Step 12: According to the position layer information of each graphic node, the node information of the graphic nodes located in the preset area is obtained.

[0069] It should be noted that this embodiment does not limit the shape and size of the preset area. For example, it can be a circular area with the graphic node to be tested as the center, or it can be a rectangular area with the graphic node to be tested as the center, which can be set according to actual application requirements.

[0070] S102 . Selecting, from a plurality of graphic nodes, a target graphic node that may cause occlusion to the graphic node to be tested according to the node information of each graphic node.

[0071] In this step, according to the node information of each graphic node, a target graphic node that may cause occlusion to the graphic node to be tested is selected from multiple graphic nodes. The purpose of performing this step is to: 1. Screen out interfering graphic nodes that may cause erroneous interference to occlusion detection; 2. Reduce the number of graphic nodes to be stacked to improve detection efficiency. The selection of target graphic nodes can be carried out from at least two aspects. First, this embodiment can determine the graphic nodes whose layer level is above the graphic node to be tested according to the position layer information, and use this batch of graphic nodes as target graphic nodes, while removing the graphic nodes whose layer level is below the graphic node to be tested. This is because only the graphic nodes whose layer level is above the graphic node to be tested may cause occlusion to the graphic node to be tested, while the graphic nodes whose layer level is below the graphic node to be tested cannot cause occlusion to the graphic node to be tested. Moreover, stacking the graphic node whose layer level is below the graphic node to be tested before the graphic node to be tested will cause the graphic node to be incorrectly stacked on the graphic node to be tested, thereby generating an erroneous occlusion detection result. In addition, when the node information includes transparency information, this embodiment can also use the graphic nodes without transparency as target graphic nodes and remove the graphic nodes with transparency according to the transparency information. The transparency information is used to record the graphic transparency of the graphic node. When the graphic node contains transparency, it means that other graphic nodes below the graphic node can be seen through the graphic node; when the graphic node does not contain transparency, it means that other graphic nodes below the graphic node cannot be seen through the graphic node. That is, the graphic nodes with transparency will interfere with the detection, so the graphic nodes without transparency can be used as target graphic nodes.

[0072] It should be noted that, in order to achieve a better target graphic node selection effect, the above two target graphic node selection methods can be executed in combination. This embodiment does not limit the execution order of the above selection methods. In order to achieve a higher selection efficiency, the graphic nodes whose layer level is above the graphic node to be tested can be set as candidate graphic nodes, and then the candidate graphic nodes that do not contain transparency can be used as target graphic nodes.

[0073] Based on this, the node information also includes transparency information; according to the node information of each graphic node, a target graphic node that may cause occlusion to the graphic node to be tested is selected from multiple graphic nodes, including:

[0074] Step 21: according to the position layer information, taking the graphic nodes whose layer levels are above the graphic node to be tested as candidate graphic nodes;

[0075] Step 22: According to the transparency information, a candidate graphic node without transparency is used as the target graphic node.

[0076] S103. Stack the target graphic node and the graphic node to be tested on the canvas object in sequence according to the position layer information, and obtain the first image information of the canvas object when the stacking of the target graphic node is completed, and obtain the second image information of the canvas object when the stacking of the graphic node to be tested is completed.

[0077] The canvas object (Canvas) is used to draw graphics on a web page, and can perform graphics operations directly on an HTML page (HyperText Markup Language), and supports JavaScript (a programming language) programming operations. In this embodiment, the canvas object is used as a carrier for stacking graphic nodes, and is used to determine the image information generated when different graphic nodes are stacked.

[0078] Specifically, this step can firstly stack the above-mentioned target graphic nodes and the graphic nodes to be tested on the canvas object in sequence according to the position layer information, that is, the relative position relationship and relative layer level relationship between the graphic nodes in the canvas object will comply with the position layer information setting. The stacking order of the graphic nodes can be: first stack each target graphic node on the canvas object, and then stack the graphic node to be tested on the canvas object, so as to ensure that the canvas level of the target graphic node in the canvas object is located above the graphic node to be tested. It should be noted that this embodiment does not limit how to stack the graphic nodes on the canvas object according to the above-mentioned position layer information. For example, each graphic node can be stacked on the canvas object strictly according to the position layer information; for another example, the position coordinates representing the stacking position in the position layer information can be converted from the coordinate system in the design draft file to the coordinate system in the canvas object, and each graphic node is stacked on the canvas object according to the converted coordinate position and the original stacking layer level of the position layer information. In this way, it can be ensured that the graphic nodes are stacked on the canvas object according to the stacking method in the original design draft file.

[0079] In addition, during the stacking process, the present embodiment needs to obtain the first image information of the canvas object when the stacking of the target graphic node is completed, and at this time, the canvas object only contains the target graphic node; and obtain the second image information of the canvas object when the stacking of the graphic node to be tested is completed, and at this time, the canvas object contains both the target graphic node and the graphic node to be tested. The first image information and the second image information will be compared in subsequent steps, and the occlusion condition of the graphic node to be tested will be determined based on the comparison result. This is because if the graphic node to be tested has been completely covered by other graphic nodes, that is, the graphic node to be tested is in an invisible state in the canvas object, then stacking the graphic node to be tested on the canvas object at this time will not cause changes to the image information of the canvas object, that is, the above-mentioned first image information and second image information should be equal. Figure 5As shown, the white rectangular box and the light gray rectangular box represent two graphic nodes, and the dotted rectangular box represents the graphic node to be tested, which is completely covered under the two graphic nodes. The dotted line represents an invisible state. At this time, since the graphic node to be tested is invisible, the above-mentioned first image information and the second image information should be equal. If the graphic node to be tested is not completely covered by other graphic nodes, but is partially covered or completely uncovered, that is, the graphic node to be tested is in a visible state in the canvas object, then superimposing the graphic node to be tested on the canvas object will cause the image information of the canvas object to change, that is, the above-mentioned first image information and the second image information should not be equal. As shown Figure 6 As shown, the white rectangular box and the light gray rectangular box represent two graphic nodes, and the dotted rectangular box represents the graphic node to be tested, which is only partially covered by the graphic nodes corresponding to the light gray rectangular box and the white rectangular box, and the upper right corner (represented by dark gray) is leaked. At this time, since the graphic node to be tested is visible, the above-mentioned first image information and the second image information are not equal.

[0080] Therefore, the present embodiment only needs to compare the first image information and the second image information to determine whether the graphic node to be tested is completely covered. In addition, when the graphic area of ​​the graphic node to be tested can be obtained, by comparing the first image information, the second image information and the pixel area of ​​the graphic node to be tested, it can also be determined whether the graphic node to be tested is partially covered or completely uncovered. In this way, the present embodiment can effectively detect the occlusion coverage of the graphic node to be tested, thereby improving the reliability of the detection.

[0081] It should be noted that the present embodiment does not limit the specific forms of the first image information and the second image information. For example, the first image information and the second image information can both be canvas images, can both be the number of non-transparent pixels, can both be the number of transparent pixels, and can both include the number of pixels of each color channel (such as the three color channels of red (R), green (G), and blue (B)), which can be set according to actual application requirements.

[0082] S104: Compare the first image information with the second image information to obtain a comparison result.

[0083] S105. Determine the occlusion status of the graphic node to be tested according to the comparison result.

[0084] After obtaining the above-mentioned first image information and second image information, this embodiment can compare the two to first determine whether the graphic node to be tested is completely blocked. That is, when the comparison result is that the first image information is equal to the second image information, it is determined that the graphic node to be tested is completely blocked; when the comparison result is that the first image information is not equal to the second image information, it is determined that the graphic node to be tested is not completely blocked. In addition, the graphic area of ​​the graphic node to be tested itself can be further compared with the first image information and the second image information to determine whether the graphic node is partially blocked or completely unblocked.

[0085] Based on the above embodiment, the present application can first determine the graphic node to be tested among multiple graphic nodes, and obtain the node information of multiple graphic nodes; wherein the node information includes position layer information. Subsequently, the present application can select the target graphic node that may cause occlusion to the graphic node to be tested among multiple graphic nodes according to the node information of each graphic node, so as to screen out the graphic nodes that interfere with the occlusion detection. Subsequently, the target graphic node and the graphic node to be tested can be stacked on the canvas object in sequence according to the position layer information, and the first image information of the canvas object is obtained when the stacking of the target graphic node is completed, and the second image information of the canvas object is obtained when the stacking of the graphic node to be tested is completed. At this time, if the graphic node to be tested is not blocked or is only partially blocked, it is further stacked on the canvas object, which will cause the image information of the canvas object to change, that is, the second image information is inconsistent with the first image information; on the contrary, if the graphic node to be tested is completely blocked, it is further stacked on the canvas object, and the image information of the canvas object will not change, that is, the second image information is consistent with the first image information. Furthermore, the present application only needs to compare the first image information with the second image information, and determine the occlusion condition of the graphic node to be tested according to the comparison result, which can improve the accuracy of occlusion detection of the graphic node.

[0086] Based on the above embodiment, a method for detecting whether a graphics node to be tested is completely blocked according to the number of non-transparent pixels of a canvas object is further introduced below. In a possible case, the method may also include:

[0087] S201. Determine a graphic node to be tested among multiple graphic nodes, and obtain node information of the multiple graphic nodes; wherein the node information includes location layer information.

[0088] S202 . Selecting, from the plurality of graphic nodes, a target graphic node that may obstruct the graphic node to be tested according to the node information of each graphic node.

[0089] The description of steps S201 and S202 is consistent with the above embodiment and will not be repeated here.

[0090] S203, stacking the target graphic node and the graphic node to be tested on the canvas object with a transparent background set in sequence according to the position layer information, and obtaining the first image information of the canvas object when the target graphic node is stacked, and obtaining the second image information of the canvas object when the graphic node to be tested is stacked. The first image information is the number of first non-transparent pixels, and the second image information is the number of second non-transparent pixels.

[0091] In this embodiment, since the number of non-transparent pixels in the canvas object will be used as image information, and whether the graphic node to be tested is completely obscured is determined based on the number of non-transparent pixels, this embodiment first needs to eliminate the interference of the canvas object itself on the detection, and needs to set the transparent background attribute for the canvas object so that it has a transparent background.

[0092] In addition, for the stacking of graphic nodes, this embodiment directly draws the graphic nodes in the canvas object by setting the CSS style (Cascading StyleSheets) cascading style sheet. Specifically, the node information of the graphic node may also include node graphic information, and the node graphic information may include information such as length, width, fillet, fill, border, etc. This embodiment may set the CSS style according to the node graphic information and the position layer information to draw the graphic node and stack it on the canvas object.

[0093] In addition, although the graphic nodes can be drawn in the canvas object through the CSS style, this method can only draw regular shape nodes (such as rectangles, circles), but cannot draw irregular shape nodes (such as irregular polygons). Considering that there are some irregular graphics in the vector graphics editing software that cannot be drawn using the CSS style, this embodiment can also convert such irregular graphics that cannot be drawn by the CSS style into node images with transparency (such as PNG images, Portable Network Graphics, portable network graphics), and the node image can be superimposed in the canvas object. It is worth noting that converting irregular graphic nodes into node images with transparency rather than ordinary images (such as JPEG format, Joint Photographic Experts Group, Joint Photographic Experts Group) can avoid adding an opaque background to the graphic node, and thus avoid the problem of misjudgment caused by the opaque background. Further, for the determination of the above-mentioned regular shape nodes and irregular shape nodes, this embodiment can distinguish according to the node type in the node information, and the node type can include two types of regular shape nodes and irregular shape nodes.

[0094] Based on this, the node information also includes node type and node graphic information; according to the position layer information, the target graphic node and the graphic node to be tested are sequentially superimposed on the canvas object with a transparent background set, which may include:

[0095] S2021. Create a canvas object and set a transparent background property for the canvas object.

[0096] It should be noted that the present embodiment does not limit the size of the canvas object, and can be set according to actual application requirements.

[0097] S2022: determining the graphic nodes to be stacked from the target graphic nodes and the graphic nodes to be tested in turn, and determining the node types of the graphic nodes to be stacked.

[0098] In this step, the selection order of the graphic nodes to be stacked is consistent with the stacking order of the target graphic nodes and the graphic nodes to be tested in the above text, and will not be repeated here.

[0099] S2023. If the node type is a regular shape node, the graphic node to be superimposed is drawn and superimposed on the canvas object according to the node graphic information and the position layer information.

[0100] S2024. If the node type is an irregular shape node, the graphic node to be overlaid is converted into a node image with transparency information, and the node image is overlaid on the canvas object according to the position layer information.

[0101] S203, determine whether the number of the first non-transparent pixels is the same as the number of the second non-transparent pixels; if they are the same, proceed to step S204; if they are not the same, proceed to step S205.

[0102] S204, determining whether the graphic node to be tested is completely blocked;

[0103] S205: Determine whether the graphic node to be tested is completely blocked.

[0104] As described above, if the graphic node to be tested has been completely covered by other graphic nodes and is in an invisible state, then stacking the graphic node to be tested on the canvas object at this time will not cause the number of non-transparent pixels in the canvas object to increase, that is, the above-mentioned first number of non-transparent pixels and the second number of non-transparent pixels should be equal. If the graphic node to be tested is not completely covered by other graphic nodes and is in a visible state, then stacking the graphic node to be tested on the canvas object at this time will cause the number of non-transparent pixels in the canvas object to increase, that is, the above-mentioned first number of non-transparent pixels and the second number of non-transparent pixels should not be equal. Therefore, by judging whether the first number of non-transparent pixels is the same as the second number of non-transparent pixels, this embodiment can determine whether the graphic node to be tested is completely blocked.

[0105] Based on the above embodiment, a method for detecting whether a graphic node to be tested is completely blocked according to a canvas image is further introduced below.

[0106] In a possible case, the first image information is a first image, and the second image information is a second image; and determining the occlusion condition of the to-be-tested graphic node according to the comparison result may include:

[0107] S301, determine whether the first image and the second image are the same; if they are the same, proceed to step S302; if they are not the same, proceed to step S303.

[0108] S302, determining whether the graphic node to be tested is completely blocked;

[0109] S303: Determine whether the graphic node to be tested is completely blocked.

[0110] As described above, if the graphic node to be tested has been completely covered by other graphic nodes and is in an invisible state, then stacking the graphic node to be tested on the canvas object will not cause the image information of the canvas object to change, that is, the first image and the second image should be the same. If the graphic node to be tested is not completely covered by other graphic nodes and is in a visible state, then stacking the graphic node to be tested on the canvas object will cause the image information of the canvas object to change, that is, the first image and the second image should be different.

[0111] Of course, considering that if the graphic nodes have the same color, or the graphic nodes and the canvas background have the same color, it may interfere with the image comparison results, so before stacking the graphic nodes, you can also adjust the color of each graphic node and canvas object to make the colors between the graphic nodes and the colors between the graphic nodes and the canvas objects different.

[0112] Based on the above embodiment, the following describes the above-mentioned method for detecting occlusion of a graphic node based on a specific example. The method may include the following process:

[0113] 1. Obtain all node information by parsing the design draft. Irregular shaped nodes are generally treated as image types in subsequent canvas drawing.

[0114] 2. Filter out interference nodes such as those with transparency and those lower than the target node level from the above node set.

[0115] 3. Set the length, width, transparent background and other properties of the canvas object.

[0116] 4. Draw all nodes except non-target nodes on the canvas object, and obtain the non-transparent pixel set A through the getImageData method of the canvas object.

[0117] 5. Continue to overlay and draw the target node, and then obtain the non-transparent pixel point set B.

[0118] 6. Determine the number of pixels in sets A and B. If the number is equal, it can be determined that the current target node is completely blocked by other nodes.

[0119] The following is an introduction to the occlusion detection device, electronic device, computer program product, and computer-readable storage medium for a graphic node provided in an embodiment of the present application. The occlusion detection device, electronic device, computer program product, and computer-readable storage medium for a graphic node described below can be referenced to the occlusion detection method for a graphic node described above.

[0120] Please refer to Figure 7 , Figure 7 This is a structural block diagram of a graphic node occlusion detection device provided in an embodiment of the present application. The device may include:

[0121] The information acquisition module 701 is used to determine the graphic node to be tested among multiple graphic nodes, and obtain node information of the multiple graphic nodes; wherein the node information includes position layer information;

[0122] A selection module 702 is used to select a target graphic node that may cause occlusion of the graphic node to be tested from multiple graphic nodes according to the node information of each graphic node;

[0123] The stacking module 703 is used to stack the target graphic node and the graphic node to be tested on the canvas object in sequence according to the position layer information, and obtain the first image information of the canvas object when the stacking of the target graphic node is completed, and obtain the second image information of the canvas object when the stacking of the graphic node to be tested is completed;

[0124] A comparison module 704 is used to compare the first image information with the second image information to obtain a comparison result;

[0125] The occlusion condition determination module 705 is used to determine the occlusion condition of the graphic node to be tested according to the comparison result.

[0126] Optionally, the node information also includes transparency information;

[0127] The selection module 702 includes:

[0128] The first selection submodule is used to select the graphic nodes whose layer levels are above the graphic node to be tested as candidate graphic nodes according to the position layer information;

[0129] The second selection submodule is used to select a candidate graphic node without transparency as a target graphic node according to the transparency information.

[0130] Optionally, the information acquisition module 701 may include:

[0131] The area setting submodule is used to set a preset area around the graphic node to be tested according to the position layer information of the graphic node to be tested;

[0132] The acquisition submodule is used to acquire only the node information of the graphic nodes located in a preset area according to the position layer information of each graphic node.

[0133] Optionally, the stacking module 703 can be used to:

[0134] The target graphic node and the graphic node to be tested are sequentially stacked on a canvas object with a transparent background set according to the position layer information.

[0135] Optionally, the node information also includes node type and node graph information;

[0136] The stacking module 703 may include:

[0137] The canvas creation submodule is used to create a canvas object and set the transparent background attribute for the canvas object;

[0138] A type judgment submodule, used to determine the graphic nodes to be stacked from the target graphic nodes and the graphic nodes to be tested in turn, and determine the node types of the graphic nodes to be stacked;

[0139] The first stacking submodule is used for drawing and stacking the graphic node to be stacked on the canvas object according to the node graphic information and the position layer information if the node type is a regular shape node;

[0140] The second stacking submodule is used to convert the graphic node to be stacked into a node image with transparency information if the node type is an irregular shape node, and stack the node image on the canvas object according to the position layer information.

[0141] Optionally, the first image information is the number of first non-transparent pixels, and the second image information is the number of second non-transparent pixels;

[0142] The occlusion detection module 705 may include:

[0143] The first occlusion detection submodule is used to determine whether the number of the first non-transparent pixels is the same as the number of the second non-transparent pixels; if they are the same, it is determined that the graphic node to be tested is completely occluded; if they are different, it is determined that the graphic node to be tested is not completely occluded.

[0144] Optionally, the first image information is a first image, and the second image information is a second image;

[0145] The occlusion detection module 705 may include:

[0146] The second occlusion detection submodule is used to determine whether the first image and the second image are the same; if they are the same, it is determined that the graphic node to be tested is completely occluded; if they are different, it is determined that the graphic node to be tested is not completely occluded.

[0147] The present application also provides an electronic device, which may include a processor and a memory. The relationship between the processor and the memory in the electronic device can be referred to Figure 8 .

[0148] The processor 11 of the electronic device 10 is used to execute the program stored in the memory 12;

[0149] The memory 12 of the electronic device 10 is used to store a program, which is at least used to:

[0150] Determine a graphic node to be tested among a plurality of graphic nodes, and obtain node information of the plurality of graphic nodes; wherein the node information includes position layer information;

[0151] According to the node information of each graphic node, a target graphic node that may cause occlusion to the graphic node to be tested is selected from the multiple graphic nodes;

[0152] The target graphic node and the graphic node to be tested are sequentially stacked on a canvas object according to the position layer information, and first image information of the canvas object is obtained when the stacking of the target graphic node is completed, and second image information of the canvas object is obtained when the stacking of the graphic node to be tested is completed;

[0153] Comparing the first image information with the second image information to obtain a comparison result;

[0154] The occlusion condition of the graphic node to be tested is determined according to the comparison result.

[0155] Of course, the electronic device may also include a communication bus 16, a communication interface 13, a display 15, an input unit 14, etc., which are not limited here.

[0156] On the other hand, the present application also provides a computer program product, including a computer program or instructions, which, when executed by a processor, implements the occlusion detection method for a graphic node as described in any one of the above embodiments.

[0157] On the other hand, the present application also provides a storage medium, which stores a computer program. When the computer program is loaded and executed by a processor, it is used to implement the occlusion detection method of the graphic node described in any of the above embodiments.

[0158] The various embodiments in the specification are described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The same or similar parts between the various embodiments can be referred to each other. For the device disclosed in the embodiment, since it corresponds to the method disclosed in the embodiment, the description is relatively simple, and the relevant parts can be referred to the method part description.

[0159] Professionals may further appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the composition and steps of each example have been generally described in the above description according to function. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professionals and technicians may use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application.

[0160] The steps of the method or algorithm described in conjunction with the embodiments disclosed herein may be implemented directly using hardware, a software module executed by a processor, or a combination of the two. The software module may be placed in a random access memory (RAM), a memory, a read-only memory (ROM), an electrically programmable ROM, an electrically erasable programmable ROM, a register, a hard disk, a removable disk, a CD-ROM, or any other form of storage medium known in the art.

[0161] The above is a detailed introduction to the occlusion detection method, device, electronic device and storage medium for graphic nodes provided by the present application. Specific examples are used herein to illustrate the principles and implementation methods of the present application. The description of the above embodiments is only used to help understand the method and core idea of ​​the present application. It should be pointed out that for ordinary technicians in this technical field, without departing from the principles of the present application, several improvements and modifications can be made to the present application, and these improvements and modifications also fall within the scope of protection of the present application.

Claims

1. A method for detecting occlusion of a graphic node, characterized in that: include: Determine a graphic node to be tested among a plurality of graphic nodes, and obtain node information of the plurality of graphic nodes; wherein the node information includes position layer information; According to the node information of each graphic node, a target graphic node that may cause occlusion to the graphic node to be tested is selected from the multiple graphic nodes; The target graphic node and the graphic node to be tested are sequentially stacked on a canvas object according to the position layer information, and first image information of the canvas object is obtained when the stacking of the target graphic node is completed, and second image information of the canvas object is obtained when the stacking of the graphic node to be tested is completed; Comparing the first image information with the second image information to obtain a comparison result; The occlusion condition of the graphic node to be tested is determined according to the comparison result.

2. The occlusion detection method according to claim 1, characterized in that: The node information also includes transparency information; The step of selecting a target graphic node that may block the graphic node to be tested from the plurality of graphic nodes according to the node information of each graphic node includes: According to the position layer information, taking a graphic node whose layer level is above the graphic node to be tested as a candidate graphic node; According to the transparency information, a candidate graphic node without transparency is used as the target graphic node.

3. The occlusion detection method according to claim 1, characterized in that: The obtaining of node information of the plurality of graphic nodes comprises: According to the position layer information of the graphic node to be tested, a preset area is set around the graphic node to be tested; According to the position layer information of each of the graphic nodes, the node information of the graphic nodes located in the preset area is obtained.

4. The occlusion detection method according to any one of claims 1 to 3, characterized in that: The step of sequentially stacking the target graphic node and the graphic node to be tested on the canvas object according to the position layer information includes: The target graphic node and the graphic node to be tested are sequentially stacked on a canvas object with a transparent background set according to the position layer information.

5. The occlusion detection method according to claim 4, characterized in that: The node information also includes node type and node graphic information; The step of sequentially stacking the target graphic node and the graphic node to be tested on a canvas object with a transparent background set according to the position layer information includes: Creating the canvas object and setting a transparent background attribute for the canvas object; Determining the graphic nodes to be stacked from the target graphic nodes and the graphic nodes to be tested in turn, and determining the node types of the graphic nodes to be stacked; If the node type is a regular shape node, the graphic node to be superimposed is drawn and superimposed on the canvas object according to the node graphic information and the position layer information; If the node type is an irregular shape node, the graphic node to be superimposed is converted into a node image with transparency information, and the node image is superimposed on the canvas object according to the position layer information.

6. The occlusion detection method according to claim 4, characterized in that: The first image information is the number of first non-transparent pixels, and the second image information is the number of second non-transparent pixels; Determining the occlusion condition of the to-be-tested graphic node according to the comparison result includes: Determining whether the number of the first non-transparent pixels is the same as the number of the second non-transparent pixels; If they are the same, it is determined that the graphic node to be tested is completely blocked; If they are different, it is determined that the graphic node to be tested is not completely blocked.

7. The occlusion detection method according to any one of claims 1 to 3, characterized in that: The first image information is a first image, and the second image information is a second image; Determining the occlusion condition of the to-be-tested graphic node according to the comparison result includes: determining whether the first image is identical to the second image; If they are the same, it is determined that the graphic node to be tested is completely blocked; If they are different, it is determined that the graphic node to be tested is not completely blocked.

8. A graphics node occlusion detection device, characterized in that: include: An information acquisition module, used to determine a graphic node to be tested among a plurality of graphic nodes, and to acquire node information of the plurality of graphic nodes; wherein the node information includes position layer information; A selection module, configured to select a target graphic node that may cause occlusion to the graphic node to be tested from the plurality of graphic nodes according to the node information of each graphic node; A stacking module, used for stacking the target graphic node and the graphic node to be tested on the canvas object in sequence according to the position layer information, and obtaining the first image information of the canvas object when the stacking of the target graphic node is completed, and obtaining the second image information of the canvas object when the stacking of the graphic node to be tested is completed; A comparison module, used for comparing the first image information with the second image information to obtain a comparison result; The occlusion condition determination module is used to determine the occlusion condition of the graphic node to be tested according to the comparison result.

9. An electronic device, characterized in that: The electronic device comprises a processor and a memory; wherein the memory is used to store a computer program, and the computer program is loaded and executed by the processor to implement the occlusion detection method for a graphic node as described in any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that: Used to store computer executable instructions, which, when loaded and executed by a processor, implement the occlusion detection method for a graphic node as described in any one of claims 1 to 7.

11. A computer program product comprising a computer program or instructions, characterized in that When the computer program or instruction is executed by a processor, the method for detecting occlusion of a graphic node according to any one of claims 1 to 7 is implemented.

Images