CN117786258A - Model display method, device, electronic equipment and storage medium - Google Patents
Model display method, device, electronic equipment and storage medium Download PDFInfo
- Publication number
- CN117786258A CN117786258A CN202410212214.9A CN202410212214A CN117786258A CN 117786258 A CN117786258 A CN 117786258A CN 202410212214 A CN202410212214 A CN 202410212214A CN 117786258 A CN117786258 A CN 117786258A
- Authority
- CN
- China
- Prior art keywords
- model
- displayed
- information
- graphic
- svg
- 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
- 238000000034 method Methods 0.000 title claims abstract description 50
- 238000012545 processing Methods 0.000 claims abstract description 30
- 230000004044 response Effects 0.000 claims abstract description 22
- 230000010354 integration Effects 0.000 claims description 9
- 238000004590 computer program Methods 0.000 claims description 6
- 238000004458 analytical method Methods 0.000 claims description 3
- 238000004891 communication Methods 0.000 description 6
- 238000011161 development Methods 0.000 description 6
- 238000013523 data management Methods 0.000 description 5
- 238000010586 diagram Methods 0.000 description 4
- 230000009466 transformation Effects 0.000 description 4
- 230000006870 function Effects 0.000 description 3
- 238000012423 maintenance Methods 0.000 description 3
- 238000007726 management method Methods 0.000 description 3
- 230000008859 change Effects 0.000 description 2
- 238000010276 construction Methods 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 238000003032 molecular docking Methods 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 230000008569 process Effects 0.000 description 2
- 238000011160 research Methods 0.000 description 2
- 239000003086 colorant Substances 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 230000001788 irregular Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 238000000844 transformation Methods 0.000 description 1
- 238000013519 translation Methods 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
- 238000012800 visualization Methods 0.000 description 1
Classifications
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Abstract
The invention provides a model display method, a device, electronic equipment and a storage medium, and relates to the technical field of image data processing, wherein the method comprises the following steps: obtaining SVG documents corresponding to the model to be displayed; analyzing the SVG document to obtain SVG element information corresponding to the model to be displayed; the SVG element information comprises model graphic information; embedding SVG element information into a front-end webpage; and generating and displaying a model image of the model to be displayed on the front-end webpage based on the model graphic information in response to a display instruction of the user. By the mode, since the SVG element information comprises the model graphic information and can be directly used as an independent DOM element to be bound with the JavaScript for operation, when the Web system receives a display instruction of a user, drawing of the graphic can be operated through the JavaScript according to the display instruction of the user, and further, a model image is generated and displayed on a front-end webpage.
Description
Technical Field
The present invention relates to the field of image data processing technologies, and in particular, to a model display method, a device, an electronic apparatus, and a storage medium.
Background
With the development of modeling technology, a method for realizing business analysis processing by constructing a model has been popular. Existing models are mostly presented in the form of images, and contain various graphics, for example, an intelligent park model usually contains a plurality of sub-modules, each sub-module may be regular or irregular graphics, and displaying the model on a front-end webpage is also a real requirement.
HTML5 is the most widely used language on the internet at present, and is also the main language forming the front-end web page document, and the interaction between the user and the front-end web page is realized through frame components such as HTML, CSS, javaScript, and the like. Canvas is a newly added HTML element of HTML5, which can be used for drawing various graphics; DOM operations of JavaScript may be used to change the content and properties of the HTML elements, and thus the content and style of the front-end web page display.
However, the Canvas cannot be used as an independent DOM element to perform binding manipulation with JavaScript, so that it is difficult for a Web (World Wide Web) system to generate and display a model image on a front-end webpage according to an interaction instruction of a user, and therefore how to display the model image on the front-end webpage of the Web system becomes a problem to be solved urgently.
Disclosure of Invention
The invention provides a model display method, a device, electronic equipment and a storage medium, which are used for solving the defect that in the prior art, model images are difficult to generate and display on a front-end webpage of a Web system.
The invention provides a model display method, which comprises the following steps: obtaining SVG documents corresponding to the model to be displayed; analyzing the SVG document to obtain SVG element information corresponding to the model to be displayed; the SVG element information comprises model graphic information; embedding SVG element information into a front-end webpage; and generating and displaying a model image of the model to be displayed on the front-end webpage based on the model graphic information in response to a display instruction of the user.
According to the model display method provided by the invention, before the SVG document corresponding to the model to be displayed is obtained, the method further comprises the following steps: drawing all graphs contained in the model to be displayed based on the image processing tool; the image processing tool is used for generating SVG documents; and exporting all drawn graphs to generate an SVG document corresponding to the model to be displayed.
According to the model display method provided by the invention, the graph is an SVG vector graph, and the shape of the SVG vector graph is a path formed by a straight line and a curve; drawing all graphics contained in the model to be displayed based on the image processing tool, including: and drawing a path of each graph contained in the model to be displayed based on the image processing tool, and generating all graphs contained in the model to be displayed.
According to the model display method provided by the invention, a model image of a model to be displayed is generated and displayed on a front-end webpage based on model graphic information in response to a display instruction of a user, and the model display method comprises the following steps: responding to a display instruction of a user, and generating all graphs contained in a model to be displayed based on model graph information; the model graphic information comprises one or more of graphic identification information, graphic serial number information, graphic category information, graphic path information and graphic description information; and arranging all graphs contained in the model to be displayed, and generating and displaying a model image of the model to be displayed on a front-end webpage.
According to the model display method provided by the invention, after SVG element information is embedded into the front-end webpage, the method further comprises the following steps: responding to a preview instruction of a user, and generating and displaying a preview image of a model to be displayed on a front-end webpage based on model graphic information; the model graphic information comprises one or more of graphic identification information, graphic serial number information, graphic category information, graphic path information and graphic description information; judging whether the model to be displayed can be normally displayed in the front-end webpage or not based on the preview image; if the model to be displayed can be normally displayed in the front-end webpage, generating and displaying a model image of the model to be displayed on the front-end webpage based on the model graphic information in response to a display instruction of a user.
According to the model display method provided by the invention, after generating and displaying the model image of the model to be displayed on the basis of the model graphic information in response to the display instruction of the user, the method further comprises the following steps: and responding to an editing instruction of a user, editing SVG element information of the model to be displayed on the front-end webpage, updating the SVG element information embedded into the front-end webpage, and generating an updated model image.
According to the model display method provided by the invention, after SVG element information is embedded into the front-end webpage, the method further comprises the following steps: generating and exporting code data corresponding to the front-end webpage; and transmitting the code data to equipment capable of realizing front-end webpage display, so that the equipment generates and displays a model image of the model to be displayed based on the code data.
The invention also provides a model display device, comprising: the acquisition module is used for acquiring SVG documents corresponding to the model to be displayed; the analysis module is used for analyzing the SVG document and acquiring SVG element information corresponding to the model to be displayed; the SVG element information comprises model graphic information; the integration module is used for embedding SVG element information into the front-end webpage; and the display module is used for responding to a display instruction of a user, generating and displaying a model image of the model to be displayed on the front-end webpage based on the model graphic information.
The invention also provides an electronic device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, the processor implementing the model display method as described in any one of the above when executing the program.
The invention also provides a non-transitory computer readable storage medium having stored thereon a computer program which, when executed by a processor, implements a model display method as described in any of the above.
The invention provides a model display method, a model display device, electronic equipment and a storage medium, wherein SVG documents corresponding to a model to be displayed are obtained; analyzing the SVG document to obtain SVG element information corresponding to the model to be displayed; the SVG element information comprises model graphic information; embedding SVG element information into a front-end webpage; and generating and displaying a model image of the model to be displayed on the front-end webpage based on the model graphic information in response to a display instruction of the user. By the method, after SVG documents corresponding to the model to be displayed are analyzed, SVG element information corresponding to the model to be displayed is obtained, the SVG element information is embedded into the front-end webpage, and because the SVG element information comprises model graphic information and can be directly used as an independent DOM element to be bound with JavaScript for operation, when a Web system receives a display instruction of a user, drawing of graphics can be operated through the JavaScript according to the display instruction of the user, and further a model image is generated and displayed on the front-end webpage.
Drawings
In order to more clearly illustrate the invention or the technical solutions of the prior art, the following description will briefly explain the drawings used in the embodiments or the description of the prior art, and it is obvious that the drawings in the following description are some embodiments of the invention, and other drawings can be obtained according to the drawings without inventive effort for a person skilled in the art.
FIG. 1 is a schematic flow chart of a model display method provided by the invention;
FIG. 2 is a schematic diagram of a model display device according to the present invention;
fig. 3 is a schematic structural diagram of an electronic device provided by the present invention.
Detailed Description
For the purpose of making the objects, technical solutions and advantages of the present invention more apparent, the technical solutions of the present invention will be clearly and completely described below with reference to the accompanying drawings, and it is apparent that the described embodiments are some embodiments of the present invention, not all embodiments. All other embodiments, which can be made by those skilled in the art based on the embodiments of the invention without making any inventive effort, are intended to be within the scope of the invention.
Referring to fig. 1, fig. 1 is a flow chart of a model display method provided by the invention. In this embodiment, the model display method includes steps S110 to S140, and each step is specifically as follows:
s110: and obtaining the SVG document corresponding to the model to be displayed.
Existing models are mostly presented in the form of images, containing a variety of graphics. Since models are mostly presented in the form of images, models can be stored mostly in image format.
SVG (Scalable Vector Graphics ) is an image file format for describing vector graphics in an image, which supports scaling of graphics and ensures that the image is not distorted. SVG documents are based on XML code implementation, are documents conforming to W3C standard file formats, and have high suitability with front-end Web pages, so SVG element information of SVG documents can be embedded into front-end Web pages integrated into a Web system.
Specifically, after all the graphics contained in the model to be displayed are drawn, all the graphics of the model to be displayed can be exported, an SVG document corresponding to the model to be displayed is generated, and the data of the model to be displayed is stored in the form of the SVG document.
S120: and analyzing the SVG document to obtain SVG element information corresponding to the model to be displayed.
The SVG element information includes model graphics information.
Specifically, the SVG document corresponding to the model to be displayed contains SVG element information corresponding to the model to be displayed, the SVG element information includes model graphics information, and a complete model can be drawn and restored according to the model graphics information, so that the SVG document needs to be parsed, the SVG element information corresponding to the model to be displayed is obtained, and is embedded into a front-end webpage, so that the Web system can draw and generate the complete model on the front-end webpage according to the model graphics information in the SVG element information.
Specifically, the SVG element information includes a root element, a graphic element, a style element, a transformation element, and other auxiliary elements.
The root element is used for defining the width, the height and the attribute of the model graph; the graphic elements are used to define the shape of the model graphic, such as circles, rectangles, trapezoids, etc.; the style element is used for defining the style of the model graph, such as the filling color, the frame style, the gradual change effect and the like of the graph; the transformation elements are used for defining translation, rotation, scaling and other transformations of the model graph; other auxiliary elements are used to define text descriptions, image descriptions, etc. of the model graphics, such as graphic identification information, graphic serial number information, graphic category information, graphic path information, graphic description information, etc.
Based on the root element, the graphic element, the style element, the transformation element, and other auxiliary elements, model graphic information may be determined.
S130: and embedding the SVG element information into the front-end webpage.
After SVG element information corresponding to the model to be displayed is obtained, the SVG element information is embedded into the front-end webpage, and integration of the SVG element information and the Web system is achieved, so that the Web system can draw and generate a complete model on the front-end webpage according to model graphic information in the SVG element information embedded into the front-end webpage.
Specifically, the SVG document is realized based on XML codes, SVG element information is recorded in the SVG document in a code form, the SVG document is analyzed, and the SVG element information in the code form can be obtained; and embedding the SVG element information in the code form into the code of the front-end webpage, so that the integration of the SVG element information and the Web system can be realized.
It should be noted that, in the code of the front-end webpage, the SVG element information in the code form can be directly used as an independent DOM element to perform binding operation with JavaScript, so that the Web system has the capability of directly operating the SVG element information embedded into the front-end webpage through the JavaScript, and further, the Web system can draw and generate a complete model in the front-end webpage according to the model graphic information in the SVG element information embedded into the front-end webpage.
S140: and generating and displaying a model image of the model to be displayed on the front-end webpage based on the model graphic information in response to a display instruction of the user.
The user may send related event instructions, such as display instructions, preview instructions, edit instructions, move instructions, etc., to the Web system via the front-end Web page of the Web system.
Specifically, after the Web system receives a display instruction sent by a user through a front-end interface, the Web system can respond to the display instruction of the user, based on model graphic information, generate and display a model image of a model to be displayed on a front-end webpage through drawing of a JavaScript control graphic, and realize visualization of a complex model.
According to the model display method provided by the embodiment, SVG documents corresponding to the model to be displayed are obtained; analyzing the SVG document to obtain SVG element information corresponding to the model to be displayed; the SVG element information comprises model graphic information; embedding SVG element information into a front-end webpage; and generating and displaying a model image of the model to be displayed on the front-end webpage based on the model graphic information in response to a display instruction of the user. By the method, after SVG documents corresponding to the model to be displayed are analyzed, SVG element information corresponding to the model to be displayed is obtained, the SVG element information is embedded into the front-end webpage, and because the SVG element information comprises model graphic information and can be directly used as an independent DOM element to be bound with JavaScript for operation, when a Web system receives a display instruction of a user, drawing of graphics can be operated through the JavaScript according to the display instruction of the user, and further a model image is generated and displayed on the front-end webpage.
In some embodiments, before obtaining the SVG document corresponding to the model to be displayed, the method further includes: drawing all graphs contained in the model to be displayed based on the image processing tool; the image processing tool is used for generating SVG documents; and exporting all drawn graphs to generate an SVG document corresponding to the model to be displayed.
Existing models are mostly presented in the form of images, containing a variety of graphics, so the model can be drawn based on image processing tools.
Specifically, all graphs contained in the model to be displayed are drawn based on the image processing tool, and all graphs can jointly form a complete model; after the drawing of the model to be displayed is completed, all drawn graphs are exported through an image processing tool, and SVG documents corresponding to the model to be displayed are generated.
It will be appreciated that since the SVG document needs to be exported by an image processing tool, in this embodiment the image processing tool should be software that can support the SVG format.
Optionally, the image processing tool is a MacSVG、Sketsa SVG Editor、Adobe Illustrator、One or more of Photoshop.
Preferably, the image processing tool is Photoshop.
Photoshop is a specialized image processing tool that is used to process digital images, and numerous editing and drawing tools of the Photoshop configuration can effectively support picture editing and creation work.
In some embodiments, the graphic is an SVG vector graphic, the shape of which is a path consisting of straight lines and curves.
Drawing all graphics contained in the model to be displayed based on the image processing tool, including: and drawing a path of each graph contained in the model to be displayed based on the image processing tool, and generating all graphs contained in the model to be displayed.
Specifically, the drawing component of the Photoshop comprises a pen tool, and the drawing of the drawing component of the Photoshop is SVG vector drawing; the path of each graph contained in the model to be displayed can be drawn through a pen tool of Photoshop, and all graphs contained in the model to be displayed are generated.
For example, one community map model includes a plurality of regions, each region is communicated through different paths, different regions can be represented by different shapes and different colors of graphics, and different paths can be represented by straight lines or curves; all graphics contained in the community map model can be drawn through the pen tool of Photoshop.
Further, after the drawing of the model is completed, all drawn graphs are exported through Photoshop, and SVG documents corresponding to the model to be displayed are generated.
According to the model display method provided by the embodiment, all graphics contained in the model are drawn through a professional image processing tool Photoshop, an SVG document corresponding to the model to be displayed is generated, the SVG document corresponding to the model to be displayed is analyzed, SVG element information corresponding to the model to be displayed is embedded into a front-end webpage after being obtained, and because the SVG element information comprises model graphics information and can be directly used as independent DOM elements to be bound and controlled with JavaScript, when a Web system receives a display instruction of a user, drawing of the graphics can be controlled through JavaScript according to the display instruction of the user, and then a model image is generated and displayed on the front-end webpage.
In some embodiments, generating and displaying a model image of a model to be displayed on a front-end web page based on model graphics information in response to a display instruction of a user, includes: responding to a display instruction of a user, and generating all graphs contained in a model to be displayed based on model graph information; the model graphic information comprises one or more of graphic identification information, graphic serial number information, graphic category information, graphic path information and graphic description information; and arranging all graphs contained in the model to be displayed, and generating and displaying a model image of the model to be displayed on a front-end webpage.
Specifically, after the SVG element information is embedded into the front-end Web page, the user may send a display instruction to the Web system through the front-end Web page of the Web system, where the display instruction includes information related to the model display requirement.
Further, the Web system responds to a display instruction of a user, and generates all graphics contained in the model to be displayed based on the model graphics information by controlling drawing of the graphics through JavaScript.
The model graphic information comprises one or more of graphic identification information, graphic serial number information, graphic category information, graphic path information and graphic description information.
Based on the model graphic information, all graphics contained by the model may be generated and laid out.
Further, the Web system performs arrangement processing on all graphics contained in the model to be displayed, and generates and displays a model image of the model to be displayed on a front-end webpage.
According to the model display method, the Web system responds to the display instruction of the user, drawing of the graph is controlled through JavaScript, and further, model images are generated and displayed on the front-end webpage, so that the programming design and the visual processing of the model are realized, the operation is simple, the integration is convenient, and the speed of model construction is improved.
In some embodiments, after embedding the SVG element information into the front-end web page, further comprising: responding to a preview instruction of a user, and generating and displaying a preview image of a model to be displayed on a front-end webpage based on model graphic information; the model graphic information comprises one or more of graphic identification information, graphic serial number information, graphic category information, graphic path information and graphic description information; judging whether the model to be displayed can be normally displayed in the front-end webpage or not based on the preview image; if the model to be displayed can be normally displayed in the front-end webpage, generating and displaying a model image of the model to be displayed on the front-end webpage based on the model graphic information in response to a display instruction of a user.
Optionally, after the SVG element information is embedded into the front-end web page, a model preview may be performed to determine whether the model to be displayed can be normally displayed in the front-end web page.
Specifically, after the SVG element information is embedded into the front-end Web page, the user may send a preview instruction to the Web system through the front-end Web page of the Web system, where the preview instruction includes information related to the model preview requirement.
Further, the Web system generates and displays a preview image of the model to be displayed on the front-end Web page based on the model graphic information in response to a preview instruction of the user.
The model graphic information comprises one or more of graphic identification information, graphic serial number information, graphic category information, graphic path information and graphic description information.
Further, based on the preview image, whether the model to be displayed can be normally displayed in the front-end webpage is judged.
If the model to be displayed can be normally displayed in the front-end webpage, generating and displaying a model image of the model to be displayed on the front-end webpage based on the model graphic information in response to a display instruction of a user.
If the model to be displayed cannot be normally displayed in the front-end webpage, the SVG document can be parsed again, SVG element information corresponding to the model to be displayed is obtained, the obtained SVG element information is embedded into the front-end webpage, and integration of the SVG element information and the Web system is carried out again.
According to the model display method, the preview function is integrated, and the preview function is used for generating and displaying the preview image of the model to be displayed, so that a user can judge whether the model to be displayed can be normally displayed in the front-end webpage according to the preview image, errors possibly existing in the Web system are detected in time and improved, and the operation and maintenance management of the Web system is facilitated.
In some embodiments, after generating and displaying the model image of the model to be displayed on the front-end web page based on the model graphic information in response to the display instruction of the user, further comprising: and responding to an editing instruction of a user, editing SVG element information of the model to be displayed on the front-end webpage, updating the SVG element information embedded into the front-end webpage, and generating an updated model image.
Optionally, after the SVG element information is embedded into the front-end webpage, the user can edit the model on the front-end webpage, so as to realize online development and maintenance of the model.
Specifically, after the SVG element information is embedded into the front-end Web page, the user may send an editing instruction to the Web system through the front-end Web page of the Web system, where the editing instruction includes information related to the model editing requirement.
Further, the Web system responds to an editing instruction of a user, edits SVG element information of the model to be displayed on the front-end webpage, updates the SVG element information embedded into the front-end webpage, and generates an updated model image.
For example, for each graphic (sub-module) in the model, edit instructions such as move up, move out, click, double click, zoom, etc. can be generated by the mouse; the Web system responds to an editing instruction of a user, edits SVG element information of the model to be displayed on the front-end webpage, updates the SVG element information embedded into the front-end webpage, thereby realizing the editing of the model and generating an updated model image.
According to the model display method, an editing function is integrated, the model can be edited on the front-end webpage of the Web system according to an editing instruction of a user, online development and maintenance of the model are achieved, and development speed of model construction can be improved; the flexible modeling mode can also enable more non-research personnel to participate in the editing development process of the model, reduce investment on the research personnel and reduce the cost of model development.
In some embodiments, after embedding the SVG element information into the front-end web page, further comprising: generating and exporting code data corresponding to the front-end webpage; and transmitting the code data to equipment capable of realizing front-end webpage display, so that the equipment generates and displays a model image of the model to be displayed based on the code data.
SVG file is realized based on XML code, SVG element information is recorded in the SVG file in a code form, the SVG file is analyzed, the SVG element information in the code form can be obtained, the SVG element information in the code form is embedded into the code of the front-end webpage, and the integration of the SVG element information and the Web system is realized.
After integration of the SVG element information and the Web system is achieved, code data corresponding to a front-end webpage of the Web system can be generated and derived, and the code data is sent to equipment capable of achieving front-end webpage display, so that the equipment can generate and display a model image of a model to be displayed based on the code data.
Preferably, the Web system may use a unified API (Application Programming Interface ) interface docking specification to support other external systems, functional modules, terminal devices, and the like to call the required codes through the relevant interfaces, and perform model display according to the data format requirement of the model display.
According to the model display method provided by the embodiment, after SVG element information is embedded into the front-end webpage, codes corresponding to the front-end webpage are generated and exported, the Web system provides unified API interface docking specifications, other external systems, functional modules, terminal equipment and the like are supported to call required code data through relevant interfaces, so that other modules or equipment can generate and display model images of a model to be displayed based on the code data, and service expansion is facilitated.
The present invention also provides a model display device, please refer to fig. 2, fig. 2 is a schematic structural diagram of the model display device provided by the present invention, in this embodiment, the model display device includes an obtaining module 210, an analyzing module 220, an integrating module 230 and a display module 240.
The obtaining module 210 is configured to obtain an SVG document corresponding to the model to be displayed.
And the analyzing module 220 is used for analyzing the SVG document and obtaining SVG element information corresponding to the model to be displayed.
The SVG element information includes model graphics information.
The integration module 230 is configured to embed SVG element information into the front-end web page.
The display module 240 is configured to generate and display a model image of a model to be displayed on a front-end web page based on the model graphic information in response to a display instruction of a user.
In some embodiments, before the obtaining module 210 is configured to obtain the SVG document corresponding to the model to be displayed, the obtaining module further includes: drawing all graphs contained in the model to be displayed based on the image processing tool; the image processing tool is used for generating SVG documents; and exporting all drawn graphs to generate an SVG document corresponding to the model to be displayed.
In some embodiments, the graphic is an SVG vector graphic, the shape of which is a path consisting of straight lines and curves.
The obtaining module 210 is configured to draw a path of each graphic included in the model to be displayed based on the image processing tool, and generate all the graphics included in the model to be displayed.
In some embodiments, the display module 240 is configured to generate and display, based on the model graphic information, a model image of a model to be displayed on a front-end web page in response to a display instruction of a user, including: responding to a display instruction of a user, and generating all graphs contained in a model to be displayed based on model graph information; the model graphic information comprises one or more of graphic identification information, graphic serial number information, graphic category information, graphic path information and graphic description information; and arranging all graphs contained in the model to be displayed, and generating and displaying a model image of the model to be displayed on a front-end webpage.
In some embodiments, the display module 240 is configured to generate and display, on the front-end web page, a preview image of the model to be displayed based on the model graphic information in response to a preview instruction of the user; the model graphic information comprises one or more of graphic identification information, graphic serial number information, graphic category information, graphic path information and graphic description information; judging whether the model to be displayed can be normally displayed in the front-end webpage or not based on the preview image; if the model to be displayed can be normally displayed in the front-end webpage, generating and displaying a model image of the model to be displayed on the front-end webpage based on the model graphic information in response to a display instruction of a user.
In some embodiments, the display module 240 is configured to respond to an editing instruction of a user, perform editing processing on SVG element information of a model to be displayed on a front-end webpage, update the SVG element information embedded in the front-end webpage, and generate an updated model image.
In some embodiments, the model display device further comprises a management module.
The management module is used for generating and exporting code data corresponding to the front-end webpage; and transmitting the code data to equipment capable of realizing front-end webpage display, so that the equipment generates and displays a model image of the model to be displayed based on the code data.
The present invention also provides a specific example of a model display device, which includes a model data generation module and a model data management module.
The model data generation module is used for acquiring SVG documents corresponding to the model to be displayed; analyzing the SVG document to obtain SVG element information corresponding to the model to be displayed; the SVG element information comprises model graphic information; and embedding the SVG element information into the front-end webpage.
And the model data management module is used for responding to a display instruction of a user, generating and displaying a model image of the model to be displayed on the front-end webpage based on the model graphic information.
The model data management module is also used for responding to a preview instruction of a user, generating and displaying a preview image of the model to be displayed on the front-end webpage based on the model graphic information; the model graphic information comprises one or more of graphic identification information, graphic serial number information, graphic category information, graphic path information and graphic description information; judging whether the model to be displayed can be normally displayed in the front-end webpage or not based on the preview image; if the model to be displayed can be normally displayed in the front-end webpage, generating and displaying a model image of the model to be displayed on the front-end webpage based on the model graphic information in response to a display instruction of a user.
And the model data management module is also used for responding to an editing instruction of a user, editing SVG element information of the model to be displayed on the front-end webpage, updating the SVG element information embedded into the front-end webpage and generating an updated model image.
The model data management module is also used for generating and exporting code data corresponding to the front-end webpage; and transmitting the code data to equipment capable of realizing front-end webpage display, so that the equipment generates and displays a model image of the model to be displayed based on the code data.
The present invention also provides an electronic device, please refer to fig. 3, fig. 3 is a schematic structural diagram of the electronic device provided by the present invention, and as shown in fig. 3, the electronic device may include: processor 310, communication interface (Communications Interface) 320, memory 330 and communication bus 340, wherein processor 310, communication interface 320, memory 330 accomplish communication with each other through communication bus 340. The processor 310 may invoke logic instructions in the memory 330 to perform the model display method.
Further, the logic instructions in the memory 330 described above may be implemented in the form of software functional units and may be stored in a computer-readable storage medium when sold or used as a stand-alone product. Based on this understanding, the technical solution of the present invention may be embodied essentially or in a part contributing to the prior art or in a part of the technical solution, in the form of a software product stored in a storage medium, comprising several instructions for causing a computer device (which may be a personal computer, a server, a network device, etc.) to perform all or part of the steps of the method according to the embodiments of the present invention. And the aforementioned storage medium includes: a U-disk, a removable hard disk, a Read-Only Memory (ROM), a random access Memory (RAM, random Access Memory), a magnetic disk, or an optical disk, or other various media capable of storing program codes.
The present invention also provides a non-transitory computer readable storage medium having stored thereon a computer program which, when executed by a processor, is implemented to perform the model display method provided by the above methods.
The apparatus embodiments described above are merely illustrative, wherein the elements illustrated as separate elements may or may not be physically separate, and the elements shown as elements may or may not be physical elements, may be located in one place, or may be distributed over a plurality of network elements. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of this embodiment. Those of ordinary skill in the art will understand and implement the present invention without undue burden.
From the above description of the embodiments, it will be apparent to those skilled in the art that the embodiments may be implemented by means of software plus necessary general hardware platforms, or of course may be implemented by means of hardware. Based on this understanding, the foregoing technical solution may be embodied essentially or in a part contributing to the prior art in the form of a software product, which may be stored in a computer readable storage medium, such as ROM/RAM, a magnetic disk, an optical disk, etc., including several instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) to execute the method described in the respective embodiments or some parts of the embodiments.
Finally, it should be noted that: the above embodiments are only for illustrating the technical solution of the present invention, and are not limiting; although the invention has been described in detail with reference to the foregoing embodiments, it will be understood by those of ordinary skill in the art that: the technical scheme described in the foregoing embodiments can be modified or some technical features thereof can be replaced by equivalents; such modifications and substitutions do not depart from the spirit and scope of the technical solutions of the embodiments of the present invention.
Claims (10)
1. A model display method, characterized by comprising:
obtaining SVG documents corresponding to the model to be displayed;
analyzing the SVG document to obtain SVG element information corresponding to the model to be displayed; the SVG element information comprises model graphic information;
embedding the SVG element information into a front-end webpage;
and generating and displaying the model image of the model to be displayed on the front-end webpage based on the model graphic information in response to a display instruction of a user.
2. The method for displaying a model according to claim 1, further comprising, before the step of obtaining the SVG document corresponding to the model to be displayed:
drawing all graphics contained in the model to be displayed based on an image processing tool; the image processing tool is used for generating SVG documents;
and exporting all drawn graphs to generate the SVG document corresponding to the model to be displayed.
3. The model display method according to claim 2, wherein the graphic is an SVG vector graphic, the shape of which is a path composed of a straight line and a curved line;
the drawing all graphics contained in the model to be displayed based on the image processing tool comprises the following steps:
and drawing a path of each graph contained in the model to be displayed based on an image processing tool, and generating all graphs contained in the model to be displayed.
4. The model display method according to claim 1, wherein the generating and displaying the model image of the model to be displayed on the front-end web page based on the model graphic information in response to a display instruction of a user includes:
responding to a display instruction of a user, and generating all graphs contained in the model to be displayed based on the model graph information; the model graphic information comprises one or more of graphic identification information, graphic serial number information, graphic category information, graphic path information and graphic description information;
and arranging all graphs contained in the model to be displayed, and generating and displaying a model image of the model to be displayed on the front-end webpage.
5. The method for displaying a model according to claim 1, wherein after embedding the SVG element information into a front-end web page, further comprising:
responding to a preview instruction of a user, and generating and displaying a preview image of the model to be displayed on the front-end webpage based on the model graphic information; the model graphic information comprises one or more of graphic identification information, graphic serial number information, graphic category information, graphic path information and graphic description information;
judging whether the model to be displayed can be normally displayed in the front-end webpage or not based on the preview image;
and if the model to be displayed can be normally displayed in the front-end webpage, generating and displaying a model image of the model to be displayed on the front-end webpage based on the model graphic information in response to a display instruction of a user.
6. The model display method according to claim 1, wherein, in response to a display instruction of a user, after generating and displaying a model image of the model to be displayed on the front-end web page based on the model graphic information, further comprising:
and responding to an editing instruction of a user, editing the SVG element information of the model to be displayed on the front-end webpage, updating the SVG element information embedded into the front-end webpage, and generating an updated model image.
7. The method for displaying a model according to claim 1, wherein after embedding the SVG element information into a front-end web page, further comprising:
generating and deriving code data corresponding to the front-end webpage;
and sending the code data to equipment capable of realizing front-end webpage display, so that the equipment generates and displays a model image of the model to be displayed based on the code data.
8. A model display device, characterized by comprising:
the acquisition module is used for acquiring SVG documents corresponding to the model to be displayed;
the analysis module is used for analyzing the SVG document and acquiring SVG element information corresponding to the model to be displayed; the SVG element information comprises model graphic information;
the integration module is used for embedding the SVG element information into a front-end webpage;
and the display module is used for responding to a display instruction of a user, generating and displaying the model image of the model to be displayed on the front-end webpage based on the model graphic information.
9. An electronic device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, wherein the processor implements the model display method of any one of claims 1 to 7 when the program is executed by the processor.
10. A non-transitory computer readable storage medium, on which a computer program is stored, characterized in that the computer program, when executed by a processor, implements the model display method according to any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202410212214.9A CN117786258A (en) | 2024-02-27 | 2024-02-27 | Model display method, device, electronic equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202410212214.9A CN117786258A (en) | 2024-02-27 | 2024-02-27 | Model display method, device, electronic equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN117786258A true CN117786258A (en) | 2024-03-29 |
Family
ID=90396708
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202410212214.9A Pending CN117786258A (en) | 2024-02-27 | 2024-02-27 | Model display method, device, electronic equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117786258A (en) |
Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116579296A (en) * | 2023-07-04 | 2023-08-11 | 北京佳萌锐普科技发展有限公司 | B/S architecture electronic document preview processing method, device, medium and equipment |
-
2024
- 2024-02-27 CN CN202410212214.9A patent/CN117786258A/en active Pending
Patent Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116579296A (en) * | 2023-07-04 | 2023-08-11 | 北京佳萌锐普科技发展有限公司 | B/S architecture electronic document preview processing method, device, medium and equipment |
Non-Patent Citations (2)
| Title |
|---|
| 全国高等学校教育技术协作委员会编: "现代教育技术研究与应用 本科教学网络课程的建设与应用", 31 March 2006, 中国地质大学出版社, pages: 198 - 202 * |
| 尹元元;: "基于SVG的工作流用户界面设计与实现", 科技信息(科学教研), no. 07, 1 March 2008 (2008-03-01), pages 68 - 69 * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109801347B (en) | Method, device, equipment and medium for generating editable image template | |
| CA2267427C (en) | Font sharing system and method, and recording medium storing program for executing font sharing method | |
| CN104216691B (en) | A kind of method and device for creating application | |
| EP2343670B1 (en) | Apparatus and method for digitizing documents | |
| WO2011060682A1 (en) | System and method for editing mathematical formula based on web | |
| CN110968944A (en) | Method for displaying and operating CAD drawing at Web front end | |
| CN102662921B (en) | A kind of document processing method, device and editing machine | |
| CN110516186A (en) | Page skeleton automatic generating method, equipment, storage medium and device | |
| US20210042381A1 (en) | Interactive and selective coloring of digital vector glyphs | |
| CN112364496B (en) | Avionics simulation panel generation system based on HTML5 and VUE technologies | |
| CN110765734A (en) | Electronic medical record editor based on BS framework | |
| CN111476006B (en) | PDF file online annotation method, device, equipment and readable storage medium | |
| EP1744255A1 (en) | Document processing device and document processing method | |
| US20100269036A1 (en) | System and method for designing and generating online stationery | |
| CN113345048A (en) | Geographic information image editing method and device and computer equipment | |
| EP1744256A1 (en) | Document processing device and document processing method | |
| CN104424174B (en) | Document processing system and document processing method | |
| CN115268904A (en) | User interface design file generation method, device, equipment and medium | |
| CN113111044A (en) | Data processing method and device, server device and storage medium | |
| CN111915705B (en) | Picture visual editing method, device, equipment and medium | |
| EP1837776A1 (en) | Document processing device and document processing method | |
| CN117786258A (en) | Model display method, device, electronic equipment and storage medium | |
| CN116245052A (en) | Drawing migration method, device, equipment and storage medium | |
| CN113312318A (en) | File display method and device and computer equipment | |
| CN107220045B (en) | Station building method, device, equipment and storage medium based on artificial intelligence |
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 |