CN115268720B - Page rendering method, device, equipment and readable storage medium - Google Patents
Page rendering method, device, equipment and readable storage medium Download PDFInfo
- Publication number
- CN115268720B CN115268720B CN202210980839.0A CN202210980839A CN115268720B CN 115268720 B CN115268720 B CN 115268720B CN 202210980839 A CN202210980839 A CN 202210980839A CN 115268720 B CN115268720 B CN 115268720B
- Authority
- CN
- China
- Prior art keywords
- canvas
- coordinates
- rendering
- user
- cursor
- Prior art date
- Legal status (The legal status 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 status listed.)
- Active
Links
- 238000009877 rendering Methods 0.000 title claims abstract description 124
- 238000000034 method Methods 0.000 title claims abstract description 38
- 238000006243 chemical reaction Methods 0.000 claims description 9
- 238000001514 detection method Methods 0.000 claims description 3
- 230000000694 effects Effects 0.000 abstract description 5
- 238000005516 engineering process Methods 0.000 description 5
- 230000008569 process Effects 0.000 description 5
- 238000010586 diagram Methods 0.000 description 4
- 230000009471 action Effects 0.000 description 3
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000000007 visual effect Effects 0.000 description 2
- 230000006978 adaptation Effects 0.000 description 1
- 230000002776 aggregation Effects 0.000 description 1
- 238000004220 aggregation Methods 0.000 description 1
- 208000018747 cerebellar ataxia with neuropathy and bilateral vestibular areflexia syndrome Diseases 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
Classifications
-
- 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/04812—Interaction techniques based on cursor appearance or behaviour, e.g. being affected by the presence of displayed objects
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Data Mining & Analysis (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The embodiment of the application provides a page rendering method, a page rendering device, equipment and a readable storage medium, wherein the method comprises the following steps: acquiring canvas page elements on a browser page; rendering canvas page elements on the inner screen canvas, and detecting coordinates of a current user cursor on the inner screen canvas; converting the coordinates of the current user cursor on the inner screen canvas into the coordinates of the current user cursor on the outer screen canvas in real time; and rendering the current user cursor on the external screen canvas according to the coordinates of the current user cursor on the external screen canvas. According to the embodiment of the application, the canvas page elements are rendered on the inner screen canvas, the user cursor is rendered on the outer screen, the effect of the cursor rendering on the rendering of the canvas page elements is avoided by a split screen canvas rendering mode, and the rendering performance of the canvas when the user cursor is rendered under multiple canvas page elements is improved, so that the page rendering efficiency is improved.
Description
Technical Field
The present application relates to the field of computer technologies, and in particular, to a method, an apparatus, a device, and a readable storage medium for page rendering.
Background
With the development of scientific technology, the software technology and hardware technology of computers and mobile terminals have advanced significantly. Because of the wide application of the internet technology, a user can obtain a large amount of information from the network under the condition of no home departure, thereby not only providing help for the work and study of the user, but also enriching the daily life of the user. Today, interactions between multiple users can be made through a browser.
Today, the layout of browser pages is more and more complex, and a page often contains a lot of information, and possibly pictures, videos and other multimedia information besides text information. The current page rendering technology renders all elements and all cursors contained on a page in one canvas, and the whole canvas needs to be re-rendered by moving the cursors according to the rendering characteristics of the canvas. For pages containing more content, once a cursor moves, all the content contained on the canvas needs to be rendered again, so that the efficiency is low, the canvas performance is reduced, and the page display speed is influenced. As one of the important steps of completing page loading by the browser, if the efficiency of the rendering is low, the page loading speed is slow, and the user browsing of the page is affected, so that a high-performance page rendering method needs to be provided.
Disclosure of Invention
In view of the above, the present application provides a method, an apparatus, a device, and a readable storage medium for page rendering, so as to avoid the effect of cursor rendering on rendering of canvas page elements, and improve rendering performance of canvas when rendering user cursor under multiple canvas page elements, thereby improving page rendering efficiency, and the specific technical scheme is as follows:
in a first aspect, the present application provides a page rendering method, the method including:
Acquiring canvas page elements on a browser page;
rendering the canvas page element on an inner screen canvas, and detecting coordinates of a current user cursor on the inner screen canvas;
converting the coordinates of the current user cursor on the inner screen canvas into the coordinates of the current user cursor on the outer screen canvas in real time;
and rendering the current user cursor on the external screen canvas according to the coordinates of the current user cursor on the external screen canvas.
In one possible implementation manner, the converting, in real time, the coordinates of the current user cursor on the inner screen canvas to the coordinates of the current user cursor on the outer screen canvas includes:
Rendering a transparent element on the inner screen canvas where the current user cursor is located;
and converting the coordinates of the transparent element where the current user cursor is positioned into the coordinates of the current user cursor on the external screen canvas in real time.
In one possible implementation, after the rendering of the current user cursor on the external screen canvas, the method further comprises:
Acquiring coordinates of cursors of other users through the inner screen canvas;
Converting coordinates of other user cursors on the inner screen canvas into coordinates of other user cursors on the outer screen canvas in real time;
And rendering other user cursors on the outer screen canvas according to the coordinates of the other user cursors on the outer screen canvas.
In one possible implementation, after the rendering of the other user cursor on the external screen canvas, the method further comprises:
acquiring user information corresponding to the other user cursors;
and rendering user information corresponding to the other user cursors on the external screen canvas when the coordinates of the current user cursors are the same as the coordinates of the other user cursors.
In a second aspect, the present application also provides a page rendering apparatus, the apparatus including:
the acquisition module is used for acquiring canvas page elements on the browser page;
an inner screen canvas rendering module for rendering the canvas page elements on an inner screen canvas;
the detection module is used for detecting the coordinates of a current user cursor on the inner screen canvas;
The coordinate conversion module is used for converting the coordinates of the current user cursor on the inner screen canvas into the coordinates of the current user cursor on the outer screen canvas in real time;
and the external screen canvas rendering module is used for rendering the current user cursor on the external screen canvas according to the coordinates of the current user cursor on the external screen canvas.
In one possible implementation manner, the coordinate conversion module is specifically configured to:
Rendering a transparent element on the inner screen canvas where the current user cursor is located;
and converting the coordinates of the transparent element where the current user cursor is positioned into the coordinates of the current user cursor on the external screen canvas in real time.
In one possible implementation of the present invention,
The acquisition module is also used for acquiring coordinates of other user cursors through the inner screen canvas;
the coordinate conversion module is further used for converting coordinates of other user cursors on the inner screen canvas into coordinates of other user cursors on the outer screen canvas in real time;
And the external screen canvas rendering module is also used for rendering other user cursors on the external screen canvas according to the coordinates of the other user cursors on the external screen canvas.
In one possible implementation of the present invention,
The acquisition module is further used for acquiring user information corresponding to the other user cursors;
And the external screen canvas rendering module is further used for rendering the user information corresponding to the other user cursors on the external screen canvas when the coordinates of the current user cursors are the same as the coordinates of the other user cursors.
In a third aspect, the present application also provides a computer apparatus comprising: memory, transceiver, processor, and bus system;
wherein the memory is used for storing programs;
the processor is configured to execute the program in the memory to implement the method according to any one of the first aspect;
The bus system is used for connecting the memory and the processor so as to enable the memory and the processor to communicate.
In a fourth aspect, the application also provides a computer readable storage medium storing instructions that, when run on a computer, cause the computer to perform the method of any one of the first aspects above.
The method provided by the embodiment of the application obtains the canvas page element on the browser page; rendering canvas page elements on the inner screen canvas, and detecting coordinates of a current user cursor on the inner screen canvas; converting the coordinates of the current user cursor on the inner screen canvas into the coordinates of the current user cursor on the outer screen canvas in real time; and rendering the current user cursor on the external screen canvas according to the coordinates of the current user cursor on the external screen canvas. According to the embodiment of the application, the canvas page elements are rendered on the inner screen canvas, the user cursor is rendered on the outer screen, the effect of the cursor rendering on the rendering of the canvas page elements is avoided by a split screen canvas rendering mode, and the rendering performance of the canvas when the user cursor is rendered under multiple canvas page elements is improved, so that the page rendering efficiency is improved.
Drawings
In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings that are required in the embodiments or the description of the prior art will be briefly described, and it is obvious that the drawings in the following description are some embodiments of the present application, and other drawings may be obtained according to these drawings without inventive effort for a person skilled in the art.
FIG. 1 shows a flow chart of an embodiment of a page rendering method provided by the application;
FIG. 2 is a schematic diagram of a current user cursor and other user cursors in a canvas presentation mode provided by the present application;
FIG. 3 is a diagram illustrating aggregation of current user cursors to other user cursors in a canvas presentation mode provided by the present application;
fig. 4 shows a schematic structural diagram of a page rendering device provided by the application.
Detailed Description
For the purpose of making the objects, technical solutions and advantages of the embodiments of the present application more apparent, the technical solutions of the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present application, and it is apparent that the described embodiments are some embodiments of the present application, but not all embodiments of the present application. All other embodiments, which can be made by those skilled in the art based on the embodiments of the application without making any inventive effort, are intended to be within the scope of the application.
First, some terms that may appear in the embodiments of the present application will be explained.
Canvas: a browser page element.
Canvas page: the design drawings can be uploaded and the canvas-based browser pages moved or scaled.
Demonstration mode: the opening entrance is positioned at the top toolbar of the canvas page, and after opening, the opening entrance enters a non-editing mode, so that editing operations such as canvas design drawing coordinates, changing canvas design drawing names and the like can not be moved, and the toolbar is automatically hidden.
Laser pen: after the demonstration mode is entered, the laser pen is started, the cursor of the current user can be displayed in the form of dots, other users entering the demonstration mode can see the movement track of the mouse of the current user, the mouse of the current user moves to the position of the laser pen of the other users, and the user information of the other users can be checked.
Cursor information card: user information, such as a head portrait, a user name, a mailbox, and the like, of the user corresponding to the cursor is displayed.
Inner screen canvas: browser page elements have a hierarchical relationship, with underlying canvas becoming an on-screen canvas.
External screen canvas: the browser page elements have a hierarchical relationship, and the canvas above the hierarchy becomes an external screen canvas.
Hierarchical canvas rendering: the method comprises the steps of rendering an inner screen canvas and rendering an outer screen canvas, wherein the inner screen canvas is used for rendering canvas elements, and the outer screen canvas is used for rendering cursor elements and card information corresponding to a cursor.
Canvas absolute position: when the current user A cursor is above the canvas element a and the user B sees that the user A cursor is also above the canvas element a, the user B canvas renders the coordinates of the user A cursor to absolute coordinates on the canvas.
Referring to fig. 1, a flowchart of an embodiment of a page rendering method according to an embodiment of the present application is shown, where the embodiment of the present application at least includes the following steps:
s110, obtaining canvas page elements on a browser page.
In the embodiment of the application, the canvas page elements on the browser page are acquired, namely all the elements on the canvas page are acquired, so that the canvas page elements are rendered on the inner screen canvas.
And S120, rendering canvas page elements on the inner screen canvas, and detecting coordinates of a current user cursor on the inner screen canvas.
In the embodiment of the application, after the canvas page element on the browser page is acquired, rendering the canvas page element on the inner screen canvas, and detecting the coordinates of the current user cursor on the inner screen canvas.
The method can draw an internal screen canvas which is consistent with the size of the browser page, and can draw an internal screen canvas which is larger than the browser page based on the user visual friendly principle, and is not limited herein.
S130, converting the coordinates of the current user cursor on the inner screen canvas into the coordinates of the current user cursor on the outer screen canvas in real time.
In the embodiment of the application, the user cursor is referenced by the inner screen canvas, so that before rendering the user cursor, the coordinates of the current user cursor on the inner screen canvas are required to be converted into the coordinates of the current user cursor on the outer screen canvas in real time, so that other users can see the current user cursor and the actual position of the current user cursor are kept consistent.
One implementation way of converting the coordinates of the current user cursor on the inner screen canvas into the coordinates of the current user cursor on the outer screen canvas in real time may be:
S131, rendering a transparent element where a current user cursor is positioned on the inner screen canvas;
S132, converting the coordinates of the transparent element where the current user cursor is located into the coordinates of the current user cursor on the external screen canvas in real time.
In the aspect of cursor coordinate updating, the embodiment of the application renders one transparent element of the cursor where the mouse is positioned by the inner screen canvas, and converts the coordinates of the transparent element into the coordinates on the outer screen canvas where the cursor is rendered according to the coordinates of the transparent element, thereby realizing that the cursor of a user keeps consistent on the absolute position of the canvas.
And S140, rendering the current user cursor on the external screen canvas according to the coordinates of the current user cursor on the external screen canvas.
In the embodiment of the application, the current user cursor is rendered on the external screen canvas according to the coordinates of the current user cursor on the external screen canvas. Because the cursor has the characteristics of high real-time mobility and high rendering frequency, the rendering performance is easy to be reduced, and the embodiment of the application renders canvas page elements on the inner screen canvas and renders the user cursor on the outer screen canvas, so that the user cursor can be rendered under the condition that the rendering performance of the inner screen canvas is not influenced, and the page rendering efficiency is improved.
Wherein, because the field of view that the user can see is only the size of the browser page, drawing an external screen canvas outside the browser page is meaningless to the user and is likely to cause performance costs, and it is conceivable that the larger the external screen canvas, the greater the performance costs when rendering elements thereon. Therefore, the embodiment of the application draws the external screen canvas consistent with the size of the browser page.
The embodiment of the application can render the cursors of other users besides the cursors of the current user. The embodiment of the application also comprises the following steps:
S150, acquiring coordinates of cursors of other users through the inner screen canvas.
In the embodiment of the application, the coordinates of other user cursors are obtained through the inner screen canvas, the visual consistency of the user cursors is realized by disabling the event binding attribute of the outer screen canvas, the coordinates of different user cursors use the same reference object, and the problem of inconsistent display of the user cursors is avoided.
The canvas belongs to a browser page element and has an event binding attribute, and in view of the fact that the outer screen canvas only finishes the rendering of a cursor and does not process a mouse moving event, the event binding attribute of the outer screen canvas is forbidden, and only the inner screen canvas is allowed to process the mouse moving event.
And S160, converting coordinates of other user cursors on the inner screen canvas into coordinates of other user cursors on the outer screen canvas in real time.
In the embodiment of the application, because the user cursor takes the inner screen canvas as a reference, before rendering the user cursor, the coordinates of other user cursors on the inner screen canvas need to be converted into the coordinates of other user cursors on the outer screen canvas in real time, so that the current user sees the other user cursors and the actual positions of the other user cursors are kept consistent.
One implementation way of converting the coordinates of other user cursors on the inner screen canvas into the coordinates of other user cursors on the outer screen canvas in real time may be:
s161, rendering transparent elements where other user cursors are located on the inner screen canvas;
And S162, converting coordinates of transparent elements where other user cursors are located into coordinates of other user cursors on the external screen canvas in real time.
In the aspect of cursor coordinate updating, the embodiment of the application realizes that a plurality of user cursors are kept consistent on the absolute positions of canvases by rendering one transparent element of the cursor where the mouse is positioned in the inner screen canvas and converting the coordinates of the transparent element into the coordinates on the outer screen canvas where the cursor is rendered.
And S170, rendering other user cursors on the outer screen canvas according to the coordinates of the other user cursors on the outer screen canvas.
In the embodiment of the application, other user cursors are rendered on the external screen canvas according to the coordinates of the other user cursors on the external screen canvas. Because the cursor has the characteristics of high real-time mobility and high rendering frequency, the rendering performance is easy to be reduced, and the embodiment of the application renders canvas page elements on the inner screen canvas and renders the user cursor on the outer screen canvas, so that the user cursor can be rendered under the condition that the rendering performance of the inner screen canvas is not influenced, and the page rendering efficiency is improved.
The embodiment of the application can realize that when a plurality of users move the cursor on the same canvas page, the cursor of the current user can be rendered, and the cursors of other users can be simultaneously rendered, thereby achieving the purpose of high-performance multi-user cursor rendering.
S180, user information corresponding to other user cursors is obtained.
And S190, when the coordinates of the current user cursor are the same as those of other user cursors, rendering user information corresponding to the other user cursors on the external screen canvas.
In the embodiment of the application, the inner screen canvas is used for acquiring the coordinates of other user cursors and the user information corresponding to the other user cursors, and when the coordinates of the current user cursors are consistent with the coordinates of the other user cursors, the outer screen canvas is used for rendering the user information corresponding to the coordinates of the other users. The embodiment of the application does not display the user information corresponding to the other user cursors by default, and only when the current user cursors focus on the other user cursors, namely when the coordinates of the current user cursors are the same as those of the other user cursors, the cursor information card with the user information is displayed.
According to the embodiment of the application, under the condition that the rendering performance of the inner screen canvas is not affected, a plurality of user cursors are rendered, and the cursor card information pieces can be enriched on other user cursors to display the user information of more other users.
In the embodiment of the application, canvas page elements on a browser page are acquired; rendering canvas page elements on the inner screen canvas, and detecting coordinates of a current user cursor on the inner screen canvas; converting the coordinates of the current user cursor on the inner screen canvas into the coordinates of the current user cursor on the outer screen canvas in real time; and rendering the current user cursor on the external screen canvas according to the coordinates of the current user cursor on the external screen canvas. According to the embodiment of the application, the canvas page elements are rendered on the inner screen canvas, the user cursor is rendered on the outer screen, the effect of the cursor rendering on the rendering of the canvas page elements is avoided by a split screen canvas rendering mode, and the rendering performance of the canvas when the user cursor is rendered under multiple canvas page elements is improved, so that the page rendering efficiency is improved.
The application embodiment of the page rendering method provided by the application is described below, taking blue lake canvas cursor display as an example, mainly in canvas demonstration mode, other user cursor display and user information card display are convenient for other users to locate the position of the current user cursor, other users to check the user information of the current user, the current user to locate the position of the other user cursor, and the current user to check the user information of other users. The page rendering method provided by the embodiment of the application has applicability to the scene of non-high-frequency rendering and high-frequency rendering of the canvas.
The current user enters the canvas page, turns on the presentation mode, and turns on the laser pen, the other users follow the above operations, and the user cursors of both the current user and the other users are focused on the canvas. FIG. 2 is a presentation of current user cursor dots and other user cursor dots in a normal state; as shown in fig. 3, the current user cursor is focused on the other user cursor dots, so that the user information of the user to which the cursor belongs can be viewed, and the user information includes a head portrait, a user name and a mailbox.
Next, a description will be given of a page rendering device provided by the present application, and a page rendering device described below and a page rendering method described above can be referred to correspondingly.
Referring to fig. 4, a schematic structural diagram of a page rendering device provided by the present application is shown, where the device includes:
An acquisition module 401, configured to acquire canvas page elements on a browser page;
an inner screen canvas rendering module 402 for rendering the canvas page elements on an inner screen canvas;
A detection module 403, configured to detect coordinates of a current user cursor on the inner screen canvas;
The coordinate conversion module 404 is configured to convert the coordinates of the current user cursor on the inner screen canvas into coordinates of the current user cursor on the outer screen canvas in real time;
And the external screen canvas rendering module 405 is configured to render the current user cursor on the external screen canvas according to the coordinates of the current user cursor on the external screen canvas.
In the embodiment of the present application, the coordinate conversion module 404 is specifically configured to:
Rendering a transparent element on the inner screen canvas where the current user cursor is located;
and converting the coordinates of the transparent element where the current user cursor is positioned into the coordinates of the current user cursor on the external screen canvas in real time.
In this embodiment of the present application, the obtaining module 401 is further configured to obtain coordinates of other user cursors through the inner screen canvas;
The coordinate conversion module 404 is further configured to convert coordinates of other user cursors on the inner screen canvas into coordinates of other user cursors on the outer screen canvas in real time;
The external screen canvas rendering module 405 is further configured to render other user cursors on the external screen canvas according to coordinates of the other user cursors on the external screen canvas.
In this embodiment of the present application, the obtaining module 401 is further configured to obtain user information corresponding to the other user cursors;
The external screen canvas rendering module 405 is further configured to render, when the coordinates of the current user cursor are the same as the coordinates of the other user cursors, user information corresponding to the other user cursors on the external screen canvas.
The embodiment of the application also provides computer equipment, which comprises: a memory, a processor, and a bus system;
wherein the memory is used for storing programs;
the processor is used for executing the program in the memory to realize the page rendering method;
The bus system is used for connecting the memory and the processor so as to enable the memory and the processor to communicate.
The embodiments of the present application also provide a computer readable storage medium storing instructions that, when executed on a computer, cause the computer to perform a page rendering method as described above.
In the embodiment of the application, canvas page elements on a browser page are acquired; rendering canvas page elements on the inner screen canvas, and detecting coordinates of a current user cursor on the inner screen canvas; converting the coordinates of the current user cursor on the inner screen canvas into the coordinates of the current user cursor on the outer screen canvas in real time; and rendering the current user cursor on the external screen canvas according to the coordinates of the current user cursor on the external screen canvas. According to the embodiment of the application, the canvas page elements are rendered on the inner screen canvas, the user cursor is rendered on the outer screen, the effect of the cursor rendering on the rendering of the canvas page elements is avoided by a split screen canvas rendering mode, and the rendering performance of the canvas when the user cursor is rendered under multiple canvas page elements is improved, so that the page rendering efficiency is improved.
It should be noted that, in each embodiment, identical and similar parts are referred to each other. For the device class embodiment, the system class embodiment, since they are substantially similar to the method embodiments, the description is relatively simple, and the relevant points are referred to in the description of the method embodiments.
For the foregoing embodiments, for simplicity of explanation, the same is shown as a series of acts, but it should be understood by those skilled in the art that the present application is not limited by the order of acts described, as some steps may occur in other orders or concurrently in accordance with the application. Further, those skilled in the art will also appreciate that the embodiments described in the specification are all preferred embodiments, and that the acts and modules referred to are not necessarily required for the present application.
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 the element.
The previous description of the disclosed embodiments is provided to enable any person skilled in the art to make or use the present application. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the generic principles defined herein may be applied to other embodiments without departing from the spirit or scope of the application. Thus, the present application is not intended to be limited to the embodiments shown herein but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.
The foregoing is merely a preferred embodiment of the present application and it should be noted that modifications and adaptations to those skilled in the art may be made without departing from the principles of the present application, which are intended to be comprehended within the scope of the present application.
Claims (6)
1. A method of page rendering, the method comprising:
Acquiring canvas page elements on a browser page;
rendering the canvas page element on an inner screen canvas, and detecting coordinates of a current user cursor on the inner screen canvas;
converting the coordinates of the current user cursor on the inner screen canvas into the coordinates of the current user cursor on the outer screen canvas in real time;
Rendering the current user cursor on the external screen canvas according to the coordinates of the current user cursor on the external screen canvas;
Acquiring coordinates of cursors of other users through the inner screen canvas;
Converting coordinates of other user cursors on the inner screen canvas into coordinates of other user cursors on the outer screen canvas in real time;
rendering other user cursors on the outer screen canvas according to coordinates of the other user cursors on the outer screen canvas;
acquiring user information corresponding to the other user cursors;
and rendering user information corresponding to the other user cursors on the external screen canvas when the coordinates of the current user cursors are the same as the coordinates of the other user cursors.
2. The method of claim 1, wherein converting the coordinates of the current user cursor on the inner screen canvas to the coordinates of the current user cursor on the outer screen canvas in real time comprises:
Rendering a transparent element on the inner screen canvas where the current user cursor is located;
and converting the coordinates of the transparent element where the current user cursor is positioned into the coordinates of the current user cursor on the external screen canvas in real time.
3. A page rendering apparatus, the apparatus comprising:
the acquisition module is used for acquiring canvas page elements on the browser page;
an inner screen canvas rendering module for rendering the canvas page elements on an inner screen canvas;
the detection module is used for detecting the coordinates of a current user cursor on the inner screen canvas;
The coordinate conversion module is used for converting the coordinates of the current user cursor on the inner screen canvas into the coordinates of the current user cursor on the outer screen canvas in real time;
The external screen canvas rendering module is used for rendering the current user cursor on the external screen canvas according to the coordinates of the current user cursor on the external screen canvas;
the acquisition module is also used for acquiring coordinates of other user cursors through the inner screen canvas;
the coordinate conversion module is further used for converting coordinates of other user cursors on the inner screen canvas into coordinates of other user cursors on the outer screen canvas in real time;
the external screen canvas rendering module is further used for rendering other user cursors on the external screen canvas according to coordinates of the other user cursors on the external screen canvas;
The acquisition module is further used for acquiring user information corresponding to the other user cursors;
And the external screen canvas rendering module is further used for rendering the user information corresponding to the other user cursors on the external screen canvas when the coordinates of the current user cursors are the same as the coordinates of the other user cursors.
4. The apparatus of claim 3, wherein the coordinate conversion module is specifically configured to:
Rendering a transparent element on the inner screen canvas where the current user cursor is located;
and converting the coordinates of the transparent element where the current user cursor is positioned into the coordinates of the current user cursor on the external screen canvas in real time.
5. A computer device, comprising: a memory, a processor, and a bus system;
wherein the memory is used for storing programs;
the processor is configured to execute a program in the memory to implement the method of claim 1 or 2;
The bus system is used for connecting the memory and the processor so as to enable the memory and the processor to communicate.
6. A computer readable storage medium storing instructions which, when run on a computer, cause the computer to perform the method of claim 1 or 2.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210980839.0A CN115268720B (en) | 2022-08-16 | 2022-08-16 | Page rendering method, device, equipment and readable storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210980839.0A CN115268720B (en) | 2022-08-16 | 2022-08-16 | Page rendering method, device, equipment and readable storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN115268720A CN115268720A (en) | 2022-11-01 |
| CN115268720B true CN115268720B (en) | 2024-06-11 |
Family
ID=83751353
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210980839.0A Active CN115268720B (en) | 2022-08-16 | 2022-08-16 | Page rendering method, device, equipment and readable storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115268720B (en) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN118395522A (en) * | 2024-04-22 | 2024-07-26 | 杭州易知微科技有限公司 | Fusion rendering and dynamic display method for hydrodynamic model and digital twin scene |
Citations (28)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6295049B1 (en) * | 1999-03-03 | 2001-09-25 | Richard T. Minner | Computer system utilizing graphical user interface with hysteresis to inhibit accidental selection of a region due to unintended cursor motion and method |
| WO2008023270A2 (en) * | 2006-08-23 | 2008-02-28 | Palm, Inc. | Multiple screen size render-engine |
| JP2009258963A (en) * | 2008-04-16 | 2009-11-05 | Yahoo Japan Corp | Method, device, and program for generating page to be displayed on network terminal |
| CN105279253A (en) * | 2015-10-13 | 2016-01-27 | 上海联彤网络通讯技术有限公司 | System and method for increasing canvas rendering speed of webpage |
| WO2016034089A1 (en) * | 2014-09-03 | 2016-03-10 | 优视科技有限公司 | Image rendering method and apparatus, mobile terminal and machine-readable storage medium |
| CN105630478A (en) * | 2014-12-01 | 2016-06-01 | 阿里巴巴集团控股有限公司 | Method and device for realizing page switching |
| CN105653612A (en) * | 2015-12-24 | 2016-06-08 | 小米科技有限责任公司 | Page rendering method and device |
| WO2017101493A1 (en) * | 2015-12-16 | 2017-06-22 | 乐视控股（北京）有限公司 | Page label management method and device for browser |
| CN108665520A (en) * | 2018-04-24 | 2018-10-16 | 微梦创科网络科技（中国）有限公司 | A kind of method and device that page animation renders |
| WO2020029178A1 (en) * | 2018-08-09 | 2020-02-13 | 太平洋未来科技（深圳）有限公司 | Light and shadow rendering method and device for virtual object in panoramic video, and electronic apparatus |
| CN110795177A (en) * | 2018-08-03 | 2020-02-14 | 浙江宇视科技有限公司 | Graph drawing method and device |
| CN111259301A (en) * | 2020-01-19 | 2020-06-09 | 北京飞漫软件技术有限公司 | Method, device, equipment and storage medium for rendering elements in HTML page |
| CN111580924A (en) * | 2020-05-19 | 2020-08-25 | 北京字节跳动网络技术有限公司 | Page display method and device, electronic equipment and readable storage medium |
| CN111666007A (en) * | 2020-04-28 | 2020-09-15 | 平安科技（深圳）有限公司 | Method and device for realizing mouse following special effect, computer equipment and storage medium |
| CN111767100A (en) * | 2020-01-09 | 2020-10-13 | 北京沃东天骏信息技术有限公司 | Image processing method, device, system and medium applied to browser |
| CN111898056A (en) * | 2020-08-28 | 2020-11-06 | 北京三快在线科技有限公司 | Webpage display method and device, storage medium and electronic equipment |
| CN112256363A (en) * | 2020-09-21 | 2021-01-22 | 北京三快在线科技有限公司 | Application page rendering method and device and electronic equipment |
| CN112417346A (en) * | 2021-01-25 | 2021-02-26 | 北京小米移动软件有限公司 | Rendering method, rendering device, electronic equipment and storage medium |
| CN112700519A (en) * | 2020-12-30 | 2021-04-23 | 广州方硅信息技术有限公司 | Animation display method and device, electronic equipment and computer readable storage medium |
| CN112711729A (en) * | 2020-12-30 | 2021-04-27 | 广州方硅信息技术有限公司 | Rendering method and device based on page animation, electronic equipment and storage medium |
| CN113282852A (en) * | 2020-02-20 | 2021-08-20 | 北京沃东天骏信息技术有限公司 | Method and device for editing webpage |
| CN113436108A (en) * | 2021-07-08 | 2021-09-24 | 山东健康医疗大数据有限公司 | Method for processing blur by canvas under high power screen |
| CN113704660A (en) * | 2021-06-24 | 2021-11-26 | 青岛海尔科技有限公司 | Method and device for acquiring rendered page view and electronic equipment |
| CN113760283A (en) * | 2021-03-26 | 2021-12-07 | 北京京东拓先科技有限公司 | Text rendering method and device |
| CN114417212A (en) * | 2021-12-01 | 2022-04-29 | 广州酷狗计算机科技有限公司 | Page first screen generation method, device, equipment and storage medium |
| CN114816404A (en) * | 2022-04-28 | 2022-07-29 | 卓望数码技术（深圳）有限公司 | Method and device for dynamically rendering view page, computer equipment and storage medium |
| CN114820729A (en) * | 2022-02-24 | 2022-07-29 | 北京尽微致广信息技术有限公司 | Element one-key layout method and device |
| CN114816410A (en) * | 2022-06-27 | 2022-07-29 | 北京尽微致广信息技术有限公司 | Interface generation method, device and storage medium |
Family Cites Families (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8819570B2 (en) * | 2009-03-27 | 2014-08-26 | Zumobi, Inc | Systems, methods, and computer program products displaying interactive elements on a canvas |
| US9253128B2 (en) * | 2010-10-06 | 2016-02-02 | International Business Machines Corporation | Instant messaging with browser collaboration |
| JP2012238219A (en) * | 2011-05-12 | 2012-12-06 | Sony Corp | Information processing apparatus, server device, information processing method, computer program and content sharing system |
| US20130246383A1 (en) * | 2012-03-18 | 2013-09-19 | Microsoft Corporation | Cursor Activity Evaluation For Search Result Enhancement |
| CN103336816B (en) * | 2013-06-28 | 2017-02-08 | 广州市动景计算机科技有限公司 | Canvas element rendering method and device realized on Android system based on GPU (Graphic Processing Unit) |
| CN103678631B (en) * | 2013-12-19 | 2016-10-05 | 华为技术有限公司 | page rendering method and device |
| CN111339455B (en) * | 2018-12-18 | 2024-02-23 | 阿里巴巴集团控股有限公司 | Method and device for loading page first screen by browser application |
-
2022
- 2022-08-16 CN CN202210980839.0A patent/CN115268720B/en active Active
Patent Citations (28)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6295049B1 (en) * | 1999-03-03 | 2001-09-25 | Richard T. Minner | Computer system utilizing graphical user interface with hysteresis to inhibit accidental selection of a region due to unintended cursor motion and method |
| WO2008023270A2 (en) * | 2006-08-23 | 2008-02-28 | Palm, Inc. | Multiple screen size render-engine |
| JP2009258963A (en) * | 2008-04-16 | 2009-11-05 | Yahoo Japan Corp | Method, device, and program for generating page to be displayed on network terminal |
| WO2016034089A1 (en) * | 2014-09-03 | 2016-03-10 | 优视科技有限公司 | Image rendering method and apparatus, mobile terminal and machine-readable storage medium |
| CN105630478A (en) * | 2014-12-01 | 2016-06-01 | 阿里巴巴集团控股有限公司 | Method and device for realizing page switching |
| CN105279253A (en) * | 2015-10-13 | 2016-01-27 | 上海联彤网络通讯技术有限公司 | System and method for increasing canvas rendering speed of webpage |
| WO2017101493A1 (en) * | 2015-12-16 | 2017-06-22 | 乐视控股（北京）有限公司 | Page label management method and device for browser |
| CN105653612A (en) * | 2015-12-24 | 2016-06-08 | 小米科技有限责任公司 | Page rendering method and device |
| CN108665520A (en) * | 2018-04-24 | 2018-10-16 | 微梦创科网络科技（中国）有限公司 | A kind of method and device that page animation renders |
| CN110795177A (en) * | 2018-08-03 | 2020-02-14 | 浙江宇视科技有限公司 | Graph drawing method and device |
| WO2020029178A1 (en) * | 2018-08-09 | 2020-02-13 | 太平洋未来科技（深圳）有限公司 | Light and shadow rendering method and device for virtual object in panoramic video, and electronic apparatus |
| CN111767100A (en) * | 2020-01-09 | 2020-10-13 | 北京沃东天骏信息技术有限公司 | Image processing method, device, system and medium applied to browser |
| CN111259301A (en) * | 2020-01-19 | 2020-06-09 | 北京飞漫软件技术有限公司 | Method, device, equipment and storage medium for rendering elements in HTML page |
| CN113282852A (en) * | 2020-02-20 | 2021-08-20 | 北京沃东天骏信息技术有限公司 | Method and device for editing webpage |
| CN111666007A (en) * | 2020-04-28 | 2020-09-15 | 平安科技（深圳）有限公司 | Method and device for realizing mouse following special effect, computer equipment and storage medium |
| CN111580924A (en) * | 2020-05-19 | 2020-08-25 | 北京字节跳动网络技术有限公司 | Page display method and device, electronic equipment and readable storage medium |
| CN111898056A (en) * | 2020-08-28 | 2020-11-06 | 北京三快在线科技有限公司 | Webpage display method and device, storage medium and electronic equipment |
| CN112256363A (en) * | 2020-09-21 | 2021-01-22 | 北京三快在线科技有限公司 | Application page rendering method and device and electronic equipment |
| CN112700519A (en) * | 2020-12-30 | 2021-04-23 | 广州方硅信息技术有限公司 | Animation display method and device, electronic equipment and computer readable storage medium |
| CN112711729A (en) * | 2020-12-30 | 2021-04-27 | 广州方硅信息技术有限公司 | Rendering method and device based on page animation, electronic equipment and storage medium |
| CN112417346A (en) * | 2021-01-25 | 2021-02-26 | 北京小米移动软件有限公司 | Rendering method, rendering device, electronic equipment and storage medium |
| CN113760283A (en) * | 2021-03-26 | 2021-12-07 | 北京京东拓先科技有限公司 | Text rendering method and device |
| CN113704660A (en) * | 2021-06-24 | 2021-11-26 | 青岛海尔科技有限公司 | Method and device for acquiring rendered page view and electronic equipment |
| CN113436108A (en) * | 2021-07-08 | 2021-09-24 | 山东健康医疗大数据有限公司 | Method for processing blur by canvas under high power screen |
| CN114417212A (en) * | 2021-12-01 | 2022-04-29 | 广州酷狗计算机科技有限公司 | Page first screen generation method, device, equipment and storage medium |
| CN114820729A (en) * | 2022-02-24 | 2022-07-29 | 北京尽微致广信息技术有限公司 | Element one-key layout method and device |
| CN114816404A (en) * | 2022-04-28 | 2022-07-29 | 卓望数码技术（深圳）有限公司 | Method and device for dynamically rendering view page, computer equipment and storage medium |
| CN114816410A (en) * | 2022-06-27 | 2022-07-29 | 北京尽微致广信息技术有限公司 | Interface generation method, device and storage medium |
Non-Patent Citations (1)
| Title |
|---|
| Multi-resolution terrain rendering using summed-area tables;Chuankun Zheng et al.;《Computers & Graphics》;20210430;95;第130-140页 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN115268720A (en) | 2022-11-01 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11340754B2 (en) | Hierarchical, zoomable presentations of media sets | |
| US20230267697A1 (en) | Object creation with physical manipulation | |
| JP5739531B2 (en) | Interactive projection and playback of related media segments on 3D facets | |
| US8949729B2 (en) | Enhanced copy and paste between applications | |
| US7797630B2 (en) | Method for storing and retrieving digital ink call logs | |
| JP2024116186A (en) | Browser for mixed reality systems | |
| US20050188304A1 (en) | Method and system for browsing a low-resolution image | |
| US20060031755A1 (en) | Sharing inking during multi-modal communication | |
| US9037957B2 (en) | Prioritizing asset loading in multimedia application | |
| Yamaoka et al. | Cultural analytics in large-scale visualization environments | |
| CN115268720B (en) | Page rendering method, device, equipment and readable storage medium | |
| CN114564630A (en) | Method, system and medium for visualizing graph data Web3D | |
| US20140173413A1 (en) | Method and system to build a representative model for web pages to interact with users | |
| WO2023284295A1 (en) | Method and system for processing webpage video background of mobile end, and storage medium | |
| Cao | Development and design case function comparison of panoramic roaming system of virtual museum based on Pano2VR | |
| CN106156109A (en) | A kind of searching method and device | |
| CN104808995B (en) | A kind of method and apparatus for across application collection application content | |
| JP2004178384A (en) | Contents retrieval method and device, program, and recording medium | |
| Yamaguchi et al. | On a web browsing support system with 3d visualization | |
| Baldissini et al. | Interacting with the Andrea Palladio Works: the history of Palladian information system interfaces | |
| Chang | The sentient map | |
| Karstens et al. | Presenting large and complex information sets on mobile handhelds | |
| Aaltonen | Facilitating personal content management in smart phones | |
| CN103024469A (en) | Electronic program guide display device and realizing method thereof | |
| CN115952232A (en) | Cloud data visualization method and device, terminal and storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |