CN110968944B - Method for displaying and operating CAD drawing on Web front end - Google Patents
Method for displaying and operating CAD drawing on Web front end Download PDFInfo
- Publication number
- CN110968944B CN110968944B CN201911133037.0A CN201911133037A CN110968944B CN 110968944 B CN110968944 B CN 110968944B CN 201911133037 A CN201911133037 A CN 201911133037A CN 110968944 B CN110968944 B CN 110968944B
- Authority
- CN
- China
- Prior art keywords
- svg
- cad
- web
- operation command
- primitive
- 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.)
- Active
Links
Abstract
The invention discloses a method for displaying and operating CAD drawing at a Web front end, wherein a server side packages CAD drawing files into a contracted data exchange format and sends the CAD drawing files to the Web front end which makes a request; the Web front end converts the data exchange format into an SVG file; the Web front end calls an operation command to operate the SVG graphic primitive displayed on the Web front end, and the Web front end modifies the displayed SVG graphic primitive according to the operation command; the Web front end records the operation command or stores the modified SVG file; packaging the operation command or SVG file into the data exchange format and transmitting the data exchange format back to a server side; the server analyzes the data exchange format, converts the data exchange format into a CAD drawing or modifies the CAD drawing according to an operation instruction adapted by the operation command. The method according to the invention can be presented and modified on the Web.
Description
Technical Field
The invention relates to a method for displaying and operating CAD drawings at the front end of Web.
Background
And at present, the Web front end display without the support of CAD (Computer Aided Design ) is mostly displayed by Canvas objects. Canvas, the first added tag of HTML5, is mainly used for generating images in real time by web pages, and can manipulate image content, and theoretically Canvas can form a bitmap that can be manipulated in JavaScript.
For bitmaps, it does not enable undistorted zoom viewing of the illustrated drawing. In addition, for Canvas, only CAD objects can be displayed, but not modified at the Web end, and in particular, canvas only can display CAD primitives and cannot display related information hidden by more drawings according to the drawings.
Typically, chinese patent document CN109410346a discloses a method for online editing of three-dimensional building models, which uses a Canvas technique of H5 (i.e. HTML 5) in an editable area, and mainly uses Canvas to render basic units of CAD drawings, but cannot modify CAD primitives.
Chinese patent document CN107368622a discloses a method for browsing CAD drawings on line, which directly copies CAD drawings into Flash elements (movie clips), performs vector amplification on the CAD drawings by means of an action script program of Flash software, and drags the changing size of the drawings with a mouse or a touch screen, i.e., predetermines the vector amplification range. And then manufacturing an SWF file, and installing the SWF file on a browser in the form of a browser plug-in, so that CAD drawings can be checked through the browser plug-in. On one hand, the method needs plug-in support and has poor use convenience. In addition, the so-called vector amplification is also only pseudo-vector amplification, and is limited by the amplification range determined by the original production.
Similarly, chinese patent document CN103678807a discloses a three-dimensional visualization method based on a built-in web browser, which relies on embedding drawing browsing controls of each manufacturer in an HTML file to realize browsing of drawings with different CAD formats. It is anticipated that integration of drawing browsing controls of various manufacturers into a browser is not practical, and browser controls of a single manufacturer range from tens of Mb to hundreds of Mb, and it is difficult for a browser to embed more such controls, in other words, it cannot be realized at all.
From the foregoing, it can be seen that, for CAD drawings, browsing or simply displaying can be performed at the Web front end, and the operation on CAD drawings is limited to simple vector amplification of the drawings, but cannot be modified.
Disclosure of Invention
The invention aims to provide a method for displaying and operating CAD drawings on the front end of Web, which can be displayed and modified on the Web.
In the embodiment of the invention, a method for displaying and operating CAD drawings at the front end of Web is provided, and operation commands aiming at the CAD drawings displayed at the front end of Web are packaged to be in one-to-one correspondence with instructions for operating the CAD drawings; the method comprises the following steps:
the Web front end makes a request;
the server side responds to the request, extracts a CAD drawing file, encapsulates the CAD drawing file into a contracted data exchange format and sends the CAD drawing file to the Web front end which makes the request;
the Web front end converts the obtained data exchange format into an SVG file;
the Web front end calls an operation command to operate the SVG graphic primitive displayed on the Web front end, and the Web front end modifies the displayed SVG graphic primitive according to the operation command; the Web front end records the operation command or stores the modified SVG file;
packaging the operation command or SVG file into the data exchange format and transmitting the data exchange format back to a server side;
the server analyzes the data exchange format, converts the data exchange format into a CAD drawing or modifies the CAD drawing according to an operation instruction adapted by the operation command.
Optionally, the CAD drawing data packaged by the server end are all CAD primitives and attribute values of the CAD primitives of the CAD drawing.
Optionally, the data exchange format is a Json data format.
Optionally, the attribute value includes a coordinate value of the CAD primitive, and at the Web front end, the SVG coordinate value and the SVG primitive reconstruction drawing are adapted according to the coordinate value.
Optionally, the operation command is adapted to an operation command of the CAD and is displayed on the Web front end in the form of a button, and the button is responsive to a mouse operation to implement the same operation as the CAD operation command.
Optionally, the operation command for the current SVG primitive is bound and used for displaying the operation of the SVG primitive at the front end of the Web and used for modifying the primitive in the background CAD drawing when the operation command is transmitted back to the server segment.
Optionally, the operation on the SVG primitives includes adding the SVG primitives;
binding SVG primitives displayed at the front end of Web with primitive data of CAD drawings stored in the background;
when an SVG primitive is newly added at the front end of the Web, background data is modified in real time in the background, and the modified background data is bound with the newly added SVG primitive.
Optionally, the binding between the SVG primitive displayed at the front end of the Web and the flange data of the CAD drawing stored in the background is the binding through the CAD drawing ID.
In the embodiment of the invention, the CAD drawing stored in the background (server side) is converted into the SVG file which can be processed by the foreground through the conversion of different data formats between the foreground and the background by the data exchange format, the SVG is an abbreviation of Scalable Vector Graphics, namely, the vector graphic which is the vector graphic can be scaled, and the scaling of the SVG graphic primitive can be carried out in the foreground (Web front end), so that the definition of the vector graphic is not influenced by the scaling, and the vector graphic is an inherent attribute of the vector graphic. SVG is a Web alliance standard and strictly complies with XML grammar, i.e. all browsers support SVG, so in an embodiment of the invention, CAD drawings can be presented in the Web foreground without providing special plug-ins. SVG and Java can run together, have interactivity and dynamics, fully support DOM (Document Object Model ), can carry out operations including adding, deleting and modifying on SVG graphics primitive. And the current stage can package and transmit the SVG primitives back to the background after modifying and storing the SVG primitives, and the CAD drawings stored in the background are modified.
Drawings
Fig. 1 is a schematic flow chart of a method for displaying and operating CAD drawings at the WEB front end in an embodiment of the invention.
Fig. 2 is a flowchart of a method for displaying and operating CAD drawings at a WEB front end in an embodiment of the invention.
Detailed Description
In the embodiment of the present invention, two basic components of the Web (world wide Web) are relied on, one is SVG, and the other is Json under JavaScript, where the former is described in more detail, and is a Web alliance standard, which belongs to common knowledge in the art, and is not described herein in detail. For the latter, json, an abbreviation of JavaScript Object Notation, chinese is normally expressed as JavaScript object notation or JS object notation, a lightweight data exchange format, json stores and represents data in a text format that is completely independent of the programming language based on a subset of ECMAScript (JS specification specified by the european computer association). The compact and clear hierarchical structure makes JSON an ideal data exchange language. Is easy to read and write by people, is easy to analyze and generate by machines, and effectively improves the network transmission efficiency.
Json is a lightweight data interchange format, and it will be appreciated by those skilled in the art that other types of data interchange formats may be used for conversion between different types of data. It is common knowledge in the art, and on the basis of the description of the present invention, different entities may be configured differently according to the technical environment of the company.
In contrast, json can be applied relatively widely, not only using high-level language parsing, but also being easy to machine parsing.
Furthermore, json is a subset under JavaScript, which is an inherent configuration of the browser, and in the preferred embodiment of the invention, the use of JavaScript for packaging and parsing is more efficient and the probability of generating a bug is also minimal.
Although the CAD drawing formats are various, the dwg format generated by AutoCAD is mainly used, and other CAD software can generate the dwg format.
In contrast, SVG mainly supports only 2D (two-dimensional) drawing operations, and therefore, in the embodiment of the present invention, a CAD drawing that can be operated by the Web front end is a 2D drawing.
In general, a client, or Web front end, also called a foreground, sends a link request to a server, links to a related server, finds a related CAD drawing, and tries to open, as if it were open locally, the operation on the CAD drawing is actually a Web-based operation.
In the embodiment of the invention, the operation commands for the CAD drawing displayed at the front end of the Web are packaged to correspond to the instructions of the CAD drawing operation one by one. It should be noted that the operation commands executed by the Web front-end are relatively few with respect to the CAD space, and it is obvious that very complex operations are not often required for the Web front-end, and in particular, the rights that the server opens to the Web front-end are often very few, which is represented as simple zooming and moving in more applications. Therefore, the problem of setting the buttons of the operation command in the foreground is related in the following, and it is understood that the operation command provided to the foreground is not too many, the corresponding number of buttons is relatively limited, and the overall layout of the web page is less affected.
If the server is an internal server of the company, higher authority can be opened for some terminals, for example, CAD drawings can be modified.
Further, the Web front end makes a request to the server, and the server can determine the authority of the accessed Web front end first, and determine the service which can be opened to the server according to the authority of the Web front end.
The server extracts a corresponding CAD drawing file according to the request of the user side, analyzes the CAD drawing file based on JavaScript, and analyzes all CAD objects and attribute values thereof contained in the CAD drawing.
After the server side analyzes the CAD file, all object data are packaged into Json data, the Json file is generated, and then the Json file is sent to the Web front end which makes a request, namely the user side.
And the user side adopts a Javascript script to analyze all CAD objects and attribute values thereof in the Json data, converts the coordinates of the CAD objects into the coordinates of local SVG objects, and draws CAD drawings in the SVG space, namely, rebuilds the CAD drawings in the SVG space, and represents the CAD drawings as SVG drawings.
For SVG, as described above, the space itself belongs to the vector space, and the corresponding drawing is a vector drawing, so that scaling does not affect the image quality.
Furthermore, in the method for encapsulating and zooming in and out the SVG drawing by using the Javascript script, it can be understood that the SVG has a specific manual, a person skilled in the art can review the manual, various drawing elements are defined in the manual, the drawing elements comprise various elements of the SVG drawing primitive, and the JavaScript can directly encapsulate the drawing elements in the SVG so as to adapt to users with different authorities.
Further, based on the operation command determined by encapsulating the SVG primitives, zooming in and out of the entire image without distortion, such as sliding a mouse wheel, may be implemented, enabling global viewing of the image or viewing of image details.
For low-authority users, the scaling view of SVG primitives can be opened for medium-authority users, and for high-authority users, the operations on SVG primitives can comprise more operations, such as drag movement, deletion, replacement, addition and modification of SVG primitives. And binding the generated SVG primitive operation command with the CAD primitive operation command.
Based on the foregoing, javaScript may define an SVG space, and in a preferred embodiment, a toolbar is customized in the SVG space, and the corresponding toolbar is given based on user rights with reference to basic operations of a CAD drawing.
The Javascript script generates various types of primitives according to Json data of the CAD drawing, and realizes the function of newly adding the primitives by dragging the primitives to the SVG drawing in the generated SVG space by the tool bar.
The operation function of the CAD drawing can be realized at the front end of the Web. And setting an export button, and analyzing the currently displayed SVG image by using the Javascript script to generate new Json file data.
And the Json file data is transmitted back to the background, namely a server side, and the server side modifies the stored corresponding CAD drawing.
In some embodiments, CAD drawings stored on the server side may be performed in real time, and it is understood that the server side and the client side typically belong to interactive links.
In some embodiments, the operations for drawing modification are shown in the foreground as modifications to the foreground SVG drawing while the operation commands are stored, generating an operation command stream. When the foreground stores SVG drawings, the operation command stream is transmitted back to the background, and the background converts the received operation command stream into the operation command stream to finish the modification of the stored CAD drawings.
In some embodiments, the ID of the drawn SVG primitive is bound to background data (stored by database data) to display hidden information for more of the original CAD image.
The binding of the ID may be a binding between the foreground data and the background data, and the ID is expressed as the ID of the background data.
Based on the foregoing, embodiments of the present invention are described as follows:
the undistorted display of the CAD drawing can be realized without installing a CAD plug-in unit at the front-end user end, and the drawing display is smooth.
Drawing and monitoring events in the SVG control by adopting the Javascript language can be compatible with all current browsers.
As long as the operation platform and the system supporting the browser can display CAD drawings, cross-platform and cross-system display of CAD drawings is realized, the compatibility is good, all the platforms are developed and operated once, and the development and popularization are easy.
Claims (6)
1. A method for displaying and operating CAD drawings at the front end of Web is characterized in that operation commands aiming at the CAD drawings displayed at the front end of Web are packaged to be in one-to-one correspondence with instructions of CAD drawings operation; the method comprises the following steps:
the Web front end makes a request;
the server side responds to the request, extracts a CAD drawing file, encapsulates the CAD drawing file into a contracted data exchange format and sends the CAD drawing file to the Web front end which makes the request;
the Web front end converts the obtained data exchange format into an SVG file;
the Web front end calls an operation command to operate the SVG graphic primitive displayed on the Web front end, and the Web front end modifies the displayed SVG graphic primitive according to the operation command; the Web front end records the operation command or stores the modified SVG file;
packaging the operation command or SVG file into the data exchange format and transmitting the data exchange format back to a server side;
the server end analyzes the data exchange format, converts the data exchange format into a CAD drawing or modifies the CAD drawing according to an operation instruction adapted by an operation command;
CAD drawing data packaged by the server are all CAD primitives and attribute values of the CAD primitives of the CAD drawing;
and binding the operation command aiming at the current SVG primitive, and using the operation command for displaying the operation of the SVG primitive at the front end of the Web and the operation command for modifying the primitive in the background CAD drawing when the operation command is transmitted back to the server segment.
2. The method of claim 1, wherein the data exchange format is a Json data format.
3. The method of claim 1, wherein the attribute values include coordinate values of CAD primitives, and wherein the SVG coordinate values and the SVG primitive reconstruction drawing are adapted first at the Web front end according to the coordinate values.
4. The method of claim 1, wherein the operation command is adapted to an operation command of the CAD and is presented at the Web front end in the form of a button that, in response to a mouse operation, performs the same operation as the CAD operation command.
5. The method of claim 1, wherein the operation on the SVG primitives comprises adding new SVG primitives;
binding SVG primitives displayed at the front end of Web with primitive data of CAD drawings stored in the background;
when an SVG primitive is newly added at the front end of the Web, background data is modified in real time in the background, and the modified background data is bound with the newly added SVG primitive.
6. The method of claim 5, wherein the binding between the SVG primitives presented at the Web front end and the primitive data of the CAD drawing stored in the background is a binding by CAD drawing ID.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911133037.0A CN110968944B (en) | 2019-11-19 | 2019-11-19 | Method for displaying and operating CAD drawing on Web front end |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911133037.0A CN110968944B (en) | 2019-11-19 | 2019-11-19 | Method for displaying and operating CAD drawing on Web front end |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN110968944A CN110968944A (en) | 2020-04-07 |
| CN110968944B true CN110968944B (en) | 2023-08-15 |
Family
ID=70030838
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201911133037.0A Active CN110968944B (en) | 2019-11-19 | 2019-11-19 | Method for displaying and operating CAD drawing on Web front end |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110968944B (en) |
Families Citing this family (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111524212A (en) * | 2020-04-23 | 2020-08-11 | 浙江精工钢结构集团有限公司 | WebGL technology-based webpage-side CAD drawing viewing system and method |
| CN111710014A (en) * | 2020-08-20 | 2020-09-25 | 杭州品茗安控信息技术股份有限公司 | Double-code network graph display method, device, equipment and storage medium |
| CN112100123B (en) * | 2020-08-31 | 2023-06-09 | 长江空间信息技术工程有限公司(武汉) | Method for layering and displaying large-data-volume CAD (computer aided design) files at front end of Web |
| CN112214622A (en) * | 2020-10-22 | 2021-01-12 | 兰居(北京)数字科技有限公司 | Data processing method and device for rapidly displaying AutoCAD drawing |
| CN112419507A (en) * | 2020-11-10 | 2021-02-26 | 上海纳汇五金制品有限公司 | 3Dweb model online display method and system |
| CN112597101A (en) * | 2020-11-16 | 2021-04-02 | 北京明朝万达科技股份有限公司 | Method and device for converting topological graph file into SVG file based on web front end |
| CN113111044A (en) * | 2021-04-07 | 2021-07-13 | 多点(深圳)数字科技有限公司 | Data processing method and device, server device and storage medium |
| CN115665120B (en) * | 2022-12-28 | 2023-03-21 | 浙江华东工程数字技术有限公司 | Cloud CAD processing method and system, computer equipment and storage medium |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103078958A (en) * | 2013-02-05 | 2013-05-01 | 北京四方继保自动化股份有限公司 | Real-time monitoring supervising method for WEB mode of power SCADA (Supervisory Control And Data Acquisition) on basis of combining SVG (Scalable Vector Graphics) with RIA (Rich Internet Application) |
| CN107239266A (en) * | 2016-03-29 | 2017-10-10 | 罗森伯格技术（昆山）有限公司 | A kind of method and device for showing CAD diagram paper without plug-in unit in WEB front-end |
| CN108009346A (en) * | 2017-11-29 | 2018-05-08 | 上海电科智能系统股份有限公司 | According to the method for DXF form engineering drawing Fast Drawing SVG form maps |
| CN108509192A (en) * | 2018-03-28 | 2018-09-07 | 南京智格电力科技有限公司 | A kind of Web display methods based on configuration software SVG issuing services |
| CN110414460A (en) * | 2019-08-02 | 2019-11-05 | 金瓜子科技发展（北京）有限公司 | A kind of data processing method and device |
-
2019
- 2019-11-19 CN CN201911133037.0A patent/CN110968944B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103078958A (en) * | 2013-02-05 | 2013-05-01 | 北京四方继保自动化股份有限公司 | Real-time monitoring supervising method for WEB mode of power SCADA (Supervisory Control And Data Acquisition) on basis of combining SVG (Scalable Vector Graphics) with RIA (Rich Internet Application) |
| CN107239266A (en) * | 2016-03-29 | 2017-10-10 | 罗森伯格技术（昆山）有限公司 | A kind of method and device for showing CAD diagram paper without plug-in unit in WEB front-end |
| CN108009346A (en) * | 2017-11-29 | 2018-05-08 | 上海电科智能系统股份有限公司 | According to the method for DXF form engineering drawing Fast Drawing SVG form maps |
| CN108509192A (en) * | 2018-03-28 | 2018-09-07 | 南京智格电力科技有限公司 | A kind of Web display methods based on configuration software SVG issuing services |
| CN110414460A (en) * | 2019-08-02 | 2019-11-05 | 金瓜子科技发展（北京）有限公司 | A kind of data processing method and device |
Also Published As
| Publication number | Publication date |
|---|---|
| CN110968944A (en) | 2020-04-07 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110968944B (en) | Method for displaying and operating CAD drawing on Web front end | |
| JP7354294B2 (en) | System and method for providing responsive editing and display integrating hierarchical fluid components and dynamic layout | |
| CN104216691B (en) | A kind of method and device for creating application | |
| EP2174295B1 (en) | Data system and method | |
| JP5306429B2 (en) | Method for digital document processing | |
| US9047261B2 (en) | Document editing method | |
| CN107832108A (en) | Rendering intent, device and the electronic equipment of 3D canvas web page elements | |
| KR101494844B1 (en) | System for Transforming Chart Using Metadata and Method thereof | |
| WO2016054549A1 (en) | Application prototyping tool | |
| CN106484408A (en) | A kind of node relationships figure display methods based on HTML5 and system | |
| US10049095B2 (en) | In-context editing of output presentations via automatic pattern detection | |
| US7962895B2 (en) | Language for binding scalable vector graphics elements to java classes | |
| CN112464119B (en) | Web-end-based SCADA (supervisory control and data acquisition) online configuration editing method | |
| CN112364496B (en) | Avionics simulation panel generation system based on HTML5 and VUE technologies | |
| CN109948103A (en) | Web-based image edit method, image editing apparatus and electronic equipment | |
| CN114842151A (en) | Digital twin-based scalable vector graphics label display method | |
| CN114895891A (en) | Graphic software processing method and device, electronic equipment and storage medium | |
| US20150084961A1 (en) | Map performance by dynamically reducing map detail | |
| CN116245052A (en) | Drawing migration method, device, equipment and storage medium | |
| KR101546359B1 (en) | Web page making system and method for maintaining compatibility of web browser and font | |
| JP2017027319A (en) | Display/editing/storage method, device, and processing program of document documentation data | |
| CN112269960B (en) | Webpage updating method, system, equipment and storage medium based on associated report | |
| Fuchs et al. | Maintenance support: case study for a multimodal mobile user interface | |
| CN106446136A (en) | Method for displaying data map on intelligent terminal | |
| CN115469870A (en) | File online processing method and device, electronic equipment and medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |