Qt-based SVG icon display method and device and medium

Abstract

The invention relates to a Qt-based SVG icon display method and device and a medium, and the method comprises the steps: aiming at an SVG vector diagram to be used as a button icon, combining an object attribute system of Qt and a customized grammar rule of qss, and newly adding attributes of the SVG vector diagram corresponding to different drawing states; reloading a paintEvent function in the Qt, and replacing the content of a native drawing icon in the paintEvent function with a drawing SVG (Scalable Vector Graphics) icon function; and when the SVG icon needs to be drawn, calling the paintEvent function after reloading to carry out drawing. According to the method and the device, the UI component can support the display of the SVG vector diagram icon.

Description

Technical Field

[0001] The present invention relates to the field of software development, and in particular to a Qt-based SVG icon display method, device and medium. Background Art

[0002] With the development of hardware, the display resolution is getting higher and higher. When icons in png, jpg and other formats are displayed at high resolution or when they are enlarged, they will appear blurry, affecting the user experience. However, existing programs composed of QWidget UI components cannot support SVG vector graphics display in UI component icons. Summary of the invention

[0003] In order to solve the above problems, the present invention proposes a Qt-based SVG icon display method, device and medium.

[0004] The specific plan is as follows:

[0005] A Qt-based SVG icon display method comprises the following steps:

[0006] For the SVG vector image to be used as a button icon, combined with Qt's object attribute system and qss's custom syntax rules, new attributes corresponding to different drawing states of the SVG vector image are added; when the SVG vector image is multi-color, its attributes record the vector image corresponding to different drawing states; when the SVG vector image is monochrome, its attributes record the input SVG vector image and the colors corresponding to different drawing states;

[0007] Overload the paintEvent function in Qt, and replace the native icon drawing content in the paintEvent function with the SVG icon drawing function; in the SVG icon drawing function, first obtain the drawing state, then obtain the vector map corresponding to the drawing state based on the newly added attributes under different drawing states, and finally replace the image attribute of the corresponding type in the original qss with the vector map corresponding to the drawing state based on the type of SVG icon to be drawn;

[0008] When you need to draw an SVG icon, call the overloaded paintEvent function to draw it.

[0009] Furthermore, when the SVG vector image is monochrome, the method for obtaining the vector image corresponding to the drawing state based on the attribute is: based on the color corresponding to the drawing state in the attribute, the value of the fill attribute in the SVG vector image is replaced, and the vector image obtained after the replacement is used as the required vector image.

[0010] Furthermore, the drawing states include a normal state, a suspended state, a pressed state, a checked state, and a disabled state.

[0011] Furthermore, the type of the SVG icon to be drawn includes a background type and a border type.

[0012] Furthermore, a custom SVG icon type can be added to the SVG icon drawing function. When the custom SVG icon type contains text, attributes of the text corresponding to different drawing states are added in advance to record text images corresponding to different drawing states.

[0013] A Qt-based SVG icon display terminal device comprises a processor, a memory, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, the steps of the method described above in the embodiment of the present invention are implemented.

[0014] A computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps of the method described above in an embodiment of the present invention are implemented.

[0015] The present invention adopts the above technical solution, by realizing the drawing of SVG vector graphics and changing the color of SVG vector graphics, and on the basis of QWidget UI component, the drawing of the underlying icons uses SVG vector graphics instead of traditional png and jpg icons, so that the UI component can support the display of SVG vector graphics icons, thereby achieving the goal that the icons of UI components will not be blurred under high resolution or enlarged display, thereby improving user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] Figure 1 Shown is a flow chart of a method according to a first embodiment of the present invention.

[0017] Figure 2 Shown is a schematic diagram of the native paintEvent function in this embodiment.

[0018] Figure 3 FIG. 4 is a schematic diagram of the overloaded paintEvent function in this embodiment.

[0019] Figure 4 FIG. 4 is a schematic diagram of the paintSvgBtn function in this embodiment.

[0020] Figure 5 The figure shows the effect comparison between the PNG icon and the SVG icon in this embodiment. DETAILED DESCRIPTION

[0021] To further illustrate various embodiments, the present invention provides drawings. These drawings are part of the disclosure of the present invention, which are mainly used to illustrate the embodiments and can be used in conjunction with the relevant descriptions in the specification to explain the operating principles of the embodiments. With reference to these contents, ordinary technicians in this field should be able to understand other possible implementations and advantages of the present invention.

[0022] The present invention will now be further described with reference to the accompanying drawings and specific implementation methods.

[0023] Embodiment 1:

[0024] The embodiment of the present invention provides a Qt-based SVG icon display method, such as Figure 1 As shown, the method comprises the following steps:

[0025] S1: For the SVG vector image to be used as a button icon, new attributes corresponding to different drawing states of the SVG vector image are added by combining Qt's object attribute system and qss's custom syntax rules.

[0026] Since the icon (ie, the SVG vector image) on the button should be in different colors based on the different drawing states of the button during its use, in this embodiment, a newly added attribute is used to represent the vector image corresponding to each drawing state.

[0027] According to the definition of SVG vector graphics, we know that SVG vector graphics are composed of an XML file, which defines various attributes of SVG vector graphics. By reading the XML file, we can obtain various attributes of SVG vector graphics, such as its attribute fill is used to control the color. By modifying the value of the fill attribute, the SVG vector graphics can be modified to a specified color value. Based on this, when the SVG vector graphics is multi-color (i.e., composed of multiple colors), its attributes record the vector graphics corresponding to different drawing states (i.e., it is necessary to enter multiple vector graphics corresponding to different colors as vector graphics in different drawing states), as shown below:

[0028] Attribute svgBGImage: Normal background SVG icon

[0029] Attribute svgBGHoverImage: Floating background SVG icon

[0030] Property svgBGPressedImage: pressed background SVG icon

[0031] Property svgBGCheckedImage: Checked background SVG icon

[0032] Attribute svgBGDisableImage: disabled background SVG icon

[0033] When the SVG vector image is monochrome, since the color of the vector image can be changed by changing its fill, its attributes record the input SVG vector image (in this embodiment, the input is a normal vector image) and the colors corresponding to different drawing states (in this case, only one SVG vector image needs to be input), as shown below:

[0034] Attribute svgBGImage: Normal background SVG icon

[0035] Attribute svgBGNormalColor: Normal monochrome SVG fill color

[0036] Attribute svgBGHoverColor: The monochrome SVG fill color in the hover state

[0037] Property svgBGPressedColor: pressed monochrome SVG fill color

[0038] Property svgBGCheckedColor: Checked monochrome SVG fill color

[0039] Property svgBGDisableColor: disabled monochrome SVG fill color

[0040] In the above steps, by adding custom attributes, users can directly control the SVG icon control of UI components in the qss file to separate the style code from the C++ logic code.

[0041] S2: Overload the paintEvent() function in Qt, and replace the native icon drawing content in the paintEvent() function with the SVG icon drawing function; in the SVG icon drawing function, first obtain the drawing state, then obtain the vector graph corresponding to the drawing state based on the newly added attributes under different drawing states, and finally, based on the type of SVG icon to be drawn, replace the image attribute of the corresponding type in the original qss with the vector graph corresponding to the drawing state.

[0042] like Figure 2 The figure shows the native paintEvent function in Qt, in which the drawControl function includes the drawing of the bottom appearance of the button and the drawing content of the icon on the button. In this embodiment, the overloaded paintEvent function only modifies the drawing content of the icon on the button, while the drawing content of the bottom appearance of the button is still maintained.

[0043] In this embodiment, the overloaded paintEvent function is as follows Figure 3 and Figure 4 As shown, the function of drawing SVG icon is expressed as Figure 4The paintSvgBtn function shown first obtains the drawing state tmpDrawState through the constructed getDrawStatus function, and then draws the corresponding type of icon (such as background icon, border icon) by calling the obtained drawing state variable tmpDrawState through the constructed corresponding function (such as painSvgBGImage, painSvgBorderImage).

[0044] The paintEvent function is a virtual function in the QWidget class and is used to draw the contents of the widget.

[0045] The image attribute corresponding to each type in the original qss is used to record the vector graphics corresponding to each type. For example, for the background type, its image attribute name is background-image, and for the border type, its image attribute name is border-image.

[0046] In addition, in addition to the conventional background and border types, this embodiment also includes custom types, such as icon + text (the text is located in different directions of the icon) type. At this time, it is necessary to construct the drawing state variable tmpDrawState obtained by calling its corresponding drawing function painButtonIconAndText to obtain the corresponding vector map, and then draw the icon + text. In the drawing of the text, the attributes corresponding to the different drawing states of the text can be added in step S1 to record the text pictures corresponding to the different drawing states for subsequent function calls.

[0047] S3: When you need to draw an SVG icon, call the overloaded paintEvent function to draw it.

[0048] Since Qt uses the QSvgRenderer class internally, in this embodiment, the SVGRender class can be encapsulated in combination with the usage scenario so that the SVG vector image can be used in the Qt drawing system.

[0049] By modifying the drawing code of the traditional UI, changing the icon position of the traditional UI component, and using the encapsulated SVGRender class to realize the display of SVG vector graphics, the traditional UI component can support the SVG vector icon display function.

[0050] The effect comparison between the traditional PNG icon and the SVG icon used in this embodiment is shown in the figure Figure 5 As shown in the figure, it can be seen that after the PNG icon is enlarged and stretched, the jagged edges are serious, while the SVG icon looks much smoother.

[0051] Embodiment 2:

[0052] The present invention also provides a Qt-based SVG icon display terminal device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the steps in the above-mentioned method embodiment of the first embodiment of the present invention when executing the computer program.

