Icon attribute value determination method and apparatus, and electronic device

Abstract

The invention discloses an icon attribute value determination method and device and electronic equipment. The method comprises the following steps: receiving an attribute value determination request; in response to the attribute value determination request, determining a plurality of attribute matching vectors according to the to-be-determined attribute item and the plurality of attribute identifiers; determining matching index values respectively corresponding to the attribute matching vectors according to vector positions respectively corresponding to the hit attribute identifier under the attribute matching vectors; determining a first matching vector from the plurality of attribute matching vectors according to the matching index values corresponding to the plurality of attribute matching vectors; and determining a target attribute value corresponding to the to-be-determined attribute item according to the first matching vector. According to the method and the device, the technical problems of high workload and low determination efficiency in the process of determining the icon attribute value in related technologies are solved.

Description

Technical Field

[0001] The present invention relates to the field of data analysis, and in particular to a method, device and electronic device for determining an icon attribute value. Background Art

[0002] Determining the attribute values ​​of icons ensures their correct display on web pages or applications, which is crucial for optimizing web display performance, user experience, and accessibility. Currently, this method typically uses a stylesheet query to determine the attribute values ​​of icons. However, this approach presents technical challenges such as high workload and low efficiency.

[0003] To address the above-mentioned problems, no effective solutions have been proposed so far. Summary of the Invention

[0004] The embodiments of the present invention provide a method, device and electronic device for determining an icon attribute value, so as to at least solve the technical problems in the related art of heavy workload and low determination efficiency in the process of determining an icon attribute value.

[0005] According to one aspect of an embodiment of the present invention, a method for determining an icon attribute value is provided, comprising: receiving an attribute value determination request, wherein the attribute value determination request carries an attribute item to be determined and multiple attribute identifiers of a target icon; in response to the attribute value determination request, determining multiple attribute matching vectors based on the attribute item to be determined and the multiple attribute identifiers, wherein the multiple attribute matching vectors are all matching vectors including at least one hit attribute identifier, and the multiple attribute matching vectors all have attribute values ​​corresponding to the attribute item to be determined; determining matching index values ​​corresponding to the multiple attribute matching vectors respectively based on vector positions corresponding to the hit attribute identifiers under the multiple attribute matching vectors; determining a first matching vector from the multiple attribute matching vectors based on the matching index values ​​corresponding to the multiple attribute matching vectors; and determining a target attribute value corresponding to the attribute item to be determined based on the first matching vector.

[0006] Optionally, according to the vector positions corresponding to the hit attribute identifiers under the multiple attribute matching vectors, the matching index values ​​corresponding to the multiple attribute matching vectors are determined, including: determining the weight values ​​corresponding to the multiple predetermined vector positions; according to the vector positions corresponding to the hit attribute identifiers under the multiple attribute matching vectors, and the weight values ​​corresponding to the multiple predetermined vector positions, the matching index values ​​corresponding to the multiple attribute matching vectors are determined.

[0007] Optionally, the matching index values ​​corresponding to the multiple attribute matching vectors are determined based on the vector positions corresponding to the hit attribute identifiers under the multiple attribute matching vectors, including: when the attribute items to be determined include multiple, determining the priorities corresponding to the multiple attribute items to be determined; and determining the matching index values ​​corresponding to the multiple attribute matching vectors based on the vector positions corresponding to the hit attribute identifiers under the multiple attribute matching vectors and the priorities corresponding to the multiple attribute items to be determined.

[0008] Optionally, based on the first matching vector, determining the target attribute value corresponding to the attribute item to be determined, including: determining the attribute value hit results corresponding to multiple attribute items to be determined under the first matching vector; in the case that there is a miss result among the multiple attribute value hit results, determining the first attribute item with a hit attribute value and the second attribute item with a miss attribute value among the multiple attribute items to be determined under the first matching vector; determining multiple hit index values ​​corresponding to multiple hit matching vectors for the second attribute item, wherein the multiple hit matching vectors are a summary of the multiple attribute matching vectors, and are matching vectors that hit the corresponding attribute items; determining the attribute value corresponding to the first attribute item based on the first matching vector, and determining the attribute value corresponding to the second attribute item based on the second matching vector, wherein the second matching vector is the vector with the highest corresponding hit index value.

[0009] Optionally, based on the matching index values ​​respectively corresponding to the multiple attribute matching vectors, a first matching vector is determined from the multiple attribute matching vectors, including: when there are multiple equivalent index values ​​in the multiple matching index values, determining the priorities respectively corresponding to the multiple attribute matching vectors, wherein the index values ​​corresponding to the multiple equivalent index values ​​are equal and are all greater than a predetermined threshold; and determining the first matching vector based on the priorities respectively corresponding to the multiple equivalent index values.

[0010] Optionally, after determining the target attribute value corresponding to the attribute item to be determined based on the first matching vector, the method further includes: determining the target pixel value corresponding to the attribute item to be determined on the target display device based on the target attribute value; determining the actual pixel value corresponding to the attribute item to be determined on the target display device; determining a pixel difference value based on the actual pixel value and the target pixel value; and adjusting the target attribute value based on the pixel difference value to obtain an updated attribute value.

[0011] Optionally, in response to the attribute value determination request, before determining multiple attribute matching vectors based on the attribute item to be determined and the multiple attribute identifiers, it also includes: determining the embedded attribute detection result of the target icon, wherein the embedded attribute detection result is used to indicate whether the target icon has an embedded attribute value, and the embedded attribute value is a predetermined attribute value of the target icon; when the embedded attribute detection result is that the target icon has the embedded attribute value, determining the embedded attribute value as the target attribute value.

[0012] According to one aspect of an embodiment of the present invention, a device for determining an attribute value of an icon is provided, comprising: a receiving module for receiving an attribute value determination request, wherein the attribute value determination request carries an attribute item to be determined and multiple attribute identifiers of a target icon; a responding module for determining, in response to the attribute value determination request, multiple attribute matching vectors based on the attribute item to be determined and the multiple attribute identifiers, wherein the multiple attribute matching vectors are all matching vectors including at least one hit attribute identifier, and the multiple attribute matching vectors all have attribute values ​​corresponding to the attribute item to be determined; a first determining module for determining matching index values ​​corresponding to the multiple attribute matching vectors respectively according to the vector positions corresponding to the hit attribute identifiers under the multiple attribute matching vectors; a second determining module for determining a first matching vector from the multiple attribute matching vectors according to the matching index values ​​corresponding to the multiple attribute matching vectors; and a third determining module for determining a target attribute value corresponding to the attribute item to be determined based on the first matching vector.

[0013] According to one aspect of an embodiment of the present invention, an electronic device is provided, comprising: a processor; and a memory for storing instructions executable by the processor; wherein the processor is configured to execute the instructions to implement any of the above methods for determining an icon attribute value.

[0014] According to one aspect of an embodiment of the present invention, a computer-readable storage medium is provided. When instructions in the computer-readable storage medium are executed by a processor of an electronic device, the electronic device can execute any of the above-mentioned methods for determining an icon attribute value.

[0015] In an embodiment of the present invention, a property value determination request is received, wherein the property value determination request carries an attribute item to be determined and multiple attribute identifiers of a target icon; in response to the property value determination request, multiple attribute matching vectors are determined based on the attribute item to be determined and the multiple attribute identifiers, wherein the multiple attribute matching vectors are matching vectors that include at least one hit attribute identifier, and the multiple attribute matching vectors all have attribute values ​​corresponding to the attribute item to be determined; matching index values ​​corresponding to the multiple attribute matching vectors are determined based on the vector positions corresponding to the hit attribute identifiers under the multiple attribute matching vectors; a first matching vector is determined from the multiple attribute matching vectors based on the matching index values ​​corresponding to the multiple attribute matching vectors; a target attribute value corresponding to the attribute item to be determined based on the first matching vector is determined, and by determining the first matching vector from the multiple attribute matching vectors based on the matching index values ​​corresponding to the multiple attribute matching vectors, the purpose of determining the target attribute value corresponding to the attribute item to be determined based on the first matching vector is achieved, thereby solving the technical problems in the related art of large workload and low determination efficiency in the process of determining icon attribute values. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] The drawings described herein are used to provide a further understanding of the present invention and constitute a part of this application. The exemplary embodiments of the present invention and their descriptions are used to explain the present invention and do not constitute an improper limitation of the present invention. In the drawings:

[0017] Figure 1 is a flow chart of a method for determining an icon attribute value according to an embodiment of the present invention;

[0018] Figure 2 2 is a schematic diagram of element rendering value rounding provided by an optional embodiment of the present invention;

[0019] Figure 3 It is a structural block diagram of a device for determining an icon attribute value according to an embodiment of the present invention. DETAILED DESCRIPTION

[0020] In order to enable those skilled in the art to better understand the solutions of the present invention, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the embodiments described 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 should fall within the scope of protection of the present invention.

[0021] It should be noted that the terms "first", "second", etc. in the description and claims of the present invention and the above-mentioned drawings are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that the numbers used in this way can be interchanged where appropriate, so that the embodiments of the present invention described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions. For example, a process, method, system, product or device that includes a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0022] Example 1

[0023] According to an embodiment of the present invention, an embodiment of a method for determining an icon attribute value is provided. It should be noted that the steps shown in the flowchart of the accompanying drawings can be executed in a computer system such as a set of computer executable instructions, and although a logical order is shown in the flowchart, in some cases, the steps shown or described can be executed in an order different from that shown here.

[0024] Figure 1 FIG. 1 is a flow chart of a method for determining an icon attribute value according to an embodiment of the present invention. Figure 1 As shown, the method includes the following steps:

[0025] Step S102: receiving an attribute value determination request, wherein the attribute value determination request carries an attribute item to be determined and multiple attribute identifiers of a target icon.

[0026] In step S102 provided in the present application, a request for determining an attribute value of a target icon is received.

[0027] Among them, target icons are involved. Target icons refer to specific images or symbols used in web pages, applications or user interfaces.

[0028] This involves an attribute value determination request, which is a request for determining the exact value of one or more attributes of a target icon. Attributes include the icon's color, size, position, and transparency.

[0029] Among them, the attribute item to be determined is involved, and the attribute item to be determined refers to the attribute item whose exact value the user hopes to determine.

[0030] Among them, attribute identification is involved, and attribute identification refers to an identification used to determine the attributes of the target icon, such as the icon identifier, icon class identifier and pseudo class identifier of the target icon.

[0031] In this step, a property value determination request is received, querying the target icon's property values. The request contains the property items that the developer wants to query, and also provides the identifier of the target icon's type property, i.e., the property identifier. Receiving a property value determination request is a fundamental step in determining the icon's property values. By determining the exact values ​​of the icon's properties, developers can more precisely control the icon's appearance, ensuring consistency and accuracy across different devices and screen sizes.

[0032] Step S104: In response to the attribute value determination request, multiple attribute matching vectors are determined based on the attribute item to be determined and the multiple attribute identifiers, wherein the multiple attribute matching vectors are all matching vectors that include at least one attribute identifier that hits, and the multiple attribute matching vectors all have attribute values ​​corresponding to the attribute item to be determined.

[0033] In step S104 provided in the present application, a plurality of attribute matching vectors are determined.

[0034] Among them, a matching vector is involved, and a matching vector refers to an attribute value set containing multiple specific icon attribute values.

[0035] Among them, an attribute matching vector is involved. The attribute matching vector refers to a matching vector that hits the attribute identifier of at least one target icon and contains the attribute value corresponding to the attribute item to be determined of the target icon.

[0036] In this step, in response to the attribute value determination request, all matching rules for the requested attribute items are determined based on all attribute identifiers associated with the target icon. This is known as the attribute matching vector, along with the corresponding attribute values ​​within the attribute matching vector. This step allows the attribute matching vector associated with the request to be quickly located and extracted, avoiding the need to blindly search through numerous stylesheets. This reduces the workload of determining icon attribute values ​​and improves overall efficiency.

