CN117149188A - Page design diagram page code conversion method and device - Google Patents
Page design diagram page code conversion method and device Download PDFInfo
- Publication number
- CN117149188A CN117149188A CN202310994069.XA CN202310994069A CN117149188A CN 117149188 A CN117149188 A CN 117149188A CN 202310994069 A CN202310994069 A CN 202310994069A CN 117149188 A CN117149188 A CN 117149188A
- Authority
- CN
- China
- Prior art keywords
- elements
- page
- information
- relationship
- coordinates
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000013461 design Methods 0.000 title claims abstract description 90
- 238000000034 method Methods 0.000 title claims abstract description 65
- 238000010586 diagram Methods 0.000 title claims description 64
- 238000006243 chemical reaction Methods 0.000 title claims description 6
- 238000002372 labelling Methods 0.000 claims description 10
- 238000003860 storage Methods 0.000 claims description 8
- 238000004891 communication Methods 0.000 description 23
- 230000006870 function Effects 0.000 description 9
- 238000012545 processing Methods 0.000 description 9
- 238000004590 computer program Methods 0.000 description 8
- 238000011161 development Methods 0.000 description 4
- 238000012986 modification Methods 0.000 description 4
- 230000004048 modification Effects 0.000 description 4
- 230000008569 process Effects 0.000 description 4
- 238000004422 calculation algorithm Methods 0.000 description 3
- 230000000694 effects Effects 0.000 description 3
- 230000004075 alteration Effects 0.000 description 2
- 238000005520 cutting process Methods 0.000 description 2
- 238000002360 preparation method Methods 0.000 description 2
- 208000025174 PANDAS Diseases 0.000 description 1
- 208000021155 Paediatric autoimmune neuropsychiatric disorders associated with streptococcal infection Diseases 0.000 description 1
- 240000000220 Panda oleosa Species 0.000 description 1
- 235000016496 Panda oleosa Nutrition 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 230000006386 memory function Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/31—Programming languages or programming paradigms
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Computing Systems (AREA)
- Processing Or Creating Images (AREA)
Abstract
The invention provides a method and a device for converting page design drawings into page codes, wherein the method comprises the following steps: extracting element information in a plurality of layers of the page design drawing, wherein the element information comprises attribute information and position information; for each layer, determining the position relation among the elements in the layer according to the position information of the elements in the layer; determining the absolute layout of each element in the layer according to the position relation among the elements in the layer; the positional relationship includes a containment relationship between elements, a parallel relationship between elements, and a cross relationship between elements; and converting the attribute information of each element and the position information of each element corresponding to each layer into a corresponding page code of the page design drawing according to the absolute layout of each element in the layers. By the method, the page design drawing can be automatically converted into the page code, and the accuracy of the position information of the page design drawing element in the converted page code is improved.
Description
Technical Field
The invention relates to the technical field of front-end development, in particular to a method and a device for converting page design drawings into page codes.
Background
In the development of internet products, a developer needs to write a page design drawing designed by a designer into a corresponding page code form. In the writing process, the developer needs to spend a lot of time to communicate with the designer, and when the number of page design drawings is very large, the developer also spends a lot of time writing page codes.
In addition, the current mode of changing the page design diagram into the page code is to firstly analyze the page design diagram, acquire the corresponding lightweight data exchange format (JavaScript Object Notation, JSON) data of the page design diagram, and then generate the corresponding code through transliteration of the JSON. However, since the position information of the elements of the page layout in JSON data is a relative positioning manner, that is, the position relationship of the elements is respectively positioned only by the distance between the elements. When directly translating JSON into codes, the position information of elements of page design drawings in the codes is also relatively positioned, and the positioning mode leads to probability errors of the position information of the elements and makes development and maintenance difficult for developers.
Therefore, there is a need for a way to convert page layout directly and automatically into page code, and the relative positioning is not used in the conversion process.
Disclosure of Invention
The invention provides a method and a device for converting a page design drawing into a page code, which are used for solving the problems that the prior method needs to manually convert the page design drawing into the page code and the converted page code has probability of error in the element position information of the page design drawing.
In a first aspect, an embodiment of the present invention provides a method for converting a page design drawing into a page code, including:
extracting element information in a plurality of layers of a page design drawing, wherein the element information comprises attribute information and position information;
for each layer, determining the position relation among the elements in the layer according to the position information of the elements in the layer; determining the absolute layout of each element in the layer according to the position relation among the elements in the layer; the positional relationship includes a containment relationship between elements, a parallel relationship between elements, and a cross relationship between elements;
and converting attribute information of each element and position information of each element corresponding to each layer into a corresponding page code of the page design drawing according to the absolute layout of each element in the layers.
By adopting the method, the position relation of the elements in each layer is determined according to the position information of the elements in each layer, and then the element layout of the elements in each layer is determined according to the position relation of the elements, so that when the attribute information and the position information of the elements are converted into the corresponding page codes of the page design drawing, the absolute position of each element in each layer is determined, and the accuracy of the position information of the page design drawing elements in the converted page codes is improved. In addition, the attribute information and the position information of each element of a plurality of layers in the page design drawing are extracted, so that the page code can be automatically converted, manual operation is not needed, and the efficiency of converting the page code is improved.
Optionally, before determining the positional relationship between the elements in the layer according to the positional information of the elements in the layer, the method further includes:
converting the page design diagram into a first lightweight data exchange format JSON data;
deleting useless information in the first JSON data to obtain second JSON data; the garbage is used for representing information causing the confusion of the page codes converted by the page design diagram;
and determining element information corresponding to each of the plurality of layers according to the second JSON data.
By adopting the method, the second JSON data is obtained by deleting the useless information in the first JSON data, so that when the element information in the second JSON data is used for converting the page design diagram into the corresponding page code, the condition of disordered page codes is avoided, and the usability of the page codes is improved.
Optionally, converting attribute information of each element and position information of each element corresponding to each of the multiple layers into a corresponding page code of the page design drawing includes:
classifying the second JSON data according to the position relation among the elements to respectively obtain JSON data containing relation, JSON data in parallel relation and JSON data in cross relation;
And respectively converting the JSON data containing the relation, the JSON data of the parallel relation and the JSON data of the cross relation into corresponding page codes.
By adopting the method, the second JSON data with various position relations are respectively classified, so that when the JSON data is subsequently converted into the page code, each type of data can be uniformly processed with high efficiency, and the speed of converting the data into the page code is increased.
Optionally, determining the positional relationship between the elements in the layer according to the positional information of the elements in the layer includes:
when the position information is a plurality of angular coordinates of an element, when all angular coordinates of a first element fall within a range of all angular coordinates of a second element, an inclusion relationship is between the first element and the second element;
when there is a partial range of the ordinate ranges of all the angular coordinates of the first element and the ordinate ranges of all the angular coordinates of the second element, and the abscissa ranges of all the angular coordinates of the first element and the abscissa ranges of all the angular coordinates of the second element are not the same, the first element and the second element are in a same-row relationship in a parallel relationship;
When the ordinate ranges of all the angular coordinates of the first element and the ordinate ranges of all the angular coordinates of the second element do not exist in the same range, and the abscissa ranges of all the angular coordinates of the first element and the abscissa ranges of all the angular coordinates of the second element exist in the same partial range, the first element and the second element are in the same column relationship in the parallel relationship;
a cross relationship between the first element and the second element when there is a partial range of all angular coordinates of the first element and a partial range of all angular coordinates of the second element and a partial range of all angular coordinates of the first element and a partial range of all angular coordinates of the second element;
the first element and the second element are any different two elements of the elements.
By adopting the method, the position relation among the elements is determined according to the angular coordinates of the elements, so that preparation is made for determining the absolute layout of the elements of each page.
Optionally, determining the positional relationship between the elements in the layer according to the positional information of the elements in the layer includes:
When the position information is the center coordinates of the elements, determining the area of the third element and each coordinate of the third element according to the center coordinates and the length and width of the third element; determining the area of the fourth element and each coordinate of the fourth element according to the center coordinate and the length and width of the fourth element;
when the area of the third element is smaller than the area of the fourth element, and each coordinate of the third element is located in each coordinate of the fourth element, an inclusion relationship is between the third element and the fourth element;
when the coordinates of the third element and the coordinates of the fourth element are partially identical in ordinate and different in abscissa, the third element and the fourth element are in a same-row relationship in the parallel relationship;
when the coordinates of the third element and the coordinates of the fourth element are different in ordinate and the coordinates of the fourth element are the same in part of abscissa, the third element and the fourth element are in the same column relation in the parallel relation;
the third element and the fourth element are in the crossing relationship when the coordinates of the third element are the same as the coordinates of the fourth element in part of the ordinate and the coordinates of the fourth element are the same in part of the abscissa;
The third element and the fourth element are any different two elements of the elements.
By adopting the method, the position relation among the elements is determined according to the central coordinates of the elements and the included coordinates, so that preparation is made for determining the absolute layout of the elements of each page.
Optionally, after extracting the element information in the multiple layers of the page design drawing, the method further includes:
for any element, determining that the element is a picture according to element information of the element, and extracting and storing the picture;
converting attribute information of each element and position information of each element corresponding to each of the multiple layers into corresponding page codes of the page design drawing, wherein the conversion comprises the following steps:
and converting the attribute information of each element with style information and the position information of each element corresponding to the layers into page codes corresponding to the page design drawing.
Optionally, the method further comprises:
for any element, encapsulating the element into a plurality of different category components according to attribute information of the element;
splicing components of different categories according to the position information of each element to obtain a skeleton diagram corresponding to the page design diagram;
matching the skeleton diagram with the page design diagram according to the position information of each element, and displaying the labeling information of each element through the skeleton diagram; the labeling information is composed of attribute information of elements corresponding to the layers respectively.
By adopting the method, the plurality of elements are packaged into the components with different categories and spliced to form the skeleton diagram, so that the marking information is displayed through the matching of the skeleton diagram and the page design diagram, and therefore, when a user uses the page later, the user can directly see the attribute information of each element through the skeleton diagram, and the attribute information is the marking information.
Optionally, the method further comprises:
determining a first component selected as a reference and a second component selected as a target in the skeleton diagram;
and acquiring an auxiliary mark arranged between the first component and the second component, and displaying the auxiliary mark.
In a second aspect, an embodiment of the present invention provides a device for converting a page design drawing into a page code, including:
the receiving and transmitting unit is used for extracting element information in a plurality of layers of the page design drawing, wherein the element information comprises attribute information and position information;
the processing unit is used for determining the position relation among the elements in each layer according to the position information of the elements in each layer; determining the absolute layout of each element in the layer according to the position relation among the elements in the layer; the positional relationship includes a containment relationship between elements, a parallel relationship between elements, and a cross relationship between elements; and converting attribute information of each element and position information of each element corresponding to each layer into a corresponding page code of the page design drawing according to the absolute layout of each element in the layers.
In a third aspect, the present application also provides an apparatus. The apparatus may perform the above method design. The apparatus may be a chip or a circuit capable of performing the functions corresponding to the above-described methods, or a device including the chip or the circuit.
In one possible implementation, the apparatus includes: a memory for storing computer executable program code; and a processor coupled to the memory. Wherein the program code stored in the memory comprises instructions which, when executed by the processor, cause the apparatus or device in which the apparatus is installed to carry out the method of any one of the possible designs described above.
The device may further comprise a communication interface, which may be a transceiver, or if the device is a chip or a circuit, the communication interface may be an input/output interface of the chip, such as input/output pins or the like.
In one possible design, the device comprises corresponding functional units for implementing the steps in the above method, respectively. The functions may be realized by hardware, or may be realized by hardware executing corresponding software. The hardware or software includes one or more units corresponding to the above functions.
In a fourth aspect, the present application provides a computer readable storage medium storing a computer program which, when run on a device, performs a method of any one of the above possible designs.
In addition, the technical effects caused by any implementation manner of the third aspect to the fourth aspect may refer to the technical effects caused by different implementation manners of the first aspect, which are not described herein.
Drawings
FIG. 1 is a schematic flow chart of a method for converting page design drawing into page code according to an embodiment of the present application;
FIG. 2 (a) is a schematic diagram of a first method for determining a positional relationship including a relationship according to an embodiment of the present application;
FIG. 2 (b) is a schematic diagram of a second method for determining a positional relationship including a relationship according to an embodiment of the present application;
FIG. 3 (a) is a schematic diagram of a first method for determining a positional relationship of a peer relationship of a parallel relationship according to an embodiment of the present application;
FIG. 3 (b) is a schematic diagram of a second method for determining a positional relationship of a peer relationship of a parallel relationship according to an embodiment of the present application;
FIG. 4 (a) is a schematic diagram illustrating a first method for determining a cross relationship according to an embodiment of the present application;
FIG. 4 (b) is a schematic diagram of a second method for determining a cross relationship according to an embodiment of the present invention;
FIG. 5 is a schematic flow chart of a page design labeling according to an embodiment of the present invention;
FIG. 6 is a schematic diagram of a skeleton diagram according to an embodiment of the present invention;
FIG. 7 is a schematic diagram of an auxiliary marking line according to an embodiment of the present invention;
fig. 8 is a schematic diagram of a communication device 800 according to an embodiment of the present invention;
fig. 9 also provides another communication device 900 in accordance with the embodiment of the present invention.
Detailed Description
In order to make the objects, technical solutions and advantages of the present invention more apparent, the present invention will be described in further detail below with reference to the accompanying drawings, and it is apparent that the described embodiments are only some embodiments of the present invention, not all embodiments. All other embodiments, which can be made by those skilled in the art based on the embodiments of the invention without making any inventive effort, are intended to be within the scope of the invention.
The application scenario described in the embodiment of the present invention is for more clearly describing the technical solution of the embodiment of the present invention, and does not constitute a limitation on the technical solution provided by the embodiment of the present invention, and as a person of ordinary skill in the art can know that the technical solution provided by the embodiment of the present invention is applicable to similar technical problems as the new application scenario appears. In the description of the present invention, unless otherwise indicated, the meaning of "a plurality" is two or more.
Currently, development of internet products requires a developer to write a page design drawing of a designer into a page code, which requires the developer to spend a lot of time writing the page code and communicate with the designer. Meanwhile, the existing page design diagram is written into page codes, which are determined according to the relative positioning relation of elements in the JSON, and the relative positioning relation is also translated into codes in the JSON, so that the position information of the elements has probability of error, and meanwhile, a developer is difficult to maintain.
Based on the method, the application provides a method for converting the page design drawing into the page code, so that the page design drawing can be automatically converted into the page code, and the accuracy of the position information of the page design drawing element in the converted page code is improved.
As shown in fig. 1, the flow of a method for converting page design drawing into page code provided by the application is specifically as follows.
Step 100: element information in multiple layers of the page design drawing is extracted.
Illustratively, after the page layout is obtained, element information in multiple layers in the page layout may be extracted. Wherein the element information includes attribute information and location information.
Specifically, element information of a plurality of layers in the page design drawing and information of a plurality of layers in the page design drawing can be extracted through jszip, and in addition, element information of a plurality of layers in the page design drawing can be extracted through other modes. Wherein, the elements comprise picture elements and non-picture elements, and the non-picture elements refer to other parts except pictures in the page design drawing, such as text elements. The information of the multiple layers refers to specific numbers of the layers, for example, the 1 st layer, the 2 nd layer, etc. In addition, when the element is a picture element, specific pictures respectively corresponding to a plurality of layers in the page design drawing can be extracted through jszip.
Specifically, when the element is a picture element, the attribute information of the picture element includes the length and width of the picture, the filling effect of the picture and the like; when the element is a non-picture element, the attribute information of the non-picture element includes the type of the element, the length and width of the element, the color of the element, the style of the element, and the like.
Specifically, the present application does not limit the manner of presenting the position information of the picture and the position information of the element, and both the position information of the picture and the position information of the element may be presented in a coordinate form. The coordinates of the picture and the coordinates of the element may be the center coordinates of the element, that is, a specific coordinate point, or may be a plurality of angular coordinates of the element.
For example, if the element is a character of "panda", the coordinates of the element may be four angular coordinates such as (1, 1), (1, 2), (2, 1), (2, 2), and the attribute information of the element includes information such as that the type of the element is a letter, the length of the element is 2, the width is 1, the color of the element is black, and the style (i.e., font) of the element is regular script.
Step 110: for each layer, determining the position relation among the elements in the layer according to the position information of the elements in the layer, and determining the absolute layout of the elements in the layer according to the position relation among the elements in the layer.
Illustratively, after element information in multiple layers of the page layout is extracted in step 100, the information is converted into first JSON data. Specifically, the conversion may be performed by jszip, or may be performed by other feasible methods, which is not limited by the present application. Specifically, the converted first JSON data also includes information of a plurality of layers and element information corresponding to each layer.
For example, after the first JSON data corresponding to the page design drawing is obtained, since some useless information exists in the first JSON data, the first JSON data needs to be filtered, and the useless information is deleted to obtain the second JSON data. Specifically, the garbage includes transparent layers, blocked layers, etc., and the garbage can confuse the page code converted by the page design drawing.
For example, after the second JSON data is obtained, when the element is determined to be a picture element according to the element information of the element, the picture is extracted and stored. Specifically, uploading a specific picture corresponding to each picture layer in the second JSON data to a server, and returning an address corresponding to each picture by the server so as to facilitate subsequent call of the picture. The specific picture obtained at this time realizes the cutting of the picture in the page design drawing.
Illustratively, after the second JSON data is obtained, the positional relationship between the elements in each layer may be determined from the positional information of the elements in each layer. The positional relationship between the elements of each layer comprises the positional relationship between the picture elements and the non-picture elements, the positional relationship between the picture elements and the non-picture elements and the positional relationship between the non-picture elements. Specifically, the positional relationship includes an inclusion relationship between elements, a parallel relationship, and a cross relationship.
First way of determining the positional relationship: when the coordinates are a plurality of angular coordinates of the elements, a first element and a second element are set, the first element and the second element being any different two elements among the elements.
Specifically, when all the angular coordinates of the first element fall within the range of all the angular coordinates of the second element, the first element is in an inclusion relationship with the second element, and it is the second element that includes the first element.
When the ordinate ranges of all the angular coordinates of the first element and the ordinate ranges of all the angular coordinates of the second element are the same in part, and the abscissa ranges of all the angular coordinates of the first element and the abscissa ranges of all the angular coordinates of the second element are not the same in scope, the first element and the second element are the same in-line relationship in the parallel relationship; the first element and the second element are in the same column relationship in the parallel relationship when the ordinate range of all the angular coordinates of the first element is the same as the ordinate range of all the angular coordinates of the second element, and the abscissa range of all the angular coordinates of the first element is the same as the abscissa range of all the angular coordinates of the second element.
The first element and the second element are in a cross relationship when there is a partial range of the ordinate range of all the angular coordinates of the first element and the ordinate range of all the angular coordinates of the second element being the same, and there is a partial range of the abscissa range of all the angular coordinates of the first element and the abscissa range of all the angular coordinates of the second element being the same.
The second way of determining the positional relationship: when the coordinates are center coordinates of the elements, a third element and a fourth element are set, the third element and the fourth element being any different two elements among the elements.
Specifically, determining the area of the third element and each coordinate of the third element according to the center coordinate and the length and width of the third element; and determining the area of the fourth element and each coordinate of the fourth element according to the center coordinate and the length and width of the fourth element.
When the area of the third element is smaller than the area of the fourth element and each coordinate of the third element is located in each coordinate of the fourth element, the third element and the fourth element are in an inclusion relationship, and the fourth element includes the third element; when the coordinates of the third element and the coordinates of the fourth element are partially identical in ordinate and different in abscissa, the third element and the fourth element are in a same-row relationship in a parallel relationship; when the coordinates of the third element and the coordinates of the fourth element are different in ordinate and the coordinates of the fourth element are the same in part of abscissa, the third element and the fourth element are in the same column relation in the parallel relation; the third element and the fourth element are in a cross relationship when there is a partial ordinate of the third element and a partial abscissa of the fourth element.
Illustratively, after determining the positional relationship between the elements in each layer, the absolute layout of the elements in the respective layer is determined from the positional relationship between the elements in each layer. Specifically, the absolute layout of the elements in each layer means that the positions of the elements in the layer are unique and absolute, and when the layer is scaled in size, the elements in the layer are also scaled in size. The absolute layout may be formed by a flex layout, or may be formed by other layout methods, which is not limited by the present application.
Step 120: and converting the attribute information of each element and the position information of each element corresponding to each layer into a corresponding page code of the page design drawing according to the absolute layout of each element in the layers.
Illustratively, after the absolute layout of each element in the multiple layers is formed in step 110, attribute information of each element and position information of each element corresponding to the multiple layers may be converted into corresponding page codes of the page design drawing. The page code may be a cascading style sheet (Cascading Style Sheets, CSS) code, a c code, a java code, etc., and the present application is not limited in particular.
Specifically, when converting into the corresponding page code of the page design drawing, the second JSON data can be classified according to the position relation among the elements to obtain the JSON data containing the relation, the JSON data with the parallel relation and the JSON data with the cross relation, so that when the JSON data is converted into the page code later, the three types of JSON data can be processed separately, and the JSON data containing the relation, the JSON data with the parallel relation and the JSON data with the cross relation are respectively converted into the corresponding page code, thereby accelerating the speed of converting the JSON data into the page code, and being more convenient. Wherein classification may be implemented in conjunction with binary tree algorithms, recursive algorithms, function Ke Li algorithms, etc.
Specifically, when converting the attribute information of each element with style information and the position information of each element corresponding to each of the plurality of layers into the corresponding page code of the page design drawing. The attribute information of each element with style information is the length and width of the picture element, the length and width of the non-picture element, the color, the style and other information.
Illustratively, the inclusion, juxtaposition and cross relationships are specifically described.
(1) Containment relationship
In the case of the first positional relationship determination method, as shown in fig. 2 (a) below, the presence of the first element a and the second element B is set, the four angular coordinates of the first element a are (1, 1), (1, 3), (3, 1) and (3, 3), and the four angular coordinates of the second element B are (1, 1), (1, 2), (2, 1) and (2, 2), and at this time, all the angular coordinates of the second element B fall within the range of all the angular coordinates of the first element a, the first element a is said to include the second element B. In addition, the inclusion relationship may also be referred to as a parent-child relationship, where the inclusion is a parent (i.e., first element A) and is included as a child (i.e., second element B).
In the case of the second positional relationship determination method, as shown in fig. 2 (B) below, the first element a and the second element B are set to exist, the first element a having a center coordinate of (4, 4) and a length of 4 and a width of 2; the center coordinates of the second element B are (4, 4), the length of the second element B is 2, and the width is 2. In this case, the area of the first element a is 8, and each coordinate of the first element a includes (2, 3), (3, 3), (4, 3), (5, 3), (6, 3), (2, 4), (3, 4), (4, 4), (5, 4), (6, 4), (2, 5), (3, 5), (4, 5), (5, 5), (6, 5). The area of the second element B is 4, and each coordinate of the second element B includes (3, 3), (4, 3), (5, 3), (3, 4), (4, 4), (5, 4), (3, 5), (4, 5), (5, 5). Therefore, at this time, the area of the second element B is smaller than that of the first element a, and each coordinate of the second element B is located in each coordinate of the first element a, and the first element a includes the second element B.
(2) Parallel relationship
In the case of the same-row relationship in the parallel relationship, in the first positional relationship determination method, as shown in fig. 3 (a) below, the presence of the third element C and the fourth element D is set, the four angular coordinates of the third element C being (4, 1), (4, 3), (6, 1) and (6, 3), and the four angular coordinates of the fourth element D being (7, 1), (7, 3), (8, 1) and (8, 3). At this time, the ordinate ranges of all the angular coordinates of the third element C are 1 to 3, and the ordinate ranges of all the angular coordinates of the fourth element D are also 1 to 3, which are the same. The abscissa range of all the angular coordinates of the third element C is 4 to 6, and the abscissa range of all the angular coordinates of the fourth element D is 7 to 8, which are different. At this time, the third element C and the fourth element D are in a same-row relationship in a parallel relationship.
In the case of the same-row relationship in the parallel relationship, in the second positional relationship determination method, as shown in fig. 3 (b) below, the third element C and the fourth element D are set to exist, the center coordinates of the third element C are (4, 4), the length is 4, the width is 2, the center coordinates of the fourth element D are (8, 4), the length is 2, and the width is 2. At this time, the area of the third element C is 8, and each coordinate of the third element C includes (2, 3), (3, 3), (4, 3), (5, 3), (6, 3), (2, 4), (3, 4), (4, 4), (5, 4), (6, 4), (2, 5), (3, 5), (4, 5), (5, 5), (6, 5). The area of the fourth element D is 4, and each coordinate of the fourth element D includes (7, 3), (8, 3), (9, 3), (7, 4), (8, 4), (9, 4), (7, 5), (8, 5), (9, 5). Therefore, at this time, the coordinates of the third element C and the coordinates of the fourth element D are partially identical in ordinate (i.e., all are 3 to 5) and different in abscissa, and the same-row relationship in the parallel relationship.
For the same column relationship in the parallel relationship, the judgment is opposite to the same row relationship in the parallel relationship, that is, the ordinate of two elements is different and the abscissa of part is the same, and the description is not given here by way of example.
(3) Cross relation
In the first positional relationship determination method, as shown in fig. 4 (a) below, the fifth element E and the sixth element F are set to exist, the fourth angular coordinates of the fifth element E being (9, 1), (9, 3), (12, 1) and (12, 3), and the fourth angular coordinates of the sixth element F being (11, 1), (11, 3), (13, 1) and (13, 3). At this time, the ordinate range of the angular coordinates of the fifth element E is 1 to 3, the ordinate range of the angular coordinates of the sixth element F is also 1 to 3, the abscissa range of the angular coordinates of the fifth element E is 9 to 12, the abscissa range of the angular coordinates of the sixth element F is 11 to 13, the ordinate ranges are the same, and the abscissa ranges are partially the same, and the fifth element E and the sixth element F are in a crossing relationship.
In the second positional relationship determination method, as shown in fig. 4 (b) below, the fifth element E and the sixth element F are set to exist, the center coordinates of the fifth element E are (4, 4), the length is 4, the width is 2, the center coordinates of the sixth element F are (6, 4), the length is 2, and the width is 2. At this time, the area of the third element C is 8, and each coordinate of the third element C includes (2, 3), (3, 3), (4, 3), (5, 3), (6, 3), (2, 4), (3, 4), (4, 4), (5, 4), (6, 4), (2, 5), (3, 5), (4, 5), (5, 5), (6, 5). The area of the fourth element D is 4, and each coordinate of the fourth element D includes (5, 3), (6, 3), (7, 3), (5, 4), (6, 4), (7, 4), (5, 5), (6, 5), (7, 5). The ordinate ranges of both are 3 to 5, and the partial abscissa ranges are the same, so that the fifth element E and the sixth element F are in a crossing relationship.
In addition, as for the inclusion relationship, only one other element may be included in one element as shown in fig. 2 (a) and 2 (b), or a plurality of other elements may be included in one element, and these other elements may be an inclusion relationship, a parallel relationship, or a cross relationship. Similarly, the inclusion relationship, parallel relationship or cross relationship of other elements may be nested in the element corresponding to the parallel relationship or cross relationship.
Illustratively, after the second JSON data is obtained in step 110, the page layout may be further labeled according to the second JSON data, and the specific process is shown in fig. 5 below.
Step 510: for any element, the element is packaged into a plurality of different category components according to attribute information of the element.
Illustratively, the elements are packaged into a plurality of different classes of components according to attribute information of the elements respectively corresponding to the plurality of layers in the second JSON data. Specifically, for a picture element, the picture element may be packaged into a plurality of picture components, where each picture component includes attribute information such as a length and a width of a picture; for the text elements in the non-picture elements, the text elements can be packaged into a plurality of text components, wherein each text component comprises attribute information such as the font, the length and the width, the color and the like of the text; for solid line frame elements in non-picture elements, the solid line frame elements may be packaged into a plurality of solid line frame components, where each solid line frame component includes attribute information of thickness, length, width, color, and the like of the solid line frame. In addition, there are other component categories, and the present application will not be described in detail.
Step 520: and splicing components of different categories according to the position information of each element to obtain skeleton diagrams corresponding to the page design diagrams.
For example, after the element is packaged into a plurality of different types of components according to the attribute information of the element, the position information of the plurality of different types of components may be determined according to the position information of the element corresponding to the plurality of layers, respectively. Specifically, the position information of different components is determined according to the position information of the elements in the second JSON data, for example, the position information of the picture element is the position information of the corresponding component of the picture, and the position information of the text element is the position information of the corresponding component of the text.
For example, after determining the position information of the components in different categories, the components may be spliced according to the position information of the components to obtain the skeleton diagram corresponding to the page design diagram. Specifically, the components in each layer are spliced respectively, and then the overall skeleton diagram corresponding to the page design diagram is obtained by combining the splicing results in each layer, as shown in fig. 6.
The positional information is specifically described by taking angular coordinates as an example. For example, the first component a has angular coordinates of (1, 1), (2, 1), (1, 2), (2, 2), and the second component B has angular coordinates of (2, 1), (2, 2), (3, 1), (3, 2), then the first component a and the second component B may be spliced.
Step 530: matching the skeleton diagram and the page design diagram according to the position information of each element, and displaying the labeling information of each element through the skeleton diagram.
Illustratively, after the skeleton diagram is obtained, the skeleton diagram may be matched with the page design diagram. Specifically, with the page design as a background, the skeleton diagram is overlaid on the page design, both of which are the same size. At this time, since each component in the skeleton diagram includes attribute information, when the component is sensed (for example, a mouse is placed on an element corresponding to the component), the attribute information corresponding to the component is displayed, and at this time, a plurality of attribute information corresponding to the components together form the labeling information of the page design diagram.
The auxiliary marks in the page design drawing can also be annotated by a skeleton icon, for example. And acquiring an auxiliary mark arranged between the first component and the second component by determining the first component which is selected as a reference and the second component which is selected as a target in the skeleton diagram, and displaying the auxiliary mark. The auxiliary mark may be an auxiliary line or other marks, and the application is not limited thereto.
Specifically, as shown in fig. 7 below, the first component serving as a reference is set as a component a, the second component serving as a target is set as a component B, and when the component a is selected by using the mouse, the mouse is placed on the component B again, and at this time, the auxiliary lines of the component a and the component B are automatically marked. Fig. 7 is an example of labeling auxiliary lines, and various labeling manners of auxiliary lines, which are not limited by the present application.
By adopting the method, the position relation of the elements in each layer is determined according to the position information of the elements in each layer, and then the element layout of the elements in each layer is determined according to the position relation of the elements, so that when the attribute information and the position information of the elements are converted into the corresponding page codes of the page design drawing, the absolute position of each element in each layer is determined, and the accuracy of the position information of the page design drawing elements in the converted page codes is improved. In addition, the attribute information and the position information of each element of a plurality of layers in the page design drawing are extracted, so that the page code can be automatically converted, manual operation is not needed, and the efficiency of converting the page code is improved. In addition, the skeleton diagram of the page design diagram can be generated according to the position relation of the elements by the method, so that automatic labeling of the page design diagram is realized, after the picture elements in the elements are acquired, the picture elements are stored and uploaded to a server, and automatic diagram cutting of the page design diagram is realized.
The division of the units in the embodiments of the present invention is schematically shown, which is merely a logic function division, and may have another division manner when actually implemented, and in addition, each functional unit in each embodiment of the present invention may be integrated in one processor, or may exist separately and physically, or two or more units may be integrated in one unit. The integrated units may be implemented in hardware or in software functional units.
The embodiment of the present invention further provides a communication device 800, as shown in fig. 8, where the communication device 800 includes: a processing module 810 and a transceiver module 820.
The transceiver module 820 may include a receiving module and a transmitting module. The processing module 810 is configured to control and manage the actions of the communication device 800. The transceiver module 820 is used to support communication of the communication device 800 with other devices. Optionally, the communication device 800 may further comprise a storage module for storing program code and data of the communication device 800.
Alternatively, each module in the communication device 800 may be implemented by software.
In the alternative, the processing module 810 may be a processor or a controller, and the transceiver module 820 may be a communication interface, a transceiver circuit, or the like, where the communication interface is generally called, and in a specific implementation, the communication interface may include multiple interfaces, and the storage module may be a memory.
In one possible implementation, the communication apparatus 800 is adapted for a radio access controller device or a radio access point device;
a transceiver module 820, configured to extract element information in multiple layers of the page design drawing, where the element information includes attribute information and location information;
A processing module 810, configured to determine, for each layer, a positional relationship between elements in the layer according to positional information of the elements in the layer; determining the absolute layout of each element in the layer according to the position relation among the elements in the layer; the positional relationship includes a containment relationship between elements, a parallel relationship between elements, and a cross relationship between elements; and converting attribute information of each element and position information of each element corresponding to each layer into a corresponding page code of the page design drawing according to the absolute layout of each element in the layers.
The embodiment of the present invention further provides another communication apparatus 900, where the communication apparatus 900 may be a terminal device or a chip system inside the terminal device, as shown in fig. 9, including:
a communication interface 901, a memory 902, and a processor 903;
wherein the communication device 900 communicates with other apparatuses, such as sending and receiving messages, through the communication interface 901; a memory 902 for storing program instructions; the processor 903 is configured to call the program instructions stored in the memory 902, and execute the method according to the obtained program.
The processor 903 calls for the communication interface 901 and the program instructions stored in the memory 902 to execute:
extracting element information in a plurality of layers of a page design drawing, wherein the element information comprises attribute information and position information;
for each layer, determining the position relation among the elements in the layer according to the position information of the elements in the layer; determining the absolute layout of each element in the layer according to the position relation among the elements in the layer; the positional relationship includes a containment relationship between elements, a parallel relationship between elements, and a cross relationship between elements;
and converting attribute information of each element and position information of each element corresponding to each layer into a corresponding page code of the page design drawing according to the absolute layout of each element in the layers.
The specific connection medium between the communication interface 901, the memory 902, and the processor 903 is not limited to the above embodiments of the present invention, and may be, for example, a bus, which may be classified into an address bus, a data bus, a control bus, and the like.
In the embodiment of the present invention, the processor may be a general purpose processor, a digital signal processor, an application specific integrated circuit, a field programmable gate array or other programmable logic device, a discrete gate or transistor logic device, or a discrete hardware component, and may implement or execute the methods, steps and logic blocks disclosed in the embodiments of the present invention. The general purpose processor may be a microprocessor or any conventional processor or the like. The steps of a method disclosed in connection with the embodiments of the present invention may be embodied directly in a hardware processor for execution, or in a combination of hardware and software modules in the processor for execution.
In the embodiment of the present invention, the memory may be a nonvolatile memory, such as a hard disk (HDD) or a Solid State Drive (SSD), or may be a volatile memory (RAM). The memory may also be any other medium that can be used to carry or store desired program code in the form of instructions or data structures and that can be accessed by a computer, but is not limited to such. The memory in embodiments of the present invention may also be circuitry or any other device capable of performing memory functions for storing program instructions and/or data.
The embodiment of the present invention also provides a computer readable storage medium including program code for causing a computer to execute the steps of the method provided in the embodiment of the present invention.
It will be appreciated by those skilled in the art that embodiments of the present invention may be provided as a method, system, or computer program product. Accordingly, the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present invention may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
The present invention is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems) and computer program products according to embodiments of the invention. It will be understood that each flow and/or block of the flowchart illustrations and/or block diagrams, and combinations of flows and/or blocks in the flowchart illustrations and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
While preferred embodiments of the present invention have been described, additional variations and modifications in those embodiments may occur to those skilled in the art once they learn of the basic inventive concepts. It is therefore intended that the following claims be interpreted as including the preferred embodiments and all such alterations and modifications as fall within the scope of the invention.
It will be apparent to those skilled in the art that various modifications and variations can be made to the present invention without departing from the scope of the invention. Thus, it is intended that the present invention also include such modifications and alterations insofar as they come within the scope of the appended claims or the equivalents thereof.
Claims (10)
1. A method for converting page design drawings into page codes, the method comprising:
Extracting element information in a plurality of layers of a page design drawing, wherein the element information comprises attribute information and position information;
for each layer, determining the position relation among the elements in the layer according to the position information of the elements in the layer; determining the absolute layout of each element in the layer according to the position relation among the elements in the layer; the positional relationship includes a containment relationship between elements, a parallel relationship between elements, and a cross relationship between elements;
and converting attribute information of each element and position information of each element corresponding to each layer into a corresponding page code of the page design drawing according to the absolute layout of each element in the layers.
2. The method of claim 1, further comprising, prior to determining the positional relationship between elements in the layer based on the positional information of the elements in the layer:
converting the page design diagram into a first lightweight data exchange format JSON data;
deleting useless information in the first JSON data to obtain second JSON data; the garbage is used for representing information causing the confusion of the page codes converted by the page design diagram;
And determining element information corresponding to each of the plurality of layers according to the second JSON data.
3. The method of claim 2, wherein converting the attribute information of each element and the position information of each element corresponding to each of the plurality of layers into the corresponding page code of the page design drawing comprises:
classifying the second JSON data according to the position relation among the elements to respectively obtain JSON data containing relation, JSON data in parallel relation and JSON data in cross relation;
and respectively converting the JSON data containing the relation, the JSON data of the parallel relation and the JSON data of the cross relation into corresponding page codes.
4. The method of claim 1, wherein determining the positional relationship between elements in the layer based on the positional information of the elements in the layer comprises:
when the position information is a plurality of angular coordinates of an element, when all angular coordinates of a first element fall within a range of all angular coordinates of a second element, an inclusion relationship is between the first element and the second element;
when there is a partial range of the ordinate ranges of all the angular coordinates of the first element and the ordinate ranges of all the angular coordinates of the second element, and the abscissa ranges of all the angular coordinates of the first element and the abscissa ranges of all the angular coordinates of the second element are not the same, the first element and the second element are in a same-row relationship in a parallel relationship;
When the ordinate ranges of all the angular coordinates of the first element and the ordinate ranges of all the angular coordinates of the second element do not exist in the same range, and the abscissa ranges of all the angular coordinates of the first element and the abscissa ranges of all the angular coordinates of the second element exist in the same partial range, the first element and the second element are in the same column relationship in the parallel relationship;
a cross relationship between the first element and the second element when there is a partial range of all angular coordinates of the first element and a partial range of all angular coordinates of the second element and a partial range of all angular coordinates of the first element and a partial range of all angular coordinates of the second element;
the first element and the second element are any different two elements of the elements.
5. The method of claim 1, wherein determining the positional relationship between elements in the layer based on the positional information of the elements in the layer comprises:
when the position information is the center coordinates of the elements, determining the area of the third element and each coordinate of the third element according to the center coordinates and the length and width of the third element; determining the area of the fourth element and each coordinate of the fourth element according to the center coordinate and the length and width of the fourth element;
When the area of the third element is smaller than the area of the fourth element, and each coordinate of the third element is located in each coordinate of the fourth element, an inclusion relationship is between the third element and the fourth element;
when the coordinates of the third element and the coordinates of the fourth element are partially identical in ordinate and different in abscissa, the third element and the fourth element are in a same-row relationship in the parallel relationship;
when the coordinates of the third element and the coordinates of the fourth element are different in ordinate and the coordinates of the fourth element are the same in part of abscissa, the third element and the fourth element are in the same column relation in the parallel relation;
the third element and the fourth element are in the crossing relationship when the coordinates of the third element are the same as the coordinates of the fourth element in part of the ordinate and the coordinates of the fourth element are the same in part of the abscissa;
the third element and the fourth element are any different two elements of the elements.
6. The method of claim 1, wherein after extracting element information in the plurality of layers of the page layout, further comprising:
for any element, determining that the element is a picture according to element information of the element, and extracting and storing the picture;
Converting attribute information of each element and position information of each element corresponding to each of the multiple layers into corresponding page codes of the page design drawing, wherein the conversion comprises the following steps:
and converting the attribute information of each element with style information and the position information of each element corresponding to the layers into page codes corresponding to the page design drawing.
7. The method of any one of claims 1-6, further comprising:
for any element, encapsulating the element into a plurality of different category components according to attribute information of the element;
splicing components of different categories according to the position information of each element to obtain a skeleton diagram corresponding to the page design diagram;
matching the skeleton diagram with the page design diagram according to the position information of each element, and displaying the labeling information of each element through the skeleton diagram; the labeling information is composed of attribute information of elements corresponding to the layers respectively.
8. The method as recited in claim 7, further comprising:
determining a first component selected as a reference and a second component selected as a target in the skeleton diagram;
and acquiring an auxiliary mark arranged between the first component and the second component, and displaying the auxiliary mark.
9. An apparatus for page layout to page code, comprising a processor and interface circuitry for receiving signals from other devices than the apparatus and transmitting signals from the processor to the processor or sending signals from the processor to other devices than the apparatus, the processor being configured to implement the method of any one of claims 1 to 7 by logic circuitry or executing code instructions.
10. A computer readable storage medium storing computer instructions which, when run on a computer, cause the computer to perform the method of any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310994069.XA CN117149188A (en) | 2023-08-08 | 2023-08-08 | Page design diagram page code conversion method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310994069.XA CN117149188A (en) | 2023-08-08 | 2023-08-08 | Page design diagram page code conversion method and device |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN117149188A true CN117149188A (en) | 2023-12-01 |
Family
ID=88899670
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310994069.XA Pending CN117149188A (en) | 2023-08-08 | 2023-08-08 | Page design diagram page code conversion method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117149188A (en) |
-
2023
- 2023-08-08 CN CN202310994069.XA patent/CN117149188A/en active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10579344B2 (en) | Converting visual diagrams into code | |
| CN107644286B (en) | Workflow processing method and device | |
| CN105631393A (en) | Information recognition method and device | |
| CN109739855B (en) | Method and system for realizing data sheet splicing and automatically training machine learning model | |
| CN107451112B (en) | Form tool data checking method, device, terminal equipment and storage medium | |
| CN112181854B (en) | Method, device, equipment and storage medium for generating process automation script | |
| CN110688145A (en) | Android MVP code automatic generation method, device, medium and electronic equipment | |
| CN112668290A (en) | Dynamic form generation method and system based on gridding design | |
| CN112417899A (en) | Character translation method, device, computer equipment and storage medium | |
| US20190087160A1 (en) | System and method for creating domain specific language | |
| CN104375814A (en) | Generation method and device of an interface document | |
| CN109189688B (en) | Test case script generation method and device and electronic equipment | |
| CN117149188A (en) | Page design diagram page code conversion method and device | |
| US11074418B2 (en) | Information processing apparatus and non-transitory computer readable medium | |
| CN102799597A (en) | Content extraction method | |
| CN113704650A (en) | Information display method, device, system, equipment and storage medium | |
| CN113220596B (en) | Application testing method, device, equipment, storage medium and program product | |
| CN113268193B (en) | Notebook page moving method, electronic equipment and computer storage medium | |
| CN116257444A (en) | Method, device and equipment for generating test cases | |
| CN111859871A (en) | Data processing method, device, equipment and computer readable storage medium | |
| EP2711847A2 (en) | Page data generation apparatus, recording medium and page data generation method | |
| CN114998911A (en) | Data entry method and device and electronic equipment | |
| CN115964051A (en) | Multilingual entry detection method and device, computer equipment and storage medium | |
| CN115062584A (en) | Document style generation method and device and electronic equipment | |
| CN117950626A (en) | Page generation method, page display method, device, equipment and storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |