WebGL-based PDF drawing trace tracing method and system

Abstract

The invention relates to the technical field of drawing traceability systems, in particular to a PDF drawing trace traceability method and system based on WebGL.The PDF drawing trace traceability method based on WebGL comprises the steps that graph vector data of a PDF drawing is obtained, and the graph vector data is rendered to a webpage; providing an electronic labeling tool for a user to perform labeling operation at a certain position of a certain page of the PDF drawing displayed in the webpage; when the user stores the label, coordinate information of the label position is extracted, and the coordinate information and the label information are stored in a database; the method comprises the following steps of: reading stored labeling information from a database to form a labeling list, and opening a corresponding PDF drawing in a webpage according to position coordinate information, stored in the database, of the labeling list when a user clicks a certain labeling list to check. And the PDF drawing is quickly positioned to the marked drawing position, so that the drawing checking efficiency is improved.

Description

Technical Field

[0001] The present invention relates to the technical field of drawing tracing systems, and in particular to a PDF drawing trace tracing method and system based on WebGL. Background Art

[0002] With the continuous development of technology, the review of construction drawings has gradually moved away from the offline paper-based review method. Instead, online review of electronic documents of construction drawings has been used to improve review efficiency. PDF is a common document format for construction drawings.

[0003] However, when reviewing drawings in PDF format, there is currently a problem that when viewing PDF drawings online, the PDF drawings cannot be quickly located at the marked drawing location, which reduces the review efficiency. Summary of the Invention

[0004] The purpose of the present invention is to provide a PDF drawing traceability method and system based on WebGL, which can quickly locate the PDF drawing to the marked drawing position when viewing the PDF drawing online, thereby improving the efficiency of drawing review.

[0005] To achieve the above objectives, in a first aspect, the present invention provides a PDF drawing traceability method based on WebGL, comprising:

[0006] Read and parse PDF drawings, obtain graphic vector data of PDF drawings, and render graphic vector data to web pages;

[0007] Provide electronic marking tools for users to mark a certain location on a certain page of a PDF drawing displayed on the web page;

[0008] When the user saves the annotation, the coordinate information of the annotation position is extracted and the coordinate information and annotation information are stored in the database;

[0009] The annotation information stored in the database is read, and a annotation list is formed based on the read annotation information and displayed to the user. When the user clicks on an item in the annotation list to view it, the corresponding PDF drawing is opened on the web page according to the position coordinate information stored in the database of the annotation list, and the corresponding position of the annotation in the drawing is located for the user to view the drawing and the annotation content.

[0010] Among them, in the steps of reading and parsing the PDF drawing, obtaining the graphic vector data of the PDF drawing, and rendering the graphic vector data to the web page:

[0011] The graphic vector data is rendered into a web page using WebGL technology and based on the OpenGL ES 2.0 standard.

[0012] Among them, in the step of providing an electronic marking tool for a user to mark a certain position on a certain page of a PDF drawing displayed on a web page:

[0013] The electronic annotation tool provides a variety of annotation shapes for users to choose from, including circles, rectangles, lines, and free-drawn shapes. Users can customize the color and line width of the annotation.

[0014] Among them, when the user saves the annotation, the coordinate information of the annotation position is extracted and the coordinate information and the annotation information are stored in the database:

[0015] The annotation information includes the current drawing name, page number, annotation content, and annotation brief information.

[0016] In a second aspect, the present invention further provides a PDF drawing traceability system based on WebGL, comprising a PDF drawing rendering module, an electronic marking module, a marking information storage module, and a marking information positioning viewing module; the PDF drawing rendering module, the electronic marking module, the marking information storage module, and the marking information positioning viewing module are connected in sequence;

[0017] The PDF drawing rendering module is used to read and parse the PDF drawing, obtain the graphic vector data of the PDF drawing, and render the graphic vector data to the web page;

[0018] The electronic marking module is used to provide an electronic marking tool for users to mark a certain position on a certain page of a PDF drawing displayed on a web page;

[0019] The annotation information saving module is used to extract the coordinate information of the annotation position when the user saves the annotation, and store the coordinate information and the annotation information in the database;

[0020] The annotation information positioning and viewing module is used to read the stored annotation information from the database, and form a annotation list based on the read annotation information to display to the user. When the user clicks on an item in the annotation list to view it, the corresponding PDF drawing is opened in the web page according to the position coordinate information stored in the database of the annotation list, and the corresponding position of the annotation in the drawing is located for the user to view the drawing and the annotation content.

[0021] The present invention provides a PDF drawing traceability method and system based on WebGL. When a user opens a specified PDF drawing, the PDF drawing is parsed based on the PDF specification, and the obtained graphic vector data is rendered to the web page using WebGL technology. The graphic vector data is extracted from the PDF drawing and rendered to the web page. By providing an electronic annotation tool, the user uses the electronic annotation tool to circle and mark a certain position on a certain page of the drawing. The electronic annotation tool tracks the movement trajectory of the mouse and renders a red line in real time to achieve circle annotation. When the user clicks the Save button to save the annotation, the annotation is saved based on the position of the annotation starting point on the current drawing page, such as The distance from the left margin x and the distance from the top margin y are used to calculate the coordinate data (x, y), and this data is stored in the database as a parameter through an SQL statement. The data stored in the database also includes the current drawing name, page number, annotation content, and annotation brief information. The annotation information stored in the database will form a annotation list for the user. The user can click the view button of a certain annotation to directly open the drawing to the corresponding position of the annotation to view the drawing and the annotation content. According to the drawing name, page number, and coordinate data stored in the database, the corresponding page number of the corresponding drawing is automatically loaded and rendered to the webpage, and the viewport center is positioned at the annotation coordinate position. The present invention can quickly position the PDF drawing to the annotated drawing position when viewing PDF drawings online, thereby improving the efficiency of drawing review. BRIEF DESCRIPTION OF THE DRAWINGS

[0022] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art.

[0023] Figure 1 This is a flowchart of the WebGL-based PDF drawing traceability method of the present invention.

[0024] Figure 2 This is a structural diagram of the WebGL-based PDF drawing traceability system of the present invention.

[0025] 101-PDF drawing rendering module, 102-electronic annotation module, 103-annotation information saving module, 104-annotation information positioning and viewing module. DETAILED DESCRIPTION

[0026] The embodiments of the present invention are described in detail below. Examples of the embodiments are shown in the accompanying drawings. The embodiments described below with reference to the accompanying drawings are exemplary and are intended to be used to explain the present invention, but should not be understood as limiting the present invention.

[0027] In the first aspect, the present invention provides a PDF drawing traceability method based on WebGL, please refer to Figure 1 , Figure 1This is a flowchart of the WebGL-based PDF drawing traceability method of the present invention.

[0028] The present invention provides a PDF drawing traceability method based on WebGL, comprising:

[0029] S100 reads and parses PDF drawings, obtains graphic vector data of the PDF drawings, and renders the graphic vector data to the web page;

[0030] In this step, the graphic vector data is rendered into a web page using WebGL technology and based on the OpenGL ES 2.0 standard.

[0031] In an embodiment of the present invention, when a user opens a specified PDF drawing, the PDF drawing is parsed based on the PDF specification, and the acquired graphic vector data is rendered to a web page using WebGL technology. WebGL technology is a JavaScript API for rendering interactive 3D and 2D graphics on web pages. It is based on the OpenGL ES 2.0 standard and extracts graphic vector data from the PDF drawing and renders it to the web page.

[0032] S200 provides an electronic marking tool for users to mark a certain location on a page of a PDF drawing displayed on a web page;

[0033] In this step: the electronic annotation tool provides a variety of annotation shapes for users to choose from, including circles, rectangles, lines, and free-drawn shapes. Users can customize the color and line width of the annotation.

[0034] In an embodiment of the present invention, an electronic marking tool is provided. A user uses the electronic marking tool to circle and mark a certain position on a certain page of a drawing. The electronic marking tool tracks the movement trajectory of the mouse and renders a red line in real time to achieve circle marking.

[0035] When the user saves the annotation at S300, the coordinate information of the annotation location is extracted and the coordinate information and annotation information are stored in the database;

[0036] In this step, the annotation information includes the current drawing name, page number, annotation content, and annotation brief information.

[0037] In an embodiment of the present invention, when the user clicks the Save button to save the annotation, the coordinate data (x, y) is calculated based on the position of the annotation starting point on the current drawing page, such as the distance from the left margin x and the distance from the top margin y, and this data is stored in the database as a parameter through an SQL statement. At the same time, the data stored in the database also includes the current drawing name, page number, annotation content, and annotation introduction information.

[0038] S400 reads the stored annotation information from the database, and forms an annotation list based on the read annotation information and displays it to the user. When the user clicks on an item in the annotation list to view it, the corresponding PDF drawing is opened on the web page according to the position coordinate information stored in the database of the annotation list, and the corresponding position of the annotation in the drawing is located, so that the user can view the drawing and annotation content.

[0039] In an embodiment of the present invention, the annotation information stored in the database will form an annotation list for the user. The user can click the view button of a certain annotation to directly open the drawing to the corresponding position of the annotation to view the drawing and the annotation content. According to the drawing name, page number, and coordinate data stored in the database, the corresponding page number of the corresponding drawing is automatically loaded and rendered to the web page, and the viewport center is positioned at the annotation coordinate position.

[0040] The present invention provides a PDF drawing traceability method based on WebGL. When a user opens a specified PDF drawing, the PDF drawing is parsed based on the PDF specification, and the acquired graphic vector data is rendered to a web page using WebGL technology. The graphic vector data is extracted from the PDF drawing and rendered to the web page. An electronic annotation tool is provided, and the user uses the electronic annotation tool to circle and annotate a certain position on a certain page of the drawing. The electronic annotation tool tracks the movement trajectory of the mouse and renders a red line in real time to achieve the circle annotation. When the user clicks the Save button to save the annotation, coordinate data (x, y) is calculated based on the position of the annotation starting point on the current drawing page, such as the distance from the left margin x and the distance from the top margin y, and this data is stored as a parameter in a database through an SQL statement. At the same time, the data stored in the database also includes the current drawing name, page number, annotation content, and annotation brief information. The annotation information stored in the database will form a annotation list for the user. The user can click the View button of a certain annotation to directly open the drawing to the corresponding position of the annotation to view the drawing and the annotation content. According to the drawing name, page number, and coordinate data stored in the database, the corresponding page number of the corresponding drawing is automatically loaded and rendered to the web page, and the viewport center is positioned at the annotation coordinate position. The present invention can quickly locate a PDF drawing to a marked drawing position when viewing a PDF drawing online, thereby improving drawing review efficiency.

[0041] Second, see Figure 2 , Figure 2 This is a structural diagram of the WebGL-based PDF drawing traceability system of the present invention.

[0042] The present invention also provides a PDF drawing traceability system based on WebGL, comprising a PDF drawing rendering module 101, an electronic marking module 102, a marking information storage module 103, and a marking information location viewing module 104; the PDF drawing rendering module 101, the electronic marking module 102, the marking information storage module 103, and the marking information location viewing module 104 are connected in sequence;

[0043] The PDF drawing rendering module 101 is used to read and parse the PDF drawing, obtain the graphic vector data of the PDF drawing, and render the graphic vector data to the web page;

[0044] The electronic marking module 102 is used to provide an electronic marking tool for the user to mark a certain position on a certain page of a PDF drawing displayed on a web page;

[0045] The annotation information saving module 103 is used to extract the coordinate information of the annotation position when the user saves the annotation, and store the coordinate information and the annotation information in the database;

[0046] The annotation information positioning and viewing module 104 is used to read the stored annotation information from the database, and form an annotation list based on the read annotation information to display to the user. When the user clicks on an item in the annotation list to view it, the corresponding PDF drawing is opened in the web page according to the position coordinate information stored in the database of the annotation list, and the corresponding position of the annotation in the drawing is located for the user to view the drawing and the annotation content.

[0047] The PDF drawing traceability system based on WebGL of the present invention comprises the following: the PDF drawing rendering module 101 is used to parse the PDF drawing based on the PDF specification when the user opens the specified PDF drawing, and render the acquired graphic vector data to the web page using the WebGL technology; the electronic annotation module 102 is used to provide an electronic annotation tool, and the user uses the electronic annotation tool to circle and mark a certain position on a certain page of the drawing. The electronic annotation tool tracks the movement trajectory of the mouse and renders a red line in real time to achieve circle marking; the annotation information saving module 103 is used to save the annotation according to the position of the annotation starting point on the current drawing page when the user clicks the save button to save the annotation, such as The distance from the left margin x and the distance from the top margin y are used to calculate the coordinate data (x, y), and this data is stored in the database as a parameter through an SQL statement. The data stored in the database also includes the current drawing name, page number, annotation content, and annotation brief information; the annotation information positioning and viewing module 104 is used to form an annotation list for the user from the annotation information stored in the database. The user can click the view button of a certain annotation to directly open the drawing to the corresponding position of the annotation to view the drawing and the annotation content. According to the drawing name, page number, and coordinate data stored in the database, the corresponding page number of the corresponding drawing is automatically loaded and rendered to the webpage, and the viewport center is positioned at the annotation coordinate position. The present invention can quickly locate the PDF drawing to the annotated drawing position when viewing PDF drawings online, thereby improving the efficiency of drawing review.

[0048] The above disclosure is merely one or more preferred embodiments of the present application and is not intended to limit the scope of the present application. A person skilled in the art will understand that all or part of the processes of the above embodiments and equivalent changes made in accordance with the claims of the present application are still within the scope of the present application.

Claims

1. A PDF drawing traceability method based on WebGL, characterized by: include: Read and parse PDF drawings, obtain graphic vector data of PDF drawings, and render graphic vector data to web pages; Provide electronic marking tools for users to mark a certain location on a certain page of a PDF drawing displayed on the web page; When the user saves the annotation, the coordinate information of the annotation position is extracted and the coordinate information and annotation information are stored in the database; The annotation information stored in the database is read, and a annotation list is formed based on the read annotation information and displayed to the user. When the user clicks on an item in the annotation list to view it, the corresponding PDF drawing is opened on the web page according to the position coordinate information stored in the database of the annotation list, and the corresponding position of the annotation in the drawing is located for the user to view the drawing and the annotation content.

2. The WebGL-based PDF drawing traceability method according to claim 1, characterized in that: In the steps of reading and parsing the PDF drawing, obtaining the graphic vector data of the PDF drawing, and rendering the graphic vector data to the web page: The graphic vector data is rendered into a web page using WebGL technology and based on the OpenGL ES 2.0 standard.

3. The WebGL-based PDF drawing traceability method according to claim 2, characterized in that: In the steps of providing an electronic marking tool for a user to mark a certain position on a certain page of a PDF drawing displayed on a web page: The electronic annotation tool provides a variety of annotation shapes for users to choose from, including circles, rectangles, lines, and free-drawn shapes. Users can customize the color and line width of the annotation.

4. The WebGL-based PDF drawing traceability method according to claim 3, characterized in that: When the user saves the annotation, the coordinate information of the annotation position is extracted and the coordinate information and annotation information are stored in the database: The annotation information includes the current drawing name, page number, annotation content, and annotation brief information.

5. A PDF drawing traceability system based on WebGL, using the PDF drawing traceability method based on WebGL as described in any one of claims 1 to 4, characterized in that: It includes a PDF drawing rendering module, an electronic marking module, a marking information storage module and a marking information positioning and viewing module; the PDF drawing rendering module, the electronic marking module, the marking information storage module and the marking information positioning and viewing module are connected in sequence; The PDF drawing rendering module is used to read and parse the PDF drawing, obtain the graphic vector data of the PDF drawing, and render the graphic vector data to the web page; The electronic marking module is used to provide an electronic marking tool for users to mark a certain position on a certain page of a PDF drawing displayed on a web page; The annotation information saving module is used to extract the coordinate information of the annotation position when the user saves the annotation, and store the coordinate information and the annotation information in the database; The annotation information positioning and viewing module is used to read the stored annotation information from the database, and form a annotation list based on the read annotation information to display to the user. When the user clicks on an item in the annotation list to view it, the corresponding PDF drawing is opened in the web page according to the position coordinate information stored in the database of the annotation list, and the corresponding position of the annotation in the drawing is located for the user to view the drawing and the annotation content.

Images