CN107092643B - Barrage rendering method and device - Google Patents
Barrage rendering method and device Download PDFInfo
- Publication number
- CN107092643B CN107092643B CN201710128398.0A CN201710128398A CN107092643B CN 107092643 B CN107092643 B CN 107092643B CN 201710128398 A CN201710128398 A CN 201710128398A CN 107092643 B CN107092643 B CN 107092643B
- Authority
- CN
- China
- Prior art keywords
- bullet screen
- rendering
- data
- preset
- original
- 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
Images
Classifications
-
- 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
- G06F16/986—Document structures and storage, e.g. HTML extensions
-
- 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
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
- H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
- H04N21/431—Generation of visual interfaces for content selection or interaction; Content or additional data rendering
- H04N21/4312—Generation of visual interfaces for content selection or interaction; Content or additional data rendering involving specific graphical features, e.g. screen layout, special fonts or colors, blinking icons, highlights or animations
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
- H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
- H04N21/435—Processing of additional data, e.g. decrypting of additional data, reconstructing software from modules extracted from the transport stream
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
- H04N21/47—End-user applications
- H04N21/475—End-user interface for inputting end-user data, e.g. personal identification number [PIN], preference data
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Multimedia (AREA)
- Signal Processing (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Processing Or Creating Images (AREA)
- Image Generation (AREA)
Abstract
The invention provides a barrage rendering method and a barrage rendering device, wherein the barrage rendering method comprises the following steps: s1, acquiring original data of the bullet screen; s2, generating corresponding bullet screen objects according to the corresponding bullet screen original data according to the corresponding preset bullet screen styles; s3, when an idle trajectory exists in the rendering Canvas, inserting the bullet screen object into the idle trajectory, and rendering all bullet screen objects in all trajectories. According to the method, the Canvas function of the HTML5 is utilized, so that the bullet screen does not depend on Flash, the bullet screen drawing efficiency is increased, the bullet screen animation is displayed on the browser more smoothly, and the user experience degree is increased.
Description
Technical Field
The invention relates to the field of webpage rendering, in particular to a barrage rendering method and device.
Background
In the field of webpage rendering, the bullet screen rendering technology based on DOM is a technology which is adopted by most bullet screen applications at present, the principle of the bullet screen rendering technology is that bullet screen characters are packaged into an HTML DOM element, then the DOM element loading the bullet screen characters is put into the HTML for rendering by utilizing JavaScript, and then the position of the DOM element loading the bullet screen characters is continuously calculated and changed to form mobile animation.
By adopting the bullet screen rendering technology of DOM, the positions of all DOM elements need to be calculated and changed, so that the operation frequency of a system CPU is overhigh and the memory occupation is overlarge under the condition that the bullet screen character size is very large, and the animation of the bullet screen has a pause phenomenon and is particularly more obvious to be expressed on a mobile terminal.
Disclosure of Invention
The invention provides a bullet screen rendering method and a bullet screen rendering device for overcoming the problems or at least partially solving the problems, and solves the problems of low efficiency and overlarge occupied memory based on DOM rendering.
According to an aspect of the present invention, there is provided a bullet screen rendering method, including:
s1, acquiring original data of the bullet screen;
s2, generating corresponding bullet screen objects according to the corresponding bullet screen original data according to the corresponding preset bullet screen styles;
s3, when an idle trajectory exists in the rendering Canvas, inserting the bullet screen object into the idle trajectory, and rendering all bullet screen objects in all trajectories.
According to another aspect of the present invention, there is also provided a bullet screen rendering apparatus including:
the acquisition module is used for acquiring original data of the bullet screen;
the object generation module is used for generating each piece of bullet screen original data into a corresponding bullet screen object according to a corresponding preset bullet screen style;
and the rendering module is used for inserting the bullet screen objects into the idle trajectory when the idle trajectory exists in the rendering Canvas and rendering all bullet screen objects in all trajectories.
The invention has the beneficial effects that: the corresponding bullet screen object is generated by the bullet screen original data, the bullet screen object is inserted into the trajectory of the rendering Canvas, all bullet screen objects in the trajectory are rendered together, the Canvas function of HTML5 is utilized, each bullet screen object is a picture, therefore, when bullet screen animation is formed, only the position corresponding to the bullet screen object picture needs to be changed, compared with the existing DOM-based rendering, position calculation and change are continuously carried out on bullet screen characters in each DOM element, the bullet screen drawing efficiency can be increased, excessive memory is not needed to be occupied, the bullet screen animation is more smoothly displayed on a browser, and the user experience degree is increased.
Drawings
FIG. 1 is a flowchart of a bullet screen rendering method according to an embodiment of the present invention;
FIG. 2 is a flowchart of a bullet screen object generation process;
FIG. 3 is a flowchart of a bullet screen object rendering process;
FIG. 4 is a flowchart of the overall operation of the bullet screen rendering method;
fig. 5 is a connection block diagram of a bullet screen rendering device according to another embodiment of the present invention;
fig. 6 is a general connection block diagram of the bullet screen rendering apparatus;
fig. 7 is a block diagram of a testing apparatus of a bullet screen rendering device according to another embodiment of the present invention.
Detailed Description
The following detailed description of embodiments of the present invention is provided in connection with the accompanying drawings and examples. The following examples are intended to illustrate the invention but are not intended to limit the scope of the invention.
Referring to fig. 1, a bullet screen rendering method according to an embodiment of the present invention is mainly used in the fields of web page rendering and animation, where HTML5 is a core language of the internet, and the 5 th significant modification of HTML is used to provide content displayed on a web page, and most modern browsers support HTML 5. Compared with HTML4, HTML5 has new features such as native audio-visual support, native animation self-support, local database and socket web socket, and many websites have transferred the technology to HTML 5.
A Canvas represents an HTML5 Canvas element that supports scripted browser-side drawing operations. The Canvas supports interaction, can respond to user operations such as mouse click, keyboard key pressing and the like, can also be used for animation production, and at present, many web games are produced based on the Canvas. Canvas can also draw 2D and 3D pictures, and any browser that supports HTML5 will support Canvas for browser support, and games or animations created using Canvas technology do not require any browser plug-ins to be installed.
The barrage rendering method provided by the embodiment mainly comprises the following steps: s1, acquiring original data of the bullet screen; s2, generating corresponding bullet screen objects according to the corresponding bullet screen original data according to the corresponding preset bullet screen styles; s3, when an idle trajectory exists in the rendering Canvas, inserting the bullet screen objects into the idle trajectory, and rendering all bullet screen objects in all trajectories.
This embodiment will play the corresponding bullet screen object of original data generation of curtain, and insert bullet screen object in the trajectory of rendering Canvas, render all bullet screen objects in the trajectory together, utilize HTML 5's Canvas function, each bullet screen object is a picture, therefore when forming bullet screen animation, only need to change the position that bullet screen object picture corresponds can, compare present DOM-based rendering need constantly carry out position calculation and change to the bullet screen characters in each DOM element, the efficiency that multiplicable bullet screen was drawn, need not to occupy too much memory, make bullet screen animation show more smoothly on the browser, user experience has been increased.
In an embodiment of the present invention, the process of acquiring the original data of the bullet screen in step S1 is to design a bullet screen data acquisition thread in the browser, where the bullet screen data acquisition thread is generally packaged by a WebSocket, and interacts with the bullet screen server by using a WebSocket technology to acquire the original data of the bullet screen on the bullet screen server. Specifically, a WebSocket object is created, original bullet screen data transmitted from a bullet screen server are obtained through a message monitoring mechanism, and the obtained original bullet screen data are stored in a bullet screen pool. The original bullet screen data in the bullet screen server have a sequence, and the bullet screen data acquisition thread puts the acquired original bullet screen data into a bullet screen pool according to the original sequence. The bullet screen pool adopts a JavaScript array to store bullet screen original data, the bullet screen original data can be added into the JavaScript array, the bullet screen original data can also be extracted from the JavaScript array, and the extracted bullet screen original data is erased.
In another embodiment of the present invention, it should be noted that the original bullet screen data carries bullet screen feature data, such as bullet screen sender rating, festival feature, gift feature (whether rocket, airplane, sports car, etc.), bullet screen font designated by the sender, and the like. When generating the bullet screen object with bullet screen raw data, need generate according to a certain pattern, so need know the corresponding preset bullet screen pattern of bullet screen raw data. Therefore, in the present embodiment, a corresponding relationship between the bullet screen feature data and the preset bullet screen style is established, for example, a corresponding relationship between the sender level of the bullet screen original data and the preset bullet screen style is established.
In the process of generating each piece of original bullet screen data into the corresponding bullet screen object according to the corresponding preset bullet screen style in the step S2, obtaining the original bullet screen data of a predetermined number from the bullet screen pool according to the fixed frequency, namely, extracting the original bullet screen data from the bullet screen pool at regular time. For example, in this embodiment, a thread may be started to obtain original bullet screen data from a bullet screen pool at a frequency of 60 times per second. The problem that extraction efficiency is influenced due to the fact that the amount of the original bullet screen data extracted at each time is too large is avoided, and each bullet screen original data only extracts a preset amount from the bullet screen pool.
Referring to fig. 2, after a plurality of pieces of original bullet screen data are extracted from the bullet screen pool, bullet screen feature data of each piece of original bullet screen data are acquired, and a preset bullet screen pattern corresponding to each piece of original bullet screen data is obtained according to a correspondence between the bullet screen feature data established in advance and the preset bullet screen pattern. The method comprises the steps of generating corresponding bullet screen images from each bullet screen original data according to corresponding preset bullet screen patterns, packaging the bullet screen images and bullet screen related data such as bullet screen image width and bullet screen image moving speed into bullet screen objects, and storing the generated bullet screen objects in bullet screen queues.
The bullet screen object is a package of a single bullet screen picture, the attribute information of the bullet screen object comprises bullet screen content and bullet screen styles, the bullet screen styles mainly comprise bullet screen fonts, bullet screen colors, bullet screen word intervals, bullet screen widths and bullet screen backgrounds, and the bullet screen object further comprises attribute information such as bullet screen moving speed and the current position of a bullet screen.
In an embodiment of the present invention, when rendering a bullet screen object in step S3, first, a rendering Canvas is drawn, the height of the rendering Canvas is obtained, the number of the trajectories in the rendering Canvas is calculated according to the height of the preset trajectory, an array is used to store all the trajectories in the entire rendering Canvas, and all the trajectories are identified.
Then, configuring a rendering thread, circularly rendering the trajectories in the Canvas in the rendering thread, and acquiring the position of the last bullet screen object in each trajectory; and when the distance between the position of the last bullet screen object in the trajectory and the edge of the bullet screen area is greater than the preset distance, determining that an idle trajectory exists in the rendering Canvas, otherwise, determining that the idle trajectory does not exist.
In the embodiment, the idle trajectory is found by using the canvas. Referring to fig. 3, when the condition is satisfied, it indicates that there is a free trajectory in the rendering Canvas, at this time, a bullet screen object is extracted from the bullet screen queue, inserted into the free trajectory, and a number is given to a trajectory where the bullet screen object is located, that is, a current trajectory number is set for the bullet screen object.
Rendering all the bullet screen objects in all the trajectories into a rendering canvas according to a fixed frequency, namely rendering all the bullet screen objects in all the trajectories. In specific implementation, whether the bullet screen object exists in each trajectory can be detected according to a fixed frequency, and if the bullet screen object exists in each trajectory, all the bullet screen objects in the trajectories are rendered. The Canvas bullet screen drawing principle is as follows: a Canvas may be understood as a drawing board that produces a picture regardless of the content of the drawing board. A Canvas can be understood as a simple Photoshop, whether a line or a piece of text or a picture, and the result is always a picture.
When a plurality of pictures are rapidly turned, the animation is formed, so that the animation is realized on the Canvas, namely, the process of continuous erasing and continuous redrawing is realized. The method comprises the steps of erasing the content in a Canvas drawing board, changing the position of the original content, redrawing the original content, and rapidly circulating the process to form the animation, wherein the content of each frame in the animation is the redrawn content in the Canvas.
In the process of forming the Canvas animation, the whole Canvas is cleared first, the whole trajectory is circulated, each bullet screen object in the trajectory is obtained in each circulation, the position of the bullet screen object where the current frame is located is calculated, each bullet screen object is drawn, and the bullet screen animation is formed by continuously erasing and drawing in the rendering thread.
Referring to fig. 4, which is a flowchart of a bullet screen rendering method according to another embodiment of the present invention, first, a bullet screen data acquisition thread, a bullet screen style calculation thread, a bullet screen object generation thread, a rendering thread, a bullet screen scheduling thread, and the like may be configured in a browser supporting HTML 5. And the bullet screen data acquisition thread acquires the original bullet screen data from the bullet server and stores the original bullet screen data in the bullet screen pool. The method comprises the steps that bullet screen original data are extracted from a bullet screen pool by a bullet screen style calculation thread, bullet screen characteristic data of each bullet screen original data are obtained, and preset bullet screen styles corresponding to each bullet screen original data are obtained according to corresponding relations between the bullet screen characteristic data and the preset bullet screen styles. And generating corresponding bullet screen objects from each bullet screen original data according to corresponding preset bullet screen styles, and storing the generated bullet screen objects in a bullet screen queue. And the rendering thread detects whether an idle trajectory exists in a rendering Canvas, if so, the bullet screen objects are extracted from the bullet screen queue and inserted into the idle trajectory, and all the bullet screen objects in all the trajectories are rendered into the rendering Canvas according to a certain frequency. The bullet screen scheduling thread is a scheduling thread of each thread in a coordinated manner, and performs unified scheduling coordination on other threads.
This embodiment will play the corresponding bullet screen object of original data generation of curtain, and insert bullet screen object in the trajectory of rendering Canvas, render all bullet screen objects in all trajectories together, utilize HTML 5's Canvas function, each bullet screen object is a picture, therefore when forming bullet screen animation, only need to change the position that bullet screen object picture corresponds can, compare present DOM-based rendering need constantly carry out position calculation and change to the bullet screen characters in each DOM element, the efficiency that multiplicable bullet screen was drawn, need not to occupy too much memory, make bullet screen animation show more smoothly on the browser, user experience has been increased.
Referring to fig. 5, the bullet screen rendering apparatus according to an embodiment of the present invention includes an obtaining module 21, an object generating module 22, and a rendering module 23.
The acquisition module 21 is used for acquiring original data of the bullet screen;
the object generation module 22 is configured to generate a corresponding bullet screen object from each piece of bullet screen raw data according to a corresponding preset bullet screen style;
and the rendering module 23 is configured to insert the bullet screen object into an idle trajectory when the idle trajectory exists in the rendering Canvas, and render all bullet screen objects in all trajectories.
The obtaining module 21 is specifically configured to:
through the message monitoring mechanism, the original bullet screen data transmitted from the bullet screen server are obtained, and the obtained original bullet screen data are stored in a bullet screen pool, wherein the original bullet screen data are stored in the bullet screen pool through a JavaScript array.
Referring to fig. 6, the bullet screen rendering apparatus provided in this embodiment further includes a corresponding relationship establishing module 24 and a determining module 25.
Wherein, the original data of the bullet screen carries the characteristic data of the bullet screen, the corresponding relation establishes the module 24, is used for establishing the corresponding relation between the characteristic data of the bullet screen and the preset bullet screen pattern in advance;
the obtaining module 21 is further configured to:
when a plurality of pieces of original bullet screen data are acquired from the bullet screen pool, bullet screen characteristic data of each piece of original bullet screen data are acquired;
the object generation module 22 is specifically configured to:
obtaining a preset bullet screen style corresponding to each bullet screen original data according to the bullet screen feature data of each bullet screen original data and the corresponding relation between the bullet screen feature data and the preset bullet screen style; according to the preset bullet screen style, generating each bullet screen original data into a corresponding bullet screen object, and storing the generated bullet screen objects in a bullet screen queue.
A judging module 25, configured to judge whether an idle trajectory exists in the rendering Canvas; the method specifically comprises the following steps:
configuring and starting a rendering thread, circulating a trajectory in the rendering thread, and acquiring the position of the last bullet screen object in the trajectory;
and when the distance between the position of the last bullet screen object in the trajectory and the edge of the bullet screen area is greater than the preset distance, determining that an idle trajectory exists in the rendering Canvas, otherwise, determining that the idle trajectory does not exist.
Based on the bullet screen rendering device provided by the corresponding embodiment of fig. 5 or fig. 6, the invention provides a testing device of the bullet screen rendering device. Referring to fig. 7, the test apparatus of the information management device includes: a processor (processor)701, a memory (memory)701, a communication Interface (Communications Interface)703, and a bus 704;
the processor 701, the memory 702 and the communication interface 703 complete mutual communication through a bus 704;
the communication interface 703 is used for information transmission between the test equipment and the communication equipment of the bullet screen rendering apparatus;
the processor 701 is configured to call the program instructions in the memory 702 to execute the bullet screen rendering method provided in the embodiments corresponding to fig. 1 to fig. 4, for example, including: acquiring original data of a bullet screen; generating corresponding bullet screen objects for each piece of bullet screen original data according to corresponding preset bullet screen styles; when an idle trajectory exists in a rendering Canvas, inserting the bullet screen object into the idle trajectory, and rendering all bullet screen objects in all trajectories.
The invention discloses a computer program product, which comprises a computer program stored on a non-transitory computer readable storage medium, wherein the computer program comprises program instructions, and when the program instructions are executed by a computer, the computer can execute the barrage rendering method provided by the corresponding embodiment of fig. 1-4, for example, the barrage rendering method comprises the following steps: acquiring original data of a bullet screen; generating corresponding bullet screen objects for each piece of bullet screen original data according to corresponding preset bullet screen styles; when an idle trajectory exists in a rendering Canvas, inserting the bullet screen object into the idle trajectory, and rendering all bullet screen objects in all trajectories.
The present invention provides a non-transitory computer-readable storage medium storing computer instructions, the computer instructions causing a computer to execute the bullet screen rendering method provided by the embodiments corresponding to fig. 1 to 4, for example, including: acquiring original data of a bullet screen; generating corresponding bullet screen objects for each piece of bullet screen original data according to corresponding preset bullet screen styles; when an idle trajectory exists in a rendering Canvas, inserting the bullet screen object into the idle trajectory, and rendering all bullet screen objects in all trajectories.
Those of ordinary skill in the art will understand that: all or part of the steps for implementing the method embodiments may be implemented by hardware related to program instructions, and the program may be stored in a computer readable storage medium, and when executed, the program performs the steps including the method embodiments; and the aforementioned storage medium includes: various media that can store program codes, such as ROM, RAM, magnetic or optical disks.
The above-described embodiments of the test equipment of the bullet screen rendering apparatus and the like are merely illustrative, where units illustrated as separate components may or may not be physically separate, and components displayed as units may or may not be physical units, may be located in one place, or may also be distributed on multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of the present embodiment. One of ordinary skill in the art can understand and implement it without inventive effort.
Through the above description of the embodiments, those skilled in the art will clearly understand that each embodiment can be implemented by software plus a necessary general hardware platform, and certainly can also be implemented by hardware. With this understanding in mind, the above technical solutions may be embodied in the form of a software product, which can be stored in a computer-readable storage medium, such as ROM/RAM, magnetic disk, optical disk, etc., and includes instructions for causing a computer device (which may be a personal computer, a server, or a network device) to execute the various embodiments or some parts of the methods of the embodiments.
According to the bullet screen rendering method and device provided by the invention, the corresponding bullet screen objects are generated from the bullet screen original data, the bullet screen objects are inserted into the trajectory of the rendering Canvas, all the bullet screen objects in the trajectory are rendered together, and each bullet screen object is a picture by using the Canvas function of HTML5, so that when bullet screen animation is formed, only the position corresponding to the picture of the bullet screen object needs to be changed.
Finally, the method of the present application is only a preferred embodiment and is not intended to limit the scope of the present invention. Any modification, equivalent replacement, or improvement made within the spirit and principle of the present invention should be included in the protection scope of the present invention.
Claims (8)
1. A bullet screen rendering method is characterized by comprising the following steps:
s1, acquiring original data of the bullet screen;
s2, generating corresponding bullet screen objects according to the corresponding bullet screen original data according to the corresponding preset bullet screen styles; generating corresponding bullet screen images from each bullet screen original data according to corresponding preset bullet screen styles, and packaging the bullet screen images into bullet screen objects;
s3, when an idle trajectory exists in the rendering Canvas, inserting the bullet screen object into the idle trajectory, and rendering all bullet screen objects in all trajectories;
in the step S3, it is determined whether there is an idle trajectory in the rendering Canvas as follows:
configuring and starting a rendering thread, circularly rendering trajectories in a Canvas in the rendering thread, and acquiring the position of the last bullet screen object in each trajectory;
when the distance between the position of the last bullet screen object in the trajectory and the edge of the bullet screen area is larger than the preset distance, determining that an idle trajectory exists in the rendering Canvas, otherwise, determining that the idle trajectory does not exist;
the step S1 specifically includes:
and acquiring the original bullet screen data of a preset quantity from the bullet screen pool according to the fixed frequency.
2. The bullet screen rendering method of claim 1, wherein said step S1 further comprises:
and acquiring original bullet screen data transmitted from the bullet screen server through a message monitoring mechanism, and storing the acquired original bullet screen data into a bullet screen pool.
3. The bullet screen rendering method of claim 2, wherein the bullet screen pool stores bullet screen original data by using a JavaScript array.
4. The bullet screen rendering method of claim 2, wherein the bullet screen original data carries corresponding bullet screen characteristic data, and a corresponding relation between the bullet screen characteristic data and a preset bullet screen style is established in advance;
the step S2 further includes:
s21, acquiring a plurality of bullet screen original data from the bullet screen pool, and acquiring bullet screen characteristic data corresponding to each bullet screen original data;
s22, obtaining a preset bullet screen style corresponding to each bullet screen original data according to bullet screen feature data of each bullet screen original data and a corresponding relation between the bullet screen feature data and the preset bullet screen style;
s23, according to the corresponding bullet screen style of predetermineeing, each bullet screen original data generates corresponding bullet screen object, and will generate bullet screen object deposit in bullet screen queue.
5. The bullet screen rendering method of claim 4, wherein said step S21 further comprises:
and extracting a preset amount of original bullet screen data from the bullet screen pool according to a fixed frequency.
6. The bullet screen rendering method of claim 5, wherein said step S3 is preceded by:
acquiring the height of a rendering Canvas and a preset ballistic height, calculating the number of ballistic trajectories in the rendering Canvas, and identifying all ballistic trajectories;
when the bullet screen object is inserted into the idle trajectory in step S3, an identifier is given to the trajectory where the bullet screen object is located.
7. A bullet screen rendering apparatus, comprising:
the acquisition module is used for acquiring original data of the bullet screen;
the object generation module is used for generating each piece of bullet screen original data into a corresponding bullet screen object according to a corresponding preset bullet screen style; generating corresponding bullet screen images from each bullet screen original data according to corresponding preset bullet screen patterns, and packaging the bullet screen images into bullet screen objects;
the rendering module is used for inserting the bullet screen objects into the idle trajectory when the idle trajectory exists in the rendering Canvas and rendering all bullet screen objects in all trajectories;
further comprising:
the judging module is used for judging whether an idle trajectory exists in the rendering Canvas, and specifically comprises the following steps:
configuring and starting a rendering thread, circularly rendering trajectories in a Canvas in the rendering thread, and acquiring the position of the last bullet screen object in each trajectory;
when the distance between the position of the last bullet screen object in the trajectory and the edge of the bullet screen area is larger than the preset distance, determining that an idle trajectory exists in the rendering Canvas, otherwise, determining that the idle trajectory does not exist;
the acquisition module is specifically used for acquiring the original bullet screen data of a preset number from the bullet screen pool according to the fixed frequency.
8. The bullet screen rendering apparatus according to claim 7, wherein the bullet screen original data carries bullet screen feature data, further comprising:
the corresponding relation establishing module is used for establishing the corresponding relation between the bullet screen characteristic data and the preset bullet screen style;
the acquisition module is further configured to:
when a plurality of pieces of original bullet screen data are acquired from the bullet screen pool, bullet screen characteristic data of each piece of original bullet screen data are acquired;
the object generation module is specifically configured to:
obtaining a preset bullet screen style corresponding to each bullet screen original data according to the bullet screen feature data of each bullet screen original data and the corresponding relation between the bullet screen feature data and the preset bullet screen style; and generating corresponding bullet screen objects from each bullet screen original data according to preset bullet screen styles, and storing the generated bullet screen objects in bullet screen queues.
Priority Applications (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710128398.0A CN107092643B (en) | 2017-03-06 | 2017-03-06 | Barrage rendering method and device |
| PCT/CN2017/120146 WO2018161709A1 (en) | 2017-03-06 | 2017-12-29 | Method and device for rendering overlay comment |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710128398.0A CN107092643B (en) | 2017-03-06 | 2017-03-06 | Barrage rendering method and device |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN107092643A CN107092643A (en) | 2017-08-25 |
| CN107092643B true CN107092643B (en) | 2020-10-16 |
Family
ID=59646173
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710128398.0A Active CN107092643B (en) | 2017-03-06 | 2017-03-06 | Barrage rendering method and device |
Country Status (2)
| Country | Link |
|---|---|
| CN (1) | CN107092643B (en) |
| WO (1) | WO2018161709A1 (en) |
Families Citing this family (20)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107092643B (en) * | 2017-03-06 | 2020-10-16 | 武汉斗鱼网络科技有限公司 | Barrage rendering method and device |
| CN107484036B (en) * | 2017-09-07 | 2018-09-21 | 深圳市迅雷网络技术有限公司 | A kind of barrage display methods and device |
| CN108600852B (en) * | 2018-04-28 | 2020-12-15 | 北京酷我科技有限公司 | Realization method of bullet screen effect |
| CN108848398B (en) * | 2018-06-21 | 2021-01-01 | 武汉斗鱼网络科技有限公司 | Method, device, terminal and storage medium for distributing local barrage messages |
| CN109525885B (en) * | 2018-12-13 | 2021-07-20 | 广州华多网络科技有限公司 | Information processing method, information processing device, electronic equipment and computer readable storage medium |
| CN109640154B (en) * | 2018-12-14 | 2019-09-10 | 苏州好玩友网络科技有限公司 | Webpage barrage display methods, device, equipment and storage medium |
| CN109714627B (en) * | 2018-12-29 | 2021-06-18 | 广州方硅信息技术有限公司 | Comment information rendering method, device and equipment |
| CN110045958B (en) * | 2019-04-17 | 2021-09-28 | 腾讯科技（深圳）有限公司 | Texture data generation method, device, storage medium and equipment |
| CN112118474B (en) * | 2019-06-19 | 2022-09-09 | 上海哔哩哔哩科技有限公司 | Video barrage display method and system, computer equipment and readable storage medium |
| CN110392293B (en) * | 2019-06-21 | 2023-04-07 | 平安普惠企业管理有限公司 | Canvas-based bullet screen control method, device, equipment and storage medium |
| CN112752131B (en) * | 2019-10-30 | 2023-02-10 | 腾讯科技（深圳）有限公司 | Barrage information display method and device, storage medium and electronic device |
| CN111031376B (en) * | 2019-11-25 | 2020-09-25 | 上海哔哩哔哩科技有限公司 | Bullet screen processing method and system based on WeChat applet |
| CN111031400B (en) * | 2019-11-25 | 2021-04-27 | 上海哔哩哔哩科技有限公司 | Barrage presenting method and system |
| CN111083551B (en) * | 2019-12-17 | 2022-01-11 | 腾讯科技（深圳）有限公司 | Barrage rendering method and device, computer readable storage medium and computer equipment |
| CN111131910B (en) * | 2020-01-02 | 2022-04-12 | 广州虎牙科技有限公司 | Bullet screen implementation method and device, electronic equipment and readable storage medium |
| CN111796825B (en) * | 2020-06-30 | 2024-02-09 | 北京字节跳动网络技术有限公司 | Bullet screen drawing method, bullet screen drawing device, bullet screen drawing equipment and storage medium |
| CN114938474B (en) * | 2021-01-11 | 2024-05-28 | 花瓣云科技有限公司 | Barrage processing method and electronic equipment |
| CN112799578B (en) * | 2021-01-26 | 2022-06-17 | 挂号网（杭州）科技有限公司 | Keyboard drawing method and device, electronic equipment and storage medium |
| CN114942795A (en) * | 2022-04-29 | 2022-08-26 | 湖南茶旅云科技有限公司 | Loading method of live broadcast gift data in small program, electronic device and storage medium |
| CN115297355B (en) * | 2022-08-02 | 2024-01-23 | 北京奇艺世纪科技有限公司 | Barrage display method, barrage generation method, barrage display device, electronic equipment and storage medium |
Family Cites Families (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102937968B (en) * | 2012-10-11 | 2015-10-14 | 上海交通大学 | A kind of binocular 3D webpage implementation method based on Canvas and system |
| CN106469165B (en) * | 2015-08-18 | 2021-01-08 | 腾讯科技（深圳）有限公司 | Bullet screen display method and bullet screen display device |
| CN105307030B (en) * | 2015-09-30 | 2018-07-17 | 广州酷狗计算机科技有限公司 | Barrage display methods and device |
| CN105597321B (en) * | 2015-12-18 | 2020-07-10 | 武汉斗鱼网络科技有限公司 | Bullet screen display method and system in full-screen game state |
| CN105939493B (en) * | 2016-03-30 | 2019-02-22 | 广州华多网络科技有限公司 | A kind of display methods and display device of video barrage |
| CN105898521A (en) * | 2016-04-12 | 2016-08-24 | 王邈 | Bullet screen adding device and bullet screen adding method |
| CN106131643A (en) * | 2016-07-13 | 2016-11-16 | 乐视控股（北京）有限公司 | A kind of barrage processing method, processing means and electronic equipment thereof |
| CN107092643B (en) * | 2017-03-06 | 2020-10-16 | 武汉斗鱼网络科技有限公司 | Barrage rendering method and device |
-
2017
- 2017-03-06 CN CN201710128398.0A patent/CN107092643B/en active Active
- 2017-12-29 WO PCT/CN2017/120146 patent/WO2018161709A1/en active Application Filing
Also Published As
| Publication number | Publication date |
|---|---|
| WO2018161709A1 (en) | 2018-09-13 |
| CN107092643A (en) | 2017-08-25 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107092643B (en) | Barrage rendering method and device | |
| CN106021421B (en) | method and device for accelerating webpage rendering | |
| US9576068B2 (en) | Displaying selected portions of data sets on display devices | |
| CN105975576B (en) | Terminal content adaptive display method and device and terminal | |
| CN102955854A (en) | Webpage presenting method and device based on HTML5 (Hypertext Markup Language 5) protocol | |
| WO2015196822A1 (en) | Method and device for adapting webpage to screen layout | |
| EP2711846A1 (en) | Method and device for processing template file | |
| CN111915705B (en) | Picture visual editing method, device, equipment and medium | |
| CN112182444A (en) | Data rendering system and method and electronic equipment | |
| CN109714627A (en) | A kind of rendering method of comment information, device and equipment | |
| CN105205077A (en) | Page layout method, device and system | |
| CN112711729A (en) | Rendering method and device based on page animation, electronic equipment and storage medium | |
| CN107122104B (en) | Data display method and device | |
| KR20150106846A (en) | Improvements in and relating to rendering of graphics on a display device | |
| CN112634406A (en) | Method, device, electronic equipment, storage medium and program product for generating picture | |
| US9774549B2 (en) | Method and apparatus for displaying instant messaging (IM) message | |
| CN105868240A (en) | Method and device for self-adaptive display of page | |
| CN104516868B (en) | The streaming restoring method and system in a kind of space of a whole page space | |
| CN114791988A (en) | Browser-based PDF file analysis method, system and storage medium | |
| CN113835806A (en) | Page layout method and device, electronic equipment and storage medium | |
| CN112449230B (en) | Character string display processing method, device, terminal and storage medium | |
| CN106548501B (en) | Image drawing method and device | |
| CN115830212A (en) | Three-dimensional model display method and related equipment | |
| CN117892698B (en) | Text gradual change rendering method, equipment and storage medium | |
| CN114625460B (en) | Image-text mixed arrangement method, device, equipment 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 |