CN113360148A

CN113360148A - Graph processing method and device and electronic equipment

Info

Publication number: CN113360148A
Application number: CN202110496035.9A
Authority: CN
Inventors: 廖文强; 倪文斌; 李紫
Original assignee: 珠海万纬物流发展有限公司
Current assignee: Shanghai Wanwei Zongheng Technology Co ltd
Priority date: 2021-07-09
Filing date: 2021-07-09
Publication date: 2021-09-07
Anticipated expiration: 2041-07-09
Also published as: CN113360148B

Abstract

The invention relates to the technical field of computers, in particular to a method and a device for processing a graph and electronic equipment, wherein the method comprises the following steps: obtaining SVG file data; coding and analyzing the SVG file data to obtain XML file data; analyzing the XML file data, and filtering and/or sequencing the analyzed XML file data to generate JSON data; rendering the JSON data to obtain graphic information; and responding to the editing operation of the user on the graphic information, and rendering the edited graphic information to obtain a processed graphic. The invention stores the graphic data in the form of JSON, effectively associates the graphic data with the service data information, and redraws the graphics by using the graphic data, thereby solving the problems of unsmooth performance and dead locking under the condition of large amount of data of the SVG, simultaneously reducing the maintenance cost and improving the working efficiency of operators.

Description

Graph processing method and device and electronic equipment

Technical Field

The present invention relates to the field of computer technologies, and in particular, to a method and an apparatus for processing a graphic, and an electronic device.

Background

At present, a large amount of aided design drawing software exists in the industry, for example: professional mapping software such as Photoshop, Sketch, AutoCAD, Illustrator, etc. In various industries, professional technicians often perform plane drawing in the software, and the derived SVG data source can be displayed on the Web end in high quality. SVG is a language to describe 2D graphics using XML. It has rich drawing function and may be used in drawing various figures, filter, cartoon, etc. SVG has a vector property, and in the internet nowadays, a Web browser side often uses SVG to draw static graphics. Because the SVG controls the pattern by XML + CSS, the traditional Web editing SVG has professional technical requirements on operators, and the browser performance is insufficient and easy to be blocked and deadly under the DOM operation of a large amount of XML, thereby reducing the overall efficiency of the operators. In the logistics industry, the warehouse plan can also be continuously adjusted at any time, a large amount of information data needs to be bound in the small unit area of the warehouse plan, and SVG (scalable vector graphics) cannot effectively aggregate and screen the small unit information of the plan.

Disclosure of Invention

The invention provides a graphic processing method, a graphic processing device and electronic equipment, which can effectively associate graphic data and service data information, redraw a graphic by using the graphic data, reduce the maintenance cost and improve the working efficiency of operators.

An embodiment of the present specification provides a graphics processing method, including:

obtaining SVG file data;

coding and analyzing the SVG file data to obtain XML file data;

analyzing the XML file data, and filtering and/or sequencing the analyzed XML file data to generate JSON data;

rendering the JSON data to obtain graphic information;

and responding to the editing operation of the user on the graphic information, and rendering the edited graphic information to obtain a processed graphic.

Preferably, parsing the XML document data includes:

and analyzing the XML file data to obtain a graphic background, and/or a unit graphic, and/or a text annotation in the XML file data.

Preferably, the filtering and/or sorting the parsed XML document data includes:

filtering irregular graphs and/or repeated graphs in the XML file data;

acquiring a point set of a graph in the XML file data, and determining the maximum value and the minimum value of an X coordinate and the maximum value and the minimum value of a Y coordinate according to the point set of the graph;

calculating a rectangular visual range corresponding to the graph in the XML file data according to the maximum value and the minimum value of the X coordinate and the maximum value and the minimum value of the Y coordinate;

and sequencing the graphs in the XML file data.

Preferably, the sorting the graphics in the XML document data includes:

determining a sort rule for graphical elements in the graph, the graphical elements comprising: graphical background, unit graph, text annotation.

Carrying out layer sequencing on the graphs according to the sequencing rule;

and carrying out layer sequencing on the graphs according to a bubble sequencing method.

Preferably, the performing layer sequencing on the graph according to a bubble sequencing method includes:

extracting two graphs in the graphs each time;

and judging the states of the two graphs, and carrying out layer sequencing on the two graphs according to the judgment result.

