Vector graph style online editing method and device, equipment and readable storage medium
By running a visual editing view plugin in the browser to obtain and update the attribute data of vector graphics, the problem of low efficiency in adjusting SVG vector graphics styles is solved, and user-friendly online style editing is achieved.
Patent Information
- Application Number
- CN202011241006.X
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2020-11-09
- Publication Date
- 2025-11-07
- Estimated Expiration
- 2040-11-09
AI Technical Summary
In existing technologies, adjusting the style of SVG vector graphics on web pages is inefficient, requiring users to modify the code, which increases the difficulty of use.
This paper provides an online method for editing the style of vector graphics. By running a visual editing view plugin in a browser, the method obtains the attribute data of the vector graphics and updates the attribute data based on the displayed data, thereby achieving real-time adjustment of the style.
It lowers the barrier and difficulty for users to use vector graphics, and improves the efficiency of style adjustment. Users can directly modify styles through the visual editing view without adjusting the code.
Smart Images

Figure CN112364194B_ABST
Abstract
Description
TECHNICAL FIELD
[0001] The present application relates to the field of financial technology, and in particular to a vector graph style online editing method and device, equipment and a readable storage medium. BACKGROUND
[0002] SVG is an image file format, its English full name is Scalable Vector Graphics, which means scalable vector graphics, which is a language defined by XML to describe two-dimensional vectors and vector / raster graphics. The graphic objects can also be grouped, styled, transformed, combined, etc. The feature set includes nested transformations, clipping paths, alpha masks, filter effects, template objects and other extensions. It provides advantages that PNG and JPEG formats currently popular on the network cannot have: graphics can be enlarged arbitrarily, but never at the expense of image quality. However, for SVG vector graphics on the web page, we need to adjust the style parameters such as color when using it at different times, but we can only adjust the code to achieve it, which increases the difficulty of user use, and the style adjustment efficiency of SVG vector graphics is low. SUMMARY
[0003] The main purpose of the present application is to provide a vector graph style online editing method, device, equipment and readable storage medium, which aims to solve the technical problem of low online editing efficiency of SVG vector graphics on the existing web page.
[0004] To achieve the above purpose, the present application provides a vector graph style online editing method, which is applied to a first device and includes:
[0005] When receiving an editing instruction, determine a vector graph to be edited in a browser, and run a visual editing view plug-in to display a visual editing view;
[0006] Obtain attribute data of the vector graph to be edited, and initialize display data of the visual editing view based on the attribute data;
[0007] When detecting that the display data of the visual editing view is changed, update the attribute data of the vector graph to be edited based on the changed display data, and display the vector graph to be edited again based on the updated attribute data.
[0008] Further, the step of obtaining attribute data of the vector graph to be edited and initializing display data of the visual editing view based on the attribute data includes:
[0009] determining a chart type of the vector graph to be edited, determining original display data of the visual editing view based on the chart type;
[0010] updating the original display data by using the attribute data according to the correspondence between the attribute data and the display data.
[0011] Further, the step of updating the attribute data of the vector graph to be edited based on the changed display data when it is detected that the display data of the visual editing view is changed comprises:
[0012] acquiring the changed display data when it is detected that the display data of the visual editing view is changed;
[0013] updating the attribute data of the vector graph to be edited by using the changed display data according to the correspondence between the attribute data and the display data.
[0014] Further, the step of updating the attribute data of the vector graph to be edited by using the changed display data according to the correspondence between the attribute data and the display data comprises:
[0015] determining whether the changed display data satisfies a threshold range limitation condition;
[0016] when the changed display data satisfies the threshold range limitation condition, updating the attribute data of the vector graph to be edited by using the changed display data;
[0017] when the changed display data does not satisfy the threshold range limitation condition, outputting a pre-warning information of modification exception.
[0018] Further, the step of determining the vector graph to be edited in the browser when the editing instruction is received comprises:
[0019] acquiring the vector graph identifier based on the editing instruction when the editing instruction is received;
[0020] taking the vector graph corresponding to the vector graph identifier as the vector graph to be edited in the browser.
[0021] Further, the step of running the visual editing view plug-in and displaying the visual editing view when the editing instruction is received comprises:
[0022] acquiring the ID identifier corresponding to the visual editing view plug-in based on the editing instruction when the editing instruction is received;
[0023] determining whether the visual editing view plug-in has been installed based on the ID identifier corresponding to the visual editing view;
[0024] When it is determined that the visual editing view plug-in has been installed, a plug-in data packet corresponding to the ID identifier is loaded to run the visual editing view plug-in.
[0025] Further, the step of determining whether the visual editing view plug-in has been installed based on the ID identifier corresponding to the visual editing view includes:
[0026] An installation list is acquired, and it is determined whether the visual editing view plug-in has been installed based on the installation list and the ID identifier corresponding to the visual editing view. When the ID identifier exists in the installation list, it is determined that the visual editing view plug-in has been installed.
[0027] Further, the style online editing device of the vector diagram includes:
[0028] A determination module is configured to, when an editing instruction is received, determine a vector diagram to be edited in a browser, run a visual editing view plug-in, and display a visual editing view.
[0029] An initialization module is configured to acquire attribute data of the vector diagram to be edited, and initialize display data of the visual editing view based on the attribute data.
[0030] An editing module is configured to, when it is detected that the display data of the visual editing view is changed, update attribute data of the vector diagram to be edited based on the changed display data, and redisplay the vector diagram to be edited based on the updated attribute data.
[0031] To achieve the above object, the present application further provides a device, which comprises a memory, a processor, and a vector diagram style online editing program stored in the memory and executable on the processor, and the vector diagram style online editing program implements the steps of the vector diagram style online editing method when executed by the processor.
[0032] In addition, to achieve the above object, the present application further provides a readable storage medium, which stores a vector diagram style online editing program, and the vector diagram style online editing program implements the steps of the vector diagram style online editing method of any one of the above embodiments when executed by a processor.
[0033] The application determines a vector graph to be edited in a browser upon receiving an editing instruction, runs a visual editing view plug-in to display a visual editing view, acquires attribute data of the vector graph to be edited, initializes display data of the visual editing view based on the attribute data, updates the attribute data of the vector graph to be edited based on the changed display data when detecting that the display data of the visual editing view is changed, and displays the vector graph to be edited based on the updated attribute data. The application adopts a technical means of data interaction according to a mapping relationship between attribute data of a vector graph to be edited and display data of a visual editing view, which overcomes the prior art that can only realize style modification of a vector graph by adjusting code, increases difficulty of user use, thereby reducing a vector graph use threshold and difficulty, and improving a vector graph style adjustment efficiency. BRIEF DESCRIPTION OF DRAWINGS
[0034] Figure 1 is a structural schematic diagram of a hardware running environment related to an embodiment of the application.
[0035] Figure 2 is a flowchart of an online vector graph style editing method first embodiment of the application.
[0036] Figure 3 is a schematic diagram of a column chart and a visual editing view in an online vector graph style editing method embodiment of the application.
[0037] Figure 4 is a flowchart of an online vector graph style editing method second embodiment of the application.
[0038] Figure 5 is a flowchart of a vector graph style parameter realized by a visual editing view in an online vector graph style editing method of the application.
[0039] Figure 6 is a functional module schematic diagram of an online vector graph style editing device embodiment of the application.
[0040] The realization of the object, functional features and advantages of the application will be further explained with reference to the accompanying drawings in combination with embodiments. DETAILED DESCRIPTION
[0041] It should be understood that the specific embodiments described herein are merely intended to explain the application, and are not intended to limit the application.
[0042] As shown in Figure 1 , the Figure 1 is a structural schematic diagram of a device in a hardware running environment related to an embodiment of the application.
[0043] As shown in Figure 1As shown in the figure, the device can include a processor 1001, such as a CPU, a network interface 1004, a user interface 1003, a memory 1005, and a communication bus 1002. The communication bus 1002 is used to realize the connection communication between the components. The user interface 1003 can include a display screen (Display), an input unit such as a keyboard (Keyboard), and the optional user interface 1003 can also include a standard wired interface, a wireless interface. The network interface 1004 can optionally include a standard wired interface, a wireless interface (such as a WI-FI interface). The memory 1005 can be a high-speed RAM memory, or a stable memory (non-volatile memory) such as a disk memory. The memory 1005 can also be an independent storage device from the aforementioned processor 1001.
[0044] Those skilled in the art can understand that Figure 1 The device structure shown in the figure does not constitute a limitation on the device, and can include more or fewer components than the figure, or combine certain components, or different component arrangements.
[0045] As Figure 1 As shown, the memory 1005 as a readable storage medium can include an operating system, a network communication module, a user interface module, and a vector graph style online editing program and a vector graph style online editing program.
[0046] In Figure 1 In the device shown, the network interface 1004 is mainly used to connect the background server and communicate data with the background server; the user interface 1003 is mainly used to connect the user end and communicate data with the user end; and the processor 1001 can be used to call the vector graph style online editing program and the vector graph style online editing program stored in the memory 1005.
[0047] In this embodiment, the device includes a memory 1005, a processor 1001, and a vector graph style online editing program stored in the memory 1005 and executable on the processor 1001. When the processor 1001 calls the vector graph style online editing program and the vector graph style online editing program stored in the memory 1005, it executes the steps of the vector graph style online editing method provided by each embodiment of the present application.
[0048] The present application also provides a vector graph style online editing method, referring to Figure 2 , Figure 2 The flowchart of the first embodiment of the vector graph style online editing method of the present application.
[0049] Embodiments of the present application provide an embodiment of an online editing method for the style of a vector graph. It should be noted that although a logical sequence is shown in the flowchart, in some cases, the steps shown or described can be performed in an order different from that shown.
[0050] The first embodiment of the online editing method for the style of a vector graph includes the following steps in the present embodiment.
[0051] In step S10, upon receiving an editing instruction, the vector graph to be edited is determined in the browser, and a visual editing view plug-in is run to display a visual editing view.
[0052] Specifically, step S10 includes the following steps.
[0053] In step a, upon receiving an editing instruction, the vector graph identifier is obtained based on the editing instruction.
[0054] In step b, the vector graph corresponding to the vector graph identifier is taken as the vector graph to be edited in the browser.
[0055] In the present embodiment, SVG is a language defined by XML, which is used to describe two-dimensional vectors and vector / raster graphics. SVG is an open standard, and compared with JPEG and GIF images, it has smaller size, stronger compressibility, and can be enlarged without a decrease in image quality. Compared with Flash, the biggest advantage of SVG is compatibility with other standards (such as XSL and DOM), so it is widely used in mainstream browsers. As mentioned above, however, for SVG charts on a webpage, the style parameters such as color need to be adjusted in different uses, but currently, this can only be achieved by adjusting the code, which increases the difficulty of use for users. Therefore, the present application proposes an online editing method for the style of a vector graph, which uses a technical means of data interaction according to the mapping relationship between the attribute data of the vector graph to be edited and the display data of the visual editing view. This technical means overcomes the problem of the prior art that the style of a vector graph can only be modified by adjusting the code, which increases the difficulty of use for users, thereby reducing the threshold and difficulty of using a vector graph and improving the efficiency of adjusting the style of a vector graph.
[0056] Specifically, when receiving the editing instruction, the vector graph to be edited is determined in the browser, and the visual editing view is run. In the browser, each vector graph has a vector graph identifier recognizable by the browser, and one of the vector graphs can be selected by using an input tool such as a mouse or a keyboard. At this time, the editing instruction is triggered, and the vector graph identifier corresponding to the currently selected vector graph is read by the editing instruction. Further, the vector graph corresponding to the vector graph identifier read by the editing instruction is taken as the vector graph to be edited. The editing instruction can be triggered by a menu in the browser or triggered by a menu of the right mouse button, which is not limited in the present application.
[0057] In step S20, attribute data of the vector graph to be edited is acquired, and display data of the visual editing view is initialized based on the attribute data.
[0058] Specifically, step S20 includes:
[0059] In step S21, a chart type of the vector graph to be edited is determined, and original display data of the visual editing view is determined based on the chart type.
[0060] In step S22, the original display data is updated by using the attribute data according to a corresponding relationship between the attribute data and the display data.
[0061] In the embodiment, the SVG vector graph includes various types of charts, such as a column chart, a bar chart, a pie chart, a line chart, etc. Style parameters corresponding to different charts are different. For example, the style parameters of the column chart at least include the length, the width, the filling color, and the outline color of each column in the column chart. The pie chart includes the angle corresponding to each data, the radius of the pie chart, the filling color, etc. These parameters are display data to be presented in the visual editing view. The display data of the visual editing view can include the style parameters of all types of charts. When the chart type of the vector graph to be edited is determined, the display data corresponding to the chart type is highlighted. Other display data that is not applicable can be displayed in gray and is not supported for data editing, or only the display data corresponding to the chart type of the vector graph to be edited can be displayed in the visual editing view. The style of the display data in the visual editing view is not limited in the present application and can be designed according to actual needs.
[0062] Specifically, the chart type of the vector graph to be edited is determined, and the original display data of the visual editing view is determined based on the chart type. The original display data represents default values of the display data of the visual editing view. When the chart type of the vector graph to be edited is determined, it is also determined which display data is displayed in the visual editing view. The default values of the display data are acquired and displayed in the data area corresponding to the editing view.
[0063] Further, according to the correspondence between the attribute data and the display data, the attribute data is used to update the original display data. The attribute data is the attribute data of the vector graph to be edited, that is, the style parameters corresponding to the chart. Therefore, the attribute data of the vector graph to be edited and the display data of the visual editing view have a one-to-one correspondence. After the attribute data is obtained, the attribute data is written into the display data of the visual editing view through the underlying logic, that is, the original display data is updated by using the attribute data.
[0064] In step S30, when it is detected that the display data of the visual editing view is changed, the attribute data of the vector graph to be edited is updated based on the changed display data, and the vector graph to be edited is displayed again based on the updated attribute data.
[0065] In this embodiment, because the attribute data of the vector graph to be edited and the display data of the visual editing view have a one-to-one correspondence, the attribute data of the vector graph to be edited can be modified by modifying the display data of the visual editing view, so as to change the display style of the vector graph. That is, when it is detected that the display data of the visual editing view is changed, the attribute data of the vector graph to be edited is updated according to the changed display data, and the vector graph to be edited is displayed again according to the updated attribute data.
[0066] Specifically, step S30 includes:
[0067] In step S31, when it is detected that the display data of the visual editing view is changed, the changed display data is obtained.
[0068] In step S32, according to the correspondence between the attribute data and the display data, the attribute data of the vector graph to be edited is updated by using the changed display data.
[0069] Specifically, step S32 includes:
[0070] In step a, it is determined whether the changed display data satisfies a threshold range limitation condition.
[0071] In step b, when the changed display data satisfies the threshold range limitation condition, the attribute data of the vector graph to be edited is updated by using the changed display data.
[0072] In step c, when the changed display data does not satisfy the threshold range limitation condition, a warning information of modification exception is output.
[0073] In this embodiment, when the display data of the visual editing view is changed, the modified display data can be used to modify the attribute data of the vector image to be edited through the underlying logic. Before modifying the attribute data of the vector image to be edited, the reasonableness of the modified display data needs to be judged, that is, whether the modified display data meets the threshold range. When it meets the threshold range, the attribute data of the vector image to be edited is updated using the modified display data. Otherwise, when the modified display data does not meet the threshold range, a warning message of modification abnormality is output, prompting the user to modify it again.
[0074] For example, such as Figure 3 As shown, Figure 3 This diagram illustrates a bar chart and a visual editing view. The left side shows the bar chart, and the right side shows the visual editing view. The diagram shows a vertical bar chart. First, the orientation of the bars needs to be determined, as different orientations allow for the modification of different parameters. To determine the orientation, the length and width of the bars can be obtained. Generally, bars in a bar chart face upwards or to the right. If the width remains constant while the height changes, the bar is facing upwards. In this case, the width is restricted and cannot be modified by the user. If the width is modified, a warning message indicating an error will be output. Similarly, the height of the bars also has certain requirements and cannot exceed a certain threshold.
[0075] This embodiment proposes an online style editing method for vector graphics. Upon receiving an editing instruction, the vector graphic to be edited is determined in the browser, and a visual editing view plugin is run to display the visual editing view. Then, the attribute data of the vector graphic to be edited is acquired, and the display data of the visual editing view is initialized based on the attribute data. Next, when a change in the display data of the visual editing view is detected, the attribute data of the vector graphic to be edited is updated based on the changed display data, and the vector graphic to be edited is re-displayed based on the updated attribute data. This invention employs a data interaction technique based on the mapping relationship between the attribute data of the vector graphic to be edited and the display data of the visual editing view. This technique overcomes the limitations of existing technologies that only allow style modification of vector graphics through code adjustments, increasing the difficulty for users. This method lowers the barrier to entry and difficulty of using vector graphics and improves the efficiency of style adjustment.
[0076] Based on the first embodiment, referring to Figure 4 The second embodiment of the online style editing method for vector graphics of the present invention is proposed. In this embodiment, step S10 includes:
[0077] Step S11: Upon receiving an editing instruction, obtain the ID identifier corresponding to the visual editing view based on the editing instruction;
[0078] In the embodiment, the visual editing view has an ID identifier uniquely identifying the visual editing view, and the ID identifier can be carried in the editing instruction. After triggering the editing instruction, the visual editing view needs to be synchronously run. The visual editing view can be used to modify the style of the vector graph to be edited, and the prior art which can only modify the style of the vector graph by adjusting the code is overcome, the difficulty of use of the user is increased, the threshold and difficulty of use of the vector graph are reduced, and the efficiency of style adjustment of the vector graph is improved.
[0079] In step S12, it is determined whether the visual editing view has been installed based on the ID identifier corresponding to the visual editing view.
[0080] Specifically, step S12 includes: acquiring an installation list, and determining whether the visual editing view has been installed based on the installation list and the ID identifier corresponding to the visual editing view. When the ID identifier exists in the installation list, it is determined that the visual editing view has been installed.
[0081] In step S13, when it is determined that the visual editing view has been installed, the plug-in data packet corresponding to the ID identifier is loaded to run the visual editing view.
[0082] In the embodiment, when the editing instruction is received, it means that the style of the vector graph to be edited needs to be modified, and therefore the visual editing view needs to be synchronously run. At this time, it needs to be determined whether the visual editing view has been installed. If not, the installation package thereof needs to be acquired and installed. Specifically, whether the visual editing view has been installed is determined based on the installation list and the ID identifier corresponding to the visual editing view. Further, when the ID identifier exists in the installation list, it means that the visual editing view has been installed, and therefore the plug-in data packet corresponding to the ID identifier is loaded to run the visual editing view. If the ID identifier does not exist in the installation list, the installation package thereof needs to be acquired and installed, and then the visual editing view can be run.
[0083] For example, referring to Figure 5 The process of modifying the style parameters of the vector graph by using the visual editing view is roughly as follows: first, a vector graph is opened in a browser, and a plurality of SVG vector graphs can be opened at present, and a vector graph to be edited is determined; second, the visual editing view is run in the current browser page; third, the display data to be modified is selected and edited in the visual editing view; and finally, the attribute data of the vector graph to be edited is updated by using the changed display data, and the vector graph to be edited is re-displayed.
[0084] The style online editing method of the vector graph provided in the embodiment comprises the following steps: when an editing instruction is received, an ID identifier corresponding to a visual editing view is acquired based on the editing instruction; whether the visual editing view has been installed is determined based on the ID identifier corresponding to the visual editing view; when it is determined that the visual editing view has been installed, a plug-in data packet corresponding to the ID identifier is loaded to run the visual editing view. By judging whether the visual editing view has been installed in advance, it is ensured that the visual editing view can be run synchronously when the editing instruction is received, and the style of the vector graph to be edited can be modified through the visual editing view, so that the style modification of the vector graph can be realized by adjusting the code in the prior art, the difficulty of use of the user is increased, and thus the use threshold and difficulty of the vector graph are reduced, and the style adjustment efficiency of the vector graph is improved.
[0085] The application further provides a vector graph style online editing device. Figure 6 , Figure 6 The application further provides a vector graph style online editing device.
[0086] The determining module 10 is configured to determine a vector graph to be edited in a browser and run a visual editing view plug-in to display a visual editing view when an editing instruction is received.
[0087] The initializing module 20 is configured to acquire attribute data of the vector graph to be edited and initialize display data of the visual editing view based on the attribute data.
[0088] The editing module 30 is configured to update attribute data of the vector graph to be edited based on changed display data when it is detected that the display data of the visual editing view is changed, and display the vector graph to be edited again based on the updated attribute data.
[0089] Further, the initializing module 20 is further configured to:
[0090] determine a chart type of the vector graph to be edited, and determine original display data of the visual editing view based on the chart type.
[0091] update the original display data by using the attribute data according to a corresponding relationship between the attribute data and the display data.
[0092] Further, the editing module 30 is further configured to:
[0093] acquire changed display data when it is detected that the display data of the visual editing view is changed.
[0094] According to the correspondence between the attribute data and the display data, the attribute data of the vector graph to be edited is updated by using the changed display data.
[0095] Further, the editing module 30 is further configured to:
[0096] determine whether the changed display data meets a threshold range limitation condition;
[0097] when the changed display data meets the threshold range limitation condition, update the attribute data of the vector graph to be edited by using the changed display data;
[0098] when the changed display data does not meet the threshold range limitation condition, output a pre-warning information of modification exception.
[0099] Further, the determining module 10 is further configured to:
[0100] when the editing instruction is received, acquire the vector graph identifier based on the editing instruction;
[0101] in the browser, take the vector graph corresponding to the vector graph identifier as the vector graph to be edited.
[0102] Further, the determining module 10 is further configured to:
[0103] when the editing instruction is received, acquire the ID identifier corresponding to the visual editing view plug-in based on the editing instruction;
[0104] determine whether the visual editing view plug-in has been installed based on the ID identifier corresponding to the visual editing view;
[0105] when it is determined that the visual editing view plug-in has been installed, load the plug-in data packet corresponding to the ID identifier to run the visual editing view plug-in.
[0106] Further, the determining module 10 is further configured to:
[0107] acquire an installation list, and determine whether the visual editing view plug-in has been installed based on the installation list and the ID identifier corresponding to the visual editing view, wherein when the ID identifier exists in the installation list, it is determined that the visual editing view plug-in has been installed.
[0108] In addition, the embodiment of the present application further provides a readable storage medium, and the readable storage medium stores a vector graph style online editing program and a vector graph style online editing program. When the vector graph style online editing program and the vector graph style online editing program are executed by a processor, the steps of the vector graph style online editing method in each of the above embodiments are implemented.
[0109] It should be noted that the terms "comprising", "including", or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or system that comprises a list of elements does not include only those elements but can include other elements not expressly listed or inherent to such process, method, article, or system. Without further limitation, an element defined by the statement "comprising a" does not exclude the presence of additional identical elements in the process, method, article, or system that includes the element.
[0110] The above-mentioned embodiment numbers of the present application are only for description, and do not represent the advantages and disadvantages of the embodiments.
[0111] From the above description of the embodiments, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be realized by means of software and the necessary general hardware platform, of course, they can also be realized by hardware, but in many cases the former is a better embodiment. Based on such understanding, the technical solutions of the present application can be embodied in the form of a software product, which is stored in a storage medium (such as a ROM / RAM, a magnetic disk, or an optical disk) as described above, and includes a number of instructions for making a system device (which can be a mobile phone, a computer, a server, an air conditioner, or a network device, etc.) execute the methods described in the various embodiments of the present application.
[0112] The above is only the preferred embodiment of the present application, and does not limit the patent scope of the present application, and any equivalent structure or equivalent flow transformation made by using the content of the specification and drawings, or directly or indirectly applied to other related technical fields, are also included in the patent protection scope of the present application.
Claims
1. A method for online editing of a style of a vector graphic, characterized by, The online editing method of the style of the vector graph comprises the following steps: Upon receiving an editing instruction, a vector graph identifier is acquired based on the editing instruction; In the browser, the vector graph corresponding to the vector graph identifier is taken as a vector graph to be edited, and a visual editing view plug-in is run to display a visual editing view; The type of the chart of the vector graph to be edited is determined, and original display data of the visual editing view is determined based on the type of the chart; According to the correspondence between attribute data and display data, the attribute data is used to update the original display data, wherein the attribute data is a style parameter corresponding to the chart, and the display data comprises style parameters of all types of charts; When it is detected that the display data of the visual editing view is changed, the changed display data is acquired; According to the correspondence between attribute data and display data, the changed display data is used to update the attribute data of the vector graph to be edited.
2. The pattern online editing method of a vector figure according to claim 1, wherein, The step of updating the attribute data of the vector graph to be edited with the changed display data according to the correspondence between the attribute data and the display data comprises the following steps: It is determined whether the changed display data meets a threshold range limitation condition; When the changed display data meets the threshold range limitation condition, the attribute data of the vector graph to be edited is updated with the changed display data; When the changed display data does not meet the threshold range limitation condition, a pre-warning information of modification exception is outputted.
3. The pattern online editing method of a vector figure according to claim 1, wherein, The step of running the visual editing view plug-in to display the visual editing view upon receiving the editing instruction comprises the following steps: Upon receiving the editing instruction, an ID identifier corresponding to the visual editing view plug-in is acquired based on the editing instruction; It is determined whether the visual editing view plug-in has been installed based on the ID identifier corresponding to the visual editing view; When it is determined that the visual editing view plug-in has been installed, a plug-in data packet corresponding to the ID identifier is loaded to run the visual editing view plug-in.
4. The pattern online editing method of a vector figure according to claim 1, wherein, The step of determining whether the visual editing view plug-in has been installed based on the ID identifier corresponding to the visual editing view comprises the following steps: An installation list is acquired, and it is determined whether the visual editing view plug-in has been installed based on the installation list and the ID identifier corresponding to the visual editing view, wherein when the ID identifier exists in the installation list, it is determined that the visual editing view plug-in has been installed.
5. An apparatus for online editing of a style of a vector graphic, characterized by comprising: The online editing device of the style of the vector graph comprises the following steps: A determination module is configured to determine a vector graph to be edited in a browser and run a visual editing view plug-in to display a visual editing view upon receiving an editing instruction, and the determination module is specifically configured to acquire a vector graph identifier based on the editing instruction upon receiving the editing instruction, and take the vector graph corresponding to the vector graph identifier as the vector graph to be edited in the browser. An initialization module is configured to determine a chart type of a vector graph to be edited, determine original display data of the visual editing view based on the chart type, and update the original display data by using attribute data according to a corresponding relationship between the attribute data and the display data, wherein the attribute data is a style parameter corresponding to the chart, and the display data includes style parameters of all types of charts. An editing module is configured to acquire changed display data when detecting that the display data of the visual editing view is changed, and update the attribute data of the vector graph to be edited by using the changed display data according to the corresponding relationship between the attribute data and the display data.
6. An electronic device, comprising: The electronic device includes a memory, a processor, and a style online editing program of a vector graph stored on the memory and executable on the processor, and the style online editing program of the vector graph, when executed by the processor, implements the steps of the style online editing method of the vector graph according to any one of claims 1 to 4.
7. A readable storage medium, characterized by, The readable storage medium stores a style online editing program of a vector graph, and the style online editing program of the vector graph, when executed by a processor, implements the steps of the style online editing method of the vector graph according to any one of claims 1 to 4.
Citation Information
Patent Citations
View rendering method, computer storage medium and terminal equipment
CN110244985A
SVG vector graph adjusting method and device, storage medium and terminal
CN111199512A