[0037] Step S106 : determining the matching index values ​​corresponding to the multiple attribute matching vectors respectively according to the vector positions corresponding to the hit attribute identifiers under the multiple attribute matching vectors.

[0038] In step S106 provided in the present application, matching index values ​​corresponding to a plurality of attribute matching vectors are determined.

[0039] Among them, the hit attribute identifier is involved. The target icon includes multiple attribute identifiers, and each attribute matching vector also includes a corresponding attribute identifier. When analyzing a single attribute matching vector, the attribute identifier included in both the attribute matching vector and the target icon is the hit attribute identifier.

[0040] Among them, the vector position is involved, and the vector position refers to the position of the attribute identifier in an attribute matching vector.

[0041] Among them, a matching index value is involved, and the matching index value refers to an index value used to quantify the correlation or matching degree between the attribute matching vector and the target graphic.

[0042] In this step, the position of each attribute identifier in the attribute matching vector is related to the priority of the attribute matching vector. By analyzing the position of the target graphic hit attribute identifier in different attribute matching vectors, the matching index value of each vector is determined.

[0043] This step determines the matching index values ​​corresponding to multiple attribute matching vectors, quantifies the degree of matching between the attribute matching vectors and the target graphic, and accurately understands the specific attributes that actually affect the element, thereby enhancing the control over the page style. At the same time, when multiple rules attempt to define the same attribute, the matching index value helps determine which rule has the highest priority, thereby quickly locating and resolving style conflicts without the need to manually analyze each Cascading Style Sheet (CSS) rule, saving a lot of time and effort.

[0044] Step S108 : determining a first matching vector from the plurality of attribute matching vectors according to the matching index values ​​corresponding to the plurality of attribute matching vectors.

[0045] In step S108 provided in this application, a first matching vector is determined.

[0046] Here, the first matching vector is involved, and the first matching vector refers to a matching vector having the highest matching index value among multiple attribute matching vectors.

[0047] Through this step, after calculating the matching index values ​​for all rules, the matching index values ​​of multiple attribute matching vectors are compared to find the vector with the highest matching index value, namely the first matching vector. Determining the first matching vector can effectively resolve the complex issues of rule conflicts and stacking order, ensuring that the style ultimately applied to the icon is the rule with the highest priority. At the same time, when dealing with responsive design or dynamically generated styles, determining the first matching vector helps ensure the consistency of the icon's attribute values ​​under different conditions, improving the user experience and page stability.

[0048] Step S110 : determining a target attribute value corresponding to the attribute item to be determined according to the first matching vector.

[0049] In step S110 provided in the present application, a target attribute value corresponding to the attribute item to be determined is determined.

[0050] The target attribute value is the final value of the attribute to be determined. It represents the exact definition of the requested attribute in the icon style.

[0051] In this step, after identifying the first matching vector with the highest matching index, the exact attribute value of the attribute item to be determined is extracted from the first matching vector and provided to the developer as the target attribute value. This step, relying on the first matching vector to determine the target attribute value, ensures the consistency and expected effect of the icon style and avoids display anomalies caused by style cascading and priority issues.

[0052] Through the above steps S102-S110, an attribute value determination request can be received, wherein the attribute value determination request carries the attribute item to be determined and multiple attribute identifiers of the target icon; in response to the attribute value determination request, multiple attribute matching vectors are determined based on the attribute item to be determined and the multiple attribute identifiers, wherein the multiple attribute matching vectors are matching vectors that include at least one hit attribute identifier, and the multiple attribute matching vectors all have attribute values ​​corresponding to the attribute item to be determined; according to the vector positions corresponding to the hit attribute identifiers under the multiple attribute matching vectors, the matching index values ​​corresponding to the multiple attribute matching vectors are determined; according to the matching index values ​​corresponding to the multiple attribute matching vectors, a first matching vector is determined from the multiple attribute matching vectors; according to the first matching vector, a target attribute value corresponding to the attribute item to be determined is determined, and by determining the first matching vector from the multiple attribute matching vectors based on the matching index values ​​corresponding to the multiple attribute matching vectors, the purpose of determining the target attribute value corresponding to the attribute item to be determined based on the first matching vector is achieved, thereby solving the technical problems in the related art of large workload and low determination efficiency in the process of determining icon attribute values.

[0053] As an optional embodiment, the matching index values ​​corresponding to the multiple attribute matching vectors are determined according to the vector positions corresponding to the hit attribute identifiers under the multiple attribute matching vectors, including: determining the weight values ​​corresponding to the multiple predetermined vector positions; determining the matching index values ​​corresponding to the multiple attribute matching vectors according to the vector positions corresponding to the hit attribute identifiers under the multiple attribute matching vectors, and the weight values ​​corresponding to the multiple predetermined vector positions.

[0054] In this embodiment, the specific steps of determining the matching index values ​​corresponding to the multiple attribute matching vectors respectively according to the vector positions corresponding to the hit attribute identifiers under the multiple attribute matching vectors are described.

[0055] This involves predetermined vector positions. In an attribute matching vector, different attribute identifiers are located at different vector positions.

[0056] Among them, the weight value is involved, and the weight value refers to the importance or influence of the vector position determined based on the specificity of the rule.

[0057] In this step, first, weights are assigned to different positions in each attribute match vector based on the corresponding selector rule. Next, a match index is calculated based on the position of the hit attribute identifier in each attribute match vector and the weights of these predetermined positions. The match index reflects the actual influence of the rule on the element's style, with rules with higher weights receiving higher match indexes.

[0058] Through this step, different weight values ​​are determined for different vector positions, and the weight values ​​of different types of attribute identifiers are clarified. The clear matching index value and weight value calculation process make the process of determining the matching index value more transparent, improve the accuracy of the determined first matching vector and target attribute value, and thus make more reasonable style decisions.

[0059] As an optional embodiment, the matching index values ​​corresponding to the multiple attribute matching vectors are determined according to the vector positions corresponding to the hit attribute identifiers under the multiple attribute matching vectors, including: when there are multiple attribute items to be determined, determining the priorities corresponding to the multiple attribute items to be determined; determining the matching index values ​​corresponding to the multiple attribute matching vectors according to the vector positions corresponding to the hit attribute identifiers under the multiple attribute matching vectors and the priorities corresponding to the multiple attribute items to be determined.

[0060] In this embodiment, specific steps of determining matching index values ​​corresponding to a plurality of attribute matching vectors are described when there are a plurality of attribute items to be determined.

[0061] In this step, when there are multiple attribute items to be determined, first, all attribute matching vectors that hit the attribute items to be determined are identified, and then, when processing multiple attribute items to be determined, the priority of these attributes needs to be further determined. The determination of priority can be based on the direct instructions of the developer, the importance of the attribute in the design, or predefined attribute priority rules. Finally, according to the priorities corresponding to the multiple attribute items to be determined and the vector position of the hit attribute identifier in each attribute matching vector, the matching index values ​​corresponding to the multiple attribute matching vectors are determined. Through this step, when determining the numerical value of the matching value, the priorities of the multiple attribute items to be determined are taken into consideration, and the specific attribute values ​​of the attribute items with high priorities are given priority, so as to more accurately determine which rules have a decisive influence on the style of the element, thereby reducing parsing errors and uncertainties.

[0062] As an optional embodiment, determining the target attribute value corresponding to the attribute item to be determined based on the first matching vector includes: determining the attribute value hit results corresponding to multiple attribute items to be determined respectively under the first matching vector; in the case that there is a miss result among the multiple attribute value hit results, determining the first attribute item with a hit attribute value and the second attribute item with a miss attribute value among the multiple attribute items to be determined under the first matching vector; determining multiple hit index values ​​corresponding to the multiple hit matching vectors for the second attribute item, wherein the multiple hit matching vectors are a summary of multiple attribute matching vectors, and are matching vectors that hit the corresponding attribute items; determining the attribute value corresponding to the first attribute item based on the first matching vector, and determining the attribute value corresponding to the second attribute item based on the second matching vector, wherein the second matching vector is the vector with the highest corresponding hit index value.

[0063] In this embodiment, specific steps of determining a target attribute value corresponding to an attribute item to be determined when a miss result exists among multiple attribute value hit results are described.

[0064] The attribute value hit result refers to whether the specific attribute value of the specific attribute item to be determined is defined in the first matching vector. The hit result reflects the definition of the specific attribute by the rule.

[0065] Here, a miss result is involved, and the miss result refers to a result in which the specific attribute value of the specific attribute item to be determined is not defined in the first matching vector.

[0066] Herein, the first attribute item is involved, and the first attribute item refers to the attribute item that is accurately hit under the first matching vector.

[0067] Here, a second attribute item is involved, and the second attribute item refers to an attribute that is not hit in the first matching vector and needs to be further determined.

[0068] Here, a hit matching vector is involved, and the hit matching vector refers to an attribute matching vector that defines the second attribute item.

[0069] Here, a hit index value is involved, and the hit index value refers to an index value used to evaluate the matching degree and priority of the hit matching vector to the second attribute item.

[0070] Herein, a second matching vector is involved, and the second matching vector refers to a matching vector determined to determine the attribute value corresponding to the second attribute item.

[0071] In this step, first, check the attribute value hit results of multiple attribute items to be determined under the first matching vector to confirm which attributes are accurately defined. These attributes are the first attribute items. If there are attributes that are not hit, that is, the second attribute item, then further analyze all related vectors, summarize them to form multiple hit matching vectors, and calculate the hit index value of each vector relative to the second attribute item to evaluate which vector has the greatest influence on the determination of the attribute value. Finally, the system determines the attribute value corresponding to the first attribute item based on the first matching vector, and determines the attribute value corresponding to the second attribute item based on the hit matching vector with the highest hit index value (that is, the second matching vector). This process ensures that even when some attributes are not directly hit, the value of each attribute can be accurately determined based on the priority and effectiveness of the rules.

[0072] As an optional embodiment, a first matching vector is determined from multiple attribute matching vectors based on the matching index values ​​corresponding to the multiple attribute matching vectors, including: when there are multiple equivalent index values ​​in the multiple matching index values, determining the priorities corresponding to the multiple attribute matching vectors, wherein the index values ​​corresponding to the multiple equivalent index values ​​are equal and are all greater than a predetermined threshold; and determining the first matching vector based on the priorities corresponding to the multiple equivalent index values.

[0073] In this embodiment, specific steps of determining a first matching vector when there are multiple equivalent index values ​​among multiple matching index values ​​are described.

[0074] Among them, the equivalent index value is involved. When calculating the matching index value, it may happen that multiple attribute matching vectors have the same highest index value. In this case, the same highest index value is the equivalent index value.

[0075] Among them, a predetermined threshold is involved. The predetermined threshold refers to a numerical standard preset in matching and priority judgment, which is used to filter out rules or vectors with matching index values ​​lower than the threshold, ensuring that only those rule sets that really have a significant impact on the attributes are considered.

[0076] In this step, when multiple rules have the same highest matching index value for the same attribute, known as an equivalent index value, additional strategies are needed to determine which rule should ultimately take effect. Here, a preset priority rule is introduced to distinguish between vectors with equivalent index values. If the matching index values ​​of multiple vectors are equal and above a predetermined threshold, a first matching vector is determined according to the preset priority rule. The rules of this vector will ultimately determine the style of the icon.

[0077] As an optional embodiment, after determining the target attribute value corresponding to the attribute item to be determined based on the first matching vector, it also includes: determining the target pixel value corresponding to the attribute item to be determined on the target display device based on the target attribute value; determining the actual pixel value corresponding to the attribute item to be determined on the target display device; determining the pixel difference based on the actual pixel value and the target pixel value; and adjusting the target attribute value based on the pixel difference to obtain an updated attribute value.

[0078] In this embodiment, specific steps for adjusting the target attribute value are described.

[0079] Among them, the target display device is involved. The target display device refers to the actual device where the front-end page will display the target icon, such as a desktop monitor, a mobile device, or a screen with a specific resolution.

[0080] Among them, the target pixel value is involved, and the target pixel value refers to the specific pixel unit value on the target display device converted from the target attribute value.

