WO2023169316A1 - 一种基于用户界面框架的处理方法、装置、设备及介质 - Google Patents

一种基于用户界面框架的处理方法、装置、设备及介质 Download PDF

Info

Publication number
WO2023169316A1
WO2023169316A1 PCT/CN2023/079501 CN2023079501W WO2023169316A1 WO 2023169316 A1 WO2023169316 A1 WO 2023169316A1 CN 2023079501 W CN2023079501 W CN 2023079501W WO 2023169316 A1 WO2023169316 A1 WO 2023169316A1
Authority
WO
WIPO (PCT)
Prior art keywords
user interface
target component
vector
component
interface framework
Prior art date
Application number
PCT/CN2023/079501
Other languages
English (en)
French (fr)
Inventor
周天柱
Original Assignee
北京字跳网络技术有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 北京字跳网络技术有限公司 filed Critical 北京字跳网络技术有限公司
Publication of WO2023169316A1 publication Critical patent/WO2023169316A1/zh

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T19/00—Manipulating 3D models or images for computer graphics
    • G06T19/20—Editing of 3D images, e.g. changing shapes or colours, aligning objects or positioning parts
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/50—Information retrieval; Database structures therefor; File system structures therefor of still image data
    • G06F16/56—Information retrieval; Database structures therefor; File system structures therefor of still image data having vectorial format
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/04815—Interaction with a metaphor-based environment or interaction object displayed as three-dimensional, e.g. changing the user viewpoint with respect to the environment or object
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T15/00—3D [Three Dimensional] image rendering
    • G06T15/02—Non-photorealistic rendering
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T2200/00—Indexing scheme for image data processing or generation, in general
    • G06T2200/24—Indexing scheme for image data processing or generation, in general involving graphical user interfaces [GUIs]
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T2210/00—Indexing scheme for image generation or computer graphics
    • G06T2210/61—Scene description
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T2219/00—Indexing scheme for manipulating 3D models or images for computer graphics
    • G06T2219/20—Indexing scheme for editing of 3D models
    • G06T2219/2024—Style variation

Definitions

  • the present disclosure relates to the technical field of graphical user interfaces, and in particular to a processing method, device, equipment and medium based on a user interface framework.
  • UI user interface
  • a UI framework is a set of computer user interface programming libraries that provide a series of data structures and methods to allow programmers to draw a specific graphical user interface, such as a three-dimensional editor.
  • the present disclosure provides a processing method, device, equipment and medium based on a user interface framework.
  • the embodiment of the present disclosure provides a processing method based on the user interface framework.
  • the method includes:
  • a rendering result of the target component is generated based on the drawing vector and displayed.
  • An embodiment of the present disclosure also provides a processing device based on a user interface framework.
  • the device includes:
  • the data acquisition module is used to obtain the data group of the target component based on the user interface framework
  • a typesetting generation module used for typesetting the data group to obtain the display style information of the target component
  • a conversion description module used to convert the display style information into a drawing vector based on a preset vector drawing library
  • Generate and display module configured to generate and display the rendering result of the target component based on the drawing vector.
  • An embodiment of the present disclosure also provides an electronic device.
  • the electronic device includes: a processor; a memory used to store instructions executable by the processor; and the processor is used to read the instruction from the memory.
  • the instructions can be executed and executed to implement the processing method based on the user interface framework as provided by the embodiments of the present disclosure.
  • Embodiments of the present disclosure also provide a non-transitory computer-readable storage medium, which stores computer A computer program, which is used to execute the processing method based on the user interface framework provided by the embodiment of the present disclosure.
  • An embodiment of the present disclosure also provides a computer program product.
  • the instructions in the computer program product are executed by a processor, the processing method based on the user interface framework as provided by the embodiment of the present disclosure is implemented.
  • An embodiment of the present disclosure also provides a computer program, which, when executed by a processor, implements the processing method based on the user interface framework as provided by the embodiment of the present disclosure.
  • Figure 1 is a schematic flowchart of a processing method based on a user interface framework provided by an embodiment of the present disclosure
  • Figure 2 is a schematic flowchart of another processing method based on the user interface framework provided by an embodiment of the present disclosure
  • Figure 3 is a schematic diagram showing a rendering result of a target component provided by an embodiment of the present disclosure
  • Figure 4 is a schematic diagram showing the rendering results of another target component provided by an embodiment of the present disclosure.
  • Figure 5 is a schematic diagram showing the rendering results of yet another target component provided by an embodiment of the present disclosure.
  • Figure 6 is a schematic structural diagram of a processing device based on a user interface framework provided by an embodiment of the present disclosure
  • FIG. 7 is a schematic structural diagram of an electronic device provided by an embodiment of the present disclosure.
  • the term “include” and its variations are open-ended, ie, “including but not limited to.”
  • the term “based on” means “based at least in part on.”
  • the term “one embodiment” means “at least one embodiment”; the term “another embodiment” means “at least one additional embodiment”; and the term “some embodiments” means “at least some embodiments”. Relevant definitions of other terms will be given in the description below.
  • the processing solution based on the user interface framework obtained by the embodiment of the present disclosure obtains the data group of the target component based on the user interface framework, performs typesetting processing on the data group, and obtains
  • the display style information of the target component is converted into a drawing vector based on the preset vector drawing library, and the rendering result of the target component is generated and displayed based on the drawing vector.
  • the typesetting of data groups in the processing process based on the user interface framework can improve the efficiency of component processing, and the vector description processing is based on the vector drawing library.
  • the realization of user interface performance can be naturally cross-platform and can meet the needs of more users. Multiple visual effects, and finally the rendering result of the target component is generated based on the drawing vector description, ensuring the stability of the rendering result and further improving the component display effect in the user interface framework scenario.
  • Figure 1 is a schematic flowchart of a processing method based on a user interface framework provided by an embodiment of the present disclosure.
  • the method can be executed by a processing device based on the user interface framework.
  • the device can be implemented using software and/or hardware and can generally be integrated. in electronic devices. As shown in Figure 1, the method includes:
  • Step 101 Obtain the data group of the target component based on the user interface framework.
  • the target component can be any button, menu, pop-up window, etc.
  • the embodiment of the disclosure does not limit the form of the target component.
  • the target component can be a block button or an ordinary button.
  • the data group refers to a data group used to represent multiple groups of data related to the target component. In the embodiment of the present disclosure, it refers to a data group used to represent the layout content, visual description, current level, and current logic related to the target component.
  • the data group is Typesetting content, including width values, height values, etc.
  • obtaining the data set of the target component based on the user interface framework includes: obtaining a set of data based on the length and width input by the user on the operation interface, and obtaining a set of data based on the position, color, and offset input by the user on the operation interface.
  • the operation interface refers to a page that provides users with operations, and the operation interface may include data group input options for the component.
  • the user interface framework can be transformed into products based on business development input, such as Such as 3D editor, which can improve editing processing efficiency and visual effects.
  • obtaining the data set of the target component based on the user interface framework includes: calling the target engine to obtain the data set corresponding to the target component from a third-party database, that is, the target component does not receive user input.
  • the pre-stored data group can be called for subsequent typesetting processing.
  • target component is regarded as a combination of a set of data, and by combining these data sets in various ways, more new components can be obtained.
  • the user's input operation on the operation interface of the user interface framework is detected.
  • the user's click selection and other operations on the component's data group input options are detected and relevant data is input, the data group of the target component can be obtained.
  • Step 102 Perform typesetting processing on the data group to obtain the display style information of the target component.
  • the display style information refers to a set of data used to describe the display logic of the target component. It can also be understood as the position and size of the shape bounding box of the target component, which determines the position of the target component on the display screen.
  • performing typesetting processing on the data group to generate display style information of the target component includes: processing the data group and mapping it to a style library function to obtain the display style information of the target component.
  • layout can be understood as the position and size information of the displayed components.
  • data style mapping processing can be performed on the data group to obtain the display style information of the target component.
  • Step 103 Convert the display style information into a drawing vector based on a preset vector drawing library.
  • the vector drawing library refers to a database that converts a set of data to draw vectors.
  • a vector refers to a graph formed by a series of connected points, and drawing a vector refers to how to draw what path in what way.
  • Step 104 Generate the rendering result of the target component based on the drawing vector and display it.
  • the rendering engine and the user interface framework can share the underlying rendering context. After obtaining the drawing vector, the rendering result is obtained and displayed based on the underlying application interface.
  • the processing solution based on the user interface framework obtains the data group of the target component based on the user interface framework, performs typesetting processing on the data group, and obtains the display style information of the target component.
  • the library converts the display style information into a drawing vector, generates and displays the rendering result of the target component based on the drawing vector.
  • the typesetting of data groups in the processing process based on the user interface framework can improve the efficiency of component processing, and the vector description processing is based on the vector drawing library.
  • the realization of user interface performance can be naturally cross-platform and can meet the needs of more users. Multiple visual effects, and finally the rendering result of the target component is generated based on the drawing vector description, ensuring the stability of the rendering result and further improving the component display effect in the user interface framework scenario.
  • formatting the data group to obtain the display style information of the target component includes: processing the data group according to a preset style model to obtain a data structure description, and mapping the data structure description to a style library function. , get the display style information of the target component.
  • the preset style model can be selected and set according to the application scenario.
  • CSS CSS
  • the data group such as the typesetting content data group, including width, height, padding , edges and other typesetting content are described and converted, and then mapped to the function of the style library to obtain the typesetting result.
  • the data structure description can be understood as a set of function calls for the target layout engine.
  • the target component can be updated in the update typesetting function.
  • the preset style model processes the data group to obtain a data structure description, maps the data structure description to the style library function, and obtains the display style information of the target component, avoiding the need to re-analyze the UI component style and write related functions. , you can quickly see the visual results of the design plan, and achieve a more flexible and efficient way to define the style of the user interface components.
  • the user interface efficiency is high enough and stable enough.
  • converting the display style information into a drawing vector based on a preset vector drawing library includes: converting in the vector drawing library based on the display style information, obtaining the drawing style, drawing path and drawing form, based on the drawing style, drawing Paths and draw forms generate draw vectors.
  • the drawing style determines the color of the target component, which can be displayed in the form of gradient, filling, etc.; the drawing path is described by the starting path, such as moving the coordinates to (100, 100), and then drawing the line to (100 , 200), (200, 200), (200, 100), end the path description, such a series of commands describe the path; there are two ways to draw the form, one is to draw the line, the other is to fill. Both tracing and filling will accept the description of the drawn path.
  • the description of the drawn path may be a concave polygon or a convex polygon. When geometrically dividing concave polygons, there are two methods in computational geometry, namely odd and even. Rules and non-zero wrapping rules. In embodiments of the present disclosure, non-zero wrapping rules are used to triangulate concave polygons.
  • the color of the target component that the user can see, whether there are edges, and the width of the edges jointly determine the display style of the target component.
  • the style displayed by the target component if it has rounded corners, can be The Searle curve is used to describe the path; if it is an ordinary square, the rectangular function can be used directly.
  • the XX path is drawn in the XX form in the XX state in the XX style. That is to say, the XX state can be described, such as what coordinates the target control is drawn at, through the target application interface. It can change styles, draw base points and other states, and can be accessed in the form of a stack.
  • the vector drawing library is used as a drawing method, and the realization of user interface performance can be naturally cross-platform and can meet more visual effects.
  • the changes to the component display effect of the design can be more agile and better designed. Products with good visual experience.
  • the processing method based on the user interface framework may also include: obtaining basic attribute information of the target component based on the data group, performing structure rendering based on the basic attribute information, and obtaining the component data structure of the target component.
  • the component data structure refers to the data structure of the component rendering result, such as the program structure corresponding to components such as buttons and text.
  • the data group refers to multiple groups of data related to the target component, so as to obtain the basic attribute information of the target component based on the data group; where the basic attribute information mainly refers to width, height, padding, Background and other information, further perform structural rendering based on basic attribute information to obtain the component data structure of the target component. That is to say, the output of component rendering is the maintenance of a set of tree-like data structures, that is, component rendering is the maintenance and update of a parent-child node tree. .
  • structure rendering is performed based on basic attribute information to obtain the component data structure of the target component, which enables rapid development and reuse of many components, further improving the component display effect in the user interface framework scenario.
  • n types of component rendering results such as y1, y2, y3, etc., under a set of basic attribute information x1, x2, x3... and other m states.
  • the component rendering result y(i) needs to change to y(i+1)
  • the two states of x(j) and x(j+1) need to be different; where m and n are positive integers.
  • the target interface can be selected and set according to the application needs.
  • the target event can be mouse event, keyboard event, etc. pieces etc.
  • the platform window level events are passed to an open source programming language through the node application programming interface and then distributed.
  • the function data is processed through conversion and passed on just like the web interface data. That is to say, create a platform window and obtain the target event through the corresponding application interface, and the interactive logic transfers the target event, and the final target event may change the state of a component in the TypeScript library that builds the user interface, and then change the component Rendering results.
  • the component rendering structure is updated based on component status updates to further improve component processing efficiency and stability.
  • the processing method based on the user interface framework may also include: obtaining the control logic of the target component based on the data group, receiving the control operation instruction for the rendering result, and responding to the control operation when the control operation instruction satisfies the control logic. instruction.
  • control logic of the target component refers to how to control the target component.
  • the target component is a button and the control logic is a click. Therefore, after receiving the control operation instruction for the button rendering result, the control operation instruction is In the case of click, respond to the control operation command.
  • control operation on the rendering result of the target component can be realized to further meet the user needs.
  • an update request of the target component is obtained, an update drawing vector is obtained based on the update request, and an updated rendering result of the target component is generated and displayed based on the update drawing vector.
  • the rendering results can be updated in real time based on user needs, further meeting user needs for user interfaces.
  • FIG. 2 is a schematic flowchart of another user interface framework-based processing method provided by an embodiment of the present disclosure. Based on the above-mentioned embodiment, this embodiment further optimizes the above-mentioned user interface framework-based processing method. As shown in Figure 2, the method includes:
  • Step 201 Obtain the data group of the target component based on the user interface framework.
  • Step 202 Process the data group according to the preset style model to obtain a data structure description, map the data structure description to the style library function, and obtain the display style information of the target component.
  • Step 203 Convert in the vector drawing library based on the display style information, obtain the drawing style, drawing path and drawing form, and generate a drawing vector based on the drawing style, drawing path and drawing form.
  • Step 204 Generate a rendering result of the target component based on the drawing vector and display it.
  • Figure 3 is a schematic diagram showing the rendering result of a target component provided by an embodiment of the present disclosure.
  • Figure 3 shows a schematic diagram of an operation page.
  • the operation page includes a rendering result of a button 11, which is in the shape of a rectangle. form display.
  • the operation page in Figure 3 also shows the data group input option 12 of the component.
  • the data group of the component can be input, such as layout content, visual description, current level and current logic, etc.
  • step 205 and/or step 206 and/or step 207 can be executed.
  • the execution order of step 205 to step 207 can be determined according to the actual situation.
  • Figure 2 is only an example.
  • Step 205 Obtain the basic attribute information of the target component based on the data group, perform structural rendering based on the basic attribute information, and obtain the component data structure of the target component.
  • the initial component status of the target component is obtained, the target event is obtained based on the target interface, the current component status of the target component is obtained based on the target event, and when the initial component status and the current component status are inconsistent, the component data structure is updated .
  • the output of component rendering is the maintenance of a set of tree-like data structures. Changes in single node data can also be understood as maintenance of the parent-child node tree, or as component rendering updates. Among them, the parent-child hierarchical relationship is determined based on specific business needs.
  • the relationship between node levels can be understood as the relationship between components, such as the relationship between buttons and text.
  • the target event is first located from the rectangular block to the target node, and then passes through it.
  • the path (the path from the root node to search for the target node) is traversed and passed to the root node and then returned to the target node in reverse order.
  • the component status can be understood as the logic written by business development
  • the update of the component structure data can be understood as the changes caused by data changes.
  • a Boolean value is used to represent login.
  • the variable changes and the component update status is generated, thereby updating Component data structure.
  • the rendering result of the target component generated based on the drawing vector will be displayed according to the component data structure.
  • Figure 4 is a schematic diagram showing the rendering results of another target component provided by an embodiment of the present disclosure.
  • Figure 4 shows a schematic diagram of an operation page.
  • the operation page includes the rendering results as buttons 11 and Text 13 is displayed based on the component data structure of button 11 and text 13. It can be seen that text 13 is displayed on button 11.
  • Step 206 Obtain the control logic of the target component based on the data group, receive the control operation instruction for the rendering result, and respond to the control operation instruction when the control operation instruction satisfies the control logic.
  • control logic of the target component refers to how to control the target component.
  • the target component is a button and the control logic is a click. Therefore, after receiving the control operation instruction for the button rendering result, the control operation instruction is In the case of click, respond to the control operation command.
  • Step 207 Obtain the update request of the target component, obtain the update drawing vector based on the update request, generate and display the updated rendering result of the target component based on the update drawing vector.
  • Figure 5 is a schematic diagram showing the rendering results of yet another target component provided by the embodiment of the present disclosure.
  • the data group can be re-entered through the data group input option of the operation interface component to send an update request, so that the updated layout can be obtained based on the update request.
  • the updated typesetting result is converted into an updated drawing vector based on the vector drawing library, and finally the updated rendering result of the target component is generated and displayed based on the updated drawing vector.
  • the updated rendering result is button 11, which is represented by a circle. Displayed in shape.
  • the processing solution based on the user interface framework obtaineds the data group of the target component based on the user interface framework, processes the data group according to the preset style model, obtains the data structure description, and maps the data structure description to the style library.
  • the display style information of the target component is obtained, converted in the vector drawing library based on the display style information, the drawing style, drawing path and drawing form are obtained, the drawing vector is generated based on the drawing style, drawing path and drawing form, and the target is generated based on the drawing vector
  • the rendering result of the component is displayed, the basic attribute information of the target component is obtained based on the data group, the structure rendering is performed based on the basic attribute information, the component data structure of the target component is obtained, the control logic of the target component is obtained based on the data group, and the rendering result is received
  • the control operation instruction when the control operation instruction satisfies the control logic, responds to the control operation instruction, obtains the update request of the target component, obtains the update drawing vector based on the update request, and generates and displays the updated rendering result of the target component based on the update drawing vector.
  • the user interface is efficient enough and stable enough to enable rapid trial and error development. It is friendly enough for developing editors and plug-ins. It can be more agile in changing the display effect of components in the design, and can design better. Create a product with a good visual experience, use existing code as much as possible, provide good support for expansion needs, have a mature user interface and business development logic, and separate logical business for easy writing, that is, It is said that at the visual level, the TypeScript library for building user interfaces is directly used as a solution, which is very friendly for logic writing, and the vector drawing library is used as a drawing method. The realization of user interface performance can be naturally cross-platform and can satisfy more needs. The visual effects are more user-friendly and use modern languages. For the external development of application programming interfaces for the editor, it will be more attractive to use ecologically friendly languages. Finally, it can also quickly develop and reuse many components.
  • FIG. 6 is a schematic structural diagram of a processing device based on a user interface framework provided by an embodiment of the present disclosure.
  • the device can be implemented by software and/or hardware, and can generally be integrated in electronic equipment. As shown in Figure 6, the device includes:
  • the data acquisition module 301 is used to obtain the data group of the target component based on the user interface framework.
  • the layout generation module 302 is used to perform data style mapping processing on the data group to obtain the display style information of the target component.
  • the conversion description module 303 is used to convert the display style information into a drawing vector based on a preset vector drawing library.
  • Generate and display module 304 configured to generate and display the rendering result of the target component based on the drawing vector.
  • the typesetting generation module 302 is specifically used to:
  • the data structure description is mapped to the style library function to obtain the display style information of the target component.
  • the conversion description module 303 is specifically used to:
  • the drawing vector is generated based on the drawing style, the drawing path and the drawing form.
  • the device also includes:
  • An information acquisition module configured to obtain basic attribute information of the target component based on the data group
  • a rendering generation module is used to perform structure rendering based on the basic attribute information to obtain the component data structure of the target component.
  • the device also includes:
  • the first acquisition status module is used to acquire the initial component status of the target component
  • Get event module used to get target events based on target interface
  • a second obtaining status module configured to obtain the current component status of the target component based on the target event
  • An update component structure module is configured to update the component data structure when the initial component state and the current component state are inconsistent.
  • the device also includes:
  • Obtaining a control logic module configured to obtain the control logic of the target component based on the data group
  • An instruction receiving module configured to receive control operation instructions for the rendering results
  • a response module configured to respond to the control operation instruction when the control operation instruction satisfies the control logic.
  • the device also includes:
  • Get the request module used to get the update request of the target component
  • Obtaining an update description module configured to obtain an update drawing vector based on the update request
  • An update display module configured to generate and display an updated rendering result of the target component based on the updated drawing vector.
  • the user interface framework-based processing device provided by the embodiments of the present disclosure can execute the user interface framework-based processing method provided by any embodiment of the present disclosure, and has functional modules and beneficial effects corresponding to the execution method.
  • An embodiment of the present disclosure also provides a computer program product, which includes a computer program/instruction.
  • a computer program product which includes a computer program/instruction.
  • the processing method based on the user interface framework provided by any embodiment of the present disclosure is implemented.
  • FIG. 7 is a schematic structural diagram of an electronic device provided by an embodiment of the present disclosure.
  • the electronic device 400 in the embodiment of the present disclosure may include, but is not limited to, mobile phones, laptops, digital broadcast receivers, PDAs (personal digital assistants), PADs (tablets), PMPs (portable multimedia players), vehicle-mounted terminals ( Mobile terminals such as car navigation terminals) and fixed terminals such as digital TVs, desktop computers, etc.
  • the electronic device shown in FIG. 7 is only an example and should not impose any limitations on the functions and scope of use of the embodiments of the present disclosure.
  • the electronic device 400 may include a processing device (eg, central processing unit, graphics processor, etc.) 401 , which may be loaded into a random access device according to a program stored in a read-only memory (ROM) 402 or from a storage device 408 .
  • the program in the memory (RAM) 403 executes various appropriate actions and processes.
  • various programs and data required for the operation of the electronic device 400 are also stored.
  • the processing device 401, ROM 402 and RAM 403 are connected to each other via a bus 404.
  • An input/output (I/O) interface 405 is also connected to bus 404.
  • the following devices may be connected to the I/O interface 405: input devices 406 including, for example, a touch screen, touch pad, keyboard, mouse, camera, microphone, accelerometer, gyroscope, etc.; including, for example, a liquid crystal display (LCD), speakers, vibration An output device 407 such as a computer; a storage device 408 including a magnetic tape, a hard disk, etc.; and a communication device 409.
  • the communication device 409 may allow the electronic device 400 to communicate wirelessly or wiredly with other devices to exchange data.
  • FIG. 7 illustrates electronic device 400 with various means, it should be understood that implementation or availability of all illustrated means is not required. More or fewer means may alternatively be implemented or provided.
  • embodiments of the present disclosure include a computer program product including a computer program carried on a non-transitory computer-readable medium, the computer program containing program code for performing the method illustrated in the flowchart.
  • the computer program may be downloaded and installed from the network via communication device 409, or from storage device 408, or from ROM 402.
  • the processing device 401 When the computer program is executed by the processing device 401, the above functions defined in the processing method based on the user interface framework of the embodiment of the present disclosure are performed.
  • the computer-readable medium mentioned above in the present disclosure may be a computer-readable signal medium or a computer-readable storage medium, or any combination of the above two.
  • the computer-readable storage medium may be, for example, but is not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus or device, or any combination thereof. More specific examples of computer readable storage media may include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard drive, random access memory (RAM), read only memory (ROM), removable Programmd read-only memory (EPROM or flash memory), fiber optics, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination of the above.
  • a computer-readable storage medium may be any tangible medium that contains or stores a program for use by or in connection with an instruction execution system, apparatus, or device.
  • a computer-readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code therein. Such propagated data signals may take many forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above.
  • a computer-readable signal medium may also be any computer-readable medium other than a computer-readable storage medium that can send, propagate, or transmit a program for use by or in connection with an instruction execution system, apparatus, or device .
  • Program code embodied on a computer-readable medium may be transmitted using any suitable medium, including but not limited to: wire, optical cable, RF (radio frequency), etc., or any suitable combination of the above.
  • the client and server can communicate using any currently known or future developed network protocol such as HTTP (Hyper Text Transfer Protocol), and can communicate with digital data in any form or medium.
  • Data communications e.g., communications network
  • Examples of communication networks include local area networks (“LAN”), wide area networks (“WAN”), the Internet (e.g., the Internet), and end-to-end networks (e.g., ad hoc end-to-end networks), as well as any currently known or developed in the future network of.
  • LAN local area networks
  • WAN wide area networks
  • the Internet e.g., the Internet
  • end-to-end networks e.g., ad hoc end-to-end networks
  • the above-mentioned computer-readable medium may be included in the above-mentioned electronic device; it may also exist independently without being assembled into the electronic device.
  • the computer-readable medium carries one or more programs.
  • the electronic device receives the user's information display triggering operation during the playback of the video; obtains the At least two target information associated with the video; display the first target information among the at least two target information in the information display area of the play page of the video, wherein the size of the information display area is smaller than the size of the play page. Size: Receive the user's first switching triggering operation, and switch the first target information displayed in the information display area to the second target information among the at least two target information.
  • Computer program code for performing the operations of the present disclosure may be written in one or more programming languages, including but not limited to object-oriented programming languages—such as Java, Smalltalk, C++, and Includes conventional procedural programming languages—such as "C” or similar programming languages.
  • the program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server.
  • the remote computer can be connected to the user's computer through any kind of network, including a local area network (LAN) or a wide area network (WAN), or it can be connected to an external computer (such as an Internet service provider through Internet connection).
  • LAN local area network
  • WAN wide area network
  • Internet service provider such as an Internet service provider through Internet connection
  • each block in the flowchart or block diagram may represent a module, segment, or portion of code that contains one or more logic functions that implement the specified executable instructions.
  • the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown one after another may actually execute substantially in parallel, or they may sometimes execute in the reverse order, depending on the functionality involved.
  • each block of the block diagram and/or flowchart illustration, and combinations of blocks in the block diagram and/or flowchart illustration can be implemented by special purpose hardware-based systems that perform the specified functions or operations. , or can be implemented using a combination of specialized hardware and computer instructions.
  • the units involved in the embodiments of the present disclosure can be implemented in software or hardware. Among them, the name of a unit does not constitute a limitation on the unit itself under certain circumstances.
  • FPGAs field programmable gate arrays
  • ASIC dedicated Integrated circuits
  • ASSP application specific standard products
  • SOC system on a chip
  • CPLD complex programmable logic device
  • a machine-readable medium may be a tangible medium that may contain or store a program for use by or in connection with an instruction execution system, apparatus, or device.
  • the machine-readable medium may be a machine-readable signal medium or a machine-readable storage medium.
  • Machine-readable media may include, but are not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, devices or devices, or any suitable combination of the foregoing.
  • machine-readable storage media would include one or more wire-based electrical connections, laptop disks, hard drives, random access memory (RAM), read only memory (ROM), erasable programmable read only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination of the above.
  • RAM random access memory
  • ROM read only memory
  • EPROM or flash memory erasable programmable read only memory
  • CD-ROM portable compact disk read-only memory
  • magnetic storage device or any suitable combination of the above.
  • the present disclosure provides a processing method based on a user interface framework, including:
  • a rendering result of the target component is generated based on the drawing vector and displayed.
  • the performing typesetting processing on the data group to obtain the display style information of the target component includes:
  • the data structure description is mapped to the style library function to obtain the display style information of the target component.
  • the preset-based vector drawing library converts the display style information into a drawing vector, including:
  • the drawing vector is generated based on the drawing style, the drawing path and the drawing form.
  • the processing method based on the user interface framework provided by the present disclosure also includes:
  • Structural rendering is performed based on the basic attribute information to obtain the component data structure of the target component.
  • the processing method based on the user interface framework provided by the present disclosure also includes:
  • the component data structure is updated.
  • the processing method based on the user interface framework provided by the present disclosure also includes:
  • the processing method based on the user interface framework provided by the present disclosure also includes:
  • An updated rendering result of the target component is generated based on the updated rendering vector and displayed.
  • the present disclosure provides a processing device based on a user interface framework, including:
  • the data acquisition module is used to obtain the data group of the target component based on the user interface framework
  • a typesetting generation module used for typesetting the data group to obtain the display style information of the target component
  • a conversion description module used to convert the display style information into a drawing vector based on a preset vector drawing library
  • Generate and display module configured to generate and display the rendering result of the target component based on the drawing vector.
  • the layout generation module is specifically used to:
  • the data structure description is mapped to the style library function to obtain the display style information of the target component.
  • the conversion description module is specifically used to:
  • the drawing vector is generated based on the drawing style, the drawing path and the drawing form.
  • the device in the processing device based on the user interface framework provided by the present disclosure, the device further includes:
  • An information acquisition module configured to obtain basic attribute information of the target component based on the data group
  • a rendering generation module is used to perform structure rendering based on the basic attribute information to obtain the component data structure of the target component.
  • the device in the processing device based on the user interface framework provided by the present disclosure, the device further includes:
  • the first acquisition status module is used to acquire the initial component status of the target component
  • Get event module used to get target events based on target interface
  • a second obtaining status module configured to obtain the current component status of the target component based on the target event
  • An update component structure module is configured to update the component data structure when the initial component state and the current component state are inconsistent.
  • the device in the processing device based on the user interface framework provided by the present disclosure, the device further includes:
  • Obtaining a control logic module configured to obtain the control logic of the target component based on the data group
  • An instruction receiving module configured to receive control operation instructions for the rendering results
  • a response module configured to respond to the control operation instruction when the control operation instruction satisfies the control logic.
  • the device in the processing device based on the user interface framework provided by the present disclosure, the device further includes:
  • Get the request module used to get the update request of the target component
  • Obtaining an update description module configured to obtain an update drawing vector based on the update request
  • An update display module configured to generate and display an updated rendering result of the target component based on the updated drawing vector.
  • the present disclosure provides an electronic device, including:
  • memory for storing instructions executable by the processor
  • the processor is configured to read the executable instructions from the memory and execute the instructions to implement any of the user interface framework-based processing methods provided by this disclosure.
  • the present disclosure provides a non-transitory computer-readable storage medium, the storage medium stores a computer program, the computer program is used to execute any of the methods provided by the present disclosure.
  • the processing method based on the user interface framework.
  • the present disclosure provides a computer program product that, when instructions in the computer program product are executed by a processor, implements any one of the user interface-based methods provided by the present disclosure. Frame processing methods.
  • the present disclosure provides a computer program that, when executed by a processor, implements the processing method based on the user interface framework as described in any one provided by the present disclosure.

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Software Systems (AREA)
  • Computer Graphics (AREA)
  • Computer Hardware Design (AREA)
  • Architecture (AREA)
  • Data Mining & Analysis (AREA)
  • Databases & Information Systems (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本公开涉及一种基于用户界面框架的处理方法、装置、设备及介质，其中该方法包括：基于用户界面框架获取目标组件的数据组，对数据组进行排版处理，得到目标组件的显示样式信息，基于预设的矢量绘图库将显示样式信息转换为绘制矢量，基于绘制矢量生成目标组件的渲染结果并显示。

Description

一种基于用户界面框架的处理方法、装置、设备及介质
相关申请的交叉引用
本申请要求于2022年3月10日提交的名称为“一种基于用户界面框架的处理方法、装置、设备及介质”的中国专利申请第202210229810.9号的优先权，该申请的公开通过引用被全部结合于此。
技术领域
本公开涉及图形用户界面技术领域，尤其涉及一种基于用户界面框架的处理方法、装置、设备及介质。
背景技术
通常，UI(用户界面)框架为一套计算机用户界面编程库，通过提供一系列数据结构和方法让程序员绘制出特定的图形用户界面，比如三维编辑器。
发明内容
本公开提供了一种基于用户界面框架的处理方法、装置、设备及介质。
本公开实施例提供了一种基于用户界面框架的处理方法，所述方法包括：
基于用户界面框架获取目标组件的数据组；
对所述数据组进行排版处理，得到所述目标组件的显示样式信息；
基于预设的矢量绘图库将所述显示样式信息转换为绘制矢量；
基于所述绘制矢量生成所述目标组件的渲染结果并显示。
本公开实施例还提供了一种基于用户界面框架的处理装置，所述装置包括：
获取数据模块，用于基于用户界面框架获取目标组件的数据组；
排版生成模块，用于对所述数据组进行排版处理，得到所述目标组件的显示样式信息；
转换描述模块，用于基于预设的矢量绘图库将所述显示样式信息转换为绘制矢量；
生成显示模块，用于基于所述绘制矢量生成所述目标组件的渲染结果并显示。
本公开实施例还提供了一种电子设备，所述电子设备包括：处理器；用于存储所述处理器可执行指令的存储器；所述处理器，用于从所述存储器中读取所述可执行指令，并执行所述指令以实现如本公开实施例提供的基于用户界面框架的处理方法。
本公开实施例还提供了一种非瞬态的计算机可读存储介质，所述存储介质存储有计算 机程序，所述计算机程序用于执行如本公开实施例提供的基于用户界面框架的处理方法。
本公开实施例还提供了一种计算机程序产品，当所述计算机程序产品中的指令由处理器执行时，实现如本公开实施例提供的基于用户界面框架的处理方法。
本公开实施例还提供了一种计算机程序，所述计算机程序被处理器执行时实现如本公开实施例提供的基于用户界面框架的处理方法。
附图说明
结合附图并参考以下具体实施方式，本公开各实施例的上述和其他特征、优点及方面将变得更加明显。贯穿附图中，相同或相似的附图标记表示相同或相似的元素。应当理解附图是示意性的，原件和元素不一定按照比例绘制。
图1为本公开实施例提供的一种基于用户界面框架的处理方法的流程示意图；
图2为本公开实施例提供的另一种基于用户界面框架的处理方法的流程示意图；
图3为本公开实施例提供的一种目标组件的渲染结果展示的示意图；
图4为本公开实施例提供的另一种目标组件的渲染结果展示的示意图；
图5为本公开实施例提供的再一种目标组件的渲染结果展示的示意图图；
图6为本公开实施例提供的一种基于用户界面框架的处理装置的结构示意图；
图7为本公开实施例提供的一种电子设备的结构示意图。
具体实施方式
下面将参照附图更详细地描述本公开的实施例。虽然附图中显示了本公开的某些实施例，然而应当理解的是，本公开可以通过各种形式来实现，而且不应该被解释为限于这里阐述的实施例，相反提供这些实施例是为了更加透彻和完整地理解本公开。应当理解的是，本公开的附图及实施例仅用于示例性作用，并非用于限制本公开的保护范围。
应当理解，本公开的方法实施方式中记载的各个步骤可以按照不同的顺序执行，和/或并行执行。此外，方法实施方式可以包括附加的步骤和/或省略执行示出的步骤。本公开的范围在此方面不受限制。
本文使用的术语“包括”及其变形是开放性包括，即“包括但不限于”。术语“基于”是“至少部分地基于”。术语“一个实施例”表示“至少一个实施例”；术语“另一实施例”表示“至少一个另外的实施例”；术语“一些实施例”表示“至少一些实施例”。其他术语的相关定义将在下文描述中给出。
需要注意，本公开中提及的“第一”、“第二”等概念仅用于对不同的装置、模块或单元进行区分，并非用于限定这些装置、模块或单元所执行的功能的顺序或者相互依存关系。
需要注意，本公开中提及的“一个”、“多个”的修饰是示意性而非限制性的，本领域技术人员应当理解，除非在上下文另有明确指出，否则应该理解为“一个或多个”。
本公开实施方式中的多个装置之间所交互的消息或者信息的名称仅用于说明性的目的，而并不是用于对这些消息或信息的范围进行限制。
相关技术中的平台提供的UI框架中，对于UI组件样式处理，需要重新解析和编写、以及渲染结果显示不稳定，从而导致UI组件处理效率和成本比较高。
本公开实施例提供的技术方案与相关技术相比具有如下优点：本公开实施例提供的基于用户界面框架的处理方案，基于用户界面框架获取目标组件的数据组，对数据组进行排版处理，得到目标组件的显示样式信息，基于预设的矢量绘图库将显示样式信息转换为绘制矢量，基于绘制矢量生成目标组件的渲染结果并显示。采用上述技术方案，在基于用户界面框架的处理程中数据组进行排版处理可以提高组件处理效率、以及基于矢量绘图库进行矢量描述处理，对用户界面表现的实现能够天然跨平台，并且能够满足更多视觉效果，最后基于绘制矢量描述生成目标组件的渲染结果，保证渲染结果的稳定性，进一步提升了用户界面框架场景下的组件展示效果。
图1为本公开实施例提供的一种基于用户界面框架的处理方法的流程示意图，该方法可以由基于用户界面框架的处理装置执行，其中该装置可以采用软件和/或硬件实现，一般可集成在电子设备中。如图1所示，该方法包括：
步骤101、基于用户界面框架获取目标组件的数据组。
其中，目标组件可以为任意一个按钮、菜单和弹窗等组件，本公开实施例对目标组件的形式不作限定，例如目标组件可以为块状按钮，也可以为普通按钮。数据组是指用于表示与目标组件相关的多组数据，本公开实施例中是指用于表示与目标组件相关的排版内容、视觉描述、当前层级和当前逻辑等数据组，比如数据组为排版内容，包括宽的数值、高的数值等。
在一些实施方式中，基于用户界面框架获取目标组件的数据组，包括：基于用户在操作界面输入长、宽一组数据、以及基于用户在操作界面输入位置、颜色和偏移一组数据，获取目标组件的数据组。其中，操作界面是指提供用户进行操作的页面，操作界面可以包括组件的数据组输入选项。其中，用户界面框架可以基于业务开发的输入转化为产品，比 如三维编辑器，能够提高编辑处理效率和视觉效果。
在另一些实施方式中，基于用户界面框架获取目标组件的数据组，包括：调用目标引擎从第三方数据库中获取的目标组件对应的数据组，也就是说，在没有接收到用户输入的目标组件的数据组的情况下，可以调用预先存储的数据组进行后续排版处理。以上两种实施方式仅为示例，本公开实施例不对基于用户界面框架获取目标组件的数据组的方式进行具体限制。
需要说明的是，将目标组件作为一组数据的组合，通过用各种方式对这些数据组进行组合，就能得到更多的新组件。
具体的，检测用户在用户界面框架的操作界面上的输入操作，当检测到用户对组件的数据组输入选项的点击选择等操作并输入相关数据，则可以获取目标组件的数据组。
步骤102、对数据组进行排版处理，得到目标组件的显示样式信息。
其中，显示样式信息是指一组用于描述目标组件显示逻辑的一组数据，也可以理解为目标组件形状包围盒的位置和大小，决定了目标组件在显示屏幕中的位置。在本公开实施例中，对数据组进行排版处理，生成目标组件的显示样式信息，包括：将数据组进行处理映射到样式库函数中，得到目标组件的显示样式信息。其中，排版可以理解为显示的组件的位置和大小信息。
本公开实施例中，当基于用户界面框架获取目标组件的数据组之后，可以对数据组进行数据样式映射处理，得到目标组件的显示样式信息。
步骤103、基于预设的矢量绘图库将所述显示样式信息转换为绘制矢量。
其中，矢量绘图库指的是对一组数据进行转换得到绘制矢量的数据库。其中，矢量指的是一系列点连成的图形，绘制矢量指的是以什么样式对什么路径进行什么形式的绘制。
在本公开实施例中，获取显示样式信息之后，基于显示样式信息在矢量绘图库进行转换，获取绘制样式、绘制路径和绘制形式，基于绘制样式、绘制路径和绘制形式生成绘制矢量。
步骤104、基于绘制矢量生成目标组件的渲染结果并显示。
具体的，渲染引擎和用户界面框架之间可以共享渲染底层上下文，在获取绘制矢量后，基于底层应用程序接口进行处理得到渲染结果并显示。
本公开实施例提供的基于用户界面框架的处理方案，基于用户界面框架获取目标组件的数据组，对数据组进行排版处理，得到目标组件的显示样式信息，基于预设的矢量绘图 库将显示样式信息转换为绘制矢量，基于绘制矢量生成目标组件的渲染结果并显示。采用上述技术方案，在基于用户界面框架的处理程中数据组进行排版处理可以提高组件处理效率、以及基于矢量绘图库进行矢量描述处理，对用户界面表现的实现能够天然跨平台，并且能够满足更多视觉效果，最后基于绘制矢量描述生成目标组件的渲染结果，保证渲染结果的稳定性，进一步提升了用户界面框架场景下的组件展示效果。
在一些实施例中，对数据组进行排版处理，得到目标组件的显示样式信息，包括：按照预设的样式模型对数据组进行处理，得到数据结构描述，将数据结构描述映射到样式库函数中，得到目标组件的显示样式信息。
其中，预设的样式模型可以根据应用场景选择设置，在本公开实施例中可以使用CSS(Cascading Style Sheet，层叠样式表)对数据组进行描述，比如排版内容数据组，包括宽、高、填充、边缘等排版内容进行描述和转换后映射到样式库的函数中，得到排版结果。其中，数据结构描述可以理解为一组用于目标布局引擎的函数调用。
需要说明的是，可以在更新排版函数中对目标组件进行更新。
上述方案中，预设的样式模型对数据组进行处理，得到数据结构描述，将数据结构描述映射到样式库函数中，得到目标组件的显示样式信息，避免重新进行UI组件样式解析和相关功能编写，能够快速看到设计方案的可视化结果，实现更灵活和有效率的去定义用户界面组件的样式，用户界面效率足够高，且足够稳定。
在一些实施例中，基于预设的矢量绘图库将显示样式信息转换为绘制矢量，包括：基于显示样式信息在矢量绘图库进行转换，获取绘制样式、绘制路径和绘制形式，基于绘制样式、绘制路径和绘制形式生成绘制矢量。
其中，绘制样式决定了目标组件以何种颜色，可以是渐变、填充等这些的表现形式被展示出来；绘制路径由开始路径记述，比如平移坐标至(100，100)，随后画线至(100，200)，(200，200)，(200，100)，结束路径记述，这样一系列的命令描述出来的路径；绘制形式通过存在两种方式，一种是描线，另一种是填充。描线和填充都会接受绘制路径描述的方式，对绘制路径的描述可能是凹多边形，也可能是凸多边形，而对于凹多边形进行几何剖分的时候，计算几何里有两种方法，分别是奇偶规则和非零缠绕规则，在本公开实施例中，使用非零缠绕规则对凹多边形进行三角剖分。
另外，用户可以看到的目标组件的颜色、是否有边线、边线的宽度这些属性共同决定了这个目标组件显示的样式。可以看到，目标组件显示的样式，如果是有圆角可以通过贝 塞尔曲线进行路径描述；如果是普通的正方形可以直接使用矩形函数。
需要说明的是，通过矢量绘图库来绘制目标组件，可以重载绘制函数来改变绘制结果，即绘制矢量。
具体地，在绘制过程中以XX样式对XX路径在XX状态下进行XX形式的绘制，也就是说，可以针对XX状态进行描述，比如目标控件是以什么坐标进行绘制的，通过目标应用程序接口能够改变样式、绘制基点等状态，可以按照栈的形式来进行存取。
上述方案中，使用矢量绘图库作为绘制手段，对用户界面表现的实现能够天然跨平台，并且能够满足更多的视觉效果，对于设计进行组件展示效果的变更能够更加敏捷，能够更好的设计出有良好视觉体验的产品。
在一些实施例中，基于用户界面框架的处理方法还可以包括：基于数据组获取目标组件的基本属性信息，基于基本属性信息进行结构渲染，得到目标组件的组件数据结构。
其中，组件数据结构指的是组件渲染结果为数据结构，比如按钮、文本等组件对应的程序结构。
在本公开实施例中，数据组是指用于表示与目标组件相关的多组数据，从而基于数据组获取目标组件的基本属性信息；其中，基本属性信息主要指的是宽、高、填充、背景等信息，进一步基于基本属性信息进行结构渲染，得到目标组件的组件数据结构，也就是说组件渲染的输出是一组树状数据结构的维护，即组件渲染就是一个父子节点树的维护和更新。
上述方案中，基于基本属性信息进行结构渲染，得到目标组件的组件数据结构，可以进行很多组件的快速开发和复用，进一步提升了用户界面框架场景下的组件展示效果。
可选地，还可以获取目标组件的初始组件状态，基于目标接口获取目标事件，基于目标事件获取目标组件的当前组件状态，在初始组件状态和当前组件状态不一致的情况下，更新组件数据结构。
具体的，一组基本属性信息x1、x2、x3...等m个状态下，产生y1、y2、y3等n种组件渲染结果的API。其中，如果组件渲染结果y(i)需要变迁到y(i+1),则需要x(j)和x(j+1)两状态出现区别；其中，m和n为正整数。
更具体地，在初始组件状态x1和按下按钮的当前组件状态x2之间，产生了改变，所以对这两个状态进行高效的差别判断，并且重新调用渲染函数进行组件渲染。
其中，目标接口可以根据应用需要选择设置，目标事件比如可以是鼠标事件、键盘事 件等。
也就是说，可以自定义一个组件渲染器，通过提供了获取本帧和上一帧的组件状态的能力，从而更有效的去更新组件渲染结果。
需要说明的是，对于目标事件的处理，通过节点应用程序编程接口把平台窗口层级的事件传给了一个开源的编程语言然后进行分发。举例而言：对于鼠标事件，函数数据通过转换处理过后就像网页接口数据一样被传递下去。也就是说，创建平台窗口并且通过对应的应用程序接口获取目标事件，并且交互逻辑进行目标事件的传递，并且最终目标事件可能会改变构建用户界面的TypeScript库中某个组件的状态，进而改变组件渲染结果。
上述方案中，通过基于组件状态的更新对组件渲染结构进行更新，进一步提高组件处理效率和稳定性。
在一些实施例中，基于用户界面框架的处理方法还可以包括：基于数据组获取目标组件的控制逻辑，接收对渲染结果的控制操作指令，在控制操作指令满足控制逻辑的情况下，响应控制操作指令。
在本公开实施例中，目标组件的控制逻辑指的是如何实现对目标组件的控制，比如目标组件为按钮，控制逻辑为点击，从而在接收对按钮渲染结果的控制操作指令，在控制操作指令为点击的情况下，响应控制操作指令。
上述方案中，可以实现对目标组件的渲染结果的控制操作，进一步满足用户使用需求。
在一些实施例中，获取目标组件的更新请求，基于更新请求，获取更新绘制矢量，基于更新绘制矢量生成目标组件的更新渲染结果并显示。
具体地，可以根据不同场景需求选择去更新渲染结果，可以通过操作界面组件的数据组输入选项重新输入数据组发送更新请求，从而基于更新请求可以获取更新排版结果，从而基于矢量绘图库将更新排版结果转换为更新绘制矢量，最终基于更新绘制矢量生成目标组件的更新渲染结果并显示。
上述方案中，可以基于用户需求实时更新渲染结果，进一步满足用户对于用户界面的需求。
图2为本公开实施例提供的另一种基于用户界面框架的处理方法的流程示意图，本实施例在上述实施例的基础上，进一步优化了上述基于用户界面框架的处理方法。如图2所示，该方法包括：
步骤201、基于用户界面框架获取目标组件的数据组。
步骤202、按照的预设样式模型对数据组进行处理，得到数据结构描述，将数据结构描述映射到样式库函数中，得到目标组件的显示样式信息。
步骤203、基于显示样式信息在矢量绘图库进行转换，获取绘制样式、绘制路径和绘制形式，基于绘制样式、绘制路径和绘制形式生成绘制矢量。
步骤204、基于绘制矢量生成目标组件的渲染结果并显示。
示例性的，图3为本公开实施例提供的一种目标组件的渲染结果展示的示意图，图3中展示了一个操作页面的示意图，操作页面中包括渲染结果为按钮11，该按钮11以矩形形式显示。
图3中操作页面还展示了组件的数据组输入选项12，通过对数据组输入选项12进行操作可以输入组件的数据组，比如排版内容、视觉描述、当前层级和当前逻辑等。
步骤204之后，可以执行步骤205和/或步骤206和/或步骤207，步骤205-步骤207的执行顺序可以根据实际情况确定，图2中仅为示例。
步骤205、基于数据组获取目标组件的基本属性信息，基于基本属性信息进行结构渲染，得到目标组件的组件数据结构。
在本公开实施例中，获取目标组件的初始组件状态，基于目标接口获取目标事件，基于目标事件获取目标组件的当前组件状态，在初始组件状态和当前组件状态不一致的情况下，更新组件数据结构。
具体地，组件渲染的输出是一组树状数据结构的维护，单个节点数据变动也可以理解为对父子节点树进行维护，也可以理解为组件渲染更新。其中，父子层级关系是根据具体业务需求决定的。
也就是说，节点层级之间的关系可以理解为组件之间的关系，比如按钮和文本之间的关系，比如图3所示，目标事件先由矩形块定位到目标节点，然后经其经过的路径(从根结点进行目标节点查找的路径)遍历传递，传递至根结点后逆序传回至目标结点。
其中，组件状态可以理解为业务开发写的逻辑，组件结构数据的更新可以理解为数据变动引起的变迁，比如用一个布尔值表示登录，用户登录时，变量发生变动从而产生组件更新状态，从而更新组件数据结构。
需要说明的是，基于绘制矢量生成目标组件的渲染结果会按照组件数据结构进行显示。
示例性的，参见图4，图4为本公开实施例提供的另一种目标组件的渲染结果展示的示意图，图4中展示了一个操作页面的示意图，操作页面中包括渲染结果为按钮11和文本13，基于按钮11和文本13的组件数据结构进行显示，可以看出文本13显示在按钮11上面。
步骤206、基于数据组获取所述目标组件的控制逻辑，接收对渲染结果的控制操作指令，在控制操作指令满足控制逻辑的情况下，响应控制操作指令。
在本公开实施例中，目标组件的控制逻辑指的是如何实现对目标组件的控制，比如目标组件为按钮，控制逻辑为点击，从而在接收对按钮渲染结果的控制操作指令，在控制操作指令为点击的情况下，响应控制操作指令。
步骤207、获取目标组件的更新请求，基于更新请求，获取更新绘制矢量，基于更新绘制矢量生成目标组件的更新渲染结果并显示。
示例的，图5为本公开实施例提供的再一种目标组件的渲染结果展示的示意图，可以通过操作界面组件的数据组输入选项重新输入数据组发送更新请求，从而基于更新请求可以获取更新排版结果，从而基于矢量绘图库将更新排版结果转换为更新绘制矢量，最终基于更新绘制矢量生成目标组件的更新渲染结果并显示，如图5所示，更新渲染结果为按钮11，该按钮11以圆形形式显示。
本公开实施例提供的基于用户界面框架的处理方案，基于用户界面框架获取目标组件的数据组，按照预设的样式模型对数据组进行处理，得到数据结构描述，将数据结构描述映射到样式库函数中，得到目标组件的显示样式信息，基于显示样式信息在矢量绘图库进行转换，获取绘制样式、绘制路径和绘制形式，基于绘制样式、绘制路径和绘制形式生成绘制矢量，基于绘制矢量生成目标组件的渲染结果并显示，基于数据组获取目标组件的基本属性信息，基于基本属性信息进行结构渲染，得到目标组件的组件数据结构，基于数据组获取所述目标组件的控制逻辑，接收对渲染结果的控制操作指令，在控制操作指令满足控制逻辑的情况下，响应控制操作指令，获取目标组件的更新请求，基于更新请求，获取更新绘制矢量，基于更新绘制矢量生成目标组件的更新渲染结果并显示。采用上述技术方案，用户界面效率足够高，且足够稳定，能够进行快速试错开发，对于开发编辑器和开发插件都足够友好，对于设计进行组件显示效果的变更能够更加敏捷，能够更好的设计出有良好视觉体验的产品，以及能够尽量使用已有代码，对于扩展需求能够提供很好的支持，有成熟的用户界面和业务开发逻辑，对于逻辑业务能够有所分离，便于进行编写，也就是 说，在可视层级直接使用构建用户界面的TypeScript库作为方案，对于逻辑的编写非常友好，并使用矢量绘图库作为绘制手段，对用户界面表现的实现能够天然跨平台，并且能够更多的满足视觉效果，对用户更友好，使用现代化的语言，对于编辑器对外开发应用程序接口，使用生态好的语言会更有吸引力，最后还可以进行很多组件的快速开发和复用。
图6为本公开实施例提供的一种基于用户界面框架的处理装置的结构示意图，该装置可由软件和/或硬件实现，一般可集成在电子设备中。如图6所示，该装置包括：
获取数据模块301，用于基于用户界面框架获取目标组件的数据组。
排版生成模块302，用于对数据组进行数据样式映射处理，得到目标组件的显示样式信息。
转换描述模块303，用于基于预设的矢量绘图库将所述显示样式信息转换为绘制矢量。
生成显示模块304，用于基于所述绘制矢量生成所述目标组件的渲染结果并显示。
可选的，所述排版生成模块302具体用于：
按照预设的样式模型对所述数据组进行处理，得到数据结构描述；
将所述数据结构描述映射到样式库函数中，得到所述目标组件的显示样式信息。
可选的，所述转换描述模块303具体用于：
基于所述显示样式信息在所述矢量绘图库进行转换，获取绘制样式、绘制路径和绘制形式；
基于所述绘制样式、所述绘制路径和所述绘制形式生成所述绘制矢量。
可选的，所述装置还包括：
获取信息模块，用于基于所述数据组获取所述目标组件的基本属性信息；
渲染生成模块，用于基于所述基本属性信息进行结构渲染，得到所述目标组件的组件数据结构。
可选的，所述装置还包括：
第一获取状态模块，用于获取所述目标组件的初始组件状态；
获取事件模块，用于基于目标接口获取目标事件；
第二获取状态模块，用于基于所述目标事件获取所述目标组件的当前组件状态；
更新组件结构模块，用于在所述初始组件状态和所述当前组件状态不一致的情况下，更新所述组件数据结构。
可选的，所述装置还包括用于：
获取控制逻辑模块，用于基于所述数据组获取所述目标组件的控制逻辑；
接收指令模块，用于接收对所述渲染结果的控制操作指令；
响应模块，用于在所述控制操作指令满足所述控制逻辑的情况下，响应所述控制操作指令。
可选的，所述装置还包括用于：
获取请求模块，用于获取所述目标组件的更新请求；
获取更新描述模块，用于基于所述更新请求，获取更新绘制矢量；
更新显示模块，用于基于所述更新绘制矢量生成所述目标组件的更新渲染结果并显示。
本公开实施例所提供的基于用户界面框架的处理装置可执行本公开任意实施例所提供的基于用户界面框架的处理方法，具备执行方法相应的功能模块和有益效果。
本公开实施例还提供了一种计算机程序产品，包括计算机程序/指令，该计算机程序/指令被处理器执行时实现本公开任意实施例所提供的基于用户界面框架的处理方法。
图7为本公开实施例提供的一种电子设备的结构示意图。下面具体参考图7，其示出了适于用来实现本公开实施例中的电子设备400的结构示意图。本公开实施例中的电子设备400可以包括但不限于诸如移动电话、笔记本电脑、数字广播接收器、PDA(个人数字助理)、PAD(平板电脑)、PMP(便携式多媒体播放器)、车载终端(例如车载导航终端)等等的移动终端以及诸如数字TV、台式计算机等等的固定终端。图7示出的电子设备仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。
如图7所示，电子设备400可以包括处理装置(例如中央处理器、图形处理器等)401，其可以根据存储在只读存储器(ROM)402中的程序或者从存储装置408加载到随机访问存储器(RAM)403中的程序而执行各种适当的动作和处理。在RAM 403中，还存储有电子设备400操作所需的各种程序和数据。处理装置401、ROM 402以及RAM 403通过总线404彼此相连。输入/输出(I/O)接口405也连接至总线404。
通常，以下装置可以连接至I/O接口405：包括例如触摸屏、触摸板、键盘、鼠标、摄像头、麦克风、加速度计、陀螺仪等的输入装置406；包括例如液晶显示器(LCD)、扬声器、振动器等的输出装置407；包括例如磁带、硬盘等的存储装置408；以及通信装置 409。通信装置409可以允许电子设备400与其他设备进行无线或有线通信以交换数据。虽然图7示出了具有各种装置的电子设备400，但是应理解的是，并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。
特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在非暂态计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信装置409从网络上被下载和安装，或者从存储装置408被安装，或者从ROM 402被安装。在该计算机程序被处理装置401执行时，执行本公开实施例的基于用户界面框架的处理方法中限定的上述功能。
需要说明的是，本公开上述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开中，计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：电线、光缆、RF(射频)等等，或者上述的任意合适的组合。
在一些实施方式中，客户端、服务器可以利用诸如HTTP(Hyper Text Transfer Protocol，超文本传输协议)之类的任何当前已知或未来研发的网络协议进行通信，并且可以与任意形式或介质的数字数据通信(例如，通信网络)互连。通信网络的示例包括局域网(“LAN”)，广域网(“WAN”)，网际网(例如，互联网)以及端对端网络(例如，ad hoc端对端网络)，以及任何当前已知或未来研发的网络。
上述计算机可读介质可以是上述电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。
上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该电子设备执行时，使得该电子设备：在视频的播放过程中，接收用户的信息展示触发操作；获取所述视频关联的至少两个目标信息；在所述视频的播放页面的信息展示区域中展示所述至少两个目标信息中的第一目标信息其中，所述信息展示区域的尺寸小于所述播放页面的尺寸；接收用户的第一切换触发操作，将所述信息展示区域中展示的所述第一目标信息切换为所述至少两个目标信息中的第二目标信息。
可以以一种或多种程序设计语言或其组合来编写用于执行本公开的操作的计算机程序代码，上述程序设计语言包括但不限于面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。
附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
描述于本公开实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。其中，单元的名称在某种情况下并不构成对该单元本身的限定。
本文中以上描述的功能可以至少部分地由一个或多个硬件逻辑部件来执行。例如，非限制性地，可以使用的示范类型的硬件逻辑部件包括：现场可编程门阵列(FPGA)、专用 集成电路(ASIC)、专用标准产品(ASSP)、片上系统(SOC)、复杂可编程逻辑设备(CPLD)等等。
在本公开的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。
根据本公开的一个或多个实施例，本公开提供了一种基于用户界面框架的处理方法，包括：
基于用户界面框架获取目标组件的数据组；
对所述数据组进行排版处理，得到所述目标组件的显示样式信息；
基于预设的矢量绘图库将所述显示样式信息转换为绘制矢量；
基于所述绘制矢量生成所述目标组件的渲染结果并显示。
根据本公开的一个或多个实施例，本公开提供的基于用户界面框架的处理方法中，所述对所述数据组进行排版处理，得到所述目标组件的显示样式信息，包括：
按照预设的样式模型对所述数据组进行处理，得到数据结构描述；
将所述数据结构描述映射到样式库函数中，得到所述目标组件的显示样式信息。
根据本公开的一个或多个实施例，本公开提供的基于用户界面框架的处理方法中，所述基于预设的矢量绘图库将所述显示样式信息转换为绘制矢量，包括：
基于所述显示样式信息在所述矢量绘图库进行转换，获取绘制样式、绘制路径和绘制形式；
基于所述绘制样式、所述绘制路径和所述绘制形式生成所述绘制矢量。
根据本公开的一个或多个实施例，本公开提供的基于用户界面框架的处理方法中，还包括：
基于所述数据组获取所述目标组件的基本属性信息；
基于所述基本属性信息进行结构渲染，得到所述目标组件的组件数据结构。
根据本公开的一个或多个实施例，本公开提供的基于用户界面框架的处理方法中，还包括：
获取所述目标组件的初始组件状态；
基于目标接口获取目标事件；
基于所述目标事件获取所述目标组件的当前组件状态；
在所述初始组件状态和所述当前组件状态不一致的情况下，更新所述组件数据结构。
根据本公开的一个或多个实施例，本公开提供的基于用户界面框架的处理方法中，还包括：
基于所述数据组获取所述目标组件的控制逻辑；
接收对所述渲染结果的控制操作指令；
在所述控制操作指令满足所述控制逻辑的情况下，响应所述控制操作指令。
根据本公开的一个或多个实施例，本公开提供的基于用户界面框架的处理方法中，还包括：
获取所述目标组件的更新请求；
基于所述更新请求，获取更新绘制矢量；
基于所述更新绘制矢量生成所述目标组件的更新渲染结果并显示。
根据本公开的一个或多个实施例，本公开提供了一种基于用户界面框架的处理装置，包括：
获取数据模块，用于基于用户界面框架获取目标组件的数据组；
排版生成模块，用于对所述数据组进行排版处理，得到所述目标组件的显示样式信息；
转换描述模块，用于基于预设的矢量绘图库将所述显示样式信息转换为绘制矢量；
生成显示模块，用于基于所述绘制矢量生成所述目标组件的渲染结果并显示。
根据本公开的一个或多个实施例，本公开提供的基于用户界面框架的处理装置中，所述排版生成模块具体用于：
按照预设的样式模型对所述数据组进行处理，得到数据结构描述；
将所述数据结构描述映射到样式库函数中，得到所述目标组件的显示样式信息。
根据本公开的一个或多个实施例，本公开提供的基于用户界面框架的处理装置中，转换描述模块具体用于：
基于所述显示样式信息在所述矢量绘图库进行转换，获取绘制样式、绘制路径和绘制形式；
基于所述绘制样式、所述绘制路径和所述绘制形式生成所述绘制矢量。
根据本公开的一个或多个实施例，本公开提供的基于用户界面框架的处理装置中，所述装置还包括：
获取信息模块，用于基于所述数据组获取所述目标组件的基本属性信息；
渲染生成模块，用于基于所述基本属性信息进行结构渲染，得到所述目标组件的组件数据结构。
根据本公开的一个或多个实施例，本公开提供的基于用户界面框架的处理装置中，所述装置还包括：
第一获取状态模块，用于获取所述目标组件的初始组件状态；
获取事件模块，用于基于目标接口获取目标事件；
第二获取状态模块，用于基于所述目标事件获取所述目标组件的当前组件状态；
更新组件结构模块，用于在所述初始组件状态和所述当前组件状态不一致的情况下，更新所述组件数据结构。
根据本公开的一个或多个实施例，本公开提供的基于用户界面框架的处理装置中，所述装置还包括用于：
获取控制逻辑模块，用于基于所述数据组获取所述目标组件的控制逻辑；
接收指令模块，用于接收对所述渲染结果的控制操作指令；
响应模块，用于在所述控制操作指令满足所述控制逻辑的情况下，响应所述控制操作指令。
根据本公开的一个或多个实施例，本公开提供的基于用户界面框架的处理装置中，所述装置还包括用于：
获取请求模块，用于获取所述目标组件的更新请求；
获取更新描述模块，用于基于所述更新请求，获取更新绘制矢量；
更新显示模块，用于基于所述更新绘制矢量生成所述目标组件的更新渲染结果并显示。
根据本公开的一个或多个实施例，本公开提供了一种电子设备，包括：
处理器；
用于存储所述处理器可执行指令的存储器；
所述处理器，用于从所述存储器中读取所述可执行指令，并执行所述指令以实现如本公开提供的任一所述的基于用户界面框架的处理方法。
根据本公开的一个或多个实施例，本公开提供了一种非瞬态的计算机可读存储介质，所述存储介质存储有计算机程序，所述计算机程序用于执行如本公开提供的任一所述的基于用户界面框架的处理方法。
根据本公开的一个或多个实施例，本公开提供了一种计算机程序产品，当所述计算机程序产品中的指令由处理器执行时，实现如本公开提供的任一所述的基于用户界面框架的处理方法。
根据本公开的一个或多个实施例，本公开提供了一种计算机程序，所述计算机程序被处理器执行时实现如本公开提供的任一所述的基于用户界面框架的处理方法。
以上描述仅为本公开的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本公开中所涉及的公开范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离上述公开构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本公开中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。
此外，虽然采用特定次序描绘了各操作，但是这不应当理解为要求这些操作以所示出的特定次序或以顺序次序执行来执行。在一定环境下，多任务和并行处理可能是有利的。同样地，虽然在上面论述中包含了若干具体实现细节，但是这些不应当被解释为对本公开的范围的限制。在单独的实施例的上下文中描述的某些特征还可以组合地实现在单个实施例中。相反地，在单个实施例的上下文中描述的各种特征也可以单独地或以任何合适的子组合的方式实现在多个实施例中。
尽管已经采用特定于结构特征和/或方法逻辑动作的语言描述了本主题，但是应当理解所附权利要求书中所限定的主题未必局限于上面描述的特定特征或动作。相反，上面所描述的特定特征和动作仅仅是实现权利要求书的示例形式。

Claims (12)

  1. 一种基于用户界面框架的处理方法，包括：
    基于用户界面框架获取目标组件的数据组；
    对所述数据组进行排版处理，得到所述目标组件的显示样式信息；
    基于预设的矢量绘图库将所述显示样式信息转换为绘制矢量；
    基于所述绘制矢量生成所述目标组件的渲染结果并显示。
  2. 根据权利要求1所述的基于用户界面框架的处理方法，其中，所述对所述数据组进行排版处理，得到所述目标组件的显示样式信息，包括：
    按照预设的样式模型对所述数据组进行处理，得到数据结构描述；
    将所述数据结构描述映射到样式库函数中，得到所述目标组件的显示样式信息。
  3. 根据权利要求1所述的基于用户界面框架的处理方法，其中，所述基于预设的矢量绘图库将所述显示样式信息转换为绘制矢量，包括：
    基于所述显示样式信息在所述矢量绘图库进行转换，获取绘制样式、绘制路径和绘制形式；
    基于所述绘制样式、所述绘制路径和所述绘制形式生成所述绘制矢量。
  4. 根据权利要求1所述的基于用户界面框架的处理方法，还包括：
    基于所述数据组获取所述目标组件的基本属性信息；
    基于所述基本属性信息进行结构渲染，得到所述目标组件的组件数据结构。
  5. 根据权利要求4所述的基于用户界面框架的处理方法，还包括：
    获取所述目标组件的初始组件状态；
    基于目标接口获取目标事件；
    基于所述目标事件获取所述目标组件的当前组件状态；
    在所述初始组件状态和所述当前组件状态不一致的情况下，更新所述组件数据结构。
  6. 根据权利要求1所述的基于用户界面框架的处理方法，还包括：
    基于所述数据组获取所述目标组件的控制逻辑；
    接收对所述渲染结果的控制操作指令；
    在所述控制操作指令满足所述控制逻辑的情况下，响应所述控制操作指令。
  7. 根据权利要求1所述的基于用户界面框架的处理方法，还包括：
    获取所述目标组件的更新请求；
    基于所述更新请求，获取更新绘制矢量；
    基于所述更新绘制矢量生成所述目标组件的更新渲染结果并显示。
  8. 一种基于用户界面框架的处理装置，包括：
    获取数据模块，用于基于用户界面框架获取目标组件的数据组；
    排版生成模块，用于对所述数据组进行排版处理，得到所述目标组件的显示样式信息；
    转换描述模块，用于基于预设的矢量绘图库将所述显示样式信息转换为绘制矢量；
    生成显示模块，用于基于所述绘制矢量生成所述目标组件的渲染结果并显示。
  9. 一种电子设备，所述电子设备包括：
    处理器；
    用于存储所述处理器可执行指令的存储器；
    所述处理器，用于从所述存储器中读取所述可执行指令，并执行所述指令以实现如权利要求1-7中任一项所述的基于用户界面框架的处理方法。
  10. 一种非瞬态的计算机可读存储介质，所述存储介质存储有计算机程序，所述计算机程序用于执行如权利要求1-7中任一项所述的基于用户界面框架的处理方法。
  11. 一种计算机程序产品，当所述计算机程序产品中的指令由处理器执行时，实现如权利要求1-7中任一项所述的基于用户界面框架的处理方法。
  12. 一种计算机程序，所述计算机程序被处理器执行时实现如权利要求1-7中任一项所述的基于用户界面框架的处理方法。
PCT/CN2023/079501 2022-03-10 2023-03-03 一种基于用户界面框架的处理方法、装置、设备及介质 WO2023169316A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202210229810.9A CN116775174A (zh) 2022-03-10 2022-03-10 一种基于用户界面框架的处理方法、装置、设备及介质
CN202210229810.9 2022-03-10

Publications (1)

Publication Number Publication Date
WO2023169316A1 true WO2023169316A1 (zh) 2023-09-14

Family

ID=87932098

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2023/079501 WO2023169316A1 (zh) 2022-03-10 2023-03-03 一种基于用户界面框架的处理方法、装置、设备及介质

Country Status (3)

Country Link
US (1) US20230290095A1 (zh)
CN (1) CN116775174A (zh)
WO (1) WO2023169316A1 (zh)

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117076161B (zh) * 2023-10-16 2023-12-29 湖南于一科技有限公司 通过选取框选内容的方式获取和写入数据的方法

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110069257A (zh) * 2019-04-25 2019-07-30 腾讯科技（深圳）有限公司 一种界面处理方法、装置及终端
CN111740948A (zh) * 2020-05-12 2020-10-02 北京沃东天骏信息技术有限公司 数据包发布方法、动态更新方法、装置、设备及介质
CN112114807A (zh) * 2020-09-28 2020-12-22 腾讯科技（深圳）有限公司 界面显示方法、装置、设备及存储介质
CN113835704A (zh) * 2021-09-27 2021-12-24 中电金信软件有限公司 一种布局文件生成方法、装置、设备以及存储介质

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110069257A (zh) * 2019-04-25 2019-07-30 腾讯科技（深圳）有限公司 一种界面处理方法、装置及终端
CN111740948A (zh) * 2020-05-12 2020-10-02 北京沃东天骏信息技术有限公司 数据包发布方法、动态更新方法、装置、设备及介质
CN112114807A (zh) * 2020-09-28 2020-12-22 腾讯科技（深圳）有限公司 界面显示方法、装置、设备及存储介质
CN113835704A (zh) * 2021-09-27 2021-12-24 中电金信软件有限公司 一种布局文件生成方法、装置、设备以及存储介质

Also Published As

Publication number Publication date
US20230290095A1 (en) 2023-09-14
CN116775174A (zh) 2023-09-19

Similar Documents

Publication Publication Date Title
WO2020119800A1 (zh) 一种列表显示方法、装置、设备及存储介质
WO2020220773A1 (zh) 图片预览信息的显示方法、装置、电子设备及计算机可读存储介质
WO2020119804A1 (zh) 页面视图的显示方法、装置、设备及存储介质
CN110555900B (zh) 渲染指令的处理方法及装置、存储介质、电子设备
WO2023169316A1 (zh) 一种基于用户界面框架的处理方法、装置、设备及介质
US20230334723A1 (en) Post-processing special effect production system and method, and ar special effect rendering method and apparatus
WO2024061088A1 (zh) 显示方法、装置、电子设备以及存储介质
CN108804067A (zh) 信息显示方法、设备和计算机可读介质
CN110489165A (zh) 获取调用栈栈帧指令偏移的方法、装置、介质和设备
WO2022184077A1 (zh) 文档编辑的方法、装置、终端及非暂时性存储介质
CN111652675A (zh) 展示方法、装置和电子设备
WO2022033444A1 (zh) 动态流体效果处理方法、装置、电子设备和可读介质
CN107168738A (zh) 一种应用工具的管理方法、装置、设备和存储介质
WO2024051639A1 (zh) 图像处理方法、装置、设备及存储介质和产品
WO2024061064A1 (zh) 展示效果处理方法、装置、电子设备及存储介质
WO2024067159A1 (zh) 视频生成方法、装置、电子设备及存储介质
WO2023202357A1 (zh) 显示对象的运动控制方法及设备
WO2023197911A1 (zh) 三维虚拟对象生成方法、装置、设备、介质和程序产品
EP3834080B1 (en) Static reconcilliation of application view hierarchies
CN114115673A (zh) 车载屏幕的控制方法
KR20180047200A (ko) 스프라이트 그래픽 제작 장치 및 방법
CN113205601B (zh) 漫游路径生成方法、装置、存储介质及电子设备
CN110209591A (zh) 图片查找方法、装置、电子设备及存储介质
CN112988276B (zh) 一种资源包的生成方法、装置、电子设备及存储介质
WO2023071629A1 (zh) 网页的渲染方法、装置、设备及存储介质

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 23765894

Country of ref document: EP

Kind code of ref document: A1