CN117874388B

CN117874388B - Implementation method, device, equipment and medium of C/S architecture graphic engine

Info

Publication number: CN117874388B
Application number: CN202410030893.8A
Authority: CN
Inventors: 吴昊阳; 俞蔚
Original assignee: Zhejiang Kelan Information Technology Co ltd
Current assignee: Zhejiang Kelan Information Technology Co ltd
Priority date: 2024-01-09
Filing date: 2024-01-09
Publication date: 2025-07-25
Anticipated expiration: 2044-01-09
Also published as: CN117874388A

Abstract

The application discloses a method, a device, equipment and a medium for realizing a C/S architecture graphic engine, and relates to the technical field of computers. The method is applied to a browser end, and comprises the steps of selecting a target parent window for a client of a C/S architecture graphic secondary development engine, establishing a parent-child window relation between the target parent window and an engine window of the C/S architecture graphic secondary development engine, connecting an opening instruction of a target webpage called by a preset JavaScript library with a background service process to open the engine window based on the parent-child window relation, loading a UI interface of the target webpage simultaneously by a browser kernel embedded in the engine window when the engine window is opened, displaying the engine window and the UI interface in a superimposed mode, outputting a target rendering window, and responding to an operation event according to an operation target corresponding to the operation event based on the target rendering window after an operation event aiming at the target webpage is detected. By the technical scheme of the application, the problem that the C/S architecture graphic secondary development engine does not support seamless operation and use in a modern browser can be solved.

Description

Implementation method, device, equipment and medium of C/S architecture graphic engine

Technical Field

The present invention relates to the field of computer technologies, and in particular, to a method, an apparatus, a device, and a medium for implementing a C/S architecture graphics engine.

Background

With the development of modern browser technology, the performance is gradually improved, and the native cross-platform characteristic supports OpenGL ES (OpenGL for Embedded Systems) better. The number of front-end developers is numerous, products on the market are endless, and the requirements on hardware are low, so that users increasingly accept a Browser/Server (Browser/Server) architecture-based graphic secondary development engine, such as Cesium, to achieve the purpose of browsing and using a three-dimensional graphic engine.

However, due to the limitation of the security mechanism of the modern browser and the characteristics of the used JavaScript language, the execution speed and efficiency of the software are far from the level of the c++ language, and the utilization of hardware by the browser is not perfect, so that the efficiency of graphic software developed based on the modern browser is at a low level, and the software cannot be effectively supported for heavy-load computing work and efficient rendering.

Therefore, how to provide a solution to the above technical problem is a problem that a person skilled in the art needs to solve at present.

Disclosure of Invention

In view of the above, the present invention aims to provide a method, apparatus, device and medium for implementing a graphics engine with C/S architecture, which can realize normal development and use of the graphics engine in modern browsers, and achieve the purpose of exceeding the B/S graphics engine in all aspects. The specific scheme is as follows:

in a first aspect, the present application discloses a method for implementing a graphics engine with a C/S architecture, which is applied to a browser, and includes:

determining a current main body window, and selecting a target parent window for a client of a C/S architecture graphic secondary development engine in the main body window, wherein the C/S architecture graphic secondary development engine is a graphic engine obtained by developing the C/S architecture graphic engine by using a C++ language;

establishing a parent-child window relation between the target parent window and an engine window of the C/S architecture graphic secondary development engine through an application program interface provided by an operating system interface frame;

Acquiring an opening instruction of a target webpage called by a preset JavaScript library, and connecting with a background service process according to the opening instruction so that the background service process opens the engine window through the application program interface based on the parent-child window relation;

And displaying the engine window and the UI interface in a superposition way, outputting a target rendering window, and determining an operation target corresponding to the operation event based on the target rendering window after the operation event aiming at the target webpage is monitored, so as to respond to the operation event according to the operation target.

Optionally, the determining the current main body window and selecting a target parent window for the client of the C/S architecture graphic secondary development engine in the main body window includes:

determining a current main body window and determining a current browser tab page based on the main body window;

determining the current operating system type and the modern browser type corresponding to the browser end;

determining a corresponding browser feature identifier according to the modern browser type, calling a corresponding application program interface based on the current operating system type, and capturing a handle of a window to which a client area of the browser tab belongs according to the browser feature identifier;

And determining the window of the client area of the browser tab as a target parent window of the client side of the C/S architecture graphic secondary development engine according to the handle.

Optionally, in the process of determining, according to the handle, the window to which the client area of the browser tab belongs as the target parent window of the client side of the C/S architecture graphic secondary development engine, the method further includes:

And detecting a brother window at the same position according to the target father window, and performing Z-sequence bottom operation or degradation operation on the target brother window affecting the display and interaction of the target father window in the brother window by utilizing the application program interface.

Optionally, the implementation method of the C/S architecture graphics engine further includes:

When the browser tab is initialized and/or the size of the browser tab is changed, acquiring a first screen position of the engine window relative to the client area, width information of the engine window and height information in real time through the preset JavaScript library;

Correspondingly, the step of obtaining an opening instruction of a target webpage called by a preset JavaScript library, and connecting with a background service process according to the opening instruction so that the background service process opens the engine window through the application program interface based on the parent-child window relation comprises the following steps:

And acquiring an opening instruction of a target webpage called by a preset JavaScript library, connecting with a background service process according to the opening instruction, so that the background service process performs engine picture rendering according to the first screen position, the width information and the height information based on the parent-child window relation, and opening the rendered engine window through the application program interface.

Optionally, the displaying the engine window and the UI in a superimposed manner and outputting a target rendering window, after detecting an operation event for the target web page, determining an operation target corresponding to the operation event based on the target rendering window, so as to respond to the operation event according to the operation target, and including:

The engine window and the UI interface are displayed in a superimposed mode, a target rendering window is output, and after an operation event aiming at the target webpage is monitored, the second screen position of an execution main body in the operation event in the engine window is determined based on the target rendering window;

Judging whether the transparency channel value of the RGBA color space at the second screen position is lower than a first preset threshold value or not;

if the transparency channel value is lower than the first preset threshold value, determining that an operation target corresponding to the operation event is the engine window and executing the operation event on the engine window;

and if the transparency channel value is not lower than the first preset threshold value, judging that an operation target corresponding to the operation event is the UI interface and performing function calling on the UI interface according to the operation event.

constructing a top-mounted window and covering the top-mounted window on the engine window in real time;

The top-set window and the UI interface are displayed in a superimposed mode, a target rendering window is output, and after an operation event aiming at the target webpage is monitored, a third screen position of an execution main body in the operation event in the top-set window is determined based on the target rendering window;

judging whether the transparency channel value of the RGBA color space at the third screen position is lower than a second preset threshold value or not;

if the transparency channel value is lower than the second preset threshold value, determining that an operation target corresponding to the operation event is the top-setting window and executing the operation event on the top-setting window;

And if the transparency channel value is not lower than the second preset threshold value, judging that the operation target corresponding to the operation event is the UI interface and performing function calling on the UI interface according to the operation event.

Acquiring all windows except the top-mounted window and the engine window;

Acquiring the handle of the top-mounted window, the handle of the engine window and the handles of target windows positioned above the engine window in all other windows;

Determining a position intersection between the engine window and the target window according to the handle of the engine window and the handle of the target window;

And determining a designated area corresponding to the position intersection in the top setting window according to the handle of the top setting window, and setting the designated area to be not displayed or cut and displayed.

In a second aspect, the present application discloses a device for implementing a graphics engine with a C/S architecture, which is applied to a browser, and includes:

The system comprises a parent window selection module, a parent window selection module and a target parent window selection module, wherein the parent window selection module is used for determining a current main body window and selecting a target parent window for a client of a C/S architecture graphic secondary development engine in the main body window;

The father-son window relation establishing module is used for establishing father-son window relation between the target father window and the engine window of the C/S architecture graphic secondary development engine through an application program interface provided by an operating system interface frame;

The display module is used for acquiring an opening instruction of a target webpage called by a preset JavaScript library, and connecting with a background service process according to the opening instruction so that the background service process opens the engine window through the application program interface based on the parent-child window relation;

And the operation module is used for displaying the engine window and the UI interface in a superposition way and outputting a target rendering window, and after an operation event aiming at the target webpage is monitored, an operation target corresponding to the operation event is determined based on the target rendering window so as to respond to the operation event according to the operation target.

In a third aspect, the application discloses an electronic device comprising a processor and a memory, wherein the memory is configured to store a computer program, and the computer program is loaded and executed by the processor to implement the method for implementing a C/S architecture graphics engine as described above.

In a fourth aspect, the present application discloses a computer readable storage medium storing a computer program, wherein the computer program when executed by a processor implements a method of implementing a C/S architecture graphics engine as described above.

The application provides an implementation method of a C/S architecture graphic engine, which is applied to a browser end and comprises the steps of determining a current main body window, selecting a target parent window for a client of a C/S architecture graphic secondary development engine in the main body window, enabling the C/S architecture graphic secondary development engine to be a graphic engine obtained by developing the C/S architecture graphic engine by using a C++ language, establishing a parent-child window relation between the target parent window and an engine window of the C/S architecture graphic secondary development engine through an application program interface provided by an operating system interface frame, obtaining an opening instruction of a target webpage called by a preset JavaScript library, connecting the opening instruction with a background service process according to the opening instruction, so that the background service process opens the engine window through the application program interface based on the parent-child window relation, enabling a browser kernel embedded in the engine window to simultaneously load a UI interface of the target webpage when the engine window is opened, displaying the engine window and the UI interface in a superposition mode, outputting a target window in a mode, and determining that the target webpage is corresponding to the operation event and the target webpage is operated according to a target webpage operation response after the operation event is monitored.

The application has the beneficial technical effects that firstly, the client of the C/S architecture graphic secondary development engine is attached to the appointed area of the modern browser in a parent-child window relationship, so that the aim of seamlessly embedding the rendered picture into the browser is fulfilled, the seamless butt joint with the modern browser is realized, and the actual operation experience of a user is met. In addition, a wider secondary development group is introduced, and C++ language is utilized to carry out secondary development on a C/S architecture graphic engine, so that transformation from JavaScript to C++ is realized, the C/S architecture graphic engine has the characteristics of high performance, high response, cross-platform and the like, and is favorable for popularization and application of product marketization. And secondly, when the target webpage of the browser end is accessed, the target webpage can be communicated with the client end of the C/S architecture graphical secondary development engine, and a webpage UI interface is displayed in an engine picture so as to realize the superposition display effect. And finally, determining an operation target corresponding to the operation event aiming at the target webpage based on the target rendering window displayed in a superposition way, and responding to the operation event according to the operation target, so as to ensure that the C/S architecture client can stably support operation in the browser. Therefore, through a series of transformation from a front-end UI interface to a rear-end image engine, from JavaScript to C++, and from an application program interface provided by an operating system interface frame to local network high-performance communication, different software system flows are developed, a set of pseudo B/S architecture software operation system with pseudo-spurious is simulated, a set of codes can meet the cross-platform recycling requirement, repeated development is avoided, and better performance output performance is achieved under the same browser environment. Therefore, by the technical scheme, the development efficiency of the front-end interface is greatly improved compared with that of the client-side interface, the effect is better, the customization is high, and the popularization and the use of high-performance C/S architecture software are realized in the browser age after assistance.

In addition, the implementation device, the equipment and the storage medium of the C/S architecture graphic engine correspond to the implementation method of the C/S architecture graphic engine, and have the same effects.

Drawings

In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings that are required to be used in the embodiments or the description of the prior art will be briefly described below, and it is obvious that the drawings in the following description are only embodiments of the present invention, and that other drawings can be obtained according to the provided drawings without inventive effort for a person skilled in the art.

FIG. 1 is a flow chart of an implementation method of a C/S architecture graphics engine disclosed in the present application;

FIG. 2 is a schematic diagram of communication from an operating system API to a local network in accordance with the present disclosure;

FIG. 3 is a schematic diagram of a response operation event for a target web page according to the present disclosure;

FIG. 4 is a schematic diagram of a system module for implementing a graphics engine with a C/S architecture according to the present disclosure;

FIG. 5 is a schematic diagram of a relationship between windows in a browser end according to the present disclosure;

FIG. 6 is a diagram illustrating a window display under a window filtering mechanism according to the present disclosure;

FIG. 7 is a schematic diagram of an implementation device of a graphics engine with a C/S architecture according to the present disclosure;

fig. 8 is a block diagram of an electronic device according to the present disclosure.

Detailed Description

The following description of the embodiments of the present invention will be made clearly and completely with reference to the accompanying drawings, in which it is apparent that the embodiments described are only some embodiments of the present invention, but not all embodiments. All other embodiments, which can be made by those skilled in the art based on the embodiments of the invention without making any inventive effort, are intended to be within the scope of the invention.

Currently, most browser-based B/S architecture graphic secondary development engines in the market achieve the aim of browsing and using a three-dimensional graphic engine. The C/S architecture graphic secondary development engine developed based on the C++ language is limited by a modern browser security mechanism, cannot be operated in a browser in a plug-in mode, can only be operated on various operating systems in an independent client mode, has multiple environmental restrictions, strong specialization and insufficient quantity of corresponding developers, and has adverse effects on popularization of secondary development.

Therefore, the application provides an implementation scheme of the C/S architecture graphic engine, which can solve the problem that the C/S architecture graphic secondary development engine does not support seamless operation and use in a modern browser, and realize normal development and use of the graphic engine in the modern browser, thereby achieving the purpose of exceeding the B/S graphic engine in all aspects.

The embodiment of the invention discloses a method for realizing a C/S architecture graphic engine, which is shown in FIG. 1 and applied to a browser side, and comprises the following steps:

s101, determining a current main body window, and selecting a target parent window for a client of a C/S architecture graphic secondary development engine in the main body window, wherein the C/S architecture graphic secondary development engine is a graphic engine obtained by developing the C/S architecture graphic engine by using a C++ language.

The embodiment of the application is applied to the browser end. A current subject window is first determined in the browser, and an appropriate target parent window is selected for the graphics engine based on the current subject window. It can be appreciated that in a common interface framework, under the condition that the rendering relationship of the parent and child windows is always kept as the region position, the child window rendering is always above the parent window rendering, so as to form an overlay effect.

Due to the security mechanism limitation of modern browser and the characteristics of the JavaScript language, the execution speed and efficiency of the browser are far from the level of C++ language. The software developed based on C++ has the characteristics of high performance, high response, cross-platform and the like, so that in the embodiment of the application, a Client of a C/S architecture graphic secondary development engine is selected based on a C/S architecture graphic secondary development engine developed by using C++ language, and the effect that the Client is used on a browser is simulated by enabling a picture of the engine to be rendered and covered by the rendering of the target parent window by using the parent-child characteristics. Therefore, a reasonable and efficient solution is provided for the situation that the modern browser does not support the C/S architecture graphic secondary development engine.

It should be noted that, the C/S architecture graphic secondary development engine (engine end) is developed based on c++ language, and adapts code implementation using the API (Application Program Interface, application programming interface) and features of the operating system one by one for Windows, linux, mac and other operating systems, so as to ensure compatibility of the engine itself to cross-platform. And moreover, an external C++ secondary development API interface which is reasonable in design for the C/S architecture graphic secondary development engine can be in butt joint with an operating system API, and meanwhile, the interface can provide good object, method and flow encapsulation and is matched with an exhaustive API description document.

S102, establishing a parent-child window relation between the target parent window and an engine window of the C/S architecture graphic secondary development engine through an application program interface provided by an operating system interface frame.

In the embodiment of the application, the engine end uses an API provided by an operating system interface frame to set the window of the engine as a window without a title bar, a tool bar and a frame type, then establishes a parent-child window relation with a target parent window, and attaches the client end of the C/S architecture graphic secondary development engine to the client area of the appointed tag page of the modern browser in a parent-child window relation so as to achieve the aim of seamlessly embedding the rendering picture into the browser. Assuming that the engine window of the C/S architecture graphic secondary development engine is a window C and the target parent window is a window P, establishing a parent-child window relationship between the target parent window and the engine window of the C/S architecture graphic secondary development engine may be setting the window C as a child window of the window P or setting the window P as a parent window of the window C.

It should be noted that when the parent-child window relationship is set, window P may have other sibling windows in the same location. Therefore, in the embodiment of the application, the sibling window at the same position is detected according to the target parent window, and the Z sequence bottom operation or the degradation operation is carried out on the target sibling window affecting the display and interaction of the target parent window in the sibling window by utilizing an API (application program interface).

And S103, acquiring an opening instruction of a target webpage called by a preset JavaScript library, and connecting with a background service process according to the opening instruction so that the background service process opens the engine window through the application program interface based on the parent-child window relation, wherein when the engine window is opened, a browser kernel embedded in the engine window simultaneously loads a UI interface of the target webpage.

It should be noted that in the embodiment of the present application, a high-performance gRPC (google Remote Procedure Call ) communication service component is accessed in the engine side to communicate with the browser side. Through the method that an engine end writes a proto file, designs a related structure body and a method, a C++ back end realizes the proto definition method, and then JavaScript of a browser end packages an API interface JS library which is beneficial to use and understanding based on the proto so as to obtain a preset JavaScript library.

Setting of the target web page is then required, and access to the content typically requires entry of a specified URL (Uniform Resource Locator ) address through an address field at the browser. In the embodiment of the application, the address bar points to the address of the target webpage, and the target webpage calls an opening instruction through a preset JavaScript library. The opening instruction is firstly connected to a background service process of a local address designated port, and after the connection is successful, the background service process opens an engine window through an API of an operating system.

In the embodiment of the application, the background service process is automatically started along with the starting of the operating system, and usually exists in the form of operating system service. The module for network communication is embedded, the fixed communication port is occupied to receive external communication instructions at any time, and in a specific implementation mode, the module can be specially used for a specific network request initiated by a browser end. The background service process can open the program corresponding to the engine window at the designated position, and can also forcedly restart or close the program corresponding to the engine window.

It will be appreciated that typically the engine interface is developed by the front end, and in conventional B/S architectures the interface is responsible for rendering by the browser engine. In the embodiment of the application, the rendering of the C++ engine end takes over the rendering of the browser engine, so that the UI (User Interface) interface elements of the rendering of the browser client area are replaced by the rendering picture coverage of the C++ engine end. Therefore, after the engine window is started, if the UI is still to be superimposed on the c++ engine side screen, a browser kernel module, referred to herein as a module W, is additionally required to be introduced into the c++ engine side, and is responsible for parsing and overlaying the UI webpage elements.

Further, the engine end can call the module W when starting and initializing, and then the module W is started to load the UI webpage with the specified path. That is, when the engine window is opened, the UI interface of the target web page is loaded simultaneously through the browser kernel embedded in the engine window. It should be noted that the module W, CEF (Chromium Embedded Framework), is embedded in the engine side, and the UI interface at this time is already taken over by the CEF framework accessed by the engine side, under which all front-end interface renderings are governed. Fig. 2 is a schematic diagram showing information interaction between the module W and the engine window by using the communication service component and the preset JavaScript library. In this way, the engine window can perform corresponding analysis according to the package of the related API in the preset JavaScript library, convert the package into the call of the C++ language, and finally realize the use of a certain function of the engine.

And S104, displaying the engine window and the UI interface in a superposition way, outputting a target rendering window, and determining an operation target corresponding to the operation event based on the target rendering window after the operation event aiming at the target webpage is monitored, so as to respond to the operation event according to the operation target.

In the embodiment of the application, when the engine window is started, a module W corresponding to the browser kernel is started, the module W loads an interface UI webpage with a designated address, and a client area of a final browser tab page outputs a final rendering result of the window to obtain a target rendering window.

Further, when the user operates the target webpage, an operation target corresponding to the operation event of the target webpage is determined based on the target rendering window, so that forwarding related operation is judged, and whether the operation target is a UI interface or an engine window is determined. When the operation target is the UI interface, related functions are called according to the API correspondingly triggered by the UI webpage element, and when the operation target is the engine window, the engine window is controlled to execute the operations of starting, refreshing and closing the engine window. FIG. 3 is a schematic diagram showing a complete set of background communication mechanisms for ensuring that a C/S architecture client can stably support startup, refresh and exit from a browser. When the webpage is refreshed, the related event is detected by the preset JavaScript library, the operation system API is immediately called to close the engine window, and when the loading event is detected, the operation system API is called to open the engine window.

It should be noted that, instructions such as opening and closing are encapsulated in the preset JavaScript library, and are used for controlling the engine window by the background service process, and meanwhile, the events of starting, refreshing and closing the browser webpage are needed to be docked, so that the operation of the browser can be timely fed back to the preset JavaScript library, and unified management is performed by the preset JavaScript library.

Fig. 4 is a schematic diagram of a system architecture module of a C/S architecture graphic secondary development engine supporting a browser scheme according to an embodiment of the present application. The browser window P is a target parent window selected for the C/S architecture client, and the engine window C is used as a child window thereof to be always rendered on the parent window to form an overlay effect. Therefore, the rendering of the picture of the engine end which covers the rendering of the parent window can simulate the effect of the client end used on the browser by utilizing the parent-child characteristics. The module W is a browser kernel module and is used for superposing a UI interface on a C++ engine end picture and responsible for analysis and superposition rendering of the UI interface webpage elements. When the engine starts initialization, the module W is called to load the UI webpage with a specified path. The embedded browser module W communicates with the client by using a communication module G (communication service component), displays a web page UI interface in an engine screen, and responds to an API call triggered by an interface element.

The JavaScript library at the browser end encapsulates an API interface which is in butt joint with the C/S architecture graphic secondary development engine and an API which is adapted to different operation system interface libraries, and meanwhile encapsulates instructions such as opening, closing and the like for controlling the window C by the background service process D. The library J needs to be connected with the browser webpage to start, refresh and close events, so that the operation of the browser can be timely fed back to the library J, and the library J is used for unified management.

The background service process D has the following functions of automatically starting the background along with the starting of an operating system, and usually exists in the form of operating system service, an embedded network communication module occupies a fixed communication port and receives an external communication instruction at any time, wherein the embedded network communication module is specially used for a specific network request initiated by a browser end, and a window C program at a specified position can be opened and can be forcedly restarted or closed.

In addition, in the embodiment of the application, the development of related interface UI web pages can be carried out aiming at the module W, the interfaces provided by the library J are utilized to carry out logic management and call on the engine functions, and the interfaces and the engine achieve ideal secondary development targets through the development of the stage.

Therefore, on the basis of high performance and cross-platform of a C/S architecture graphic secondary development engine developed by using a C++ language, the graphic engine is normally developed and used in a modern browser by using stackable rendering characteristics of an operating system window, a built-in browser kernel and a local network service communication technology, so that the aim of exceeding the B/S graphic engine is fulfilled in all aspects.

Based on the above embodiments, the present embodiment will specifically explain S101 in the above embodiments. Wherein, in order to enable the operator to clearly and intuitively know how to select the target parent window for the client of the C/S architecture graphic secondary development engine, the process of determining the current main body window and selecting the target parent window for the client of the C/S architecture graphic secondary development engine in the main body window may include the following steps:

Step 11, determining a current main body window and determining a current browser tab page based on the subject window;

Step 12, determining the current operating system type and the modern browser type corresponding to the browser end;

Step 13, determining a corresponding browser feature identifier according to the modern browser type, calling a corresponding application program interface based on the current operating system type, and capturing a handle of a window to which a client area of the browser tab belongs according to the browser feature identifier;

and step 14, determining the window of the client area of the browser tab as a target father window of the client side of the C/S architecture graphic secondary development engine according to the handle.

In the embodiment of the application, a C/S architecture client is attached to a client area of a designated tab page of a modern browser in a parent-child window relationship so as to achieve the aim of seamlessly embedding a rendering picture into the browser, and the core is to determine an attached target parent window. Thus, it is first necessary to select the appropriate target parent window, referred to herein as window P, for the client. Aiming at the difference of adapting operating systems and the difference of modern browser types, utilizing related operating system interface library APIs, grabbing window P handles of client areas of browser label pages of specific identifications according to characteristic identifications of each browser, setting father-child window relations under the condition of the APIs, detecting other brother windows in the same position, and carrying out Z-sequence bottom or degradation operation on the brother windows which influence display or interaction of the windows P by utilizing the system interface library APIs.

Based on the above embodiment, in a possible implementation manner, in order to enable the engine window to be always kept above the target parent window, for example, when the browser only displays the engine screen in a partial area, in the embodiment of the present application, the detection work is performed with respect to the position and the size of the relevant area of the engine screen. Specifically, the method can further comprise the following steps:

When the browser tab is initialized and/or the size of the browser tab is changed, the first screen position of the engine window relative to the client area, the width information of the engine window and the height information are obtained in real time through the preset JavaScript library.

In the embodiment of the present application, as shown in fig. 5, in some application scenarios, the browser does not display the engine image in all the areas of the client area, but only involves a partial area, so that the detection work of the position and the size of the relevant area is performed for the engine window. The task is responsible for the library J, and the main principle is that when the page of the browser is initialized and the size is changed, the screen position, width and height information of the designated page element id relative to the client area are acquired in real time, and the information is timely communicated to the engine side.

In the embodiment of the application, the engine end uses an API provided by an interface frame of an operating system, the window of the engine is set as a window without a title bar, a tool bar and a frame type, which is called as a window C, then the window C is set as a child window of the window P, or the window P is set as a father window of the window C, and then according to the position and the width and height information obtained in the last step, through the API setting, the rendering of the client area appointed page element of the appointed tag page of the browser is covered by the picture rendering of the engine, so that the effect of simulating the use in the browser is achieved.

Based on the above embodiment, the present embodiment will specifically explain S104 in the above embodiment. The module W corresponding to the browser kernel has off-screen rendering capability, that is, can output a rendered picture result to the memory, and based on the characteristic, two possible schemes can realize the superposition display effect. In order to enable an operator to clearly and intuitively know how to implement the UI interface superimposed on the c++ engine side screen, in a first specific embodiment, the engine window and the UI interface are displayed in a superimposed manner and a target rendering window is output, and when an operation event for the target web page is monitored, an operation target corresponding to the operation event is determined based on the target rendering window, so that a process of responding to the operation event according to the operation target may include the following steps:

step 21, the engine window and the UI interface are displayed in a superimposed mode, a target rendering window is output, and after an operation event aiming at the target webpage is monitored, the second screen position of an execution main body in the operation event in the engine window is determined based on the target rendering window;

Step 22, judging whether the transparency channel value of the RGBA color space at the second screen position is lower than a first preset threshold value;

Step 23, if the transparency channel value is lower than the first preset threshold value, determining that an operation target corresponding to the operation event is the engine window and executing the operation event on the engine window;

And step 24, if the transparency channel value is not lower than the first preset threshold value, judging that the operation target corresponding to the operation event is the UI interface and performing function calling on the UI interface according to the operation event.

In this embodiment, the result of the picture rendered by the module W is stored in the memory, and is processed by the graphics means, and is calculated and mixed with the rendering result of the window C, and finally output to the screen as the final rendering result, so as to simulate the effect of superposition of the UI interface and the engine end in the B/S architecture;

It should be noted that the module W has forwarding processing capability for window events and peripheral events, so that when the user operates at the engine end, the engine end's own message queue forwards the received window events and peripheral events to the module W. Taking a mouse operation as an example, when the mouse moves on the window C or a clicking operation occurs, through the screen position of the window C when a mouse event starts, judging the alpha (transparent) channel value of RGBA of off-screen rendering data at the screen position, when the value is lower than a certain threshold value, namely the color is semitransparent or even completely transparent, the mouse event is not forwarded to the module W but is forwarded to an event queue of the window C as usual, and when the value is higher than a certain threshold value, the mouse event is forwarded to the event queue of the module W but is not forwarded to the event queue of the window C. Whereby the logic determines the target object for forwarding.

In a second specific embodiment, the engine window and the UI interface are displayed in a superimposed manner, and a target rendering window is output, and when an operation event for the target web page is detected, an operation target corresponding to the operation event is determined based on the target rendering window, so that the response to the operation event according to the operation target may include the following steps:

Step 31, constructing a top-mounted window and covering the top-mounted window on the engine window in real time;

Step 32, superposing and displaying the top-set window and the UI interface, and outputting a target rendering window, wherein after an operation event aiming at the target webpage is monitored, the third screen position of an execution main body in the operation event in the top-set window is determined based on the target rendering window;

Step 33, judging whether the transparency channel value of the RGBA color space at the third screen position is lower than a second preset threshold value;

Step 34, if the transparency channel value is lower than the second preset threshold value, determining that an operation target corresponding to the operation event is the top-set window and executing the operation event on the top-set window;

and 35, if the transparency channel value is not lower than the second preset threshold value, judging that the operation target corresponding to the operation event is the UI interface and performing function calling on the UI interface according to the operation event.

In this embodiment, a new window S is derived, which has the characteristics of having the highest display level, i.e. TOPMOST set top, no frame, no title bar, layered or transparent characteristics, supporting mouse penetration. Correspondingly, the module W is fused into the window S, namely, off-screen rendering is utilized to output the rendered picture to the window S.

The window S obtains the position and the size of the window C in the screen through an operating system interface library API, and the position and the size of the window S are set at certain time intervals, so that the purpose of keeping the window C covered in real time is realized. It is visually indistinct from the first embodiment because it has a layered or transparent nature and supports mouse penetration. At this time, all peripheral event operations are preferentially processed by the window S, according to the same decision principle from step 22 to step 24, thereby realizing correct event forwarding.

It will be appreciated that the second embodiment achieves no difference from the first embodiment, but the system efficiency and the seamless performance are reduced, and the system is highly dependent on the API of each os interface library, and requires an additional process flow.

Further, based on the second specific embodiment, since the window S is at the highest display level, i.e., the set-top state. This state will cover the display of all other windows of the operating system, and in order to solve this situation, a targeted window filtering mechanism needs to be introduced. Specifically, the method can further comprise the following steps:

step 41, obtaining all windows except the top-set window and the engine window;

Step 42, obtaining the handle of the top-mounted window, the handle of the engine window and the handles of the target windows positioned above the engine window in all other windows;

step 43, determining a position intersection between the engine window and the target window according to the handle of the engine window and the handle of the target window;

And 44, determining a designated area corresponding to the position intersection in the top setting window according to the handle of the top setting window, and setting the designated area to be not displayed or cut and displayed.

In the embodiment of the application, all windows except the top-set window and the engine window are acquired first. As shown in FIG. 6, the rectangular frame portion corresponding to the window C corresponds to the top window and the engine window portion, and the windows 1, 2 and 3 correspond to the other windows. Further, the handle of the window S itself and the handle of the window C are obtained, and then all window handles located above the window C, i.e., each window that is overlaid on top of the window C (even if it is overlaid by the window S), are obtained using the operating system interface library API. The size of their positions relative to the screen is obtained, their rectangular position intersection with window C is calculated, and then the specified area of window S is set to be either not displayed or to be cut out for display by using the interface library API, for example, an interface like window mask or setting display area (which displays can be set in the window and which are not displayed), so that the effect that the set-top window is covered by the normal window is simulated.

It can be understood that this approach consumes a part of computing resources in the window detection process, and according to the difference of the operating systems, the width detection of the window frame is sometimes inaccurate, and in the actual use process, the display of a part of the window deviates by a plurality of pixels, so that the accuracy of providing the interface by relying on the interface library API is compared.

Therefore, by the superposition display scheme of the two modules W and the engine, the superposition of the UI interface on the C++ engine end picture is realized. Through a series of transformation from a front-end UI interface to a back-end image engine, from JavaScript to C++, and from an operating system API to local network high-performance communication, different software system flows are developed, a set of pseudo B/S architecture software operation system with pseudo spurious is simulated, and the browser era and the popularization and the use of the high-performance C/S architecture software are realized after assistance. Compared with the development of the client interface, the development efficiency of the front-end interface is greatly improved, the effect is better, and the customization is high.

Correspondingly, the embodiment of the application also discloses a device for realizing the C/S architecture graphic engine, which is applied to a browser end and comprises the following components:

the parent window selection module 11 is used for determining a current main body window and selecting a target parent window for a client of a C/S architecture graphic secondary development engine in the main body window, wherein the C/S architecture graphic secondary development engine is a graphic engine obtained by developing a C/S architecture graphic engine by using a C++ language;

A parent-child window relation establishing module 12, configured to establish a parent-child window relation between the target parent window and an engine window of the C/S architecture graphic secondary development engine through an application program interface provided by an operating system interface frame;

The display module 13 is used for acquiring an opening instruction of a target webpage called by a preset JavaScript library, and connecting with a background service process according to the opening instruction so that the background service process opens the engine window through the application program interface based on the parent-child window relation, wherein when the engine window is opened, a browser kernel embedded in the engine window simultaneously loads a UI interface of the target webpage;

And the operation module 14 is used for displaying the engine window and the UI interface in a superposition way and outputting a target rendering window, and after an operation event aiming at the target webpage is monitored, an operation target corresponding to the operation event is determined based on the target rendering window so as to respond to the operation event according to the operation target.

The more specific working process of each module may refer to the corresponding content disclosed in the foregoing embodiment, and will not be described herein.

The technical scheme is applied to a browser side and comprises the steps of determining a current main body window, selecting a target parent window for a client side of a C/S architecture graphic secondary development engine in the main body window, enabling the C/S architecture graphic secondary development engine to be a graphic engine obtained by developing the C/S architecture graphic engine by using a C++ language, establishing a parent-child window relation between the target parent window and an engine window of the C/S architecture graphic secondary development engine through an application program interface provided by an operating system interface frame, obtaining an opening instruction of a target webpage called by a preset JavaScript library, and connecting the opening instruction with a background service process according to the opening instruction so that the background service process opens the engine window through the application program interface based on the parent-child window relation, wherein when the engine window is opened, a browser kernel embedded in the engine window simultaneously loads a UI interface of the target webpage, displaying the engine window and the UI interface in a superposition mode, outputting a target rendering window, and determining a target operation response according to an operation event corresponding to the target operation event based on the target rendering event.

Further, the embodiment of the present application further discloses an electronic device, and fig. 8 is a block diagram of an electronic device 20 according to an exemplary embodiment, where the content of the figure is not to be considered as any limitation on the scope of use of the present application.

Fig. 8 is a schematic structural diagram of an electronic device 20 according to an embodiment of the present application. The electronic device 20 may include, in particular, at least one processor 21, at least one memory 22, a power supply 23, a communication interface 24, an input-output interface 25, and a communication bus 26. The memory 22 is used for storing a computer program, and the computer program is loaded and executed by the processor 21 to implement relevant steps in the implementation method of the C/S architecture graphics engine disclosed in any of the foregoing embodiments. In addition, the electronic device 20 in the present embodiment may be a computer.

In this embodiment, the power supply 23 is configured to provide working voltages for each hardware device on the electronic device 20, the communication interface 24 is capable of creating a data transmission channel with an external device for the electronic device 20, and the communication protocol to be followed is any communication protocol applicable to the technical solution of the present application, which is not specifically limited herein, and the input/output interface 25 is configured to obtain external input data or output data to the external device, and the specific interface type of the input/output interface may be selected according to the specific application needs and is not specifically limited herein.

The memory 22 may be a carrier for storing resources, such as a read-only memory, a random access memory, a magnetic disk, or an optical disk, and the resources stored thereon may include an operating system 221, a computer program 222, data 223, and the like, and the data 223 may include various data. The storage means may be a temporary storage or a permanent storage.