[0081] Among them, the actual pixel value is involved. The actual pixel value refers to the actual display effect when the front-end page is rendered to the target display device. It is the final display value of the target pixel value after being affected by factors such as the browser rendering mechanism and the device pixel ratio (DPR).

[0082] Among them, pixel difference is involved. Pixel difference refers to the difference between the target pixel value and the actual pixel value. It is used to measure the deviation between the display effect of the element on the target display device and the developer's expectations.

[0083] Among them, it involves updating the attribute value. The updated attribute value refers to the target attribute value adjusted according to the pixel difference, which is used to correct the display deviation of the element to ensure the expected display effect on the target display device.

[0084] In this step, the target attribute value is first determined by the first matching vector. Next, this target attribute value is converted into a target pixel value, which is calculated based on the resolution and device pixel ratio of the target display device for use in actual display. Then, the actual pixel value of the element on the target display device is obtained through the browser's rendering mechanism. This is the size or position of the element attribute actually presented on the device. By comparing the actual pixel value with the target pixel value, the pixel difference can be calculated, which is the deviation between the element display effect and the developer's expectations. Finally, the target attribute value is adjusted based on this pixel difference to generate an updated attribute value to ensure that the element's display effect is consistent with expectations and eliminate visual inaccuracies or deviations.

[0085] As an optional embodiment, in response to an attribute value determination request, before determining multiple attribute matching vectors based on the attribute item to be determined and multiple attribute identifiers, it also includes: determining the embedded attribute detection result of the target icon, wherein the embedded attribute detection result is used to indicate whether the target icon has an embedded attribute value, and the embedded attribute value is a predetermined attribute value of the target icon; when the embedded attribute detection result is that the target icon has an embedded attribute value, determining the embedded attribute value as the target attribute value.

[0086] In this embodiment, specific steps of determining the embedded attribute value as the target attribute value when the embedded attribute detection result indicates that the target icon has an embedded attribute value are described.

[0087] Among them, the embedded attribute detection result is involved, and the embedded attribute detection result refers to the judgment result of whether the target icon has an embedded attribute value.

[0088] Among them, embedded attribute values ​​are involved. Embedded attribute values ​​refer to CSS values ​​defined directly in the style (style attribute) of Hypertext Markup Language (HTML) elements, or attribute values ​​embedded in icon formats. They have the highest priority and directly determine the style of the element.

[0089] In this step, when processing a request to determine the attribute value of an icon element, the system will first check whether the icon contains embedded attribute values ​​defined directly in the element or icon format. An embedded attribute detection is performed to determine whether the target icon has the attribute value to be determined directly defined in its HTML structure or icon format. If the detection result shows that the target icon has embedded attribute values, then these embedded attribute values ​​will be regarded as target attribute values, that is, the attributes that the developer cares about will ultimately be determined based on these embedded values, and other CSS rules will no longer be parsed, because embedded attribute values ​​have the highest priority in the CSS rule cascade.

[0090] Based on the above embodiment and optional embodiment, an optional implementation manner is provided, which is described in detail below.

[0091] In today's web design landscape, precise control of element borders is crucial to the aesthetics and consistency of user interfaces. With the widespread adoption of high-resolution devices, sub-pixel accuracy for CSS properties like border width is a growing concern. When rendering pages, browsers typically round the values ​​of these CSS properties to integer pixels to fit within the device pixel grid. This sub-pixel rounding can lead to inconsistent display across different devices, especially when working with complex layouts.

[0092] Existing methods often rely on the browser's default rendering rules and cannot provide developers with precise control and detection capabilities for sub-pixel values. The main problems in this case include:

[0093] 1. Limited sub-pixel accuracy: The browser's sub-pixel rounding mechanism is usually uncontrollable, resulting in difficulty in displaying uniform border widths of elements in precise layouts, especially on high-resolution screens.

[0094] 2. Invisible subtle differences: For CSS properties with small values ​​such as border width, subtle differences caused by rounding may cause visual inconsistencies on different browsers or devices, especially in alignment, layout, and responsive design.

[0095] 3. Lack of debugging tools: Although existing developer tools can check rendered CSS properties, they cannot effectively detect the difference between the original CSS value and the display after device pixel rounding. It is difficult for developers to determine when and how rounding operations are performed.

[0096] Therefore, in the context where sub-pixel rounding issues affect precise border control, there is an urgent need for a technical means to accurately detect and mark border rounding differences.

[0097] In view of this, an optional embodiment of the present invention provides a method for accurately detecting and marking element borders with sub-pixel rounding based on custom instructions. This method cleverly utilizes custom instructions (Vue) to greatly simplify the complex development process, allowing developers to efficiently and conveniently perform precise sub-pixel rounding detection and marking of element borders on the browser side. With custom instructions, developers only need to add the corresponding instruction mark to the target element to achieve accurate detection and marking, significantly reducing the development workload while improving development efficiency and consistency of typesetting effects.

[0098] This method firstly extracts the raw value of an element's border width by thoroughly parsing all style sheets, CSS rules, and inline styles loaded by the browser. This process incorporates a sophisticated selector priority calculation mechanism to ensure that the extracted raw value is based on the highest-priority style rule, greatly enhancing the reliability and accuracy of the extraction. Furthermore, this method not only covers common properties (the `border` property), but also carefully considers the definitions of individual border properties to ensure the comprehensiveness and accuracy of the extraction process.

[0099] After obtaining the original values, this method further compares and analyzes the extracted original values ​​with the actual rendered values, accurately identifying sub-pixel rounding. Using a specific color-coding mechanism for different rounding results, developers can intuitively observe and debug the visual effects of element borders, effectively resolving potential issues in typography.

[0100] Ultimately, combined with the efficiency and convenience of Vue custom instructions, this invention provides developers with a simplified and efficient solution for implementing sub-pixel rounding detection and marking of element borders on the browser side. It not only improves the efficiency of the development process, but also enhances the consistency of the effect, bringing significant technological innovation to front-end development.

[0101] The following specifically describes a method for accurately detecting and marking sub-pixel rounding of element borders based on custom instructions provided in an optional embodiment of the present invention.

