SVG-Based GUI Drawing Method for Efficient Scaling
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing methods for drawing graphical user interfaces (GUIs) using bitmap pictures are resource-intensive and inefficient, as they require large storage space and do not allow for dynamic scaling and styling without significant resource changes.
Innovation Solution
The method employs Scalable Vector Graphics (SVG) documents, which are parsed and rendered to draw GUIs, using extended attributes such as scaling, aligning, dynamic variables, and state tracking to improve resource efficiency and flexibility in resizing and styling.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Adaptability or versatility
If bitmap pictures are used to draw GUI, then the GUI can be displayed in graphic form, but it occupies rather large space and requires significant resource changes for scaling and styling
Solution Approach 1:
The patent changes the fundamental parameter of graphic representation from bitmap (raster) to vector format. This allows the same graphic element to be rendered at any size by changing mathematical parameters (coordinates, dimensions) rather than storing multiple bitmap versions, thereby achieving scaling flexibility without proportional increases in storage space.
Solution Approach 2:
The patent introduces dynamic variables and state tracking mechanisms that allow GUI elements to adapt their appearance and behavior based on runtime conditions. Elements can dynamically adjust their properties (position, size, visibility) without requiring pre-rendered bitmap variations for each state, reducing storage requirements while maintaining versatility.
2Productivity
If bitmap pictures are used to draw GUI, then the GUI can be displayed, but drawing speed is slow and resource efficiency is low
Solution Approach 1:
The patent performs preliminary parsing of SVG documents into structured data representations and pre-calculates rendering instructions. This preparation work is done once, allowing the actual drawing operation to execute quickly by simply rendering the pre-processed vector data rather than processing large bitmap files or generating graphics on-the-fly.
Solution Approach 2:
The patent replaces the traditional bitmap rendering mechanism with a vector-based rendering system. Instead of manipulating pixel arrays (mechanical processing of large data structures), the system uses mathematical descriptions of graphic elements that require minimal computational resources to process and render, thereby improving drawing speed and resource efficiency.
3Adaptability or versatility
If bitmap pictures are used to draw GUI, then the GUI can be displayed, but resizing and styling require complete picture resource changes
Solution Approach 1:
The patent stores graphic elements as vector objects with modifiable parameters (dimensions, position, color, etc.) rather than fixed bitmap data. When resizing or restyling is needed, only the relevant parameters are changed and the element is re-rendered, avoiding the need to load or modify complete picture resources. This dramatically reduces the resource size required while maintaining full resizing and styling capability.
Data Source
Figure 1~2
Figure 3~5
Figure 6~7
AI summary
The present disclosure relates to methods and devices for drawing a graphical user interface. The method includes: receiving (101) a drawing instruction for a GUI; determining (102) attribute data of each of graphic elements in a scalable vector graphic SVG document according to the drawing instruction; and drawing (103) the GUI to which the graphic elements belong, according to the determined attribute data.