CN115268720A - Page rendering method, device and equipment and readable storage medium - Google Patents
Page rendering method, device and equipment and readable storage medium Download PDFInfo
- Publication number
- CN115268720A CN115268720A CN202210980839.0A CN202210980839A CN115268720A CN 115268720 A CN115268720 A CN 115268720A CN 202210980839 A CN202210980839 A CN 202210980839A CN 115268720 A CN115268720 A CN 115268720A
- Authority
- CN
- China
- Prior art keywords
- canvas
- rendering
- cursor
- user
- screen canvas
- 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.)
- Pending
Links
- 238000009877 rendering Methods 0.000 title claims abstract description 131
- 238000000034 method Methods 0.000 title claims abstract description 42
- 238000006243 chemical reaction Methods 0.000 claims description 7
- 238000001514 detection method Methods 0.000 claims description 2
- 230000009466 transformation Effects 0.000 claims description 2
- 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 3
- 230000004048 modification Effects 0.000 description 3
- 230000003247 decreasing effect Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 238000010422 painting Methods 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Images
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 the coordinates of the current user cursor on the inner screen canvas; converting the coordinate of the current user cursor on the inner screen canvas into the coordinate 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. The canvas page element is rendered on the inner screen canvas, the user cursor is rendered on the outer screen, the rendering of the canvas page element is prevented from being influenced by the cursor rendering in a split screen canvas rendering mode, the rendering performance of the canvas is improved when the user cursor is rendered under the multi-canvas page element, and therefore the page rendering efficiency is improved.
Description
Technical Field
The present application relates to the field of computer technologies, and in particular, to a page rendering method, apparatus, device, and readable storage medium.
Background
With the development of scientific technology, software technology and hardware technology of computers and mobile terminals have advanced greatly. Due to the wide application of the internet technology, a user can obtain a large amount of information from the network under the condition of staying at home, so that the help is provided for the work and study of the user, and the daily life of the user is enriched. Nowadays, interaction between multiple users can be performed through a browser.
Nowadays, the layout of browser pages is more and more complex, and a page often contains a large amount of information, in addition to text information, pictures, videos and other multimedia information. The current page rendering technology is to render all elements and all cursors contained in a page in one canvas, and according to the rendering characteristics of the canvas, moving the cursors requires re-rendering the whole canvas. For a page with more contents, once a cursor moves, all contents contained in the canvas need to be rendered again, which is inefficient, and results in decreased performance of the canvas and also affects the display speed of the page. The page rendering is used as one of the important steps of completing page loading by the browser, and if the rendering efficiency is low, the page loading speed is slow, which affects the user to browse the page, so that a high-performance page rendering method needs to be provided.
Disclosure of Invention
In view of this, an object of the present application is to provide a page rendering method, apparatus, device and readable storage medium, so as to avoid that cursor rendering affects rendering of canvas page elements, and improve rendering performance of the canvas when a user cursor is rendered under multiple canvas page elements, thereby improving page rendering efficiency, and a specific technical scheme thereof is as follows:
in a first aspect, the present application provides a page rendering method, including:
acquiring canvas page elements on a browser page;
rendering the canvas page elements on an inner screen canvas, and detecting the coordinates of a current user cursor on the inner screen canvas;
converting the coordinate of the current user cursor on the inner screen canvas into the coordinate of the current user cursor on the outer screen canvas in real time;
and rendering the current user cursor on the outer screen canvas according to the coordinates of the current user cursor on the outer screen canvas.
In one possible implementation, 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 coordinate of the transparent element where the current user cursor is positioned into the coordinate of the current user cursor on the outer screen canvas in real time.
In one possible implementation, after the rendering of the current user cursor on the outer screen canvas, the method further comprises:
acquiring coordinates of other user cursors through the inner screen canvas;
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;
and rendering the 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 rendering the other user cursor on the outer screen canvas, the method further comprises:
acquiring user information corresponding to the other user cursors;
and when the coordinates of the current user cursor are the same as those of the other user cursors, rendering the user information corresponding to the other user cursors on the outer screen canvas.
In a second aspect, the present application further provides a page rendering apparatus, including:
the acquisition module is used for acquiring canvas page elements on a 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 the current user cursor on the inner screen canvas;
the coordinate conversion module is used for converting the coordinate of the current user cursor on the inner screen canvas into the coordinate of the current user cursor on the outer screen canvas in real time;
and the outer screen canvas rendering module is used for rendering the current user cursor on the outer screen canvas according to the coordinate of the current user cursor on the outer screen canvas.
In a 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 coordinate of the transparent element where the current user cursor is positioned into the coordinate of the current user cursor on the outer screen canvas in real time.
In one possible implementation form of the method,
the acquisition module is also used for acquiring coordinates of other user cursors through the inner screen canvas;
the coordinate conversion module is also used for 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;
and the outer screen canvas rendering module is also used for 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 form of the method,
the acquisition module is further used for acquiring user information corresponding to the other user cursors;
and the outer screen canvas rendering module is also used for rendering the user information corresponding to the other user cursors on the outer screen canvas when the coordinates of the current user cursor are the same as those of the other user cursors.
In a third aspect, the present application further provides a computer device, including: a memory, a transceiver, a processor, and a bus system;
wherein the memory is used for storing programs;
the processor is configured to execute a program stored in the memory to implement the method of any of the first aspect above;
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 present application also provides a computer-readable storage medium having stored thereon instructions which, when run on a computer, cause the computer to perform the method of any of the first aspects above.
The method provided by the embodiment of the application obtains canvas page elements on a browser page; the canvas page elements are rendered on the inner screen canvas, detecting the coordinate of the current user cursor on the inner screen canvas; converting the coordinate of the current user cursor on the inner screen canvas into the coordinate 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. The canvas page element is rendered on the inner screen canvas, the user cursor is rendered on the outer screen, the rendering of the canvas page element is prevented from being influenced by the cursor rendering in a split screen canvas rendering mode, the rendering performance of the canvas is improved when the user cursor is rendered under the multi-canvas page element, and therefore 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 used in the embodiments or the prior art descriptions will be briefly described below, and it is obvious that the drawings in the following descriptions are some embodiments of the present application, and other drawings can be obtained by those skilled in the art without creative efforts.
FIG. 1 is a flowchart illustrating an embodiment of a page rendering method provided herein;
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 a current user cursor being clustered 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 present application.
Detailed Description
In order to make the objects, technical solutions and advantages of the embodiments of the present application clearer, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are some embodiments of the present application, but not all embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.
First, some nouns that may appear in the embodiments of the present application are explained.
Canvas: a browser page element.
Canvas page: the browser page drawn based on canvas, which may upload plans, and move or zoom, may be uploaded.
A demonstration mode: and the opening entrance is positioned on a toolbar at the top of the canvas page, and the toolbar enters a non-editing mode after being opened, so that editing operations such as moving the coordinates of the canvas design drawing, changing the name of the canvas design drawing and the like cannot be performed, 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 a dot mode, other users entering the demonstration mode can see the mouse moving track of the current user, the mouse of the current user moves to the laser pen positions of other users, and user information of other users can be checked.
Cursor information card: and displaying user information of the cursor corresponding to the user, such as an avatar, a user name, a mailbox and the like.
An inner screen: browser page elements have a hierarchical relationship, a canvas with a hierarchy below becoming an inner canvas.
External screen canvas: browser page elements have a hierarchical relationship, a canvas on top of which becomes an outer screen canvas.
Hierarchical canvas rendering: the method comprises inner screen rendering and outer screen rendering, wherein the inner screen rendering is used for rendering canvas elements, and the outer screen rendering is used for rendering cursor elements and card information corresponding to a cursor.
Absolute position of canvas: when the cursor of the user A is on the canvas element a currently, and the user B sees that the cursor of the user A is also on the canvas element a, the coordinate of the canvas of the user B for rendering the cursor of the user A becomes the absolute coordinate on the canvas.
Referring to fig. 1, a flowchart of an embodiment of a page rendering method provided in an embodiment of the present application is shown, where the embodiment of the present application at least includes the following steps:
s110, acquiring canvas page elements on the browser page.
In an embodiment of the present application, a canvas page element on a browser page is obtained, that is, all elements on the canvas page are obtained, so as to render the canvas page element on an inner screen.
S120, rendering canvas page elements on the inner screen canvas, and detecting the coordinates of the current user cursor on the inner screen canvas.
In the embodiment of the application, after the canvas page element on the browser page is obtained, the canvas page element is rendered on the inner screen canvas, and the coordinate of the current user cursor is detected on the inner screen canvas.
The inner screen canvas with the same size as the browser page may be drawn, or the inner screen canvas with a size larger than the browser page may be drawn based on the user-friendly principle, which is not limited herein.
S130, the coordinate of the current user cursor on the inner screen canvas is converted into the coordinate of the current user cursor on the outer screen canvas in real time.
In the embodiment of the present application, the user cursor is referenced to the inner screen, so before rendering the user cursor, the coordinates of the current user cursor on the inner screen need to be converted into the coordinates of the current user cursor on the outer screen in real time, so that other users can see the current user cursor and the current user cursor is kept consistent with the actual position of the current user cursor.
One implementation manner for converting the coordinate of the current user cursor on the inner screen canvas into the coordinate of the current user cursor on the outer screen canvas in real time may be:
s131, rendering a transparent element where the current user cursor is located on the inner screen canvas;
s132, the coordinates of the transparent element where the current user cursor is located are converted into the coordinates of the current user cursor on the outer screen canvas in real time.
In the aspect of cursor coordinate updating, a transparent element of a cursor where a mouse is located is rendered through an inner screen canvas, and the coordinate of the transparent element is converted into the coordinate of the cursor on the outer screen canvas where the cursor is rendered, so that the cursor of a user is kept consistent in the absolute position of the canvas.
And S140, rendering the current user cursor on the external screen canvas according to the coordinate of the current user cursor on the external screen canvas.
In an embodiment of the present application, the current user cursor is rendered on the external screen canvas according to its coordinates. Because the cursor has the characteristics of high real-time mobility and high rendering frequency, rendering performance is easily reduced, rendering canvas page elements on the inner screen canvas and rendering the user cursor on the outer screen canvas in the embodiment of the application can render the user cursor without influencing the rendering performance of the inner screen canvas, and the page rendering efficiency is improved.
Since the view that the user can see is only the size of the browser page, drawing an external screen other than the browser page is meaningless for the user and is likely to cause performance consumption, and it is conceivable that the larger the external screen is, the higher the performance consumption when rendering an element thereon is. Therefore, the embodiment of the present application draws an external screen canvas that is consistent with the size of the browser page.
The embodiment of the application can render the current user cursor and can also render other user cursors. The embodiment of the application also comprises the following steps:
and S150, acquiring coordinates of other user cursors 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 event binding property of the outer screen canvas is forbidden, the visual consistency of the user cursors is realized, the same reference object is used for the coordinates of different user cursors, 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 property, and in view of the fact that the outer screen canvas only completes rendering of a cursor and does not process a mouse moving event, the event binding property of the outer screen canvas is forbidden and only the inner screen canvas is allowed to process the mouse moving event.
S160, the coordinates of other user cursors on the inner screen canvas are converted into the coordinates of other user cursors on the outer screen canvas in real time.
In the embodiment of the present application, since the user cursor is referenced by the inner screen, before rendering the user cursor, coordinates of other user cursors on the inner screen need to be converted into coordinates of other user cursors on the outer screen in real time, so that the current user sees other user cursors and the actual positions of the other user cursors are kept consistent.
One implementation manner of converting the coordinates of the other user cursors on the inner screen canvas into the coordinates of the 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 the coordinates of the transparent element where the other user cursor is positioned into the coordinates of the other user cursor on the outer screen canvas in real time.
In the aspect of cursor coordinate updating, a transparent element of a cursor where a mouse is located is rendered through an inner screen canvas, and coordinates of the cursor on the outer screen canvas where the cursor is rendered are converted according to the coordinates of the transparent element, so that the plurality of user cursors are kept consistent in the absolute positions of the canvas.
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 embodiments of the present application, other user cursors are rendered on the external screen canvas according to their coordinates. Because the cursor has the characteristics of high real-time mobility and high rendering frequency, rendering performance is easily reduced, rendering canvas page elements on the inner screen canvas and rendering the user cursor on the outer screen canvas in the embodiment of the application can render the user cursor without influencing the rendering performance of the inner screen canvas, and the page rendering efficiency is improved.
According to the embodiment of the application, when the cursor of the multi-user is moved on the same canvas page, the cursor of the current user can be rendered, the cursors of other users can be rendered simultaneously, and the purpose of rendering the multi-user cursor with high performance is achieved.
And S180, acquiring user information corresponding to other user cursors.
And S190, when the coordinates of the current user cursor are the same as those of other user cursors, rendering the user information corresponding to the other user cursors on the outer screen canvas.
In the embodiment of the application, the coordinates of the cursors of other users and the user information corresponding to the cursors of other users are obtained through the inner screen canvas, and when the coordinates of the current user cursor are consistent with those of other user cursors, rendering the user information corresponding to the other user coordinates on the outer screen canvas. According to the embodiment of the application, the user information corresponding to the other user cursors is not displayed by default, and the cursor information card with the user information is displayed only when the current user cursor is focused on the other user cursors, namely when the coordinates of the current user cursor are the same as those of the other user cursors.
According to the embodiment of the application, under the condition that the rendering performance of the inner screen canvas is not influenced, a plurality of user cursors are rendered, cursor card information pieces can be enriched on other user cursors, and more user information of other users can be displayed.
In the embodiment of the application, a canvas page element on a browser page is obtained; rendering canvas page elements on the inner screen canvas, and detecting the coordinates of the current user cursor on the inner screen canvas; converting the coordinate of the current user cursor on the inner screen canvas into the coordinate 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. The canvas page element is rendered on the inner screen canvas, the user cursor is rendered on the outer screen, the rendering of the canvas page element is prevented from being influenced by the cursor rendering in a split screen canvas rendering mode, the rendering performance of the canvas is improved when the user cursor is rendered under the multi-canvas page element, and therefore the page rendering efficiency is improved.
Next, an application embodiment of the page rendering method provided by the present application is introduced, taking blue lake canvas cursor display as an example, mainly in a canvas demonstration mode, other user cursors and user information card display are facilitated, so that other users can conveniently position the position of the current user cursor, other users can conveniently check the user information of the current user, the current user can conveniently position the positions of the cursors of other users, and the current user can conveniently check the user information of other users. The page rendering method provided by the embodiment of the application has applicability to scenes of non-high-frequency rendering and high-frequency rendering of paintings.
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 the current user and the other users are both focused on the canvas. FIG. 2 is a display of a current user cursor dot and other user cursor dots in a normal state; as shown in fig. 3, when the current user cursor is focused on the dot of the other user cursor, the user information of the user to which the cursor belongs can be viewed, and the user information includes the avatar, the user name, and the mailbox.
Next, a page rendering device provided by the present application is introduced, and a page rendering device introduced below and a page rendering method introduced above may be referred to correspondingly.
Referring to fig. 4, a schematic structural diagram of a page rendering apparatus provided in the present application is shown, where the apparatus includes:
an obtaining module 401, configured to obtain a canvas page element on a browser page;
an inner screen canvas rendering module 402 for rendering the canvas page elements on an inner screen canvas;
a detecting module 403, configured to detect coordinates of a current user cursor on the inner screen canvas;
a coordinate conversion module 404, configured to convert a coordinate of a current user cursor on the inner screen canvas into a coordinate of a current user cursor on the outer screen canvas in real time;
and an outer screen canvas rendering module 405, configured to render the current user cursor on the outer screen canvas according to the coordinates of the current user cursor on the outer screen canvas.
In this embodiment of the application, the coordinate transformation 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 coordinate of the transparent element where the current user cursor is positioned into the coordinate of the current user cursor on the outer screen canvas in real time.
In this embodiment of the 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 the coordinates of the other user cursors on the inner screen canvas into the coordinates of the other user cursors on the outer screen canvas in real time;
the outer screen canvas rendering module 405 is further configured to render the other user cursors on the outer screen canvas according to coordinates of the other user cursors on the outer screen canvas.
In this embodiment of the application, the obtaining module 401 is further configured to obtain user information corresponding to the other user cursor;
the outer screen canvas rendering module 405 is further configured to render the user information corresponding to the other user cursors on the outer screen canvas when the coordinates of the current user cursor are the same as the coordinates of the other user cursors.
An embodiment of the present application further provides a computer device, including: 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.
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, a canvas page element on a browser page is obtained; rendering canvas page elements on the inner screen canvas, and detecting the coordinates of the current user cursor on the inner screen canvas; converting the coordinate of the current user cursor on the inner screen canvas into the coordinate 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. The canvas page element is rendered on the inner screen canvas, the user cursor is rendered on the outer screen, the rendering of the canvas page element is prevented from being influenced by the cursor rendering in a split screen canvas rendering mode, the rendering performance of the canvas is improved when the user cursor is rendered under the multi-canvas page element, and therefore the page rendering efficiency is improved.
It should be noted that the same and similar parts in the respective embodiments are referred to each other. For the device class embodiment and the system class embodiment, since they are basically similar to the method embodiment, the description is simple, and for the relevant points, refer to the partial description of the method embodiment.
While, for purposes of simplicity of explanation, the foregoing embodiments have been described as a series of acts or combination of acts, it will be appreciated by those skilled in the art that the present application is not limited by the order of acts or acts described, as some steps may occur in other orders or concurrently with other steps depending upon the application. Further, those skilled in the art should also appreciate that the embodiments described in the specification are preferred embodiments and that the acts and modules referred to are not necessarily required in this application.
Finally, it should also be noted that, herein, relational terms such as first and second, and the like may be 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. Also, 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 a … …" does not exclude the presence of another identical element 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 only a preferred embodiment of the present application and it should be noted that those skilled in the art can make several improvements and modifications without departing from the principle of the present application, and these improvements and modifications should also be considered as the protection scope of the present application.
Claims (10)
1. A method for rendering a page, the method comprising:
acquiring canvas page elements on a browser page;
rendering the canvas page elements on an inner screen canvas, and detecting the coordinates of a current user cursor on the inner screen canvas;
converting the coordinate of the current user cursor on the inner screen canvas into the coordinate of the current user cursor on the outer screen canvas in real time;
and rendering the current user cursor on the outer screen canvas according to the coordinates of the current user cursor on the outer screen canvas.
2. The method of claim 1, wherein 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 comprises:
rendering a transparent element on the inner screen canvas where the current user cursor is located;
and converting the coordinate of the transparent element where the current user cursor is positioned into the coordinate of the current user cursor on the outer screen canvas in real time.
3. The method of any of claims 1-2, wherein after the rendering of the current user cursor on the outer screen canvas, the method further comprises:
acquiring coordinates of other user cursors through the inner screen canvas;
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;
and rendering the other user cursors on the outer screen canvas according to the coordinates of the other user cursors on the outer screen canvas.
4. The method of claim 3, wherein after rendering the other user cursor on the outer screen canvas, the method further comprises:
acquiring user information corresponding to the other user cursors;
and when the coordinates of the current user cursor are the same as those of the other user cursors, rendering the user information corresponding to the other user cursors on the outer screen canvas.
5. An apparatus for rendering a page, the apparatus comprising:
the acquisition module is used for acquiring canvas page elements on a 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 the current user cursor on the inner screen canvas;
the coordinate conversion module is used for converting the coordinate of the current user cursor on the inner screen canvas into the coordinate of the current user cursor on the outer screen canvas in real time;
and the outer screen canvas rendering module is used for rendering the current user cursor on the outer screen canvas according to the coordinate of the current user cursor on the outer screen canvas.
6. The apparatus of claim 5, wherein the coordinate transformation module is specifically configured to:
rendering a transparent element on the inner screen canvas where the current user cursor is located;
and converting the coordinate of the transparent element where the current user cursor is positioned into the coordinate of the current user cursor on the outer screen canvas in real time.
7. The apparatus according to any one of claims 5 to 6,
the acquisition module is also used for acquiring the coordinates of other user cursors through the inner screen canvas;
the coordinate conversion module is also used for 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;
and the outer screen canvas rendering module is also used for rendering other user cursors on the outer screen canvas according to the coordinates of the other user cursors on the outer screen canvas.
8. The apparatus of claim 7,
the acquisition module is further used for acquiring user information corresponding to the other user cursors;
and the outer screen canvas rendering module is also used for rendering the user information corresponding to the other user cursors on the outer screen canvas when the coordinates of the current user cursor are the same as those of the other user cursors.
9. 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 any one of claims 1 to 4;
the bus system is used for connecting the memory and the processor so as to enable the memory and the processor to communicate.
10. A computer-readable storage medium storing instructions which, when executed on a computer, cause the computer to perform the method of any one of claims 1 to 4.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210980839.0A CN115268720A (en) | 2022-08-16 | 2022-08-16 | Page rendering method, device and equipment and readable storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210980839.0A CN115268720A (en) | 2022-08-16 | 2022-08-16 | Page rendering method, device and equipment and readable storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN115268720A true CN115268720A (en) | 2022-11-01 |
Family
ID=83751353
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210980839.0A Pending CN115268720A (en) | 2022-08-16 | 2022-08-16 | Page rendering method, device and equipment and readable storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115268720A (en) |
Citations (32)
| 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 |
| US20120089926A1 (en) * | 2010-10-06 | 2012-04-12 | International Business Machines Corporation | Instant Messaging with Browser Collaboration |
| US20120290935A1 (en) * | 2011-05-12 | 2012-11-15 | Koji Ihara | 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 |
| US20150279058A1 (en) * | 2013-12-19 | 2015-10-01 | Huawei Technologies Co., Ltd. | Page Rendering Method and Apparatus |
| 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 |
| US20160328486A1 (en) * | 2013-06-28 | 2016-11-10 | Guangzhou Ucweg Computer Tecnology Co., Ltd. | Canvas element rendering method and apparatus implemented on android system based on gpu |
| 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 |
| CN111259301A (en) * | 2020-01-19 | 2020-06-09 | 北京飞漫软件技术有限公司 | Method, device, equipment and storage medium for rendering elements in HTML page |
| US20200195705A1 (en) * | 2018-12-18 | 2020-06-18 | Alibaba Group Holding Limited | Method and apparatus for browser application to load first screen of web 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 |
| 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 |
| CN114816404A (en) * | 2022-04-28 | 2022-07-29 | 卓望数码技术（深圳）有限公司 | Method and device for dynamically rendering view page, computer equipment and storage medium |
-
2022
- 2022-08-16 CN CN202210980839.0A patent/CN115268720A/en active Pending
Patent Citations (32)
| 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 |
| US20120089926A1 (en) * | 2010-10-06 | 2012-04-12 | International Business Machines Corporation | Instant Messaging with Browser Collaboration |
| US20120290935A1 (en) * | 2011-05-12 | 2012-11-15 | Koji Ihara | 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 |
| US20160328486A1 (en) * | 2013-06-28 | 2016-11-10 | Guangzhou Ucweg Computer Tecnology Co., Ltd. | Canvas element rendering method and apparatus implemented on android system based on gpu |
| US20150279058A1 (en) * | 2013-12-19 | 2015-10-01 | Huawei Technologies Co., Ltd. | Page Rendering Method and Apparatus |
| 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 |
| US20200195705A1 (en) * | 2018-12-18 | 2020-06-18 | Alibaba Group Holding Limited | Method and apparatus for browser application to load first screen of web page |
| 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 |
|---|
| CHUANKUN ZHENG ET AL.: "Multi-resolution terrain rendering using summed-area tables", 《COMPUTERS & GRAPHICS》, vol. 95, 30 April 2021 (2021-04-30), pages 130 - 140 * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8194075B2 (en) | Method and system for generating and displaying an interactive dynamic list view of multiply connected objects | |
| US6366299B1 (en) | Multidimensional information visualization using attribute rods | |
| US8108779B1 (en) | Collaborative editing operations | |
| US8949729B2 (en) | Enhanced copy and paste between applications | |
| CN106303740B (en) | Desktop navigation system of smart television and implementation method of system | |
| US9183672B1 (en) | Embeddable three-dimensional (3D) image viewer | |
| US6888554B1 (en) | User interface for bicontextual exploration of a graph | |
| US9037957B2 (en) | Prioritizing asset loading in multimedia application | |
| Yamaoka et al. | Cultural analytics in large-scale visualization environments | |
| Patel et al. | Digitisation to presentation: building virtual museum exhibitions | |
| CN110568973A (en) | screenshot method, screenshot device, storage medium and terminal equipment | |
| CN114564630A (en) | Method, system and medium for visualizing graph data Web3D | |
| Han et al. | Tree-based visualization and optimization for image collection | |
| JP4205935B2 (en) | Content search device, program, and recording medium | |
| CN105242832A (en) | Method and device for displaying screen locking information flow | |
| Khanwalkar et al. | Exploration of large image corpuses in virtual reality | |
| US8913076B1 (en) | Method and apparatus to improve the usability of thumbnails | |
| CN104808995B (en) | A kind of method and apparatus for across application collection application content | |
| US20140201658A1 (en) | Rendering maps with canvas elements | |
| US20110122125A1 (en) | Method and apparatus for displaying and arranging data 3-dimensionally | |
| Dunsmuir | Selective Semantic Zoom of a Document Collection | |
| US20090002386A1 (en) | Graphical Representation Creation Mechanism | |
| CN115268720A (en) | Page rendering method, device and equipment and readable storage medium | |
| CN116932829A (en) | Solutions for developer supporting big data tree view components | |
| Tajima et al. | Browsing large HTML tables on small screens |
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 |