CN115731313A - SVG format picture processing method, device, equipment, medium and product - Google Patents
SVG format picture processing method, device, equipment, medium and product Download PDFInfo
- Publication number
- CN115731313A CN115731313A CN202211427910.9A CN202211427910A CN115731313A CN 115731313 A CN115731313 A CN 115731313A CN 202211427910 A CN202211427910 A CN 202211427910A CN 115731313 A CN115731313 A CN 115731313A
- Authority
- CN
- China
- Prior art keywords
- information
- picture
- data
- elements
- grouping
- 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
Images
Landscapes
- Processing Or Creating Images (AREA)
Abstract
The disclosed embodiment relates to a processing method, a device, equipment, a medium and a product of pictures in SVG format. By extracting the drawing data of the elements in the UI picture from the XML information of the UI picture and removing other redundant data irrelevant to the drawing data in the XML information, the data volume can be reduced, and the maintenance cost of the UI picture and the requirement on user flow can be reduced under the condition that the drawing of the UI picture is not influenced. By utilizing the drawing data of the elements in the UI picture to generate the picture data in the binary information format, the problem of low reading and writing efficiency in the SVG format can be solved, and the reading and writing efficiency of the UI picture is improved.
Description
Technical Field
The embodiment of the disclosure relates to the technical field of picture processing, in particular to a method, a device, equipment, a medium and a product for processing pictures in an SVG format.
Background
At present, the shapes, sizes and resolution ratios of multimedia screens in vehicles are different and various. In order to adapt to different screens, a software package of a vehicle-mounted application program such as vehicle-mounted navigation generally carries a plurality of sets of User Interface (UI) resources with different sizes, which results in an increase in the volume of the software package, an increase in maintenance cost, and a higher requirement for User traffic. However, even in this case, the multiple sets of UI resources carried by the software package still cannot be adapted to the multimedia screens of all vehicles, and at this time, the UI pictures in the software package generally need to be stretched or shrunk to adapt the screens, but the stretching or shrinking operation may cause distortion of the pictures and reduce the adaptation effect. Therefore, how to satisfy any stretching without fuzzy deformation and without increasing the size of the software package and the performance burden is a technical problem to be solved.
Disclosure of Invention
In order to solve the above technical problem, the embodiments of the present disclosure provide a method, an apparatus, a device, a medium, and a product for processing a picture in SVG format.
A first aspect of the embodiments of the present disclosure provides a method for processing a picture in an SVG format, where the method includes: acquiring a UI (user interface) picture in a Scalable Vector Graphics (SVG) format; extracting drawing data of elements in the UI picture from EXtensible Markup Language (XML) information of the UI picture, and removing other data in the XML information; and generating picture data in a binary information format corresponding to the UI picture based on the drawing data of the elements in the UI picture.
A second aspect of the embodiments of the present disclosure provides a device for processing a picture in SVG format, the device including:
the acquisition module is used for acquiring the UI pictures in the SVG format;
the extraction module is used for extracting drawing data of elements in the UI picture from the XML information of the UI picture and removing other data in the XML information;
and the generating module is used for generating picture data in a binary information format corresponding to the UI picture based on the drawing data of the elements in the UI picture.
A third aspect of embodiments of the present disclosure provides a computer device comprising a memory and a processor, wherein the memory stores a computer program, and when the computer program is executed by the processor, the processor may perform the method of the first aspect.
A fourth aspect of embodiments of the present disclosure provides a computer program product, stored on a storage medium, which, when executed, may implement the method of the first aspect described above.
A fifth aspect of the embodiments of the present disclosure provides a computer-readable storage medium, which stores a computer program that, when executed, can implement the method of the first aspect.
Compared with the prior art, the technical scheme provided by the embodiment of the disclosure has the following advantages:
according to the embodiment of the disclosure, the UI picture in the SVG format is adopted, and the good stretching and zooming performance in the SVG format is utilized, so that the display effect of the stretched or zoomed UI picture is improved, and the display definition of the UI picture is improved. By utilizing the XML information of the UI picture in the SVG format, drawing data of elements in the UI picture is extracted from the XML information, and other redundant data irrelevant to the drawing data in the XML information are removed, so that the data volume can be reduced, the maintenance cost of the UI picture can be reduced, and the requirement on the user flow can be met under the condition that the drawing of the UI picture is not influenced. By utilizing the drawing data of the elements in the UI picture to generate the picture data in the binary information format, the advantage of high reading and writing speed of the binary information format can be utilized, the problem of low reading and writing efficiency of the SVG format (the SVG is a text format) is solved, and the reading and writing efficiency of the UI picture is improved.
Drawings
The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present disclosure and together with the description, serve to explain the principles of the disclosure.
In order to more clearly illustrate the embodiments or technical solutions in the prior art of the present disclosure, the drawings used in the embodiments or technical solutions in the prior art description will be briefly described below, and it is obvious for those skilled in the art that other drawings can be obtained according to these drawings without inventive labor.
Fig. 1 is a schematic diagram of a UI picture processing scenario provided by an embodiment of the present disclosure;
fig. 2 is a schematic flowchart of a processing method of a picture in SVG format according to an embodiment of the present disclosure;
fig. 3 is a schematic flowchart of a drawing data extraction method according to an embodiment of the present disclosure;
FIG. 4 is a schematic diagram of a flattening process provided by an embodiment of the present disclosure;
FIG. 5 is a diagram of picture data in a binary information format;
FIG. 6 is an exemplary diagram of the path information of FIG. 5;
fig. 7 is an exemplary diagram of style information in fig. 5;
fig. 8 is a flowchart of a method for generating picture data in a binary information format according to an embodiment of the present disclosure;
fig. 9 is a schematic diagram of picture data in binary information format according to an embodiment of the disclosure;
fig. 10 is a schematic diagram of a processing scene of a picture in SVG format provided by an embodiment of the present disclosure;
fig. 11 is a schematic structural diagram of a device for processing a picture in SVG format according to an embodiment of the present disclosure;
fig. 12 is a schematic structural diagram of a computer device in an embodiment of the present disclosure.
Detailed Description
In order that the above objects, features and advantages of the present disclosure may be more clearly understood, aspects of the present disclosure will be further described below. It should be noted that the embodiments and features of the embodiments of the present disclosure may be combined with each other without conflict.
In the following description, numerous specific details are set forth in order to provide a thorough understanding of the present disclosure, but the present disclosure may be practiced in other ways than those described herein; it is to be understood that the embodiments disclosed in the specification are only a few embodiments of the present disclosure, and not all embodiments.
As described in the background, the related art often needs to stretch or shrink the UI picture to fit the size of the screen. However, the stretching or shrinking process may cause problems of deformation and blurring of the UI picture, and may affect the display effect. In order to solve the problems, the pictures expressed in a vector mode, namely the pictures in the SVG format, can solve the problems of deformation and blurring caused by picture stretching or picture shrinking. On one hand, however, the essence of the SVG format is a text format, and the reading and writing efficiency is low; on the other hand, a large amount of redundant data exists in the data in the SVG format, which causes a large picture volume and low read-write efficiency, especially a large number of UI pictures often exist in some application programs, and the large volume of a single picture causes the large volume of the whole software package of the application program, and has high requirements on installation space and user traffic.
In view of the above problems in the related art, the embodiments of the present disclosure provide a processing method for a picture in SVG format. By way of example, fig. 1 is a schematic diagram of a UI picture processing scenario provided by an embodiment of the present disclosure. Referring to fig. 1, in the method provided by the embodiment of the present disclosure, a UI picture in SVG format is used to solve the problem of blurring and distortion occurring during the process of stretching or shrinking the UI picture. Meanwhile, after the UI picture in the SVG format is acquired, drawing data of elements contained in the UI picture is acquired by using XML information in the SVG format, and other data irrelevant to the drawing data, namely redundant data, in the XML information is removed. By removing redundant data in the UI picture and reserving drawing data, the data volume of the UI picture is reduced, the data volume is reduced, and the reading and writing performance is improved under the condition that the drawing of the UI picture is not influenced. After the drawing data of the elements in the UI picture is obtained, the drawing data of the elements in the UI picture is utilized to generate picture data in a binary information format, and the problem of low reading and writing efficiency in the SVG format is solved with high reading and writing performance in the binary information format.
In order to better understand the technical solutions of the embodiments of the present disclosure, the following describes the technical solutions of the embodiments of the present disclosure with reference to exemplary embodiments.
Fig. 2 is a schematic flowchart of a processing method of a picture in SVG format according to an embodiment of the present disclosure. The method may be performed by a computer device, which may be understood as any device having computing and processing capabilities, such as a desktop computer, a laptop computer, a server, a distributed computing node, and the like. As shown in fig. 2, the method includes:
The UI picture in the embodiment of the present disclosure may be understood as a UI picture of any application. The application program may be run on any device with display and interaction functions (such as a car machine, a mobile phone, and the like, but not limited to a car machine and a mobile phone). For convenience of understanding, in the embodiments of the present disclosure, the application program may be exemplarily understood as a car machine version navigation application program.
In the disclosed embodiment, multiple sets of UI resources for matching different size screens may be included in the software package of the application. Each set of UI resources may include multiple UI pictures. When a plurality of sets of UI resources included in the software package are not adaptive to the screen size, the screen size can be adapted in a mode of stretching or shrinking the UI pictures.
In some embodiments, the UI pictures referred to in the embodiments of the present disclosure may be stored in a preset data source. The data source may be, for example, a server of an application program, a database for storing UI resources, or any other device having data storage and data interaction capabilities. The data source in the embodiments of the present disclosure may be integrated in the computer device for executing the method in the embodiments of the present disclosure, or may be independent from the computer device. The computer equipment can acquire the UI picture from the data source through a preset protocol and a data interaction mode.
In the related art, SVG is a language for describing two-dimensional graphics and drawing programs using XML. The XML information of the UI picture in the SVG format includes grouping information (i.e., group information) of elements in the UI picture, path information (i.e., path information), multiplexing information (i.e., defs information), morphing information of rendering data of the elements, and other information unrelated to element rendering.
Wherein, the element in the UI picture can be understood as the graphic contained in the UI picture. The grouping information of the elements is used for describing which elements belong to a group, and the grouping information of the elements includes style information used for describing the style of the elements included in the group, such as filling color, edge drawing and the like. The path information of the element is used to describe the geometric characteristics or the drawing method of the element. The multiplexing information may include path information and/or style information multiplexed by a plurality of elements. The deformation information of the element is information for describing deformation, such as expansion, movement, rotation, and the like, of rendering data of a certain element in the UI graphic to obtain rendering data of other elements in the UI picture. For example, if the XML information of the UI picture includes deformation information for a certain element (hereinafter referred to as a first element) in the UI picture, the drawing data of the first element may be deformed based on the deformation information, so as to obtain the drawing data of a second element in the UI picture.
In the disclosed embodiment, the rendering data of the element may include path information and style information of the element.
For the drawing data of the elements obtained by non-deformation, in the embodiment of the present disclosure, the grouping information, the path information, and the multiplexing information of the elements included in the UI picture may be obtained from the dom tree of the XML information based on the XML information of the UI picture. Then, the path information and the style information of the elements included in the UI picture are extracted and obtained from the grouping information, the path information, and the multiplexing information of the elements, thereby obtaining drawing data of the elements.
In order to better understand the extraction method of the drawing data, an example is explained below.
For example, fig. 3 is a schematic flowchart of a drawing data extraction method provided in an embodiment of the present disclosure, and as shown in fig. 3, the method includes steps 301 to 303:
In practice, the XML information of the UI picture includes a dom tree structure, and the group information, the path information, and the multiplexing information of the elements in the UI picture are recorded in the dom tree structure. By traversing the dom tree structure of the UI picture in the SVG format, grouping information, path information and multiplexing information of elements contained in the UI picture can be obtained.
In the UI picture, the path information of the element can be roughly divided into two types, where one type of path information describes the geometric features of the element, for example, when describing a circular element, the path information may include coordinate information of the center of the circular element and length information of the radius. Another type of path information describes a drawing method of an element, and taking a rectangular element as an example, the path information describing the drawing method of the rectangular element may include a coordinate of one vertex of the rectangle and a method of drawing each edge in order with the vertex as a starting point. In this case, in order to increase consistency of data description and facilitate subsequent data processing, in some embodiments, after obtaining grouping information, path information, and multiplexing information of elements in the UI picture, the obtained path information may also be uniformly converted into target path information for describing a drawing method of the elements. When the path information is converted, the preset conversion tool can be used to convert the path information describing the geometric characteristics of the elements into the target path information describing the element drawing method.
For example, in some embodiments, the grouping information, the path information, and the multiplexing information of the elements included in the UI picture may be combined into an array according to a preset rule, so as to generate the target data, for example, but not limited to, an array of a domain-specific modeling language (DSL) structure. For example, in some embodiments, the first N columns of the array may be used to store grouping information for elements in the UI picture; the (N + 1) th column to the (M) th column can be used for storing path information of elements in the UI picture; the M-th to M + i columns may be used to store multiplexing information of elements in the UI picture, where the size of N, the size of M, and the size of M + i may be determined according to the number of various types of information, or may be preset, and redundant columns may be filled with O. Of course, this is merely an example and not the only limitation on the target data generation method.
And 303, flattening the target array to generate a flattened target array, and taking the flattened target array as drawing data.
In the embodiment of the present disclosure, when the target array is subjected to the flattening processing, only the partial content in the target data may be subjected to the flattening processing, for example, only any two kinds of data among the grouping information, the path information, and the multiplexing information are subjected to the flattening processing; or the information in the whole target array can be flattened. For example, fig. 4 is a schematic diagram of a flattening processing method provided in an embodiment of the present disclosure, and as shown in fig. 4, the method may include the following steps 401 to 403:
The associating of the style information included in the grouping information to the path information of the element may be understood as splicing the style information to the path information of the element, such as to the head or the tail of the path element.
In some embodiments, when performing an operation of associating grouping information to path information of an element, the style information of the path information itself needs to be prioritized. Specifically, when flattening the target data, the position of the path information of the elements included in the group may be generally searched from the target array according to the group information. Then, respectively checking whether each piece of found path information is associated with the style information, for example, whether the head or the tail of the path information or other preset fields carry the style information, if so, determining that the path information is associated with the style information, that is, the path information itself has the style information, and in this case, not associating the style information in the packet information with the path information. And if the path information is not associated with the pattern information, namely the path information does not have the pattern information, associating the pattern information in the grouping information with the path information.
Or, in some embodiments, the style information may further carry priority information, and when the path information is associated with the style information, the associated style information is compared with the style information in the packet information in priority, and if the style information in the packet information has higher priority, the style information in the path information is replaced with the style information in the packet information, otherwise, the style information in the path information is kept unchanged. Of course, the pattern information in the general packet information has a lower priority than the pattern information of the path information itself.
Similar to the grouping information, associating the multiplexing information to the path information of the element in the embodiment of the present disclosure may be understood as splicing the multiplexing information to a head or a tail of the path information of the element using the multiplexing information. The information of the element using the multiplexing information may be carried in the multiplexing information, or may be obtained from XML information of the UI picture.
It should be noted that the multiplexing information referred to in the embodiments of the present disclosure may include pattern information and/or path information. When the path information is included in the multiplexing information, the path information of the element multiplexing the path information in the target array is null. At this time, associating the path information in the multiplexing information to the path information of the element may be understood as adding the path information in the multiplexing information to a position in the target data for recording the path information of the element.
And step 403, removing the grouping information and the multiplexing information contained in the target array to obtain the flattened target array.
It should be noted that fig. 4 is only an exemplary flattening processing method, and in other embodiments, flattening processing may be performed on any two kinds of information in the target data, and a specific processing procedure may refer to the method in fig. 4, which is not described herein again.
Through flattening processing on information in the target data, readability of the data can be improved, extraction efficiency of the drawn data is improved, and reduction of data volume of the UI pictures and unification management of the data are facilitated.
In addition, in some embodiments, in order to further reduce the data amount of the UI picture, after the flattened target array is obtained, the path information of the unassociated style and/or the associated style that is not transparent in the target array may be deleted. The path information of the unassociated style and the transparent style is generally not drawn, the drawing is not influenced by deleting the path information of the unassociated style and the transparent style, the data volume of the UI picture can be reduced, and the data reading and writing efficiency is improved.
And step 203, generating picture data in a binary information format corresponding to the UI picture based on the drawing data of the elements in the UI picture.
Illustratively, fig. 5 is a schematic diagram of picture data in a binary information format, fig. 6 is an exemplary schematic diagram of path information in fig. 5, and fig. 7 is an exemplary schematic diagram of style information in fig. 5. As shown in fig. 5, in some embodiments, after the processing of steps 201 to 202, path information (with style information concatenated) of all elements contained in the target array may be concatenated, and then header information (such as, but not limited to, an identifier of a picture) may be added to generate picture data in a binary information format. As shown in fig. 6, a field Type for recording a path identification, a field MOVE _ TO for recording a drawing start point, a field x for drawing a horizontal line length, and a field y for drawing a vertical line length may be included in the path information. As shown in fig. 7, the style information may include a field Type of the identification of the path corresponding to the style, a field for recording presence or absence of a fill color, a field for recording a color value of the fill color, a field for recording presence or absence of a stroke, a field for recording a color value of a stroke, and a field for recording a stroke width.
Of course, fig. 5, 6 and 7 are merely illustrative and not restrictive.
According to the embodiment of the disclosure, the UI picture in the SVG format is adopted, and the good stretching and zooming performance in the SVG format is utilized, so that the display effect of the stretched or zoomed UI picture is improved, and the display definition of the UI picture is improved. By utilizing the XML information of the UI picture in the SVG format, drawing data of elements in the UI picture is extracted from the XML information, and other redundant data irrelevant to the drawing data in the XML information are removed, so that the data volume can be reduced, the maintenance cost of the UI picture can be reduced, and the requirement on the user flow can be met under the condition that the drawing of the UI picture is not influenced. By utilizing the drawing data of the elements in the UI picture to generate the picture data in the binary information format, the advantage of high reading and writing speed of the binary information format can be utilized, the problem of low reading and writing efficiency of the SVG format (the SVG is a text format) is solved, and the reading and writing efficiency of the UI picture is improved.
For example, in some embodiments, in order to improve manageability and information richness of the picture data, preset extension information may be further added to the picture data, for example, fig. 8 is a flowchart of a method for generating picture data in a binary information format according to an embodiment of the present disclosure, and as shown in fig. 8, on the basis of the foregoing embodiment, the method for generating picture data in a binary information format may include the following steps:
The interaction state of the UI picture can comprise at least one of an original state, a click state, a selected state and a forbidden state. Here, the original state may be understood as a state in which the UI picture is not subjected to any operation. The click state may understand a state or a style when the UI picture is clicked. The selected state may be understood as a state or a style when the UI picture is selected. The disabled state may be understood as a state or a pattern when the UI picture is disabled.
The day and night state includes a day state and a night state, wherein the UI picture of the day state may be understood as a UI picture used in the day and the UI picture of the night state may be understood as a UI picture used in the night.
The point nine information may be understood as information of four sides of the UI picture, such as coordinates, length, thickness, and the like.
In the embodiment of the present disclosure, the interaction state and the day-night state of the UI picture may be obtained from XML information of the UI picture, or the interaction state and/or the day-night state input by the user may also be obtained from a preset interaction interface. In the embodiment of the disclosure, the point nine information of the UI picture can be directly extracted from the UI picture.
And step 802, generating picture data in a binary information format corresponding to the UI picture based on the drawing data and the target information of the elements in the UI picture.
For example, fig. 9 is a schematic diagram of picture data in a binary information format provided by an embodiment of the present disclosure, and as shown in fig. 9, in an implementation manner of an embodiment of the present disclosure, at least one target information of interaction state, day-night state, and night-nine information corresponding to a UI picture may be added to the picture data in the binary information format, where the target information is exemplarily spliced behind drawing data of all elements in the UI picture in fig. 9. But in other embodiments may be added in other locations, such as in front of the rendering data for all elements, etc. And is not particularly limited herein.
According to the embodiment of the disclosure, at least one target information of the interaction state, the day and night state and the nine-point information corresponding to the UI picture is added into the picture data in the binary information format corresponding to the UI picture, so that the richness of the binary information format data can be improved, the picture data can be conveniently classified and managed according to the interaction state, the day and night state and other information, and the manageability of the picture data is improved. The efficiency of stretching or reducing the picture can be improved through the point nine information, and the display effect of the stretched or reduced picture is ensured.
Fig. 10 is a schematic diagram of a processing scene of a picture in SVG format according to an embodiment of the present disclosure. Referring to fig. 10, after the UI picture in the SVG format is acquired, first, the XML information of the picture in the SVG format is parsed to obtain grouping information, multiplexing information, and path information of elements in the UI picture. And then flattening the analyzed information, associating style information in the grouping information with path information of elements contained in the grouping, associating multiplexing information with the path information of the elements using the multiplexing information, removing the grouping information, the multiplexing information and unassociated style information or the path information of which the style is a transparent style, obtaining drawing data of partial elements in the UI picture at the moment, obtaining the drawing data of the rest elements in the UI picture based on the drawing data deformation of other elements, obtaining deformation information from XML information of the UI picture at the moment, and then carrying out deformation processing on the obtained drawing data of the elements based on the deformation information to obtain the drawing data of the rest elements. And finally, after the drawing data of all the elements in the UI picture are obtained, generating picture data in a binary information format based on the drawing data of all the elements in the UI picture and the point nine information of the UI picture.
The specific implementation manner and beneficial effects of fig. 10 can be seen in the foregoing embodiments, and are not described herein again.
Fig. 11 is a schematic structural diagram of a processing apparatus for a picture in SVG format according to an embodiment of the present disclosure, where the processing apparatus can be understood as a computer device or a part of functional modules in a computer device in the above embodiments. Referring to fig. 11, a processing device 1100 includes:
an obtaining module 1101, configured to obtain a UI picture in SVG format;
an extracting module 1102, configured to extract drawing data of an element in the UI picture from the XML information of the UI picture, and remove other data in the XML information;
a generating module 1103, configured to generate, based on the drawing data of the element in the UI picture, picture data in a binary information format corresponding to the UI picture.
In one embodiment, the extraction module 1102 includes:
the obtaining submodule is used for obtaining grouping information, path information and multiplexing information of elements contained in the UI picture from a dom tree of the XML information based on the XML information of the UI picture;
the generating submodule is used for generating a target array in a combined mode based on grouping information, path information and multiplexing information of elements contained in the UI picture;
and the processing submodule is used for flattening the target array, generating a flattened target array and taking the flattened target array as drawing data.
In one embodiment, the processing device 1100 may further include:
and the conversion module is used for converting the acquired path information of the elements into target path information containing the drawing method.
In one embodiment, a processing submodule is configured to:
for the grouping information contained in the target array, associating the style information contained in the grouping information to the path information of the elements contained in the grouping;
for multiplexing information contained in the target array, associating the multiplexing information to path information of elements using the multiplexing information in the target array;
and removing the grouping information and the multiplexing information contained in the target array to obtain the flattened target array.
In one embodiment, a processing submodule is configured to:
according to grouping information, searching path information of elements included in the grouping from the target array;
in response to the found path information not being associated with the style information, associating the style information in the grouping information to the path information;
and in response to the found path information being associated with the style information, not associating the style information in the grouping information to the path information.
In one embodiment, the processing device 1100 may further include:
and the removing module is used for removing the path information of the unassociated style information and/or the associated style information in the target array, wherein the unassociated style information and/or the associated style information are transparent styles.
In one embodiment, the processing device 1100 may further include:
and the deformation module is used for responding to deformation information aiming at a first element in the UI picture included in the XML information, and performing deformation processing on the drawing data of the first element based on the deformation information to obtain the drawing data of a second element included in the UI picture.
In one embodiment, the generating module 1103 is configured to:
acquiring target information of the UI picture, wherein the target information comprises at least one of an interaction state, a day-night state and nine-point information corresponding to the UI picture, and the nine-point information comprises the length, the coordinate and the thickness of a side of the UI picture;
and generating picture data in a binary information format corresponding to the UI picture based on the drawing data of the elements in the UI picture and the target information.
The processing apparatus provided in the embodiment of the present disclosure is capable of executing the method of any one of the method embodiments, and the execution manner and the beneficial effects are similar, which are not described herein again.
The embodiment of the present disclosure further provides a computer device, which includes a memory and a processor, where the memory stores a computer program, and when the computer program is executed by the processor, the computer device may implement the method of any of the above method embodiments.
For example, fig. 12 is a schematic structural diagram of a computer device in an embodiment of the present disclosure. Referring now in particular to fig. 12, there is shown a schematic block diagram of a computer device 1400 suitable for use in implementing embodiments of the present disclosure. The computer device 1400 in the disclosed embodiments may include, but is not limited to, devices with computing and data processing capabilities such as notebook computers, PAD (tablet), desktop computers, servers, and the like. The computer device shown in fig. 12 is only an example and should not bring any limitation to the function and scope of use of the embodiments of the present disclosure.
As shown in fig. 12, computer device 1400 may include a processing means (e.g., central processing unit, graphics processor, etc.) 1401 that can perform various appropriate actions and processes in accordance with a program stored in a Read Only Memory (ROM) 1402 or a program loaded from storage device 1408 into a Random Access Memory (RAM) 1403. In the RAM 1403, various programs and data necessary for the operation of the computer device 1400 are also stored. The processing device 1401, the ROM 1402, and the RAM 1403 are connected to each other by a bus 1404. An input/output (I/O) interface 1405 is also connected to bus 1404.
Generally, the following devices may be connected to the I/O interface 1405: input devices 1406 including, for example, a touch screen, touch pad, keyboard, mouse, camera, microphone, accelerometer, gyroscope, etc.; an output device 1407 including, for example, a Liquid Crystal Display (LCD), a speaker, a vibrator, or the like; storage devices 1408 including, for example, magnetic tape, hard disk, etc.; and a communication device 1409. The communication means 1409 may allow the computer device 1400 to communicate wirelessly or by wire with other devices to exchange data. While fig. 12 illustrates a computer device 1400 having various means, it is to be understood that not all illustrated means are required to be implemented or provided. More or fewer devices may be alternatively implemented or provided.
In particular, according to an embodiment of the present disclosure, the processes described above with reference to the flowcharts may be implemented as computer software programs. For example, embodiments of the present disclosure include a computer program product comprising a computer program carried on a non-transitory computer readable medium, the computer program containing program code for performing the method illustrated by the flow chart. In such an embodiment, the computer program may be downloaded and installed from a network via the communication device 1409, or installed from the storage device 1408, or installed from the ROM 1402. The computer program, when executed by the processing apparatus 1401, performs the functions defined in the methods of the embodiments of the present disclosure.
It should be noted that the computer readable medium in the present disclosure can be a computer readable signal medium or a computer readable storage medium or any combination of the two. A computer readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples of the computer readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the present disclosure, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. In contrast, in the present disclosure, a computer readable signal medium may comprise a propagated data signal with computer readable program code embodied therein, either in baseband or as part of a carrier wave. Such a propagated data signal may take many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: electrical wires, optical cables, RF (radio frequency), etc., or any suitable combination of the foregoing.
The computer readable medium may be embodied in the computer device; or may exist separately and not be incorporated into the computer device.
The computer readable medium carries one or more programs which, when executed by a processing device, cause the processing device to: acquiring a UI picture in an SVG format; extracting drawing data of elements in the UI picture from the XML information of the UI picture, and removing other data in the XML information; and generating picture data in a binary information format corresponding to the UI picture based on the drawing data of the elements in the UI picture.
Computer program code for carrying out operations for the present disclosure may be written in any combination of one or more programming languages, including but not limited to an object oriented programming language such as Java, smalltalk, C + +, and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any type of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or the connection may be made to an external computer (for example, through the Internet using an Internet service provider).
The flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present disclosure. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams and/or flowchart illustration, and combinations of blocks in the block diagrams and/or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
The units described in the embodiments of the present disclosure may be implemented by software or hardware. Where the name of an element does not in some cases constitute a limitation on the element itself.
The functions described herein above may be performed, at least in part, by one or more hardware logic components. For example, without limitation, exemplary types of hardware logic components that may be used include: field Programmable Gate Arrays (FPGAs), application Specific Integrated Circuits (ASICs), application Specific Standard Products (ASSPs), systems on a chip (SOCs), complex Programmable Logic Devices (CPLDs), and the like.
In the context of this disclosure, a machine-readable medium may be a tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. The machine-readable medium may be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium may include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any suitable combination of the foregoing. More specific examples of a machine-readable storage medium would include an electrical connection based on one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.
The embodiments of the present disclosure further provide a computer-readable storage medium, where a computer program is stored in the storage medium, and when the computer program is executed by a processor, the method of any one of the embodiments in fig. 2 to 10 may be implemented, where the execution manner and the beneficial effects are similar, and are not described herein again.
Embodiments of the present disclosure further provide a computer program product, where the program product is stored in a storage medium, and when the program product runs, the method in any embodiment in fig. 2 to fig. 10 may be implemented, where an execution manner and beneficial effects are similar, and are not described herein again.
It is noted that, in this document, relational terms such as "first" and "second," and the like, may be used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Also, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising a … …" does not exclude the presence of another identical element in a process, method, article, or apparatus that comprises the element.
The foregoing are merely exemplary embodiments of the present disclosure, which enable those skilled in the art to understand or practice the present disclosure. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the generic principles defined herein may be applied to other embodiments without departing from the spirit or scope of the disclosure. Thus, the present disclosure is not intended to be limited to the embodiments shown herein but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.
Claims (12)
1. A processing method of pictures in SVG format comprises the following steps:
acquiring a UI picture in an SVG format;
extracting drawing data of elements in the UI picture from XML information of the UI picture, and removing other data in the XML information;
and generating picture data in a binary information format corresponding to the UI picture based on the drawing data of the elements in the UI picture.
2. The method of claim 1, wherein the extracting drawing data of the element in the UI picture from the XML information of the UI picture, and removing other data in the XML information comprises:
based on XML information of the UI picture, acquiring grouping information, path information and multiplexing information of elements contained in the UI picture from a dom tree of the XML information;
generating a target array by combination based on grouping information, path information and multiplexing information of elements contained in the UI picture;
and flattening the target array to generate a flattened target array, and taking the flattened target array as drawing data.
3. The method according to claim 2, wherein after the obtaining of the grouping information, the path information and the multiplexing information of the elements contained in the UI picture from the dom tree of the XML information based on the XML information of the UI picture, the method further comprises:
and converting the acquired path information of the element into target path information containing a drawing method.
4. The method according to claim 2 or 3, wherein the flattening the target array to generate a flattened target array comprises:
for the grouping information contained in the target array, associating the style information contained in the grouping information to the path information of the elements contained in the grouping;
for multiplexing information contained in the target array, associating the multiplexing information to path information of elements using the multiplexing information in the target array;
and removing the grouping information and the multiplexing information contained in the target array to obtain the flattened target array.
5. The method according to claim 4, wherein associating style information contained in the grouping information into path information of elements contained in a grouping for grouping information contained in the target array comprises:
according to grouping information, searching path information of elements included in the grouping from the target array;
in response to the found path information not being associated with the style information, associating the style information in the grouping information to the path information;
and in response to the found path information being associated with the style information, not associating the style information in the grouping information to the path information.
6. The method according to claim 4, wherein after removing the grouping information and multiplexing information contained in the target array to obtain a flattened target array, the method further comprises:
and removing the path information of the unassociated style information and/or the associated style information in the target array as a transparent style.
7. The method according to claim 1, wherein the extracting drawing data of the element in the UI picture from the XML information of the UI picture, after removing other data in the XML information, the method further comprises:
and responding to the XML information including deformation information for a first element in the UI picture, and performing deformation processing on the drawing data of the first element based on the deformation information to obtain the drawing data of a second element contained in the UI picture.
8. The method according to claim 1, wherein the generating picture data in binary information format corresponding to the UI picture based on the drawing data of the element in the UI picture comprises:
acquiring target information of the UI picture, wherein the target information comprises at least one of an interaction state, a day-night state and nineteen information corresponding to the UI picture, and the nineteen information comprises the length, the coordinates and the thickness of the edge of the UI picture;
and generating picture data in a binary information format corresponding to the UI picture based on the drawing data of the elements in the UI picture and the target information.
9. A device for processing a picture in SVG format, comprising:
the acquisition module is used for acquiring the UI pictures in the SVG format;
the extraction module is used for extracting drawing data of elements in the UI picture from the XML information of the UI picture and removing other data in the XML information;
and the generating module is used for generating picture data in a binary information format corresponding to the UI picture based on the drawing data of the elements in the UI picture.
10. A computer device comprising a memory and a processor, wherein the memory has stored therein a computer program which, when executed by the processor, carries out the method according to any one of claims 1-8.
11. A computer-readable storage medium, wherein a computer program is stored in the storage medium, which computer program, when executed, implements the method according to any of claims 1-8.
12. A computer program product, wherein the computer program product is stored in a storage medium, which when executed performs the method according to any of claims 1-8.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211427910.9A CN115731313A (en) | 2022-11-15 | 2022-11-15 | SVG format picture processing method, device, equipment, medium and product |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211427910.9A CN115731313A (en) | 2022-11-15 | 2022-11-15 | SVG format picture processing method, device, equipment, medium and product |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN115731313A true CN115731313A (en) | 2023-03-03 |
Family
ID=85295828
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202211427910.9A Pending CN115731313A (en) | 2022-11-15 | 2022-11-15 | SVG format picture processing method, device, equipment, medium and product |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115731313A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116680489A (en) * | 2023-04-07 | 2023-09-01 | 深圳市同行者科技有限公司 | Method, device, equipment and storage medium for modifying svg image color |
| CN117331557A (en) * | 2023-10-24 | 2024-01-02 | 北京饼干科技有限公司 | Form rendering method, device, medium and equipment |
-
2022
- 2022-11-15 CN CN202211427910.9A patent/CN115731313A/en active Pending
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116680489A (en) * | 2023-04-07 | 2023-09-01 | 深圳市同行者科技有限公司 | Method, device, equipment and storage medium for modifying svg image color |
| CN117331557A (en) * | 2023-10-24 | 2024-01-02 | 北京饼干科技有限公司 | Form rendering method, device, medium and equipment |
| CN117331557B (en) * | 2023-10-24 | 2024-05-14 | 北京饼干科技有限公司 | Form rendering method, device, medium and equipment |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110458918B (en) | Method and device for outputting information | |
| CN112184738B (en) | Image segmentation method, device, equipment and storage medium | |
| CN110321958B (en) | Training method of neural network model and video similarity determination method | |
| CN113126990B (en) | Page development method, device, equipment and storage medium | |
| CN104281626B (en) | Web page display method and web page display device based on pictured processing | |
| CN111399729A (en) | Image drawing method and device, readable medium and electronic equipment | |
| CN111209721A (en) | Bitmap font realization method and device, electronic equipment and storage medium | |
| CN115731313A (en) | SVG format picture processing method, device, equipment, medium and product | |
| CN111680491B (en) | Method and device for extracting document information and electronic equipment | |
| CN111159594A (en) | Information processing method, information processing device and terminal equipment | |
| CN104850388A (en) | Method and apparatus for drafting webpage | |
| JP7213291B2 (en) | Method and apparatus for generating images | |
| CN113797554B (en) | Game engine resource processing method and device, storage medium and electronic equipment | |
| US11557047B2 (en) | Method and apparatus for image processing and computer storage medium | |
| CN112488095B (en) | Seal image recognition method and device and electronic equipment | |
| CN107301220B (en) | Method, device and equipment for data driving view and storage medium | |
| CN113761871A (en) | Rich text rendering method and device, electronic equipment and storage medium | |
| CN115756452A (en) | Target page code generation method, device, storage medium and program product | |
| CN111191225B (en) | Method, device, medium and electronic equipment for switching isolated objects | |
| CN115268904A (en) | User interface design file generation method, device, equipment and medium | |
| CN110688116A (en) | Image file analysis method, device, equipment and readable medium | |
| CN115344718B (en) | Cross-region document content recognition method, device, apparatus, medium, and program product | |
| CN114222317B (en) | Data processing method and device, electronic equipment and storage medium | |
| CN112445478B (en) | Graphic file processing method, device, equipment and medium | |
| CN113961296A (en) | Page element layout method and device, readable medium and electronic equipment |
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 |