[0102] S1. Receive a request to determine the attribute value of a target icon.

[0103] Taking the border width property value of the target icon as an example, in CSS, the border width can be defined in multiple forms, among which the shorthand form is:

[0104] `border:2px solid black;`

[0105] It also defines the border width (border) as 2 pixels, the style (solid) and the color (black).

[0106] The form of a single attribute is:

[0107] `border-top-width:2px;`

[0108] Defines the width of the top border (width) to be 2 pixels.

[0109] The border width rule function (`extractBorderWidths(rule)`) can be used to parse the border width in these two different forms: it first tries to extract the border width from the shorthand `border` property; then checks the border width in a specific direction (such as the top border width, `border-top-width`) to ensure that all cases are covered. The function outputs an object containing the border widths in four directions (top, right, bottom, left) for subsequent operations.

[0110] It should be noted that the border width may be the result of the sum of multiple CSS rules. This function will extract the border width of each rule and select the appropriate value when determining the priority later. For example, the CSS rule is:

[0111] `border:5px solid black; border-top-width:10px;`

[0112] Finally, the returned border width is 10 pixels for the top border (`top:10px), 5 pixels for the right border (right:5px), 5 pixels for the bottom border (bottom:5px), and 5 pixels for the left border (left:5px`).

[0113] When defining the v-check-border directive in a Vue application, Vue will bind the logic to the element at this stage. The core logic of the directive is initialized in another custom directive (the bind(el) function).

[0114] This stage receives the target icon (DOM element, `el`) bound to the instruction and uses it as the input of the function. At this point, all pre-processing logic and calculation rules are ready for subsequent border detection and color marking.

[0115] Vue's directive lifecycle function here ensures that `v-check-border` is only processed on the specific element to which it is bound. The `bind` lifecycle hook in the Vue framework is only called when the directive is first bound and will not be executed repeatedly.

[0116] S2. Determine multiple attribute matching vectors based on the attribute item to be determined and multiple attribute identifiers.

[0117] In the `get Original Border Width(element)` function, we first need to iterate over all style sheets on the entire page. We retrieve all style sheets for the document using the `document.styleSheets` function, and then iterate over each CSS rule in the style sheet (similar to the property match vector, `CSS Rule`, described above).

[0118] For each rule, all selectors (identified by the same properties as above) are parsed using the rule selector ( `rule.selector Text.split(',')`) and the set of elements that match the selector is found using the return selector element matcher ( `document.querySelector All(selector)`). If the currently bound element `el` is in the list of matched elements, the rule is in effect for that element.

[0119] It should be noted that access restrictions on cross-domain style sheets (`sheet.css Rules` cannot be read) are handled. Exceptions are handled through a retry mechanism (`try-catch`) to ensure that the directive still works properly even if the style sheet cannot be accessed.

[0120] Assume `el` is the location and hierarchy of a CSS element ( `div`) on the page, and there is a CSS style rule `.box{border-top-width:5px;}`. Use the element matcher ( `query Selector All('.box')`) to find the matching `div`. At this time, confirm that the rule affects the element and record the border style.

[0121] S3. Determine the matching index values ​​corresponding to the multiple attribute matching vectors according to the vector positions corresponding to the hit attribute identifiers under the multiple attribute matching vectors.

[0122] In order to correctly judge the impact of multiple CSS rules on an element, a priority mechanism needs to be introduced.

[0123] The weight calculation function (`getSpecificity(selector)`) is responsible for calculating the weight of each CSS selector. It is calculated by matching identifier (ID) selectors, class selectors, tag selectors, pseudo-classes, pseudo-elements, attribute selectors, etc., according to their priority order in the CSS specification.

[0124] The ID selector has the highest priority, followed by the class selector, pseudo-class, attribute selector, and finally the tag selector. The number of each selector will affect the overall priority.

[0125] In CSS, the selector priority determines the order in which styles are applied. By calculating the priority, you can ensure that the most appropriate style is applied when multiple rules appear. For IDs, multiply the priority by 100, for classes by 10, and for tags by 1. The larger the final value, the higher the priority.