[0053] Further, as an executable solution, the Qt-based SVG icon display terminal device can be a computing device such as a desktop computer, a notebook, a PDA, and a cloud server. The Qt-based SVG icon display terminal device may include, but is not limited to, a processor and a memory. Those skilled in the art can understand that the composition structure of the above-mentioned Qt-based SVG icon display terminal device is only an example of a Qt-based SVG icon display terminal device, and does not constitute a limitation on the Qt-based SVG icon display terminal device. It may include more or less components than the above-mentioned, or a combination of certain components, or different components. For example, the Qt-based SVG icon display terminal device may also include input and output devices, network access devices, buses, etc., and the embodiments of the present invention do not limit this.

[0054] Further, as an executable solution, the processor may be a central processing unit (CPU), or other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), field-programmable gate arrays (FPGA) or other programmable logic devices, etc. The general-purpose processor may be a microprocessor or any conventional processor, etc. The processor is the control center of the Qt-based SVG icon display terminal device, and uses various interfaces and lines to connect various parts of the entire Qt-based SVG icon display terminal device.

[0055] The memory can be used to store the computer program and / or module, and the processor realizes various functions of the Qt-based SVG icon display terminal device by running or executing the computer program and / or module stored in the memory, and calling the data stored in the memory. The memory can mainly include a program storage area and a data storage area, wherein the program storage area can store an operating system and an application required for at least one function; the data storage area can store data created according to the use of the mobile phone, etc. In addition, the memory can include a high-speed random access memory, and can also include a non-volatile memory, such as a hard disk, a memory, a plug-in hard disk, a smart memory card (Smart Media Card, SMC), a secure digital (Secure Digital, SD) card, a flash card (Flash Card), at least one disk storage device, a flash memory device, or other volatile solid-state storage devices.

[0056] The present invention also provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps of the above method in the embodiment of the present invention are implemented.

[0057] If the module / unit integrated in the Qt-based SVG icon display terminal device is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the present invention implements all or part of the processes in the above-mentioned embodiment method, and can also be completed by instructing the relevant hardware through a computer program. The computer program can be stored in a computer-readable storage medium, and the computer program can implement the steps of the above-mentioned various method embodiments when executed by the processor. Among them, the computer program includes computer program code, and the computer program code can be in source code form, object code form, executable file or some intermediate form. The computer-readable medium may include: any entity or device capable of carrying the computer program code, recording medium, U disk, mobile hard disk, disk, optical disk, computer memory, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory) and software distribution medium, etc.

[0058] Although the present invention has been specifically shown and described in conjunction with the preferred embodiments, it should be understood by those skilled in the art that various changes may be made to the present invention in form and details without departing from the spirit and scope of the present invention as defined by the appended claims, all of which are within the scope of protection of the present invention.

Claims

1. A Qt-based SVG icon display method, characterized in that: The following steps are involved: For the SVG vector image to be used as a button icon, combined with Qt's object attribute system and qss's custom syntax rules, new attributes corresponding to different drawing states of the SVG vector image are added; when the SVG vector image is multi-color, its attributes record the vector image corresponding to different drawing states; when the SVG vector image is monochrome, its attributes record the input SVG vector image and the colors corresponding to different drawing states; Overload the paintEvent function in Qt, and replace the native icon drawing content in the paintEvent function with the SVG icon drawing function; in the SVG icon drawing function, first obtain the drawing state, then obtain the vector map corresponding to the drawing state based on the newly added attributes under different drawing states, and finally replace the image attribute of the corresponding type in the original qss with the vector map corresponding to the drawing state based on the type of SVG icon to be drawn; When you need to draw an SVG icon, call the overloaded paintEvent function to draw it.

2. The Qt-based SVG icon display method according to claim 1, characterized in that: When the SVG vector image is monochrome, the method for obtaining the vector image corresponding to the drawing state based on the attribute is: based on the color corresponding to the drawing state in the attribute, the value of the fill attribute in the SVG vector image is replaced, and the vector image obtained after the replacement is used as the required vector image.

3. The Qt-based SVG icon display method according to claim 1, characterized in that: The drawing states include normal state, suspended state, pressed state, checked state and disabled state.

4. The Qt-based SVG icon display method according to claim 1, characterized in that: The type of the SVG icon to be drawn includes a background type and a border type.

5. The Qt-based SVG icon display method according to claim 1, characterized in that: A custom SVG icon type can be added in the SVG icon drawing function. When the custom SVG icon type contains text, attributes corresponding to different drawing states of the text are added in advance to record the text images corresponding to different drawing states.

6. A Qt-based SVG icon display terminal device, characterized in that: The method comprises a processor, a memory and a computer program stored in the memory and running on the processor, wherein the processor implements the steps of any one of the methods of claims 1 to 5 when executing the computer program.

7. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 5 are implemented.

Images