SVG picture analysis method and device based on cloud configuration, equipment and storage medium
By monitoring operation events on the cloud configuration platform and converting SVG pictures into DOM structure objects, the problem of low efficiency in SVG pictures in traditional technology is solved, and higher reusability and flexibility are achieved.
Patent Information
- Application Number
- CN202411751827.6
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-12-02
- Publication Date
- 2025-03-25
AI Technical Summary
Traditional SVG image drawing and rendering methods lead to large-scale reproduction of images of the same type, which is inefficient in work, and cannot effectively change parameters or animations in SVG images.
By monitoring operation events on the cloud configuration platform, obtaining the information elements of the SVG picture and converting them into the initial DOM structure object, obtaining additional binding information based on the interactive input of the parameter setting panel, updating the DOM structure object and generating the target DOM structure object, and finally rendering and displaying it in the properties panel.
It improves the reusability and work efficiency of SVG image production, reduces the need to repaint the same picture, and enhances the flexible adjustment ability of SVG image parameters and animations.
Smart Images
Figure CN119690307A_ABST
Abstract
Description
Technical Field
[0001] Embodiments of the present application relate to the field of industrial control technology, and in particular to a cloud-configuration-based SVG image parsing method, apparatus, device, and storage medium. Background Art
[0002] SVG images describe graphics based on mathematical formulas and are composed of points, lines, curves, and shapes. Therefore, they can be scaled and transformed losslessly without causing image quality degradation. This allows SVG images to present high-quality images on devices with different resolutions, and is particularly suitable for industrial graphic design that requires high-precision rendering. With the rapid development of the Internet and the popularization of mobile Internet, SVG images are increasingly used in industrial graphic design. Many industrial applications and websites use SVG images to draw elements such as icons and buttons of user interfaces to provide a better user experience.
[0003] The drawing and rendering of traditional SVG images need to be performed on the corresponding configuration software. The corresponding SVG images are usually used as a whole, and the parameters or animations in the SVG images cannot be changed. When changes are required, the SVG images need to be redrawn and the corresponding parameters and animations need to be added during the drawing process. The traditional SVG image drawing and rendering method often results in a large number of images of the same type needing to be remade, and the work efficiency is relatively low. Summary of the invention
[0004] The embodiments of the present application provide a cloud-configuration-based SVG image parsing method, apparatus, device, and storage medium, which can solve the technical problem of low efficiency in SVG image production, improve the production reusability of SVG images, and improve the overall work efficiency of SVG image production.
[0005] In a first aspect, an embodiment of the present application provides an SVG image parsing method based on cloud configuration, which is applied to a cloud configuration platform, including:
[0006] Listening to a first operation event, and when the first operation event is listened to, determining a first SVG image of the first operation event, where the first operation event includes a mouse drag event, a copy and paste event, a selection event, or an insert event;
[0007] Obtaining information elements of the first SVG image, performing conversion processing according to the information elements according to a preset conversion function, and obtaining an initial DOM structure object recognizable by the cloud configuration platform;
[0008] Acquire additional binding information according to the interactive input of the parameter setting panel, the additional binding information including additional parameters and / or animation information;
[0009] Update the initial DOM structure object according to the additional binding information to generate the target DOM structure object;
[0010] Render and display the target DOM structure object in the property panel to display the corresponding target SVG image.
[0011] In one embodiment, after obtaining the information element of the first SVG image and performing conversion processing according to the information element according to a preset conversion function to obtain an initial DOM structure object recognizable by the cloud configuration platform, the method includes:
[0012] Get the class name of the initial DOM structure object, and get the corresponding component list in the first SVG image according to the class name, where each component corresponds to a class name;
[0013] According to the class name, the corresponding component is rendered and displayed in the property panel to display the first SVG image.
[0014] In one embodiment, obtaining additional binding information according to interactive input of the parameter setting panel includes:
[0015] Listening to mouse events, when listening to a mouse click event or a box selection event of the first SVG image displayed based on the property panel, determining a target component from the components of the displayed first SVG image according to the mouse click event or the box selection event, and displaying a parameter setting panel corresponding to the target component;
[0016] Obtain additional binding information based on interactive input in the parameter setting panel;
[0017] The initial DOM structure object is updated according to the additional binding information to generate the target DOM structure object, including:
[0018] Update the DOM structure sub-object corresponding to the target component according to the additional binding information;
[0019] The updated target DOM structure object is obtained according to the updated DOM structure sub-object of the target component.
[0020] In one embodiment, updating the DOM structure sub-object corresponding to the target component according to the additional binding information includes:
[0021] The element attributes corresponding to the target component are modified according to the additional binding information to obtain an updated DOM structure sub-object.
[0022] In one embodiment, rendering and displaying the target DOM structure object in the property panel to display the corresponding target SVG image includes:
[0023] The DOM structure sub-objects in the target DOM structure object are traversed, rendered and displayed until the traversal is completed, and the complete target SVG image is displayed in the property panel.
[0024] In one embodiment, after the initial DOM structure object is updated according to the additional binding information to generate the target DOM structure object, the following steps are included:
[0025] Save the target DOM structure object;
[0026] Mount the target DOM structure object to the window global object for reuse.
[0027] In one embodiment, after the target DOM structure object is mounted to the window global object, the following steps are included:
[0028] Receive an object collection instruction, and in response to the object collection instruction, copy and add the corresponding target SVG image to the collection panel position;
[0029] When a drag event based on the collection panel position is detected, the target SVG image of the drag event is determined;
[0030] Get the target DOM structure object corresponding to the target SVG image from the window global object;
[0031] Render and display the target DOM structure object in the property panel to display the corresponding target SVG image.
[0032] In a second aspect, an embodiment of the present application provides an SVG image parsing device based on cloud configuration, which is applied to a cloud configuration platform, including:
[0033] An event monitoring module is used to monitor a first operation event, and when the first operation event is monitored, determine a first SVG image of the first operation event, where the first operation event includes a mouse drag event, a copy and paste event, a selection event, or an insert event;
[0034] A structure conversion module, used to obtain information elements of the first SVG image, and perform conversion processing according to the information elements according to a preset conversion function to obtain an initial DOM structure object recognizable by the cloud configuration platform;
[0035] An additional information acquisition module, used to acquire additional binding information according to the interactive input of the parameter setting panel, the additional binding information including additional parameters and / or animation information;
[0036] An information binding module is used to update the initial DOM structure object according to the additional binding information to generate a target DOM structure object;
[0037] The rendering and display module is used to render and display the target DOM structure object in the property panel to display the corresponding target SVG image.
[0038] In a third aspect, an embodiment of the present application provides an SVG image parsing device based on cloud configuration, including:
[0039] memory and one or more processors;
[0040] The memory is used to store one or more programs;
[0041] When the one or more programs are executed by the one or more processors, the one or more processors implement the cloud configuration-based SVG image parsing method as described in the first aspect.
[0042] In a fourth aspect, an embodiment of the present application provides a storage medium storing computer-executable instructions, which, when executed by a computer processor, are used to execute the cloud-configuration-based SVG image parsing method as described in the first aspect.
[0043] The embodiment of the present application determines the first SVG image of the first operation event when the first operation event is monitored on the cloud configuration platform, obtains the information element of the first SVG image, performs conversion processing according to the information element according to a preset conversion function, and obtains the initial DOM structure object recognizable by the cloud configuration platform; obtains additional binding information such as additional parameters and / or animation information according to the interactive input of the parameter setting panel, updates the initial DOM structure object according to the additional binding information, generates a target DOM structure object, and renders and displays it in the property panel according to the target DOM structure object to display the corresponding target SVG image. By adopting the above technical means, the SVG image can be converted into a DOM structure object. When the same SVG image needs to be drawn, the DOM structure object corresponding to the SVG image can be called based on the first operation event, and rendered and displayed according to the DOM structure object, thereby avoiding the technical problem of low efficiency caused by redrawing the same SVG image, thereby improving the production reusability of SVG images, and further improving the overall work efficiency of SVG image production. In addition, for the initial DOM structure object that has been saved, additional parameters and / or animation information can be obtained according to the interactive input of the parameter setting panel, and the target DOM structure object can be generated according to the additional parameters and / or animation information, and the target SVG image with the newly added additional parameters and / or animation information can be displayed. Compared with the traditional method of redrawing the SVG image and adding corresponding parameters and animations during the drawing process, this embodiment improves the flexibility of SVG image changes, and when adding corresponding additional parameters and / or animation information to the same SVG image, the additional parameters and / or animation information can be added by calling the DOM structure object corresponding to the SVG image, without the need to redraw the SVG image multiple times, further improving the reusability of SVG image production, and thereby improving the overall work efficiency of SVG image production.
[0044] The beneficial effects of the cloud-based SVG image parsing apparatus, cloud-based SVG image parsing device, and storage medium provided above can refer to the beneficial effects of the cloud-based SVG image parsing method. BRIEF DESCRIPTION OF THE DRAWINGS
[0045] Figure 1 It is a flow chart of a cloud configuration-based SVG image parsing method provided in an embodiment of the present application;
[0046] Figure 2 It is a first schematic diagram of a display interface of a cloud configuration platform provided in an embodiment of the present application;
[0047] Figure 3 is a second schematic diagram of a display interface of a cloud configuration platform provided in an embodiment of the present application;
[0048] Figure 4It is a structural diagram of a cloud-configuration-based SVG image parsing device provided in an embodiment of the present application;
[0049] Figure 5 It is a structural diagram of a cloud-configuration-based SVG image parsing device provided in an embodiment of the present application. DETAILED DESCRIPTION
[0050] In order to make the purpose, technical scheme and advantages of the present application clearer, the specific embodiments of the present application are further described in detail below in conjunction with the accompanying drawings. It is understood that the specific embodiments described herein are only used to explain the present application, rather than to limit the present application. It should also be noted that, for the convenience of description, only the part related to the present application but not all the contents are shown in the accompanying drawings. Before discussing the exemplary embodiments in more detail, it should be mentioned that some exemplary embodiments are described as processes or methods depicted as flow charts. Although the flow chart describes each operation (or step) as a sequential process, many of the operations therein can be implemented in parallel, concurrently or simultaneously. In addition, the order of each operation can be rearranged. The process can be terminated when its operation is completed, but it can also have additional steps not included in the accompanying drawings. The process can correspond to a method, a function, a procedure, a subroutine, a subprogram, etc.
[0051] SVG images can provide lossless scaling, fast loading, powerful and flexible editing performance, and support for custom animation and data display effects. The drawing and rendering display of traditional SVG images need to be performed on the corresponding configuration software. The corresponding SVG images are usually used as a whole, and the parameters or animations in the SVG images cannot be changed. For example, the XML document corresponding to the complete SVG image is saved, and when it needs to be called, the XML document is directly copied to display the complete SVG image. The SVG image is not parsed into smaller components, and the corresponding animation or parameter data cannot be bound to the internal elements (or components) in the SVG image. In this way, when it is necessary to bind the corresponding animation or parameter data to the internal elements or components of the SVG, it is necessary to redraw it. When drawing, the corresponding animation or parameter data is bound to the corresponding internal elements or components, and finally saved as a complete SVG image. Therefore, a large number of SVG images of the same type need to be remade, and the work efficiency is relatively low.
[0052] Based on this, the cloud configuration-based SVG image parsing method, device, equipment and storage medium of the embodiment of the present application are provided, which is intended to draw an SVG image, by monitoring the first operation event on the cloud configuration platform, determining the first SVG image of the first operation event, obtaining the information element of the first SVG image, converting and processing according to the information element according to the preset conversion function, and obtaining the initial DOM structure object recognizable by the cloud configuration platform; obtaining additional binding information such as additional parameters and / or animation information according to the interactive input of the parameter setting panel, updating the initial DOM structure object according to the additional binding information, generating a target DOM structure object, and rendering and displaying it in the property panel according to the target DOM structure object to display the corresponding target SVG image. By adopting the above technical means, the SVG image can be converted into a DOM structure object. When the same SVG image needs to be drawn, the DOM structure object corresponding to the SVG image can be called based on the first operation event, and rendered and displayed according to the DOM structure object, thereby avoiding the technical problem of low efficiency caused by redrawing the same SVG image, thereby improving the reusability of SVG image production, and then improving the overall work efficiency of SVG image production. In addition, for the initial DOM structure object that has been saved, additional parameters and / or animation information can be obtained according to the interactive input of the parameter setting panel, and the target DOM structure object can be generated according to the additional parameters and / or animation information, and the target SVG image with the newly added additional parameters and / or animation information can be displayed. Compared with the traditional method of redrawing the SVG image and adding corresponding parameters and animations during the drawing process, this embodiment improves the flexibility of SVG image changes, and when adding corresponding additional parameters and / or animation information to the same SVG image, the additional parameters and / or animation information can be added by calling the DOM structure object corresponding to the SVG image, without the need to redraw the SVG image multiple times, further improving the reusability of SVG image production, and thereby improving the overall work efficiency of SVG image production.
[0053] Figure 1 A flow chart of a cloud-configuration-based SVG image parsing method provided in an embodiment of the present application is given. The cloud-configuration-based SVG image parsing method provided in this embodiment can be executed by a cloud-configuration-based SVG image parsing device, which can be implemented by software and / or hardware. The cloud-configuration-based SVG image parsing device can be composed of two or more physical entities, or can be composed of one physical entity. Generally speaking, the cloud-configuration-based SVG image parsing device can be a computer device.
[0054] The following description is made by taking a computer device as an example to implement the SVG image parsing method based on cloud configuration. Figure 1The SVG image parsing method based on cloud configuration is applied to the cloud configuration platform, specifically including:
[0055] S101, monitoring a first operation event, and when the first operation event is monitored, determining a first SVG image of the first operation event, where the first operation event includes a mouse drag event, a copy and paste event, a selection event, or an insert event.
[0056] The cloud configuration platform is an industrial control configuration platform based on the cloud B / S architecture, integrating multidisciplinary achievements in accordance with the operation mode of production, learning and research. It builds an application service system for industrial control design and development enterprises, various manufacturing industries, and management agencies such as electricity and water, integrating data collection, real-time control, alarm push, and configuration design for one-stop industrial control design and development. The SVG image parsing based on cloud configuration provided in this embodiment is applied to the cloud configuration platform, and SVG image parsing, production, and rendering display are realized on the cloud configuration platform.
[0057] Figure 2 is a first schematic diagram of a display interface of a cloud configuration platform provided in an embodiment of the present application, referring to Figure 2 In the display interface of the cloud configuration platform, there are multiple functional panels (areas), such as a collection panel 10, a property panel 20, and a parameter setting panel 30. The collection panel 10 is used to display the previously drawn and collected SVG images for reuse in subsequent drawing processes; the property panel 20 is used to display the currently drawn SVG image; and the parameter setting panel 30 is used to display the parameter setting menu of the currently drawn SVG image.
[0058] The first operation event in the display interface of the cloud configuration platform is continuously monitored, and the first operation event includes a mouse drag event, a copy and paste event, a selection event, or an insertion event. Among them, the mouse drag event is a drag event of the SVG image collected in the collection panel, the copy and paste event is an event of copying and pasting the corresponding SVG image into the property panel, the selection event is a (mouse) double-click event of a preset position (for example, an SVG image inserted in a document), and the insertion event is an event of inserting an SVG image corresponding to the insert control in the display interface of the cloud configuration platform. When the first operation event is monitored, the first SVG image corresponding to the first operation event is determined. For example, when the SVG image collected in the collection panel is dragged to the property panel, the first SVG image of the drag event is determined. Exemplarily, each SVG image in the collection panel corresponds to an identifier, and the first SVG image can be determined according to the identifier corresponding to the SVG image corresponding to the drag event. The first SVG image is subsequently parsed to display the first SVG image in the property panel, and the parameters and / or animation of the first SVG image are adjusted and updated.
[0059] S102: Obtain information elements of the first SVG image, and perform conversion processing according to the information elements according to a preset conversion function to obtain an initial DOM structure object that can be recognized by the cloud configuration platform.
[0060] According to the first SVG image determined by the first operation event monitored above, the information element of the first SVG image is obtained, and the information element of the first SVG image can be obtained by calling the dataTransfer method provided by the event, and the information element of the first SVG image is converted and processed according to the preset conversion function to obtain the initial DOM structure object recognizable by the cloud configuration platform. The first SVG image can be parsed into an initial DOM (Document Object Model) structure object recognizable by the browser by using the DOMParser (Document Object Model Parser) method of the window global object.
[0061] Exemplarily, the preset formula is: const parser = new DOMParser(); const svgDoc = parser.parseFromString(svgString,'image / svg+xml'); a DOMParser instance is created according to the preset formula. Then the parseFromString method is called to obtain the document object of the first SVG image, that is, the initial DOM structure object.
[0062] After obtaining the initial DOM structure object recognizable by the cloud configuration platform, obtain the class name of the initial DOM structure object, and obtain the corresponding component list in the first SVG image according to the class name, and each component corresponds to a class name. It should be noted that when the first SVG image is not provided with a component, that is, the complete first SVG image is used as a component, then there is only one corresponding class name, that is, there is only one class name in the component list. When the first SVG image is provided with multiple components, there are multiple class names in the component list, and each component corresponds to a class name. According to the class name in the component list, the corresponding component is rendered and displayed in the property panel to display the first SVG image in the property panel. The first SVG image displayed in the property panel is used as the initial SVG image for subsequent parameter or animation adjustments.
[0063] Exemplarily, a component list corresponding to the first SVG image is obtained according to the class name. When there are multiple components in the component list, the initial DOM structure object includes multiple DOM structure sub-objects, and each component corresponds to a DOM structure sub-object. When rendering and subsequently binding additional binding information, rendering and information binding can be performed in units of DOM structure sub-objects.
[0064] Exemplarily, according to the initial DOM structure object, the cloud configuration method is called to identify whether the first SVG image has components set; if it is identified that components are set, the component list is obtained through the method provided by the cloud configuration, and the corresponding component rendering value is displayed on the property panel according to the component list, and the rendering is completed and the complete first SVG image is displayed. If it is not identified that components are set, the initial DOM structure object is directly rendered and displayed, so that the first SVG image is displayed as a component in the property panel.
[0065] For example, refer to Figure 2 , for the first SVG picture 11 displayed on the property panel, component 111 and component 112 are set. Therefore, it can be obtained that the component list in the first SVG picture 11 includes 2 class names.
[0066] S103: Acquire additional binding information according to the interactive input of the parameter setting panel, where the additional binding information includes additional parameters and / or animation information.
[0067] After the first SVG image is displayed in the property panel, additional binding information can be bound to the entire or partial components in the first SVG image. By monitoring mouse events, when a mouse click event or a box selection event based on the first SVG image displayed in the property panel is monitored, the target component is determined from the displayed first SVG image according to the mouse click event or the box selection event, and the parameter setting panel corresponding to the target component is displayed at a preset position. The user can then add additional binding information to the target component based on the input or selection of corresponding information in the parameter setting panel, where the additional binding information includes additional parameters and / or animation information. Additional parameters include parameters such as shape, position, size, and color. Corresponding parameter options and animation options can be preset in the parameter setting panel, and the user can select the corresponding additional parameters based on the corresponding parameter options, and determine the animation effects to be bound based on the corresponding animation options.
[0068] Reference Figure 2For example, the first SVG image 11 currently displayed includes components 111 and 112. Listen to mouse events. When a mouse click event on the first SVG image 11 is listened, assuming that component 111 in the first SVG image 11 is clicked by the mouse at this time, component 111 is determined as the target component based on the mouse click event, and a parameter setting panel 30 is displayed at a preset position (such as the right menu bar position). The parameter setting panel 30 corresponds to the parameter setting menu of the target component (i.e., component 111), for example, the corresponding size parameter setting bar (length and width), color parameter setting bar, and animation effect setting bar are displayed. According to the interactive input of the parameter setting panel 30, the additional binding information that needs to be bound is determined. For example, assuming that the interactive input is that the color parameter is set to purple, the additional binding information is determined to be the additional parameter that the color is set to purple.
[0069] As described above, additional binding information is obtained through interactive input of the parameter setting panel, and the corresponding parameters and / or animations can be updated subsequently according to the additional binding information determined by the user, avoiding the user from manually redrawing the components in the image and manually adding corresponding parameters or animations, thereby improving the user experience and drawing efficiency.
[0070] S104: Update the initial DOM structure object according to the additional binding information to generate a target DOM structure object.
[0071] The initial DOM structure object is updated according to the additional binding information determined above, and a target DOM structure object is generated to bind the additional binding information to the first SVG image to obtain the corresponding target SVG image. The target SVG image can be understood as the first SVG image with the additional binding information added. The target DOM structure object is saved and mounted under the window global object to achieve reuse.
[0072] Exemplarily, the target DOM structure object is assigned to an attribute under the window global object, and the target DOM structure object can be subsequently obtained by accessing the attribute on the window global object, and corresponding additional binding information can be added and bound as needed.
[0073] The component list of the first SVG image is obtained according to the class name in the initial DOM structure object. When there are multiple components in the component list, the initial DOM structure object includes multiple DOM structure sub-objects, and each component corresponds to a DOM structure sub-object. Therefore, when binding additional binding information, each DOM structure sub-object can be bound separately to improve the flexibility and intelligence of SVG image drawing.
[0074] After the target component is determined as above and the additional binding information newly added based on the target component, the DOM structure sub-object corresponding to the target component is updated according to the additional binding information, and the updated DOM structure sub-object of the target component is combined with the DOM structure sub-objects corresponding to other components to obtain the updated target DOM structure object, that is, the complete DOM structure object of the updated SVG image can be obtained. Exemplarily, the element attributes corresponding to the target component can be modified according to the additional binding information to update the DOM structure sub-object corresponding to the target component to obtain the updated DOM structure sub-object.
[0075] It should be noted that if there are multiple target components that need to update additional binding information, the DOM structure sub-objects corresponding to the multiple target components are updated one by one to improve the orderliness of the newly added binding information.
[0076] S105 , rendering and displaying the target DOM structure object in the property panel to display the corresponding target SVG image.
[0077] Render and display the target DOM structure object in the property panel to display the corresponding target SVG image. When there are multiple components in the target SVG image, the target DOM structure object includes multiple DOM structure sub-objects. Therefore, when rendering, the DOM structure sub-objects in the target DOM structure object can be traversed, rendered and displayed until the traversal is completed and the complete target SVG image is displayed in the property panel.
[0078] Exemplarily, methods such as querySelector (document query selector) or querySelectorAll (document query selector) can be used to select the SVG element that needs to be operated or modified (i.e., the element corresponding to the target component) according to selectors such as tag name, ID and class name, modify the attributes of the SVG element, and update the modified SVG element to render it on the property panel of the display interface of the cloud configuration platform to update the first SVG image, so that the updated target SVG image is displayed on the property panel.
[0079] After the above analysis of S101-S105, corresponding additional binding information can be bound based on multiple identical SVG images and displayed on the display interface of the cloud configuration platform to obtain multiple target SVG images. Based on the multiple target SVG images, they are combined and connected to construct corresponding process scenarios. Figure 3 is a second schematic diagram of a display interface of a cloud configuration platform provided in an embodiment of the present application, referring to Figure 3According to the aforementioned parsing process of S101-S105, multiple target SVG images 12 are obtained. The multiple target SVG images 12 may contain the same additional binding information or different additional binding information. They may also be the original first SVG images. The aforementioned parsing process is performed based on the same first SVG image, which can be reused to avoid the problem of low work efficiency caused by the need to redraw the first SVG image multiple times during drawing and adding the corresponding additional binding information during drawing. The corresponding initial DOM structure object is obtained based on the analysis of the same first SVG image, and the initial DOM structure object is called to directly display or bind the corresponding additional binding information to realize the reuse of the first SVG image, thereby improving the work efficiency of drawing the process scene graph of the SVG image.
[0080] Based on the target DOM structure object mounted under the window global object, in order to improve the reusability of the target SVG image, the target SVG image can be collected, and the next time the target SVG image needs to be directly reused, it can be directly called under the window global object. The user can collect the target SVG image based on interactive input in the display interface of the cloud configuration platform. For example, click or box the target SVG image, then right-click the mouse to display the corresponding operation menu, and select the collection option based on the operation menu to generate an object collection instruction. The system background receives the object collection instruction, responds to the object collection instruction, copies the corresponding target SVG image to the location of the collection panel, that is, the target SVG image is newly displayed in the collection panel. When the target SVG image needs to be reused, the target SVG image can be parsed and rendered through the above S101-S105. Exemplarily, the mouse event can be monitored in the cloud configuration platform. When a drag event based on the collection panel position is monitored, the target SVG image of the drag event is determined, and the target DOM structure object corresponding to the target SVG image is retrieved from the window global object. Rendering and display in the property panel according to the target DOM structure object to display the corresponding target SVG image. For the target DOM structure object, new additional binding information can also be bound, and the binding can be performed according to actual drawing needs.
[0081] As described above, by parsing the internal elements of SVG images, different animation effects and / or parameter data can be bound to the same SVG image, thereby improving the utilization rate of SVG images and reducing redundant operations in producing a large number of similar SVG images, thereby improving the overall work efficiency of drawing process scene diagrams of SVG images; in addition, since SVG images are stored in the background based on DOM structure objects, when reuse is needed, the corresponding DOM structure objects are directly called, which reduces the difficulty of producing configuration images and allows SVG images to be reused, thereby improving the user experience.
[0082] As described above, when a drag event based on the collection panel position is monitored on the cloud configuration platform, the first SVG image of the drag event is determined, the information element of the first SVG image is obtained, and the information element is converted according to the preset conversion function to obtain the initial DOM structure object recognizable by the cloud configuration platform; additional binding information such as additional parameters and / or animation information is obtained according to the interactive input of the parameter setting panel, the initial DOM structure object is updated according to the additional binding information, and the target DOM structure object is generated and saved, and the target DOM structure object is rendered and displayed in the property panel to display the corresponding target SVG image. By adopting the above technical means, the corresponding SVG image can be saved through the DOM structure object. When the same SVG image needs to be drawn next time, the corresponding SVG image can be dragged from the collection panel position, the DOM structure object corresponding to the SVG image is called, and the rendering and display can be performed according to the DOM structure object, thereby avoiding the technical problem of low efficiency caused by redrawing the same SVG image, thereby improving the reusability of SVG image production, and further improving the overall work efficiency of SVG image production. In addition, for the initial DOM structure object that has been saved, additional parameters and / or animation information can be obtained according to the interactive input of the parameter setting panel, and the target DOM structure object can be generated and saved according to the additional parameters and / or animation information, and the target SVG image with the newly added additional parameters and / or animation information can be displayed, thereby improving the flexibility of SVG image changes, and saving the changed target DOM structure object for subsequent reuse, thereby improving the overall work efficiency of industrial drawing.
[0083] Based on the above embodiments, Figure 4 A schematic diagram of the structure of a cloud-based SVG image parsing device provided in an embodiment of the present application. Figure 4 The cloud configuration-based SVG image parsing device provided in this embodiment is applied to the cloud configuration platform. The cloud configuration-based SVG image parsing device specifically includes: an event monitoring module 21, a structure conversion module 22, an additional information acquisition module 23, an information binding module 24 and a rendering and display module 25.
[0084] The event monitoring module 21 is used to monitor the first operation event, and when the first operation event is monitored, determine the first SVG image of the first operation event, where the first operation event includes a mouse drag event, a copy and paste event, a selection event, or an insert event;
[0085] The structure conversion module 22 is used to obtain the information elements of the first SVG image, and perform conversion processing according to the information elements according to a preset conversion function to obtain an initial DOM structure object that can be recognized by the cloud configuration platform;
[0086] The additional information acquisition module 23 is used to acquire additional binding information according to the interactive input of the parameter setting panel, and the additional binding information includes additional parameters and / or animation information;
[0087] An information binding module 24 is used to update the initial DOM structure object according to the additional binding information to generate a target DOM structure object;
[0088] The rendering and display module 25 is used to render and display the target DOM structure object in the property panel to display the corresponding target SVG image.
[0089] In one embodiment, the SVG image parsing device based on cloud configuration includes: a class name acquisition module;
[0090] A class name acquisition module is used to acquire the class name of the initial DOM structure object, and acquire a corresponding component list in the first SVG image according to the class name, where each component corresponds to a class name;
[0091] The rendering and display module 25 is further used to render and display the corresponding component in the property panel according to the class name to display the first SVG image.
[0092] In one embodiment, the additional information acquisition module 23 includes: a component selection submodule and an information acquisition submodule;
[0093] The component selection submodule is used to monitor mouse events. When a mouse click event or a box selection event of the first SVG image displayed based on the property panel is monitored, a target component is determined from the components of the displayed first SVG image according to the mouse click event or the box selection event, and a parameter setting panel corresponding to the target component is displayed;
[0094] The information acquisition submodule is used to obtain additional binding information according to the interactive input of the parameter setting panel;
[0095] The information binding module 24 includes: a sub-object updating sub-module and a target object updating sub-module;
[0096] The sub-object updating sub-module is used to update the DOM structure sub-object corresponding to the target component according to the additional binding information;
[0097] The target object updating submodule is used to obtain the updated target DOM structure object according to the updated DOM structure subobject of the target component.
[0098] In one embodiment, based on the above implementation, the sub-object updating sub-module is further used to modify the element attribute corresponding to the target component according to the additional binding information to obtain an updated DOM structure sub-object.
[0099] In one embodiment, based on the above implementation, the rendering and display module 25 is further used to traverse, render and display the DOM structure sub-objects in the target DOM structure object until the traversal is completed and the complete target SVG image is displayed in the property panel.
[0100] In one embodiment, the cloud-configured SVG image parsing device further includes: an object saving module and an object mounting module;
[0101] Object saving module, used to save the target DOM structure object;
[0102] The object mounting module is used to mount the target DOM structure object to the window global object for reuse.
[0103] In one embodiment, the SVG image parsing device based on cloud configuration further includes: an object collection module, a collection object confirmation module, an object retrieval module and a call display module;
[0104] An object collection module is used to receive an object collection instruction, and in response to the object collection instruction, copy and add the corresponding target SVG image to the collection panel position;
[0105] The collection object confirmation module is used to determine the target SVG image of the drag event when a drag event based on the collection panel position is detected;
[0106] The object retrieval module is used to retrieve the target DOM structure object corresponding to the target SVG image from the window global object;
[0107] The display module is called to render and display the target DOM structure object in the property panel to display the corresponding target SVG image.
[0108] The cloud-configuration-based SVG image parsing device provided in the embodiment of the present application can be used to execute the cloud-configuration-based SVG image parsing method provided in the above embodiment, and has corresponding functions and beneficial effects.
[0109] The embodiment of the present application provides an SVG image parsing device based on cloud configuration, referring to Figure 5 The cloud-based SVG image parsing device includes: a processor 31, a memory 32, a communication module 33, an input device 34, and an output device 35. The number of processors in the cloud-based SVG image parsing device can be one or more, and the number of memories in the cloud-based SVG image parsing device can be one or more. The processor, memory, communication module, input device, and output device of the cloud-based SVG image parsing device can be connected via a bus or other means.
[0110] The memory 32, as a computer-readable storage medium, can be used to store software programs, computer executable programs and modules, such as program instructions / modules corresponding to the cloud-configured SVG image parsing method of any embodiment of the present application (for example, an event listening module, a structure conversion module, an additional information acquisition module, an information binding module and a rendering display module in a cloud-configured SVG image parsing device). The memory may mainly include a program storage area and a data storage area, wherein the program storage area may store an operating system, an application required for at least one function; the data storage area may store data created according to the use of the device, etc. In addition, the memory may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device or other non-volatile solid-state storage device. In some instances, the memory may further include a memory remotely arranged relative to the processor, and these remote memories may be connected to the device via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network and a combination thereof.
[0111] The communication module 33 is used for data transmission.
[0112] The processor 31 executes various functional applications and data processing of the device by running software programs, instructions and modules stored in the memory, that is, realizes the above-mentioned cloud-configuration-based SVG image parsing method.
[0113] The input device 34 may be used to receive input digital or character information and generate key signal input related to user settings and function control of the device. The output device 35 may include a display device such as a display screen.
[0114] The cloud-configuration-based SVG image parsing device provided above can be used to execute the cloud-configuration-based SVG image parsing method provided in the above embodiment, and has corresponding functions and beneficial effects.
[0115] An embodiment of the present application also provides a storage medium storing computer executable instructions, which are used to execute a cloud configuration-based SVG image parsing method when executed by a computer processor. The cloud configuration-based SVG image parsing method includes: monitoring a first operation event, and when the first operation event is monitored, determining a first SVG image of the first operation event, the first operation event including a mouse drag event, a copy and paste event, a selection event, or an insert event; obtaining information elements of the first SVG image, converting and processing the information elements according to a preset conversion function to obtain an initial DOM structure object recognizable by a cloud configuration platform; obtaining additional binding information according to the interactive input of a parameter setting panel, the additional binding information including additional parameters and / or animation information; updating the initial DOM structure object according to the additional binding information to generate a target DOM structure object; rendering and displaying the target DOM structure object in a property panel to display the corresponding target SVG image.
[0116] Storage medium - any of various types of memory devices or storage devices. The term "storage medium" is intended to include: installation media, such as CD-ROM, floppy disk or tape device; computer system memory or random access memory, such as DRAM, DDR RAM, SRAM, EDO RAM, Rambus RAM, etc.; non-volatile memory, such as flash memory, magnetic media (such as hard disk or optical storage); registers or other similar types of memory elements, etc. Storage media may also include other types of memory or combinations thereof. In addition, the storage medium may be located in the first computer system in which the program is executed, or may be located in a different second computer system, which is connected to the first computer system via a network (such as the Internet). The second computer system can provide program instructions to the first computer for execution. The term "storage medium" may include two or more storage media residing in different locations (for example, in different computer systems connected by a network). The storage medium may store program instructions (for example, embodied as a computer program) that can be executed by one or more processors.
[0117] Of course, the computer executable instructions of a storage medium storing computer executable instructions provided in an embodiment of the present application are not limited to the cloud-configured SVG image parsing method described above, but can also execute related operations in the cloud-configured SVG image parsing method provided in any embodiment of the present application.
[0118] The cloud-configuration-based SVG image parsing apparatus, storage medium, and cloud-configuration-based SVG image parsing device provided in the above embodiments can execute the cloud-configuration-based SVG image parsing method provided in any embodiment of the present application. For technical details not described in detail in the above embodiments, please refer to the cloud-configuration-based SVG image parsing method provided in any embodiment of the present application.
[0119] The above are only preferred embodiments of the present application and the technical principles used. The present application is not limited to the specific embodiments described herein, and various obvious changes, readjustments and substitutions that can be made by those skilled in the art will not deviate from the scope of protection of the present application. Therefore, although the present application is described in more detail through the above embodiments, the present application is not limited to the above embodiments, and may include more other equivalent embodiments without departing from the concept of the present application, and the scope of the present application is determined by the scope of the claims.
Claims
1. A cloud configuration-based SVG image parsing method, characterized in that: Applied to cloud configuration platform, including: Listening to a first operation event, and when the first operation event is listened to, determining a first SVG image of the first operation event, where the first operation event includes a mouse drag event, a copy and paste event, a selection event, or an insert event; Acquire information elements of the first SVG image, and perform conversion processing according to the information elements according to a preset conversion function to obtain an initial DOM structure object recognizable by the cloud configuration platform; Acquire additional binding information according to the interactive input of the parameter setting panel, wherein the additional binding information includes additional parameters and / or animation information; The initial DOM structure object is updated according to the additional binding information to generate a target DOM structure object; The target DOM structure object is rendered and displayed in the property panel to display the corresponding target SVG image.
2. The method according to claim 1, characterized in that The step of obtaining the information element of the first SVG image and converting the information element according to a preset conversion function to obtain an initial DOM structure object recognizable by the cloud configuration platform includes: Obtain the class name of the initial DOM structure object, and obtain a corresponding component list in the first SVG image according to the class name, where each component corresponds to a class name; According to the class name, the corresponding component is rendered and displayed in the property panel to display the first SVG image.
3. The method according to claim 2, characterized in that The obtaining of additional binding information according to the interactive input of the parameter setting panel includes: Listening to mouse events, when a mouse click event or a box selection event of the first SVG image displayed based on the property panel is listened to, determining a target component from the components of the displayed first SVG image according to the mouse click event or the box selection event, and displaying a parameter setting panel corresponding to the target component; Acquire additional binding information according to the interactive input of the parameter setting panel; The updating of the initial DOM structure object according to the additional binding information to generate a target DOM structure object includes: Update the DOM structure sub-object corresponding to the target component according to the additional binding information; The updated target DOM structure object is obtained according to the updated DOM structure sub-object of the target component.
4. The method according to claim 3, characterized in that The updating of the DOM structure sub-object corresponding to the target component according to the additional binding information includes: The element attribute corresponding to the target component is modified according to the additional binding information to obtain an updated DOM structure sub-object.
5. The method according to claim 3, characterized in that: The rendering and displaying in the property panel according to the target DOM structure object to display the corresponding target SVG image includes: The DOM structure sub-objects in the target DOM structure object are traversed, rendered and displayed until the traversal is completed, and the complete target SVG image is displayed in the property panel.
6. The method according to claim 1, characterized in that After the initial DOM structure object is updated according to the additional binding information to generate a target DOM structure object, the method includes: Save the target DOM structure object; The target DOM structure object is mounted under the window global object to achieve reuse.
7. The method according to claim 6, characterized in that After mounting the target DOM structure object to the window global object, the following steps are included: Receive an object collection instruction, and in response to the object collection instruction, copy and add the corresponding target SVG image to the collection panel position; When a drag event based on the collection panel position is detected, a target SVG image of the drag event is determined; Get the target DOM structure object corresponding to the target SVG image from the window global object; The target DOM structure object is rendered and displayed in the property panel to display the corresponding target SVG image.
8. A cloud-based SVG image parsing device, characterized in that: Applied to cloud configuration platform, including: An event monitoring module, used for monitoring a first operation event, and when the first operation event is monitored, determining a first SVG image of the first operation event, wherein the first operation event includes a mouse drag event, a copy and paste event, a selection event or an insert event; A structure conversion module, used to obtain information elements of the first SVG image, and perform conversion processing according to the information elements according to a preset conversion function to obtain an initial DOM structure object recognizable by the cloud configuration platform; An additional information acquisition module, used to acquire additional binding information according to the interactive input of the parameter setting panel, wherein the additional binding information includes additional parameters and / or animation information; An information binding module, used to update the initial DOM structure object according to the additional binding information to generate a target DOM structure object; The rendering and display module is used to render and display the target DOM structure object in the property panel to display the corresponding target SVG image.
9. A cloud-based SVG image parsing device, characterized in that: include: memory and one or more processors; The memory is used to store one or more programs; When the one or more programs are executed by the one or more processors, the one or more processors implement the method according to any one of claims 1 to 7.
10. A storage medium storing computer executable instructions, characterized in that: The computer executable instructions are used to perform the method according to any one of claims 1 to 7 when executed by a processor.