The operating system 221 is used for managing and controlling various hardware devices on the electronic device 20 and the computer program 222, which may be Windows Server, netware, unix, linux, etc. The computer program 222 may further comprise a computer program capable of performing other specific tasks in addition to the computer program capable of performing the method of implementing a C/S architecture graphics engine executed by the electronic device 20 as disclosed in any of the previous embodiments.

Further, embodiments of the present application also disclose a computer readable storage medium, where the computer readable storage medium includes random access Memory (Random Access Memory, RAM), memory, read-Only Memory (ROM), electrically programmable ROM, electrically erasable programmable ROM, registers, hard disk, magnetic disk, or optical disk, or any other form of storage medium known in the art. The method for realizing the C/S architecture graphic engine is realized when the computer program is executed by a processor. For specific steps of the method, reference may be made to the corresponding contents disclosed in the foregoing embodiments, and no further description is given here.

In this specification, each embodiment is described in a progressive manner, and each embodiment is mainly described in a different point from other embodiments, so that the same or similar parts between the embodiments are referred to each other. For the device disclosed in the embodiment, since it corresponds to the method disclosed in the embodiment, the description is relatively simple, and the relevant points refer to the description of the method section.

The steps of a method or algorithm for implementing a C/S architecture graphics engine described in connection with the embodiments disclosed herein may be embodied directly in hardware, in a software module executed by a processor, or in a combination of the two. The software modules may be disposed in Random Access Memory (RAM), memory, read Only Memory (ROM), electrically programmable ROM, electrically erasable programmable ROM, registers, hard disk, a removable disk, a CD-ROM, or any other form of storage medium known in the art.

Finally, it is further noted that relational terms such as first and second, and the like are used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Moreover, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises an element.

The foregoing describes the implementation method, apparatus, device and medium of a C/S architecture graphics engine provided by the present invention in detail, and specific examples are set forth herein to illustrate the principles and embodiments of the present invention, and the above examples are only for aiding in understanding the method and core concept of the present invention, and meanwhile, for those skilled in the art, according to the concept of the present invention, there are variations in the specific embodiments and application scope, so the disclosure should not be construed as limiting the present invention.

Claims

1. The implementation method of the C/S architecture graphic engine is characterized by being applied to a browser end and comprising the following steps:

The engine window and the UI interface are displayed in a superimposed mode, a target rendering window is output, and after an operation event aiming at the target webpage is monitored, an operation target corresponding to the operation event is determined based on the target rendering window, so that the operation event is responded according to the operation target;

The determining the current main body window and selecting a target parent window for the client of the C/S architecture graphic secondary development engine in the main body window comprises the following steps:

Determining a current main body window, and determining a current browser tab page based on the main body window;

Determining a window to which a client area of the browser tab belongs as a target parent window of a client side of the C/S architecture graphic secondary development engine according to the handle;

the process of determining the window of the client area of the browser tab as the target parent window of the client side of the C/S architecture graphic secondary development engine according to the handle further comprises:

2. The method of implementing a C/S architecture graphics engine of claim 1, further comprising:

3. The method for implementing the C/S architecture graphic engine according to claim 1 or 2, wherein the displaying the engine window and the UI interface in a superimposed manner and outputting a target rendering window, when an operation event for the target web page is detected, determining an operation target corresponding to the operation event based on the target rendering window, so as to respond to the operation event according to the operation target, includes:

4. The method for implementing the C/S architecture graphic engine according to claim 1 or 2, wherein the displaying the engine window and the UI interface in a superimposed manner and outputting a target rendering window, when an operation event for the target web page is detected, determining an operation target corresponding to the operation event based on the target rendering window, so as to respond to the operation event according to the operation target, includes:

5. The method of implementing a C/S architecture graphics engine of claim 4, further comprising:

Acquiring all windows except the top-mounted window and the engine window;

6. An implementation device of a C/S architecture graphics engine, applied to a browser, comprising:

The operation module is used for displaying the engine window and the UI in a superposition way and outputting a target rendering window, and after an operation event aiming at the target webpage is monitored, an operation target corresponding to the operation event is determined based on the target rendering window so as to respond to the operation event according to the operation target;

The parent window selection module is used for determining a current main body window and determining a current browser tab page based on the main body window, determining a current operating system type and a modern browser type corresponding to the browser end, determining a corresponding browser characteristic identification according to the modern browser type, calling a corresponding application program interface based on the current operating system type, capturing a handle of a window of a client area of the browser tab page according to the browser characteristic identification, and determining the window of the client area of the browser tab page as a target parent window of a client end of the C/S architecture graphic secondary development engine according to the handle;

And the father window selection module is also used for detecting brother windows at the same position according to the target father window, and performing Z sequence bottom operation or degradation operation on target brother windows which influence the display and interaction of the target father window in the brother windows by utilizing the application program interface.

7. An electronic device comprising a processor and a memory, wherein the memory is configured to store a computer program that is loaded and executed by the processor to implement a method of implementing a C/S architecture graphics engine as claimed in any one of claims 1 to 5.

8. A computer readable storage medium for storing a computer program, wherein the computer program when executed by a processor implements a method of implementing a C/S architecture graphics engine as claimed in any one of claims 1 to 5.