[0126] For example, in the first selector (`#main.header h1`), `#main` (ID selector) contributes 100 points, `.header` (class selector) contributes 10 points, and `h1` (tag selector) contributes 1 point, for a total score of 111; the second selector (h1`) only contributes 1 point, and its priority is significantly lower than the former.

[0127] S4. Determine a first matching vector from the multiple attribute matching vectors according to the matching index values ​​corresponding to the multiple attribute matching vectors.

[0128] For each matching rule, its priority is calculated by calling the priority determination function (`get Specificity(rule.selector Text)`). If the rule's priority is higher than the currently stored priority, the border width value for that direction is updated. The function considers the border widths of all four directions (top, right, bottom, and left) simultaneously, ensuring that the highest priority width is ultimately stored. For border width prioritization, inline styles always take precedence. Lower priority rules are overwritten by higher priority rules.

[0129] After all style sheet rules are matched, the element's inline style still needs to be checked. The element's real-time calculated style is obtained by determining the element style function (`window.get Computed Style(element)`). The inline style is directly bound to the element's `style` attribute, so it has the highest priority. The instruction checks the inline style's `border-width` at this step. If it exists and is not overridden by a higher priority rule, it is applied in the corresponding direction. This stage ensures that the final recorded original border width not only takes into account the style sheet rules, but also includes the priority processing of the inline style.

[0130] S5. Determine a target attribute value corresponding to the attribute item to be determined based on the first matching vector.

[0131] After this, you can also call the comparison function (`compare And Color Borders(element, original Widths)`) to get the final rendered border width of the element through `window.get Computed Style(element`. Compare the calculated rendered width with the original width extracted previously (the value of the highest priority rule): Figure 2 is a schematic diagram of element rendering value rounding provided by an optional embodiment of the present invention, such as Figure 2 As shown, if the rendered value is greater than the original value, it means that it is rounded up and the corresponding border color is changed to blue; if the rendered value is less than the original value, it means that it is rounded down and the corresponding border color is changed to red; if the two are equal, it means that there is no rounding and the border color is changed to green. Use the availability function (`parse Float`) to convert the border width value to a number to ensure correct comparison, and judge each direction independently. After the rounding judgment in the previous step, the instruction will apply the result to the border of the element. By dynamically modifying style properties such as element style (`element.style['border Top Color']`), the border color of each direction is marked as blue, red or green.

[0132] It should be noted that the color change process is completely based on the rounding result, allowing developers to understand the border width calculation at a glance. The color change is immediate and the border width rounding status is intuitively reflected during the page rendering process.

[0133] Through the above optional implementation, at least the following beneficial effects can be achieved:

[0134] (1) Significantly improve development efficiency: Through the automated raw value extraction and rounding detection process, the time for manual adjustment and troubleshooting is greatly reduced, improving overall development efficiency and allowing developers to focus on higher-level function implementation;

[0135] (2) Enhanced layout consistency and aesthetics: By accurately detecting sub-pixel rounding, developers can more easily control the visual effects of element borders, thereby improving the consistency and aesthetics of page layout and ensuring a consistent user experience across different devices;

[0136] (3) Optimize user experience and visual presentation: By ensuring the accurate presentation of element borders, the user's visual experience when using the browser is significantly improved, avoiding display anomalies caused by rounding, thereby improving user satisfaction and page usability;

[0137] (4) Promoting the sustainable development of front-end technology: This invention provides developers with efficient solutions in practical applications, promoting the advancement and improvement of front-end development technology;

[0138] (5) Improve code maintainability: Through modular design and the introduction of custom instructions, the readability and maintainability of the code are improved, the subsequent maintenance costs are reduced, and the long-term development of the development team is guaranteed;

[0139] (6) Promote the unification of design specifications: Through a consistent rounding detection and marking mechanism, the unification of design specifications in front-end development is promoted, so that the style can be consistent between different projects.

[0140] It should be noted that for the aforementioned method embodiments, for simplicity of description, they are all expressed as a series of action combinations. However, those skilled in the art should be aware that the present invention is not limited by the order of the actions described, because according to the present invention, certain steps can be performed in other orders or simultaneously. Secondly, those skilled in the art should also be aware that the embodiments described in this specification are all preferred embodiments, and the actions and modules involved are not necessarily required by the present invention.

[0141] Through the description of the above embodiments, those skilled in the art can clearly understand that the method according to the above embodiment can be implemented by means of software plus the necessary general hardware platform, and of course it can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of the present invention, or the part that contributes to the prior art, can be embodied in the form of a software product, which is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk), and includes a number of instructions for enabling a terminal device (which can be a mobile phone, computer, server, or network device, etc.) to execute the methods of various embodiments of the present invention.

[0142] Example 2

[0143] According to an embodiment of the present invention, a device for implementing the above-mentioned method for determining the attribute value of an icon is also provided. Figure 3 FIG. 1 is a structural block diagram of a device for determining an icon attribute value according to an embodiment of the present invention. Figure 3 As shown, the apparatus includes: a receiving module 302, a responding module 304, a first determining module 306, a second determining module 308 and a third determining module 310. The apparatus will be described in detail below.

[0144] A receiving module 302 is configured to receive an attribute value determination request, wherein the attribute value determination request carries an attribute item to be determined and multiple attribute identifiers of a target icon; a response module 304 is connected to the above-mentioned receiving module 302, and is configured to respond to the attribute value determination request and determine multiple attribute matching vectors based on the attribute item to be determined and the multiple attribute identifiers, wherein the multiple attribute matching vectors are matching vectors that include at least one hit attribute identifier, and the multiple attribute matching vectors all have attribute values ​​corresponding to the attribute item to be determined; a first determination module 306 is connected to the above-mentioned response module 304, and is configured to determine the matching index values ​​corresponding to the multiple attribute matching vectors based on the vector positions corresponding to the hit attribute identifiers under the multiple attribute matching vectors; a second determination module 308 is connected to the above-mentioned first determination module 306, and is configured to determine a first matching vector from the multiple attribute matching vectors based on the matching index values ​​corresponding to the multiple attribute matching vectors; a third determination module 310 is connected to the above-mentioned second determination module 308, and is configured to determine the target attribute value corresponding to the attribute item to be determined based on the first matching vector.

[0145] It should be noted here that the above-mentioned receiving module 302, response module 304, first determination module 306, second determination module 308 and third determination module 310 correspond to steps S102 to S110 in the method for determining the icon attribute value, and the instances and application scenarios implemented by the multiple modules and corresponding steps are the same, but are not limited to the contents disclosed in the above-mentioned embodiment 1.

[0146] Example 3

[0147] According to another aspect of an embodiment of the present invention, an electronic device is provided, including: a processor; and a memory for storing processor-executable instructions, wherein the processor is configured to execute the instructions to implement any of the above methods for determining an icon attribute value.

[0148] Example 4

[0149] According to another aspect of an embodiment of the present invention, a computer-readable storage medium is provided. When instructions in the computer-readable storage medium are executed by a processor of an electronic device, the electronic device can execute any of the above methods for determining an icon attribute value.

[0150] The serial numbers of the above embodiments of the present invention are for description only and do not represent the advantages or disadvantages of the embodiments.

[0151] In the above embodiments of the present invention, the description of each embodiment has its own focus. For parts that are not described in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0152] In the several embodiments provided in this application, it should be understood that the disclosed technical content can be implemented in other ways. Among them, the device embodiments described above are only exemplary. For example, the division of the units can be a logical function division. In actual implementation, there may be other division methods, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of units or modules, which can be electrical or other forms.

[0153] The units described as separate components may or may not be physically separate, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed across multiple units. Some or all of the units may be selected according to actual needs to achieve the purpose of the present embodiment.

[0154] In addition, the functional units in the various embodiments of the present invention may be integrated into a single processing unit, each unit may exist physically separately, or two or more units may be integrated into a single unit. The aforementioned integrated units may be implemented in the form of hardware or software functional units.

[0155] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention, or the part that contributes to the prior art, or all or part of the technical solution can be embodied in the form of a software product. The computer software product is stored in a storage medium and includes several instructions for enabling a computer device (which can be a personal computer, server or network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present invention. The aforementioned storage medium includes: U disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), mobile hard disk, magnetic disk or optical disk, etc. Various media that can store program codes.

[0156] The above is only a preferred embodiment of the present invention. It should be pointed out that for ordinary technicians in this technical field, several improvements and modifications can be made without departing from the principles of the present invention. These improvements and modifications should also be regarded as within the scope of protection of the present invention.

Claims

1. A method for determining an icon attribute value, characterized in that: include: receiving an attribute value determination request, wherein the attribute value determination request carries an attribute item to be determined and multiple attribute identifiers of a target icon; In response to the attribute value determination request, determining a plurality of attribute matching vectors based on the attribute item to be determined and the plurality of attribute identifiers, wherein each of the plurality of attribute matching vectors includes a matching vector that matches at least one attribute identifier, and each of the plurality of attribute matching vectors includes an attribute value corresponding to the attribute item to be determined; Determining matching index values ​​corresponding to the plurality of attribute matching vectors respectively according to vector positions corresponding to the hit attribute identifiers under the plurality of attribute matching vectors; Determining a first matching vector from the multiple attribute matching vectors according to the matching index values ​​respectively corresponding to the multiple attribute matching vectors; Determine a target attribute value corresponding to the attribute item to be determined based on the first matching vector.

2. The method according to claim 1, characterized in that The determining, based on the vector positions corresponding to the hit attribute identifiers under the multiple attribute matching vectors, the matching index values ​​corresponding to the multiple attribute matching vectors respectively includes: Determining weight values ​​corresponding to a plurality of predetermined vector positions; Matching index values ​​corresponding to the multiple attribute matching vectors are determined according to the vector positions corresponding to the hit attribute identifiers under the multiple attribute matching vectors and the weight values ​​corresponding to the multiple predetermined vector positions.

3. The method according to claim 1, characterized in that The determining, based on the vector positions corresponding to the hit attribute identifiers under the multiple attribute matching vectors, the matching index values ​​corresponding to the multiple attribute matching vectors respectively includes: In the case where the attribute items to be determined include multiple ones, determining the priorities respectively corresponding to the multiple attribute items to be determined; Matching index values ​​corresponding to the multiple attribute matching vectors are determined based on the vector positions corresponding to the hit attribute identifiers under the multiple attribute matching vectors and the priorities corresponding to the multiple attribute items to be determined.

4. The method according to claim 1, wherein The determining, based on the first matching vector, a target attribute value corresponding to the attribute item to be determined includes: Determining attribute value hit results corresponding to the plurality of attribute items to be determined under the first matching vector; In the case where there is a miss result among the multiple attribute value hit results, determining, under the first matching vector, a first attribute item with a hit attribute value and a second attribute item with a miss attribute value among the multiple attribute items to be determined; Determine, for the second attribute item, a plurality of hit index values ​​corresponding to a plurality of hit matching vectors, wherein the plurality of hit matching vectors are a sum of the plurality of attribute matching vectors, and are matching vectors that hit the corresponding attribute item; The attribute value corresponding to the first attribute item is determined based on the first matching vector, and the attribute value corresponding to the second attribute item is determined based on the second matching vector, wherein the second matching vector is the vector with the highest corresponding hit index value.

5. The method according to claim 1, wherein The determining of a first matching vector from the plurality of attribute matching vectors according to the matching index values ​​respectively corresponding to the plurality of attribute matching vectors includes: In the case where there are multiple equivalent index values ​​among the multiple matching index values, determining the priorities corresponding to the multiple attribute matching vectors respectively, wherein the index values ​​corresponding to the multiple equivalent index values ​​are equal and are all greater than a predetermined threshold; A first matching vector is determined according to the priorities corresponding to the multiple equivalent index values.

6. The method according to claim 1, characterized in that After determining the target attribute value corresponding to the attribute item to be determined based on the first matching vector, the method further includes: Determining a target pixel value corresponding to the to-be-determined attribute item on the target display device according to the target attribute value; Determine an actual pixel value corresponding to the to-be-determined attribute item on the target display device; Determining a pixel difference value based on the actual pixel value and the target pixel value; The target attribute value is adjusted according to the pixel difference to obtain an updated attribute value.

7. The method according to any one of claims 1 to 6, characterized in that Before determining a plurality of attribute matching vectors according to the attribute item to be determined and the plurality of attribute identifiers in response to the attribute value determination request, the method further includes: Determine an embedded attribute detection result of the target icon, wherein the embedded attribute detection result is used to indicate whether the target icon has an embedded attribute value, and the embedded attribute value is a predetermined attribute value of the target icon; If the embedded attribute detection result is that the target icon has the embedded attribute value, the embedded attribute value is determined to be the target attribute value.

8. A device for determining an icon attribute value, characterized in that: include: A receiving module, configured to receive an attribute value determination request, wherein the attribute value determination request carries an attribute item to be determined and multiple attribute identifiers of a target icon; a response module, configured to, in response to the attribute value determination request, determine a plurality of attribute matching vectors based on the attribute item to be determined and the plurality of attribute identifiers, wherein each of the plurality of attribute matching vectors includes a matching vector that matches at least one attribute identifier, and each of the plurality of attribute matching vectors includes an attribute value corresponding to the attribute item to be determined; A first determining module is configured to determine matching index values ​​corresponding to the plurality of attribute matching vectors respectively according to vector positions corresponding to the hit attribute identifiers under the plurality of attribute matching vectors; a second determining module, configured to determine a first matching vector from the plurality of attribute matching vectors according to the matching index values ​​respectively corresponding to the plurality of attribute matching vectors; The third determining module is configured to determine a target attribute value corresponding to the attribute item to be determined based on the first matching vector.

9. An electronic device, characterized in that: include: processor; a memory for storing instructions executable by the processor; The processor is configured to execute the instructions to implement the method for determining the icon attribute value according to any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that When the instructions in the computer-readable storage medium are executed by a processor of an electronic device, the electronic device is enabled to execute the method for determining an icon attribute value according to any one of claims 1 to 7.

Images