Interactive display method, terminal device, computer device and medium of SVG graphics

Abstract

The present invention discloses an interactive display method of scalable vector graphics, a terminal device, a computer device and a medium. A specific implementation of the method includes: in response to a user's zooming operation on the scalable vector graphics, changing the transparency of at least part of the elements in the scalable vector graphics, wherein the scalable vector graphics includes multiple elements; and displaying the scalable vector graphics according to the elements after the transparency is changed. This implementation can realize smooth transformation of the displayed elements with the real-time zooming operation, thereby smoothly transforming the displayed content while changing the zoom ratio of the scalable vector graphics, which can improve the user experience.

Description

Technical Field

[0001] The present invention relates to the field of display technology, and more specifically, to an interactive display method of SVG graphics, a terminal device, a computer device and a medium. Background Art

[0002] SVG (Scalable Vector Graphics) is a widely used image file format. The biggest feature of SVG graphics compared to traditional images is that they can be scaled freely, and no distortion will occur no matter how many times they are enlarged. SVG graphics are based on XML language and have XML formatted data. You can directly use code to describe or draw graphics. The XML formatted data of SVG graphics is readable and its attributes can be modified dynamically. In SVG graphics, each stroke can correspond to an XML statement, so that some of its attributes can be easily modified.

[0003] Taking SVG maps, which have been widely used in many fields, as an example, the existing element transformation method when scaling SVG graphics is as follows:

[0004] At present, the most commonly used method is to draw a map on a base map through the concept of multiple layers, and then place the corresponding annotation graphic elements and text elements on the top of the base map, and control the display or hiding of each element by the program. This method requires precise positioning of the display position of the elements, and there is a lot of auxiliary data. After the map is modified, the auxiliary data must also change accordingly, and maintenance and updating are very cumbersome. At the same time, because the base map is a complete picture, all the contents of the entire picture will be displayed regardless of zooming, so the display effect is not good when displaying a large picture.

[0005] In addition to the above-mentioned method of drawing maps on a base map through the concept of multiple layers, there is currently a block loading method, also known as a distributed loading method, which directly displays the overall structure diagram when the zoom ratio is small. As the map is zoomed in, the server is requested to display a local map based on the location of the current display area. This method can better implement the map zoom function and is also a common method used by most existing map system apps. However, this method requires more support from the server, and the local display and overall display in the map are separated. When modifying the map, more data content needs to be modified, which is not conducive to the maintenance of the map system app.

[0006] Therefore, it is necessary to provide a new interactive display method, terminal device, computer device and medium for SVG graphics. Summary of the invention

[0007] The object of the present invention is to provide a method for solving at least one of the problems existing in the prior art.

[0008] In order to achieve the above object, the present invention adopts the following technical solutions:

[0009] A first aspect of the present invention provides an interactive display method of SVG graphics, comprising:

[0010] In response to a user's zooming operation on an SVG graphic, changing the transparency of at least some elements in the SVG graphic, wherein the SVG graphic includes a plurality of elements;

[0011] The SVG graphic is displayed according to the element with changed transparency.

[0012] The interactive display method of SVG graphics provided in the first aspect of the present invention cleverly adopts a method of changing the transparency of different elements with the zoom operation, which can realize the smooth transformation of the displayed elements with the real-time zoom operation, thereby smoothly transforming the displayed content while changing the zoom ratio of the SVG graphics, which can improve the user experience, and the method can be executed offline. In addition, compared with the distributed loading method, since the interactive display method of SVG graphics provided in the first aspect of the present invention only uses one SVG graphic to realize the transformation of different display contents, on the one hand, when the user slides the display window up and down or left and right, it can avoid the jamming phenomenon caused by reloading the graphics. On the other hand, it is convenient to update the SVG graphics (when modifying the SVG graphics, the new graphics can be directly replaced), and it is not easy to make errors during the update process. It is suitable for various SVG graphics such as maps and supermarket floor plans, and is convenient for the update and maintenance of APPs such as map systems.

[0013] Optionally, in response to the user's zooming operation on the SVG graphic, changing the transparency of at least some elements in the SVG graphic includes:

[0014] In response to a user's zoom-out operation on the SVG graphic, reducing the transparency of elements in the SVG graphic that reflect overall information and increasing the transparency of elements in the SVG graphic that reflect detailed information;

[0015] In response to a user's zoom-in operation on the SVG graphic, the transparency of the elements in the SVG graphic that reflect overall information is increased, and the transparency of the elements in the SVG graphic that reflect detailed information is decreased.

[0016] This optional method can achieve that when the SVG graphic is enlarged, elements that better reflect the overall information are displayed, and when the SVG graphic is reduced, elements that better reflect the detailed information are displayed, and elements with different levels of detail change smoothly.

[0017] Optionally, the SVG graphic includes at least one first element reflecting overall information and at least one second element reflecting detailed information;

[0018] In response to the user's zoom-out operation on the SVG graphic, reducing the transparency of the elements reflecting the overall information in the SVG graphic and increasing the transparency of the elements reflecting the detail information in the SVG graphic includes:

[0019] In response to a user's zoom-out operation on the SVG graphic, a first element transparency after reduction is calculated according to a first relationship function between the transparency of the first element and the zoom factor, and a second element transparency after increase is calculated according to a second relationship function between the transparency of the second element and the zoom factor;

[0020] In response to the user's zoom-in operation on the SVG graphic, increasing the transparency of the elements reflecting the overall information in the SVG graphic and reducing the transparency of the elements reflecting the detail information in the SVG graphic includes:

[0021] In response to the user's zooming operation on the SVG graphic, the increased transparency of the first element is calculated according to a first relationship function between the first element transparency and the zoom factor, and the reduced transparency of the second element is calculated according to a second relationship function between the second element transparency and the zoom factor.

[0022] This optional approach facilitates achieving smooth transition of displayed elements between first elements and second elements at different detail levels as the zoom operation is performed in real time.

[0023] Optionally, the first relationship function and the second relationship function are linear functions respectively.

[0024] This optional method uses a linear function as the relationship function, which is more conducive to the smoothness of the transformation between the first element and the second element at different detail levels of the displayed element.

[0025] Optionally, the first relationship function is The second relationship function is

[0026]

[0027] Among them, t1 is the transparency value of the first element, t1=0 means completely transparent, t1=255 means completely opaque, t2 is the transparency value of the second element, t2=0 means completely transparent, t2=255 means completely opaque, x is the scaling factor of the SVG graphic size corresponding to the current scaling operation compared to the original SVG graphic size, and α is the change coefficient.

[0028] Optionally, the method further comprises:

[0029] The transparency attribute of the first element in the SVG graphic code is set according to the first element transparency after being reduced or increased calculated by the first relationship function, and the transparency attribute of the second element in the SVG graphic code is set according to the second element transparency after being reduced or increased calculated by the second relationship function;

[0030] Execute the set SVG graphic code to display the SVG graphic according to the element with changed transparency.

[0031] This optional method takes advantage of the fact that SVG graphics have XML formatted data, XML formatted data is readable and its attributes can be dynamically modified, and XML formatted text includes tags for describing transparency attributes. The value of the tag describing the transparency attribute in the SVG graphics code is directly set according to the changed transparency calculated according to the relationship function. This is conducive to achieving real-time changes in element transparency with zooming operations, and is conducive to achieving smooth transitions between the first element and the second element at different detail levels of the displayed elements.

[0032] Optionally, the setting of the transparency attribute of the first element in the SVG graphic code according to the first element transparency calculated by the first relationship function after being reduced or increased, and the setting of the transparency attribute of the second element in the SVG graphic code according to the second element transparency calculated by the second relationship function after being reduced or increased includes:

[0033] Parse the XML formatted data of the SVG graphic, find the first element through the unique identifier of each first element and set the transparency attribute of the first element in the SVG graphic code according to the reduced or increased transparency of the first element calculated by the first relationship function, find the second element through the unique identifier of each second element and set the transparency attribute of the second element in the SVG graphic code according to the reduced or increased transparency of the second element calculated by the second relationship function.

[0034] This optional method utilizes the unique identifier assigned to each element (a tag added to the XML format text to describe the ID attribute) to quickly and accurately locate the first element and the second element. It is more conducive to achieving real-time changes in element transparency with zooming operations, and is more conducive to achieving smooth transitions between the first element and the second element at different detail levels of the displayed elements.

[0035] Optionally, the element includes a graphic element and / or a text element.

[0036] Optionally, the SVG graphic is an SVG map.

[0037] The second aspect of the present invention provides a terminal device for executing the interactive display method of SVG graphics provided by the first aspect of the present invention, including an interactive module and a display module.

[0038] The interactive module is used to change the transparency of at least part of the elements in the SVG graphic in response to the user's scaling operation on the SVG graphic, wherein the scalable vector graphic includes a plurality of elements;

[0039] The display module is used to display the SVG graphic according to the element after the transparency is changed.

[0040] The third aspect of the present invention provides a computer device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the program, the interactive display method of SVG graphics provided in the first aspect of the present invention is implemented.

[0041] A fourth aspect of the present invention provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the interactive display method of SVG graphics provided by the first aspect of the present invention.

[0042] The beneficial effects of the present invention are as follows:

[0043] The technical solution described in the present invention cleverly adopts a method of changing the transparency of different elements with the zoom operation, which can realize the smooth transformation of the displayed elements with the real-time zoom operation, thereby smoothly transforming the displayed content while changing the zoom ratio of the SVG graphic, which can improve the user experience and can be executed offline. In addition, compared with the distributed loading method, since the technical solution described in the present invention only uses one SVG graphic to realize the transformation of different displayed contents, on the one hand, when the user slides the display window up and down or left and right, it can avoid the jamming phenomenon caused by reloading the graphic. On the other hand, it is convenient to update the SVG graphic (when modifying the SVG graphic, the new graphic can be directly replaced), and it is not easy to make errors during the update process. It is suitable for various SVG graphics such as maps and supermarket floor plans, and is convenient for updating and maintaining APPs such as map systems. BRIEF DESCRIPTION OF THE DRAWINGS

[0044] The specific embodiments of the present invention are further described in detail below in conjunction with the accompanying drawings:

[0045] Figure 1 A flow chart of the interactive display method of SVG graphics provided by this embodiment is shown.

[0046] Figure 2 The original schematic diagram showing the supermarket floor plan.

[0047] Figure 3 A schematic diagram showing an enlarged supermarket floor plan.

[0048] Figure 4 A schematic diagram showing a second relationship function curve.

[0049] Figure 5 A schematic diagram showing an SVG graphic code snippet.

[0050] Figure 6 Show execution Figure 5 The SVG graphic code shown is the graphic displayed.

[0051] Figure 7 A schematic diagram showing another SVG graphic code snippet.

[0052] Figure 8 Show execution Figure 7 The SVG graphic code shown is the graphic displayed.

[0053] Fig. 9 A schematic diagram showing the structure of a computer system for implementing the apparatus provided by an embodiment of the present invention is shown. DETAILED DESCRIPTION

[0054] In order to more clearly illustrate the present invention, the present invention is further described below in conjunction with preferred embodiments and accompanying drawings. Similar components in the accompanying drawings are represented by the same reference numerals. It should be understood by those skilled in the art that the content specifically described below is illustrative rather than restrictive, and should not be used to limit the scope of protection of the present invention.

[0055] An embodiment of the present invention provides an interactive display method of SVG graphics, which can be implemented through various software clients with graphic display functions. The software client is installed on a PC such as a desktop or a mobile terminal such as a smart phone or a tablet computer. When the software client such as an APP is running, the interactive display method of SVG graphics provided in this embodiment is implemented.

[0056] like Figure 1 As shown, the interactive display method of SVG graphics provided in this embodiment includes the following steps:

[0057] In response to a user's zooming operation on an SVG graphic, changing the transparency of at least some elements in the SVG graphic, wherein the SVG graphic includes a plurality of elements;

[0058] Display an SVG graphic based on an element with changed transparency.

[0059] The interactive display method of SVG graphics provided in this embodiment cleverly adopts a method of changing the transparency of different elements with the zoom operation, which can realize the smooth transformation of the displayed elements with the real-time zoom operation, so as to smoothly transform the displayed content while changing the zoom ratio of the SVG graphics, which can improve the user experience, and the method can be executed offline. In addition, compared with the distributed loading method, since the interactive display method of SVG graphics provided in the first aspect of the present invention only uses one SVG graphic to realize the transformation of different display contents, on the one hand, when the user slides the display window up and down or left and right, it can avoid the jamming phenomenon caused by reloading the graphics. On the other hand, it is convenient to update the SVG graphics (when modifying the SVG graphics, the new graphics can be directly replaced), and it is not easy to make errors during the update process. It is suitable for various SVG graphics such as maps and supermarket floor plans, and is convenient for the update and maintenance of APPs such as map systems. It is understandable that the SVG graphics should also be displayed according to the zoom operation, that is, after the user performs the zoom operation, not only the display content can be changed, but also the display area size should be changed.

[0060] In some optional implementations of this embodiment, in response to the user's scaling operation on the SVG graphic, changing the transparency of at least some elements in the SVG graphic includes:

[0061] In response to a user's zoom-out operation on the SVG graphic, reducing the transparency of elements in the SVG graphic that reflect overall information and increasing the transparency of elements in the SVG graphic that reflect detailed information;

[0062] In response to a user's zoom-in operation on the SVG graphic, the transparency of the elements in the SVG graphic that reflect overall information is increased, and the transparency of the elements in the SVG graphic that reflect detailed information is decreased.

[0063] This implementation method can realize that when the SVG graphic is enlarged, elements that reflect more overall information are displayed, and when the SVG graphic is reduced, elements that reflect more detailed information are displayed, and elements of different detail levels change smoothly. In this implementation method, the whole and the details are relative, and the SVG graphic can include multiple groups of elements with different detail levels. In a specific example, the SVG graphic is a map, and the map includes a primary element reflecting community information, a secondary element reflecting building information in the community, and a tertiary element reflecting unit door information of the building, etc. If the original image is currently displayed, the secondary elements in the original image are completely opaque or displayed with zero transparency, and the primary and tertiary elements are completely transparent and not displayed or hidden (that is, the original image only displays the secondary elements), then when the user's zoom-out operation is obtained, the transparency of the primary elements is reduced and the transparency of the secondary elements is increased, and when the user's zoom-in operation is obtained, the transparency of the secondary elements is increased and the transparency of the tertiary elements is reduced.

[0064] In some optional implementations of this embodiment, the SVG graphic includes at least one first element reflecting overall information and at least one second element reflecting detailed information;

[0065] In response to the user's zoom-out operation on the SVG graphic, reducing the transparency of the elements reflecting the overall information in the SVG graphic and increasing the transparency of the elements reflecting the detail information in the SVG graphic includes:

[0066] In response to a user's zoom-out operation on the SVG graphic, a first element transparency after reduction is calculated according to a first relationship function between the transparency of the first element and the zoom factor, and a second element transparency after increase is calculated according to a second relationship function between the transparency of the second element and the zoom factor, that is, the transparency of the first element is changed to be reduced based on a result calculated according to the first relationship function, and the transparency of the second element is changed to be increased based on a result calculated according to the second relationship function;

[0067] In response to the user's zoom-in operation on the SVG graphic, increasing the transparency of the elements reflecting the overall information in the SVG graphic and reducing the transparency of the elements reflecting the detail information in the SVG graphic includes:

[0068] In response to the user's zooming operation on the SVG graphic, the increased transparency of the first element is calculated according to a first relationship function between the first element transparency and the zoom factor, and the reduced transparency of the second element is calculated according to a second relationship function between the second element transparency and the zoom factor.

[0069] This implementation method is conducive to achieving smooth transformation of displayed elements between the first element and the second element at different detail levels along with the real-time zooming operation.

[0070] In a specific example, in order to more intuitively reflect the difference between the first element and the second element, the SVG graphic is a supermarket floor plan, which includes elements of two detail levels, such as Figure 2 The first-level elements that reflect the information of each area in the supermarket and Figure 3 The secondary elements reflecting the shelf information in each area are shown, that is, the primary element is used as the first element and the secondary element is used as the second element. Figure 2 In the example, the three rectangular first-level elements represent the fresh food area, department store area, and food area. Figure 2 , that is, the transparency of the first-level elements in the original image is zero and displayed, and the second-level elements are completely transparent and hidden. As the user zooms in, the transparency of the first-level elements increases based on the first relationship function and the transparency of the second-level elements decreases based on the second relationship function. The final displayed plan becomes Figure 3 .

[0071] In some optional implementations of this embodiment, the first relationship function and the second relationship function are respectively linear functions.

[0072] This implementation adopts a linear function as a relationship function, which is more conducive to the smoothness of the transformation between the first element and the second element at different detail levels of the displayed elements.

[0073] In some optional implementations of this embodiment, the first relationship function is The second relationship function is

[0074] Among them, t1 is the transparency value of the first element in the ARBG format, and t2 is the transparency value of the second element in the ARBG format. The ARBG format is a color identification method on a computer system, where RGB represents the three primary colors of red, green, and blue, respectively, and A represents the alpha channel of the color, that is, the transparency value of the color. According to the specification requirements, there is the following formula: C(a, r, g, b), a∈[0,255], a=0 represents that the pixel is transparent, and a=255 represents that the pixel is completely opaque. Therefore, the smaller the transparency value of the ARBG format, the higher the transparency. The larger the SVG graphic size is, the larger the SVG graphic size is; x is the scaling factor of the SVG graphic size corresponding to the current scaling operation compared to the original SVG graphic size, wherein, assuming that the SVG graphic size corresponding to the current scaling operation is P, and the original SVG graphic size is Q, then x = (P / Q) - 1, x = 0 means no scaling, x = 1 means P = 2Q, i.e., the enlarged SVG graphic size is equal to twice the original SVG graphic size, and x = 2 means P = 3Q, i.e., the enlarged SVG graphic size is equal to three times the original SVG graphic size; α is the change coefficient, and it can be understood that the value of α is greater than zero, and the specific value can be set according to the requirements, wherein the second relationship function curve is as follows Figure 4 As shown, the value of α determines the slope of the curve between the zoom factor 0-2. The larger the value of α, the greater the amplitude of the transparency change of the first element and the second element with the zoom factor. In other words, the larger the value of α, the greater the change in the transparency of the first element and the second element when the same zoom operation is applied, and the faster the switching of the displayed content.

[0075] Continuing with the above example, the supermarket floor plan includes primary elements reflecting information of each area in the supermarket and secondary elements reflecting shelf information in each area, that is, the primary elements are used as the first elements and the secondary elements are used as the second elements. If the original image at the initial moment is t1=255, t2=0 (that is, only the primary elements are displayed).

[0076] If a zoom-out operation such as x=−1 is obtained at the first moment after the initial moment (x=−1 is a zoom-out operation compared to x=0), the transparency values ​​of the primary and secondary elements remain unchanged (the transparency value cannot be greater than the maximum value 255 or less than the minimum value 0).

[0077] If a zoom-in operation such as x=1 is obtained at the first moment after the initial moment, then t1=255-α and t2=α, that is, the transparency value of the first element is reduced to increase the transparency of the primary element compared to the original image and the transparency value of the second element is increased to reduce the transparency of the secondary element compared to the original image; if a zoom-in operation such as x=3 is obtained at the second moment after the first moment (x=3 is a zoom-in operation compared to x=1 at the first moment, that is, the user continues to apply the zoom-in operation), then t1=0 and t2=255, that is, the transparency value of the first element is reduced to increase the transparency of the primary element compared to the original image. The plan view at the first moment increases the transparency of the first-level elements and increases the transparency value of the second element to reduce the transparency of the second-level elements compared to the plan view at the first moment; if a zoom-out operation of, for example, x=1.5 is obtained at the third moment after the second moment (x=1.5 is a zoom-out operation compared to x=3 at the second moment), then t1=255-1.5α and t2=1.5α, that is, the transparency value of the first element is increased to reduce the transparency of the first-level elements compared to the plan view at the second moment, and the transparency value of the second element is reduced to increase the transparency of the second-level elements compared to the plan view at the second moment.

[0078] It is understandable that the above example is an SVG graphic with the original image of t1=255, t2=0, which is usually the element that best reflects the overall information. If the values ​​of t1 and t2 in the original image change, the specific functional formulas of the first relationship function and the second relationship function can be adaptively adjusted. Furthermore, the relationship function is not limited to linear functions, and non-linear functions can also be used to achieve special display effects. In addition, for SVG graphics that include elements of three or more levels of detail, multi-level relationship functions (also not limited to linear functions) can be used according to actual needs to achieve a transparency transformation method that meets the requirements of multi-level elements (for example, a certain level of elements will undergo a complex change process from display to hiding and then to display with the zoom operation) to achieve a more special display effect.

[0079] In some optional implementations of this embodiment, the method further includes:

[0080] The transparency attribute of the first element in the SVG graphic code is set according to the first element transparency after being reduced or increased calculated by the first relationship function, and the transparency attribute of the second element in the SVG graphic code is set according to the second element transparency after being reduced or increased calculated by the second relationship function;

[0081] Execute the set SVG graphic code to display the SVG graphic according to the element with changed transparency.

[0082] This implementation method utilizes the characteristics of SVG graphics having XML formatted data, XML formatted data being readable and having dynamically modifiable attributes, and XML formatted text including tags for describing transparency attributes. The value of the tag describing the transparency attribute in the SVG graphics code is directly set according to the changed transparency calculated according to the relationship function, which is beneficial for achieving real-time changes in element transparency with zooming operations, and for achieving smooth transitions between the first element and the second element at different detail levels of the displayed elements.

[0083] In some optional implementations of this embodiment, the setting of the transparency attribute of the first element in the SVG graphic code according to the first element transparency calculated by the first relationship function after being reduced or increased, and the setting of the transparency attribute of the second element in the SVG graphic code according to the second element transparency calculated by the second relationship function after being reduced or increased include:

[0084] Parse the XML formatted data of the SVG graphic, find the first element through the unique identifier of each first element and set the transparency attribute of the first element in the SVG graphic code according to the reduced or increased transparency of the first element calculated by the first relationship function, find the second element through the unique identifier of each second element and set the transparency attribute of the second element in the SVG graphic code according to the reduced or increased transparency of the second element calculated by the second relationship function.

[0085] This implementation method utilizes the unique identifier assigned to each element (a tag added in XML format text to describe the ID attribute) to quickly and accurately locate the first element and the second element, which is more conducive to realizing real-time changes in element transparency with zooming operations, and is more conducive to realizing smooth transitions between the first element and the second element at different detail levels of the displayed elements.

[0086] Continuing with the above example, taking the interactive display method of SVG graphics provided in this embodiment executed on an Android system (Android system) smartphone as an example, changing the transparency of the first element and the second element is further explained:

[0087] Standard SVG graphics can only be rendered and displayed in the browser of the Android system. The native components of the Android system (such as Image View) cannot directly parse SVG graphics, but they can be converted into Android XML files after a small amount of conversion, so that they can be preset as resource files, and Image View can reference resources. However, in fact, the Android XML file is parsed and converted twice during the compilation process, so it is not suitable for the scenario of dynamic element transparency transformation to be implemented in this embodiment. Therefore, in this example, the method of directly parsing the SVG XML file and then drawing the corresponding graphics on the Canvas according to the parsing results is adopted. Since it is displayed once after drawing, there is no problem in actual efficiency.

[0088] The application scenario of this example is to display a supermarket floor plan on the touch screen of an Android smartphone. The supermarket floor plan contains multiple areas and multiple shelves in each area, and displays some positioning information in the picture, such as doors, windows, and cash registers. Due to the limited size of the touch screen of a smartphone, if all the details are displayed, the content in the picture will appear messy and the display effect will be poor. If the distributed loading method is adopted, a regional floor plan of a shelf can be loaded first, and as the user applies a zoom operation on a certain area of ​​the touch screen (for example, two fingers simultaneously touch a certain area and move the two fingers away), the floor plan of the shelf in the area is displayed to display the detailed information of the area. This is a common practice, but the smartphone needs to load multiple pictures. If the display in the supermarket changes, multiple floor plans need to be modified, and maintenance and updating are very cumbersome.

[0089] Different from the above, this example can use one SVG graphic to include all the elements of a supermarket. When displaying, the original image will first show the area information. As the user zooms in, the area information gradually disappears and the specific shelf information is gradually displayed. Since there is only one SVG graphic, there will be no lag due to reloading the graphic when sliding the display window up and down or left and right.

[0090] SVG is an image format based on XML syntax. Unlike other image formats based on pixel processing, SVG describes the shape of the image and is essentially a text file. The XML format text of SVG graphics is in <svg>Some tags under the label, for example, <rect>The label represents the rectangle, <circle>The label represents a circle, <ellipse>The label represents an ellipse, <path>The labels represent the lines. <text>Represents text. The text inside the tag is used to describe the properties of the current tag, such as position, color, font weight, etc. The entire file content is structured. This example mainly uses "fill-opacity" to represent the transparency value of the fill color and "stroke-opacity" to represent the transparency value of the outer frame. The two values ​​are between 0 and 1, 0 represents complete transparency, and 1 represents complete opacity. In addition, this example also adds ID attributes to the elements in svg, and names each element separately to distinguish them. It is understandable that the ID attribute does not affect the display result.

[0091] For SVG graphics code, Figure 5 The code snippet shown is a simple example. After executing the code, you can see that this example draws a rectangle with a width of 45 pixels and a width of 115 pixels on a drawing area with a width of 180 pixels and a height of 180 pixels. The frame color is #ff7f0000 and the rectangle is filled with a transparent color. The specific display effect is as follows Figure 6 shown.

[0092] In this example, you can draw multiple different elements in an SVG graphic (here we take Android XML format as an example), and name each element through the ID attribute, so that you can find each element quickly and accurately. Use "stroke-opacity" and "fill-opacity" to set the color of the element. When the transparency value of the ARBG format is set to 255 (0xff), the opacity value converted to 1 (the default value of opacity can be set to 1), then the element can be fully displayed in the drawing area, and when the transparency value of the ARBG format is set to 0 (0x00), the opacity value converted to 0, then the element is completely hidden.

[0093] Furthermore, since the XML of SVG graphics is formatted data and each element in the SVG graphics has been given a unique ID in advance, the corresponding element can be found by parsing the XML program. Then, the elements in the XML can be pre-processed according to the needs, and the values ​​of the "stroke-opacity" and "fill-opacity" of the elements can be dynamically modified to complete the function of dynamically setting the transparency attributes of each element in the SVG graphics; the display and hiding of the elements can also be dynamically controlled by setting the values ​​of the "stroke-opacity" and "fill-opacity" of the elements. Figure 7 The code shown is an example of the above process. There are three elements in the SVG graphic, named name1, name2 and name3. The name2 element in the middle should be green, but because the opacity value is set to 0, the name2 element is displayed as colorless and transparent or hidden. Figure 8 shown.

[0094] Based on the above, the first relationship function is adopted as The second relationship function is When the transparency value t1 of the area element in ARBG format and the transparency value t2 of the shelf element in ARBG format can be dynamically calculated according to the currently obtained zoom factor x, and then t1 and t2 are divided by 255 for conversion to obtain the opacity value of the area element and the opacity value of the shelf element, so as to set the "stroke-opacity" and "fill-opacity" attributes of each element in the SVG graphic code. After the setting is completed, the native control Canvas of Android is triggered to redraw the visible area, so that the area elements and shelf elements in the SVG image can be dynamically displayed or hidden by changing the transparency.

[0095] It is understandable that the interactive display method of SVG graphics provided in this embodiment is not limited to being executed on terminal devices of the Android system, but can also be executed in other operating systems.

[0096] In some optional implementations of this embodiment, the elements include graphic elements and / or text elements. Figure 2 The first element and Figure 3 The second element is a graphic element.

[0097] As an extension of the interactive display method of SVG graphics provided in this embodiment, based on the idea of ​​changing the transparency of different elements with the zoom operation, it is also possible to change the attributes such as the size, color or position of different elements with the zoom operation as needed, for example by establishing a relationship function between the zoom factor and the attributes such as the size, color or position of different elements, so as to achieve a richer display effect.

[0098] Another embodiment of the present invention provides a terminal device for executing the above-mentioned interactive display method of SVG graphics, including an interactive module and a display module.

[0099] The interactive module is used to change the transparency of at least part of the elements in the SVG graphic in response to the user's scaling operation on the SVG graphic, wherein the scalable vector graphic includes a plurality of elements;

[0100] The display module is used to display the SVG graphic according to the element after the transparency is changed.

[0101] It should be noted that the workflow of the terminal device provided in this embodiment is similar to the interactive display method of the above-mentioned SVG graphics. The relevant parts can be referred to the above description and will not be repeated here.

[0102] The terminal device can be various electronic devices, including but not limited to personal computers, smart phones, smart watches, tablet computers, personal digital assistants, etc.

[0103] In a specific example, the SVG graphic is an SVG map, the terminal device is a smart phone, and the interaction module and the display module are integrated into the touch screen of the smart phone. After the user opens the electronic map APP installed on the smart phone, the touch screen displays the original-size SVG map. In response to the user's zoom operation on the SVG map applied to the touch screen (for example, when two fingers are pressed at the same time, the two fingers are moved away to zoom in, and the two fingers are moved closer to zoom out), the transparency of the cell elements reflecting the cell information (specifically, they may be cell model map elements) and the building elements reflecting the building information in the community (specifically, they may be building model map elements) in the SVG map are changed to display the cell elements when zooming out and the building elements when zooming in.

[0104] like Fig. 9 As shown, a computer system suitable for implementing the terminal device provided by the above embodiment includes a central processing module (CPU), which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) or a program loaded from a storage part into a random access memory (RAM). In the RAM, various programs and data required for the operation of the computer system are also stored. The CPU, ROM and RAM are connected to each other through a bus. An input / output (I / O) interface is also connected to the bus.

[0105] The following components are connected to the I / O interface: an input part including a keyboard, a mouse, etc.; an output part including a liquid crystal display (LCD), etc. and a speaker, etc.; a storage part including a hard disk, etc.; and a communication part including a network interface card such as a LAN card, a modem, etc. The communication part performs communication processing via a network such as the Internet. A drive is also connected to the I / O interface as needed. Removable media, such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, etc., are installed on the drive as needed so that the computer program read therefrom is installed into the storage part as needed.

[0106] In particular, according to this embodiment, the process described in the flowchart above can be implemented as a computer software program. For example, this embodiment includes a computer program product, which includes a computer program tangibly contained on a computer-readable medium, and the computer program includes program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network through a communication part, and / or installed from a removable medium.

[0107] The flow chart and schematic diagram in the accompanying drawings illustrate the possible architecture, function and operation of the system, method and computer program product of the present embodiment. In this regard, each square box in the flow chart or schematic diagram can represent a part of a module, program segment or code, and a part of the above-mentioned module, program segment or code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the square box can also occur in a sequence different from that marked in the accompanying drawings. For example, two square boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each square box in the schematic diagram and / or flow chart, and the combination of the square boxes in the schematic diagram and / or flow chart can be implemented with a dedicated hardware-based system that performs a specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0108] As another aspect, the present embodiment further provides a non-volatile computer storage medium, which may be the non-volatile computer storage medium included in the above-mentioned device in the above-mentioned embodiment, or may be a non-volatile computer storage medium that exists independently and is not installed in a terminal. The above-mentioned non-volatile computer storage medium stores one or more programs, and when the above-mentioned one or more programs are executed by a device, the above-mentioned device: in response to the user's zooming operation on the SVG graphic, changes the transparency of at least part of the elements in the SVG graphic, wherein the scalable vector graphic includes multiple elements; and displays the SVG graphic according to the elements after the transparency is changed.

[0109] In the description of the present invention, it should be noted that relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "comprise", "include" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, an element defined by the statement "comprises a ..." does not exclude the presence of other identical elements in the process, method, article or device including the element.

[0110] Obviously, the above embodiments of the present invention are merely examples for clearly illustrating the present invention, and are not limitations on the embodiments of the present invention. For those skilled in the art, other different forms of changes or modifications can be made based on the above description. It is impossible to list all the embodiments here. All obvious changes or modifications derived from the technical solution of the present invention are still within the protection scope of the present invention.< / text> < / path> < / ellipse> < / circle> < / rect> < / svg>

Claims

1. A method for interactively displaying scalable vector graphics, characterized in that: include: In response to a user's zooming operation on a scalable vector graphic, changing the transparency of at least some elements in the scalable vector graphic, wherein the scalable vector graphic includes a plurality of elements; Displaying the scalable vector graphics according to the element with changed transparency; In response to the user's scaling operation on the scalable vector graphics, changing the transparency of at least some elements in the scalable vector graphics includes: In response to a user's zoom-out operation on the scalable vector graphic, reducing the transparency of the elements reflecting overall information in the scalable vector graphic and increasing the transparency of the elements reflecting detail information in the scalable vector graphic; In response to a user's zoom-in operation on the scalable vector graphic, increasing the transparency of the elements reflecting overall information in the scalable vector graphic and decreasing the transparency of the elements reflecting detail information in the scalable vector graphic; The scalable vector graphics includes at least one first element reflecting overall information and at least one second element reflecting detailed information; In response to the user's zoom-out operation on the scalable vector graphics, reducing the transparency of the elements reflecting the overall information in the scalable vector graphics and increasing the transparency of the elements reflecting the detail information in the scalable vector graphics includes: In response to a user's zoom-out operation on the scalable vector graphic, a first element transparency after reduction is calculated according to a first relationship function between the transparency of the first element and the zoom factor, and a second element transparency after increase is calculated according to a second relationship function between the transparency of the second element and the zoom factor; In response to the user's zoom-in operation on the scalable vector graphic, increasing the transparency of the element reflecting the overall information in the scalable vector graphic and reducing the transparency of the element reflecting the detail information in the scalable vector graphic comprises: In response to a user's zoom-in operation on the scalable vector graphic, calculating an increased transparency of the first element according to a first relationship function between the transparency of the first element and the zoom factor, and calculating a decreased transparency of the second element according to a second relationship function between the transparency of the second element and the zoom factor; The first relationship function and the second relationship function are respectively linear functions; The first relation function is The second relationship function is Among them, t1 is the transparency value of the first element, t1=0 means completely transparent, t1=255 means completely opaque, t2 is the transparency value of the second element, t2=0 means completely transparent, t2=255 means completely opaque, x is the scaling factor of the scalable vector graphic size corresponding to the current scaling operation compared to the original scalable vector graphic size, and α is the change coefficient.

2. The method according to claim 1, characterized in that The method further includes: The transparency attribute of the first element in the scalable vector graphics code is set according to the first element transparency after reduction or increase calculated by the first relationship function, and the transparency attribute of the second element in the scalable vector graphics code is set according to the second element transparency after reduction or increase calculated by the second relationship function; The configured scalable vector graphics code is executed to display the scalable vector graphics based on the element with the changed transparency.

3. The method according to claim 2, characterized in that The method of setting the transparency attribute of the first element in the scalable vector graphics code according to the first element transparency calculated by the first relationship function after being reduced or increased, and setting the transparency attribute of the second element in the scalable vector graphics code according to the second element transparency calculated by the second relationship function after being reduced or increased includes: Parse the XML formatted data of the scalable vector graphics, find the first element through the unique identifier of each first element and set the transparency attribute of the first element in the scalable vector graphics code according to the reduced or increased transparency of the first element calculated according to the first relationship function, find the second element through the unique identifier of each second element and set the transparency attribute of the second element in the scalable vector graphics code according to the reduced or increased transparency of the second element calculated according to the second relationship function.

4. The method according to claim 1, characterized in that The elements include graphic elements and / or text elements.

5. The method according to claim 1, characterized in that The scalable vector graphics is a scalable vector map.

6. A terminal device for executing the method according to any one of claims 1 to 5, characterized in that: Including interactive module and display module, The interaction module is used to change the transparency of at least part of the elements in the scalable vector graphics in response to the user's scaling operation on the scalable vector graphics, wherein the scalable vector graphics includes a plurality of elements; The display module is used to display the scalable vector graphics according to the element with changed transparency.

7. A computer device comprising a memory, a processor and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the program, the method according to any one of claims 1 to 5 is implemented.

8. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the method according to any one of claims 1 to 5 is implemented.

Images