Preferably, the performing layer sequencing on the two graphs according to the judgment result includes:

and when the two graphs are not intersected or intersected and contained, carrying out layer sequencing on the two graphs according to the sequence of the graph areas from large to small.

Preferably, the performing layer sequencing on the two graphs according to the judgment result further includes:

and when the two graphs are intersected and do not contain the graphs, carrying out layer sequencing on the two graphs according to the sequence of the non-intersected areas of the graphs from large to small.

An embodiment of the present specification further provides a graphics processing apparatus, including:

the file acquisition module is used for acquiring SVG file data;

the first analysis module is used for coding and analyzing the SVG file data to obtain XML file data;

the second analysis module is used for analyzing the XML file data, filtering and/or sequencing the analyzed XML file data and generating JSON data;

the first graphic rendering module is used for rendering the JSON data to obtain graphic information;

and the second graphic rendering module is used for responding to the editing operation of the user on the graphic information, and rendering the edited graphic information to obtain a processed graphic.

An electronic device, wherein the electronic device comprises:

a processor and a memory storing computer executable instructions that, when executed, cause the processor to perform the method of any of the above.

A computer readable storage medium, wherein the computer readable storage medium stores one or more programs which, when executed by a processor, implement the method of any of the above.

The beneficial effects are that:

the invention stores the graphic data in the form of JSON, effectively associates the graphic data with the service data information, and redraws the graphics by using the graphic data, thereby solving the problems of unsmooth performance and dead locking under the condition of large amount of data of the SVG, simultaneously reducing the maintenance cost and improving the working efficiency of operators.

Drawings

The accompanying drawings, which are included to provide a further understanding of the application and are incorporated in and constitute a part of this application, illustrate embodiment(s) of the application and together with the description serve to explain the application and not to limit the application. In the drawings:

FIG. 1 is a schematic diagram illustrating a graphics processing method according to an embodiment of the present disclosure;

fig. 2 is a schematic structural diagram of a graphics processing apparatus according to an embodiment of the present disclosure;

fig. 3 is a schematic structural diagram of an electronic device provided in an embodiment of the present disclosure;

fig. 4 is a schematic diagram of a computer-readable medium provided in an embodiment of the present specification.

Detailed Description

Exemplary embodiments of the present invention will now be described more fully with reference to the accompanying drawings. The exemplary embodiments, however, may be embodied in many different forms and should not be construed as limited to the embodiments set forth herein. Rather, these exemplary embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the concept of the invention to those skilled in the art. The same reference numerals denote the same or similar elements, components, or parts in the drawings, and thus their repetitive description will be omitted.

Features, structures, characteristics or other details described in a particular embodiment do not preclude the fact that the features, structures, characteristics or other details may be combined in a suitable manner in one or more other embodiments in accordance with the technical idea of the invention.

In describing particular embodiments, the present invention has been described with reference to features, structures, characteristics or other details that are within the purview of one skilled in the art to provide a thorough understanding of the embodiments. One skilled in the relevant art will recognize, however, that the invention may be practiced without one or more of the specific features, structures, characteristics, or other details.

The diagrams depicted in the figures are exemplary only, and do not necessarily include all of the contents and operations/steps, nor do they necessarily have to be performed in the order depicted. For example, some operations/steps may be decomposed, and some operations/steps may be combined or partially combined, so that the actual execution sequence may be changed according to the actual situation.

The block diagrams shown in the figures are functional entities only and do not necessarily correspond to physically separate entities. I.e. these functional entities may be implemented in the form of software, or in one or more hardware modules or integrated circuits, or in different networks and/or processor means and/or microcontroller means.

The term "and/or" and/or "includes all combinations of any one or more of the associated listed items.

Referring to fig. 1, a schematic diagram of a graphics processing method provided in an embodiment of the present disclosure includes:

s101: obtaining SVG file data;

in a preferred embodiment of the invention, a browser receives an SVG drawing file to be processed, wherein the SVG drawing file is drawn according to an analysis specification and is drawn and exported by using tools such as PhotoShop, AutoCAD, Adobe Illustrator, Sktech and the like.

S102: coding and analyzing the SVG file data to obtain XML file data;

in the preferred embodiment of the invention, the file reader object of the browser is called to read the SVG file, the SVG file is analyzed into XML text information, and the analyzing and coding format supports utf-8, gb3212 and the like.

S103: analyzing the XML file data, and filtering and/or sequencing the analyzed XML file data to generate JSON data;

in the preferred embodiment of the invention, the XML file data is analyzed to obtain a graphic background, a unit graphic and a character annotation, wherein the graphic background has the lowest level, so that whether the graphic background is edited or not can be controlled, and misoperation is prevented; the unit graphic layer level is higher than the graphic background level, the character annotation layer level is higher than the unit graphic level, and both the unit graphic layer and the character annotation layer can be edited.

In the preferred embodiment of the invention, the analyzed XML file data is filtered, irregular graphs and repeated graphs are filtered, and the maximum value and the minimum value of the X coordinate and the maximum value and the minimum value of the Y coordinate are determined according to the point set of the graph file; and calculating a rectangular visual range corresponding to the graphics in the XML file data according to the maximum value and the minimum value of the X coordinate and the maximum value and the minimum value of the Y coordinate, sequencing the graphics in the XML file data, and avoiding the situations of incapability of displaying, incapability of selecting and the like caused by covering and shielding through each sequenced layer.

S104: rendering the JSON data to obtain graphic information;

in the preferred embodiment of the invention, a browser canvas object is called to carry out drawing and rendering on JSON data, meanwhile, interaction is carried out on a background system, axios is used for carrying out webpage communication, a POST request mode is used for transmitting the JSON data to the background system, and the JSON data is solidified and stored in a database.

S105: and responding to the editing operation of the user on the graphic information, and rendering the edited graphic information to obtain a processed graphic.

In the preferred embodiment of the present invention, the user operates the DOM object through the browser interface to perform parameter adjustment and graphic editing on the canvas object.

The graphic parameter adjustment comprises the following steps: the method comprises the following steps of graphic X-axis position, graphic Y-axis position, graphic frame thickness, graphic frame color, graphic filling transparency, graphic rotation angle, graphic rotation anchor point, graphic X-direction size, graphic Y-direction size, graphic overall size, whether the graphic is visible or not, graphic layer position, graphic Chinese character size, graphic Chinese character font, graphic Chinese character content, graphic Chinese character color, graphic batch change and the like.

The graphic editing comprises the following steps: adding a graph, deleting the graph, converting the graph background, judging whether the graph can be edited or not, judging whether the graph can be selected or not, amplifying the graph, reducing the graph, dragging the graph visual range, resetting the graph visual range and customizing the graph color palette.

The downloaded graph can be automatically adjusted according to the size of the graph to derive the size of the picture, and the color palette can be customized to derive the graphs with different color matching.

Further, parsing the XML file data includes:

Further, the filtering and/or sorting the parsed XML document data includes:

filtering irregular graphs and/or repeated graphs in the XML file data;

and sequencing the graphs in the XML file data.

Further, the sorting the graphics in the XML document data includes:

Carrying out layer sequencing on the graphs according to the sequencing rule;

In a preferred embodiment of the present invention, a sort rule of the graphic elements in the graphic is determined, wherein the sort rule comprises: the graph background level is lowest, the unit graph level is higher than the graph background level, the text annotation level is higher than the unit graph level, and graph layer sequencing is carried out on the graphs according to the first square graph background, the last text annotation placed on the unit graph and/or the graph layer sequencing is carried out on the graphs according to a bubble sequencing method.

Further, the performing layer sequencing on the graph according to a bubble sequencing method includes:

extracting two graphs in the graphs each time;

In a preferred embodiment of the present invention, two graphs in the graphs are extracted each time for comparison, for example, two graphs of a graph a and a graph B are extracted, and then whether the graph a and the graph B intersect or do not include is determined, and an area of the graph a, an area of the graph B, an area where the graph a and the graph B intersect, and an area where the graph a and the graph B do not intersect are calculated, and the graphs are arranged in sequence according to the calculation result.

Further, the performing layer sequencing on the two graphs according to the judgment result includes:

In the preferred embodiment of the present invention, for example: when the graph A and the graph B are not intersected, firstly, a graph with a large area is placed on the graph layer, and then a graph with a small area is placed; when the graph A and the graph B are intersected and contained, the graph with a large area is placed on the graph layer, and then the graph with a small area is placed.

Further, the performing layer sequencing on the two graphs according to the judgment result further includes:

In the preferred embodiment of the present invention, for example: when the images A and B are intersected and not contained, firstly calculating an area S1 of the image A, an area S2 of the image B, areas S11 and S21 of the intersection of the image A and the image B, then calculating the areas of the intersection of the image A and the image B according to the area S1 of the image A, the area S2 of the image B and the areas S11 and S21 of the intersection of the image A and the image B, namely obtaining an area S111 and an area S211, when the area S111 is larger than the area S211, firstly placing the image A to the image layer, and then placing the image B; when the area S111 is smaller than the area S211, the diagram B is placed in the layer, and then the diagram a is placed.

Fig. 2 is a schematic structural diagram of a graphics processing apparatus according to an embodiment of the present disclosure, including:

the file acquisition module 201 is used for acquiring SVG file data;

the first analysis module 202 is used for coding and analyzing the SVG file data to obtain XML file data;

the second analysis module 203 is used for analyzing the XML file data, filtering and/or sequencing the analyzed XML file data and generating JSON data;

the first graphics rendering module 204 is used for rendering the JSON data to obtain graphics information;

and the second graphic rendering module 205, responding to the editing operation of the user on the graphic information, and rendering the edited graphic information to obtain a processed graphic.

Based on the same inventive concept, the embodiment of the specification further provides the electronic equipment.

In the following, embodiments of the electronic device of the present invention are described, which may be regarded as specific physical implementations for the above-described embodiments of the method and apparatus of the present invention. Details described in the embodiments of the electronic device of the invention should be considered supplementary to the embodiments of the method or apparatus described above; for details which are not disclosed in embodiments of the electronic device of the invention, reference may be made to the above-described embodiments of the method or the apparatus.

Fig. 3 is a schematic structural diagram of an electronic device provided in an embodiment of the present specification. An electronic device 300 according to this embodiment of the invention is described below with reference to fig. 3. The electronic device 300 shown in fig. 3 is only an example, and should not bring any limitation to the functions and the scope of use of the embodiments of the present invention.

As shown in fig. 3, electronic device 300 is embodied in the form of a general purpose computing device. The components of electronic device 300 may include, but are not limited to: at least one processing unit 310, at least one memory unit 320, a bus 330 connecting different device components (including the memory unit 320 and the processing unit 310), a display unit 340, and the like.

Wherein the storage unit stores program code executable by the processing unit 310 to cause the processing unit 310 to perform the steps according to various exemplary embodiments of the present invention described in the above-mentioned processing method section of the present specification. For example, the processing unit 310 may perform the steps as shown in fig. 1.

The storage unit 320 may include readable media in the form of volatile storage units, such as a random access memory unit (RAM)3201 and/or a cache storage unit 3202, and may further include a read only memory unit (ROM) 3203.

The storage unit 320 may also include a program/utility 3204 having a set (at least one) of program modules 3205, such program modules 3205 including, but not limited to: an operating device, one or more application programs, other program modules, and program data, each of which, or some combination thereof, may comprise an implementation of a network environment.

Bus 330 may be one or more of several types of bus structures, including a memory unit bus or memory unit controller, a peripheral bus, an accelerated graphics port, a processing unit, or a local bus using any of a variety of bus architectures.

The electronic device 300 may also communicate with one or more external devices 400 (e.g., keyboard, pointing device, bluetooth device, etc.), with one or more devices that enable a user to interact with the electronic device 300, and/or with any devices (e.g., router, modem, etc.) that enable the electronic device 300 to communicate with one or more other computing devices. Such communication may occur via an input/output (I/O) interface 350. Also, the electronic device 300 may communicate with one or more networks (e.g., a Local Area Network (LAN), a Wide Area Network (WAN), and/or a public network, such as the internet) via the network adapter 360. Network adapter 360 may communicate with other modules of electronic device 300 via bus 330. It should be appreciated that although not shown in FIG. 3, other hardware and/or software modules may be used in conjunction with electronic device 300, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID devices, tape drives, and data backup storage devices, to name a few.

Through the above description of the embodiments, those skilled in the art will readily understand that the exemplary embodiments of the present invention described herein may be implemented by software, or by software in combination with necessary hardware. Therefore, the technical solution according to the embodiment of the present invention can be embodied in the form of a software product, which can be stored in a computer-readable storage medium (which can be a CD-ROM, a usb disk, a removable hard disk, etc.) or on a network, and includes several instructions to make a computing device (which can be a personal computer, a server, or a network device, etc.) execute the above-mentioned method according to the present invention. The computer program, when executed by a data processing apparatus, enables the computer readable medium to implement the above-described method of the invention, namely: such as the method shown in fig. 1.

Fig. 4 is a schematic diagram of a computer-readable medium provided in an embodiment of the present disclosure.

A computer program implementing the method shown in fig. 1 may be stored on one or more computer readable media. The computer readable medium may be a readable signal medium or a readable storage medium. The readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor device, apparatus, or device, or a combination of any of the foregoing. More specific examples (a non-exhaustive list) of the readable storage medium include: an electrical connection having one or more wires, a portable disk, 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.

The computer readable storage medium may include a propagated data signal with readable program code embodied therein, for example, 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 readable storage medium may also be any readable medium that is not a readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution apparatus, device, or apparatus. Program code embodied on a readable storage medium may be transmitted using any appropriate medium, including but not limited to wireless, wireline, optical fiber cable, RF, etc., or any suitable combination of the foregoing.

Program code for carrying out operations for aspects of the present invention may be written in any combination of one or more programming languages, including an object oriented programming language such as Java, C + + or the like 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 computing device, partly on the user's device, as a stand-alone software package, partly on the user's computing device and partly on a remote computing device, or entirely on the remote computing device or server. In the case of a remote computing device, the remote computing device may be connected to the user computing device through any kind of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or may be connected to an external computing device (e.g., through the internet using an internet service provider).

In summary, the invention may be implemented in hardware, or in software modules running on one or more processors, or in a combination thereof. Those skilled in the art will appreciate that some or all of the functionality of some or all of the components in embodiments in accordance with the invention may be implemented in practice using a general purpose data processing device such as a microprocessor or a Digital Signal Processor (DSP). The present invention may also be embodied as apparatus or device programs (e.g., computer programs and computer program products) for performing a portion or all of the methods described herein. Such programs implementing the present invention may be stored on computer-readable media or may be in the form of one or more signals. Such a signal may be downloaded from an internet website or provided on a carrier signal or in any other form.

While the foregoing embodiments have described the objects, aspects and advantages of the present invention in further detail, it should be understood that the present invention is not inherently related to any particular computer, virtual machine or electronic device, and various general-purpose machines may be used to implement the present invention. The invention is not to be considered as limited to the specific embodiments thereof, but is to be understood as being modified in all respects, all changes and equivalents that come within the spirit and scope of the invention.

The embodiments in the present specification are described in a progressive manner, and the same and similar parts among the embodiments are referred to each other, and each embodiment focuses on the differences from the other embodiments.

The above description is only an example of the present application and is not intended to limit the present application. Various modifications and changes may occur to those skilled in the art. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included in the scope of the claims of the present application.

Claims

1. A method of graphics processing, comprising:

obtaining SVG file data;

coding and analyzing the SVG file data to obtain XML file data;

rendering the JSON data to obtain graphic information;

2. A method for processing graphics as recited in claim 1, wherein parsing said XML document data comprises:

3. A graphics processing method according to claim 1, wherein said filtering and/or sorting the parsed XML document data comprises:

filtering irregular graphs and/or repeated graphs in the XML file data;

and sequencing the graphs in the XML file data.

4. A graphics processing method according to claim 3, wherein said sorting the graphics in the XML document data comprises:

Carrying out layer sequencing on the graphs according to the sequencing rule;

5. The graphics processing method of claim 4, wherein said layer ordering said graphics according to bubble ordering comprises:

extracting two graphs in the graphs each time;

6. The method according to claim 5, wherein said performing layer sequencing on the two graphics according to the determination result comprises:

7. The method according to claim 5, wherein said performing layer sequencing on said two graphics according to the determination result further comprises:

8. A graphics processing apparatus, comprising:

the file acquisition module is used for acquiring SVG file data;

9. An electronic device, wherein the electronic device comprises:

a processor and a memory storing computer-executable instructions that, when executed, cause the processor to perform the method of any of claims 1-7.

10. A computer readable storage medium, wherein the computer readable storage medium stores one or more programs which, when executed by a processor, implement the method of any of claims 1-7.