WO2018161709A1

WO2018161709A1 - Method and device for rendering overlay comment

Info

Publication number: WO2018161709A1
Application number: PCT/CN2017/120146
Authority: WO
Inventors: 姚尧
Original assignee: 武汉斗鱼网络科技有限公司
Priority date: 2017-03-06
Filing date: 2017-12-29
Publication date: 2018-09-13
Also published as: CN107092643B; CN107092643A

Abstract

A method and device for rendering an overlay comment. The method comprises: acquiring original data of an overlay comment (S1); generating, for each overlay comment and according to a corresponding predetermined style, a corresponding overlay comment object (S2); and if a rendering canvas has a free comment line, inserting the overlay comment object into the free comment line, and rendering all overlay comment objects in all current comment lines (S3). The method employs the canvas element in HTML5 standard to eliminate dependency of overlay comment display on the Flash technology, thus enhancing efficiency of drawing overlay comments, enabling a smooth display of overlay comment animation in a browser, and improving user experience.

Description

Barrage rendering method and device

cross reference

The present application is hereby incorporated by reference in its entirety in its entirety in its entirety in its entirety in the the the the the the the the the

Technical field

The present invention relates to the field of web page rendering, and more particularly to a barrage rendering method and apparatus.

Background technique

In the field of web page rendering, DOM-based barrage rendering technology is the technology currently used in most barrage applications. The principle is to encapsulate the barrage text into an HTML DOM element, and then use JavaScript to load the DOM of the barrage text. The elements are put into the HTML for rendering, and then the DOM elements that load the barrage text are continuously calculated and changed to form a moving animation.

Using DOM's barrage rendering technology, due to the need to calculate and change the position of all DOM elements, the system CPU frequency is too high, the memory usage is too large, and the barrage is too large. The animation will be stuck, especially on the mobile side.

Summary of the invention

The present invention provides a barrage rendering method and apparatus that overcomes the above problems or at least partially solves the above problems, and solves the problem of low efficiency and excessive memory usage based on DOM rendering.

According to an aspect of the present invention, a barrage rendering method is provided, including:

S1, obtaining the original data of the barrage;

S2, generating the corresponding barrage object according to the corresponding preset barrage pattern of each barrage raw data;

S3. When there is an idle trajectory in the rendering canvas Canvas, the barrage object is inserted into the idle trajectory, and all the barrage objects in all the trajectories are rendered.

According to another aspect of the present invention, a barrage rendering apparatus is also provided, comprising:

Obtaining a module for acquiring the original data of the barrage;

An object generating module, configured to generate a corresponding barrage object according to a corresponding preset barrage pattern of each barrary raw data;

A rendering module is configured to insert a barrage object into the idle trajectory when there is an idle trajectory in the rendering canvas Canvas, and render all the barrage objects in all the trajectories.

In a third aspect, an embodiment of the present application further provides an electronic device, including:

At least one processor;

At least one memory communicatively coupled to the processor, wherein:

The memory stores program instructions executable by the processor, the processor invoking the program instructions to perform the following methods:

Obtain the original data of the barrage;

Generating each of the original data of the barrage according to the corresponding preset barrage style to generate a corresponding barrage object;

When there is an idle trajectory in the rendered canvas Canvas, the barrage object is inserted into the free trajectory and all of the barrage objects in all trajectories are rendered.

In a fourth aspect, an embodiment of the present application further provides a computer program, including program code, where the program code is configured to perform the following operations:

The processor is configured to invoke logic instructions in the memory to perform the following methods:

Obtain the original data of the barrage;

In a fifth aspect, an embodiment of the present application further provides a storage medium for storing a computer program as described above.

A barrage rendering method and device provided by the embodiment of the present application generates a corresponding barrage object from the original data of the barrage, and inserts the barrage object into the trajectory of the canvas of the canvas, and together with all the barrage objects in the ballistics. Rendering, using the Canvas function of HTML5, each barrage object is a picture, so when forming a barrage animation, you only need to change the position corresponding to the barrage object image, compared to the existing DOM-based rendering needs. Continuously calculating and changing the position of the barrage text in each DOM element can increase the efficiency of the barrage drawing without occupying too much memory, so that the barrage animation is displayed more smoothly on the browser, increasing the user. Experience.

DRAWINGS

1 is a flow chart of a method for rendering a barrage according to an embodiment of the present invention;

2 is a flow chart of a process of generating a barrage object;

Figure 3 is a flow chart of the rendering process of the barrage object;

Figure 4 is a flow chart of the entire work of the barrage rendering method;

FIG. 5 is a block diagram showing a connection of a barrage rendering device according to another embodiment of the present invention; FIG.

Figure 6 is a block diagram showing the overall connection of the barrage rendering device;

FIG. 7 is a block diagram of an electronic device connection according to an embodiment of the present invention.

detailed description

The specific embodiments of the present invention are further described in detail below with reference to the drawings and embodiments. 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 barrage rendering method according to an embodiment of the present invention is mainly used in the field of web page rendering and animation, wherein HTML5 is the core language of the Internet, and the fifth major modification of HTML is used to provide display on a webpage. Content, most modern browsers now support HTML5. Compared to HTML4, HTML5 has new features such as native video and audio support, native animation self-holding, local database and socket network sockets. Many websites have now transferred technology to HTML5.

Canvas represents an HTML5 canvas element that supports scripted browser-side drawing operations. Canvas supports interaction, can respond to user operations, such as mouse clicks, keyboard buttons, etc., can also use Canvas to make animations, many web games are currently based on Canvas. Canvas can also draw 2D and 3D images. In terms of browser support, any browser that supports HTML5 will support Canvas, and games or animations created using Canvas technology do not need to install any browser plug-ins.

The barrage rendering method provided by this embodiment mainly includes: S1, acquiring the original data of the barrage; S2, generating the corresponding barrage object according to the corresponding preset barrage pattern of each barrage original data; S3, when rendering the canvas Canvas When there is an idle trajectory in the middle, the barrage object is inserted into the idle trajectory, and all the barrage objects in all the trajectories are rendered.

In this embodiment, the original data of the barrage is generated to generate a corresponding barrage object, and the barrage object is inserted into the trajectory of the rendering canvas Canvas, and all the barrage objects in the trajectory are rendered together, using the Canvas function of HTML5, each bomb The screen object is a picture, so when forming the barrage animation, you only need to change the position corresponding to the barrage object image. Compared to the existing DOM-based rendering, you need to constantly change the barrage text in each DOM element. Position calculation and change can increase the efficiency of the barrage drawing without occupying too much memory, which makes the barrage animation more smooth in the browser and increases the user experience.

In an embodiment of the present invention, the process of acquiring the original data of the barrage in the above step S1 is that a barrage data acquisition thread can be designed in the browser. Generally, the barrage data acquisition thread adopts WebSocket encapsulation, and adopts WebSocket technology and bomb. The screen server interacts to obtain the raw data of the barrage on the barrage server. Specifically, a WebSocket object is created, and the original data of the barrage transmitted from the barrage server is obtained through the message monitoring mechanism, and the obtained raw data of the barrage is stored in the barrage pool. The original data of the barrage in the barrage server is sequential, and the barrage data acquisition thread puts the captured barrage raw data into the barrage pool in the original order. Among them, the barrage pool uses a JavaScript array to store the original data of the barrage, which can add the original data of the barrage to the JavaScript array, or extract the original data of the barrage from the JavaScript array, and erase the original data of the extracted barrage.

In another embodiment of the present invention, it should be noted that the original data of the barrage carries the barrage feature data, such as the barrage sender level, the holiday feature, the gift feature (whether rocket, airplane, sports car, etc.) and the transmission. The specified barrage font, etc. When generating the barrage object from the original data of the barrage, it needs to be generated according to a certain style. Therefore, it is necessary to know the preset barrage style corresponding to the original data of the barrage. Therefore, in this embodiment, a correspondence relationship between the salicator feature data and the preset barrage style is established, for example, a correspondence relationship between the sender level of the original data of the barrage and the preset barrage style is established.

In the above step S2, in the process of generating the corresponding barrage object according to the corresponding preset barrage pattern, the predetermined amount of the original data of the barrage is obtained from the barrage pool according to the fixed frequency, that is, the timing is from the bullet. Extract the original data of the barrage in the curtain pool. For example, in this embodiment, a thread can be started to acquire the original data of the barrage from the barrage pool at a frequency of 60 times per second. Avoiding the extraction efficiency due to the excessive amount of raw data of the barrage extracted each time, each of them only extracts a predetermined number of original data of the barrage from the barrage pool.

Referring to FIG. 2, after extracting a plurality of original data of the barrage from the barrage pool, acquiring the barrage feature data of each barrage original data, and according to the previously established barrage feature data and the preset barrage pattern data Corresponding relationship, get the preset barrage style corresponding to each barrage raw data. According to the corresponding preset barrage style, firstly generate the corresponding barrage image for each barrage raw data, and then package the barrage image and the barrage related data, such as the barrage image width and the barr image moving speed, into a bomb. The curtain object and the generated barrage object is stored in the barrage queue.

Among them, the barrage object is a package of a single barrage screen. The attribute information of the barrage object includes the barrage content and the barrage style. The barrage style mainly includes the barrage font, the barrage color, the barrage word spacing, the barrage width, The background of the barrage, the barrage object also contains attribute information such as the speed of the barrage and the current position of the barrage.

In an embodiment of the present invention, when the rendering of the barrage object is performed in step S3, first, a rendering canvas Canvas is drawn to obtain the height of the canvas of the rendering canvas, and the rendering canvas Canvas is calculated according to the preset height of the ballistic. The number of trajectories, an array is used to store all the trajectories in the entire canvas Canvas, and all the trajectories are identified. In this embodiment, all the trajectories can be numbered.

Then, configure a rendering thread to loop the rendering of the trajectory in the canvas Canvas in the rendering thread to obtain the position of the last barrage object in each trajectory; when the position of the last barrage object in the trajectory is the distance from the edge of the barrage area If it is greater than the preset distance, it is determined that there is an idle trajectory in the rendered canvas Canvas, otherwise, there is no idle trajectory.

In this embodiment, use canvas.width–danmaku.getX()-danmaku.getWidth()>100 to find the idle trajectory. The preset distance value of 100 refers to the X-axis coordinate of the last barrage object in the trajectory. The rightmost distance of the curtain area. Referring to FIG. 3, when the condition is met, it indicates that there is an idle trajectory in the rendered canvas Canvas. At this time, the barrage object is extracted from the barrage queue, inserted into the idle trajectory, and the trajectory of the barrage object is numbered. , that is, set the current ballistic number to the barrage object.

Renders all of the barrage objects in all trajectories to the render canvas at a fixed frequency, rendering all the barrage objects in all trajectories. In the specific implementation, it is possible to detect whether there is a barrage object in each trajectory according to a fixed frequency, and if so, render all the barrage objects in the trajectory. Canvas barrage drawing principle: Canvas can be understood as a drawing board, no matter what the content of this drawing board, it will produce a picture. Canvas can be understood as a simple Photoshop, whether it is a line or a piece of text or a picture, the final is always a picture.

Animation is formed when multiple images are flipped quickly, so implementing animation on Canvas is a process of constantly erasing and constantly redrawing. Erase the contents of the Canvas palette, then make some changes to the position of the original content, and then re-draw it. The process of fast looping can form an animation. The content of each frame in the animation is the content redrawn in Canvas. .

In the process of forming a Canvas animation, the embodiment first clears the entire Canvas canvas, recirculates the entire trajectory, acquires each barrage object in the trajectory every time, calculates the position of the current frame and then draws the barrage object. Each barrage object is continuously erased-drawn in the rendering thread to form a barrage animation.

4 is a flowchart of a method for rendering a barrage according to another embodiment of the present invention. First, a browser data acquisition thread, a barrage style calculation thread, and a barrage object generation thread may be configured in a browser supporting HTML5. , rendering threads and barrage scheduling threads. The barrage data acquisition thread obtains the original data of the barrage from the bomb server, and stores the original data of the barrage in the barrage pool. The barrage style calculation thread extracts the original data of the barrage from the barrage pool, obtains the barrage feature data of each barrage raw data, and obtains each piece according to the correspondence between the barrage feature data and the preset barrage style. The preset barrage style corresponding to the original data of the barrage. According to the corresponding preset barrage style, each barrage raw data is generated to generate a corresponding barrage object, and the generated barrage object is stored in the barrage queue. The rendering thread detects whether there is an idle trajectory in the canvas of the rendered canvas. If there is an idle trajectory, the barrage object is extracted from the barrage queue and inserted into the idle trajectory, and all the barrage objects in all the trajectories are rendered to the rendering canvas Canvas according to a certain frequency. in. The barrage scheduling thread is a unified scheduling thread of each thread, and performs unified scheduling coordination for each other thread.

In this embodiment, the original data of the barrage is generated to generate a corresponding barrage object, and the barrage object is inserted into the trajectory of the rendering canvas Canvas, and all the barrage objects in all the trajectories are rendered together, using the Canvas function of HTML5, each The barrage object is a picture, so when forming the barrage animation, you only need to change the position corresponding to the barrage object image. Compared to the existing DOM-based rendering, you need to constantly change the barrage text in each DOM element. Position calculation and change can increase the efficiency of the barrage drawing without occupying too much memory, which makes the barrage animation more smooth in the browser and increases the user experience.

Referring to FIG. 5, a barrage rendering apparatus according to an embodiment of the present invention includes an acquisition module 21, an object generation module 22, and a rendering module 23.

The obtaining module 21 is configured to acquire the original data of the barrage;

The object generating module 22 is configured to generate a corresponding barrage object according to a corresponding preset barrage pattern by using each of the barrage raw data;

The rendering module 23 is configured to insert the barrage object into the idle trajectory when there is an idle trajectory in the rendering canvas Canvas, and render all the barrage objects in all the trajectories.

The obtaining module 21 is specifically configured to:

Through the message monitoring mechanism, the raw data of the barrage transmitted from the barrage server is obtained, and the obtained raw data of the barrage is stored in the barrage pool, wherein the barrage pool uses a JavaScript array to store the original data of the barrage.

Referring to FIG. 6, the barrage rendering apparatus provided in this embodiment further includes a correspondence establishing module 24 and a judging module 25.

The barrage original data carries the barrage feature data, and the correspondence relationship establishing module 24 is configured to pre-establish a correspondence between the barrage feature data and the preset barrage style;

The obtaining module 21 is further configured to:

Obtaining the barrage characteristic data of each barrage raw data when acquiring a plurality of barrage raw data from the barrage pool;

The object generation module 22 is specifically configured to:

According to the barrage characteristic data of each barrage raw data and the corresponding relationship between the barrage feature data and the preset barrage style, the preset barrage style corresponding to each barrage raw data is obtained; according to the preset barrage style, Each barrage raw data generates a corresponding barrage object, and the generated barrage object is stored in the barrage queue.

The judging module 25 is configured to determine whether there is an idle trajectory in the rendered canvas Canvas; specifically:

Configuring and starting a rendering thread, looping the trajectory in the rendering thread to obtain the position of the last barrage object in the trajectory;

When the position of the last barrage object in the trajectory is greater than the preset distance from the edge of the barrage area, it is determined that there is an idle trajectory in the rendered canvas Canvas, otherwise, there is no idle trajectory.

Referring to FIG. 7, an electronic device according to the present invention includes a processor 701, a memory 702, and a bus 703. The processor 701 and the memory 702 complete communication with each other through the bus 703. .

The processor 701 is configured to invoke the program instructions in the memory 702 to perform the methods provided in the foregoing method embodiments, for example, including: acquiring the original data of the barrage; and pressing each of the original data of the barrage according to the corresponding preset The barrage style generates a corresponding barrage object; when there is an idle trajectory in the rendered canvas Canvas, the barrage object is inserted into the idle trajectory, and all the barrage objects in all the trajectories are rendered.

The invention discloses a computer program product comprising a computer program stored on a non-transitory computer readable storage medium, the computer program comprising program instructions, the computer being capable of executing the corresponding implementation when the program instructions are executed by the computer The intelligent filtering control layout method provided by the example includes, for example, acquiring the original data of the barrage; generating the corresponding barrage object according to the corresponding preset barrage pattern of each barrage raw data; when there is an idle ballistic track in the rendered canvas Canvas The barrage object is inserted into the free trajectory and all of the barrage objects in all trajectories are rendered.

The present invention also provides a non-transitory computer readable storage medium storing computer instructions for causing a computer to execute the smart layout control method provided by the corresponding embodiment, for example, including Obtaining the original data of the barrage; generating the corresponding barrage object according to the corresponding preset barrage pattern of each barrage raw data; inserting the barrage object into the idle when there is an idle ballistic in the rendering canvas Canvas In the trajectory, render all the barrage objects in all trajectories.

A person skilled in the art can understand that all or part of the steps of implementing the above method embodiments may be completed by using hardware related to the program instructions. The foregoing program may be stored in a computer readable storage medium, and the program is executed when executed. The foregoing steps include the steps of the foregoing method embodiments; and the foregoing storage medium includes: a medium that can store program codes, such as a ROM, a RAM, a magnetic disk, or an optical disk.

The embodiments described above are merely illustrative, wherein the units illustrated as separate components may or may not be physically separate, and the components displayed as units may or may not be physical units, ie may be located in one place. Or it can be distributed to multiple network elements. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of the embodiment. Those of ordinary skill in the art can understand and implement without deliberate labor.

Through the description of the above embodiments, those skilled in the art can clearly understand that the various embodiments can be implemented by means of software plus a necessary general hardware platform, and of course, by hardware. Based on such understanding, the above-described technical solutions may be embodied in the form of software products in essence or in the form of software products, which may be stored in a computer readable storage medium such as ROM/RAM, magnetic Discs, optical discs, etc., include instructions for causing a computer device (which may be a personal computer, server, or network device, etc.) to perform various embodiments of the various embodiments or embodiments.

The invention provides a barrage rendering method and device, which generates a corresponding barrage object from the original data of the barrage, and inserts the barrage object into the trajectory of the rendering canvas Canvas, and renders all the barrage objects in the trajectory together. With the Canvas function of HTML5, each barrage object is a picture, so when forming a barrage animation, you only need to change the position corresponding to the barrage object image, compared to the existing DOM-based rendering. The barrage text in a DOM element is continuously calculated and changed in position, which can increase the efficiency of the barrage drawing without occupying too much memory, so that the barrage animation is displayed more smoothly on the browser, increasing the user experience. .

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 modifications, equivalent substitutions, improvements, etc. made within the spirit and scope of the present invention are intended to be included within the scope of the present invention.

Claims

A barrage rendering method, comprising:

S1, obtaining the original data of the barrage;

S2, generating the corresponding barrage object according to the corresponding preset barrage pattern of each barrage raw data;

S3. When there is an idle trajectory in the rendering canvas Canvas, the barrage object is inserted into the idle trajectory, and all the barrage objects in all the trajectories are rendered.
The method of rendering a barrage according to claim 1, wherein the step S1 further comprises:

Through the message monitoring mechanism, the original data of the barrage transmitted from the barrage server is obtained, and the obtained raw data of the barrage is stored in the barrage pool.
The barrage rendering method according to claim 2, wherein the barrage pool uses a JavaScript array to store the original data of the barrage.
The barrage rendering method according to claim 2, wherein the original data of the barrage carries corresponding barrage feature data, and the correspondence between the barrage feature data and the preset barrage pattern is established in advance;

The step S2 further includes:

S21, obtaining a plurality of original data of the barrage from the barrage pool, and acquiring the barrage characteristic data corresponding to the original data of each barrage;

S22, according to the barrage characteristic data of each barrary raw data and the corresponding relationship between the barrage feature data and the preset barrage style, obtaining a preset barrage pattern corresponding to each barrage raw data;

S23. Generate corresponding barrage objects for each barrage raw data according to the corresponding preset barrage style, and store the generated barrage objects in the barrage queue.
The method of rendering a barrage according to claim 4, wherein the step S21 further comprises:

A predetermined number of barrage raw data is extracted from the barrage pool at a fixed frequency.
The barrage rendering method according to claim 5, wherein in step S3, it is determined whether there is an idle trajectory in the rendered canvas Canvas by:

Configuring and starting a rendering thread, looping the rendering of the trajectory in the canvas Canvas in the rendering thread to obtain the position of the last barrage object in each trajectory;

When the position of the last barrage object in the trajectory is greater than the preset distance from the edge of the barrage area, it is confirmed that there is an idle trajectory in the rendered canvas Canvas, otherwise, there is no idle trajectory.
The method of rendering a barrage according to claim 6, wherein the step S3 further comprises:

Get the height of the canvas Canvas and the preset trajectory height, calculate the number of trajectories in the canvas of the rendered canvas, and identify all the trajectories;

When the barrage object is inserted into the idle trajectory in the step S3, the trajectory of the barrage object is given an identifier.
A barrage rendering device, comprising:

Obtaining a module for acquiring the original data of the barrage;

An object generating module, configured to generate a corresponding barrage object according to a corresponding preset barrage pattern of each barrary raw data;

A rendering module is configured to insert a barrage object into the idle trajectory when there is an idle trajectory in the rendering canvas Canvas, and render all the barrage objects in all the trajectories.
The barrage rendering device of claim 8, wherein the barrage raw data carries the barrage feature data, and further includes:

Corresponding relationship establishing module, configured to establish a correspondence between the salicient feature data and the preset barrage style;

The obtaining module is further configured to:

Obtaining the barrage characteristic data of each barrage raw data when acquiring a plurality of barrage raw data from the barrage pool;

The object generation module is specifically configured to:

According to the barrage characteristic data of each barrage raw data and the corresponding relationship between the barrage feature data and the preset barrage style, the preset barrage style corresponding to each barrage raw data is obtained; and according to the preset barrage style, Each of the barrage raw data is generated to generate a corresponding barrage object, and the generated barrage object is stored in the barrage queue.
The barrage rendering device of claim 9 further comprising:

The judging module is configured to determine whether there is an idle trajectory in the rendered canvas Canvas.
An electronic device, comprising:

At least one processor, at least one memory, a communication interface, and a bus;

Wherein the processor, the memory, and the communication interface complete communication with each other through the bus;

The communication interface is used for information transmission between the device and a communication device of the toy control system;

The memory stores program instructions executable by the processor, the processor invoking the program instructions to perform the barrage rendering method of any of claims 1-7.
A computer program product, comprising: a computer program stored on a non-transitory computer readable storage medium, the computer program comprising program instructions, when the program instructions are executed by a computer, The computer instructions cause the computer to perform the barrage rendering method of any of claims 1-7.
A non-transitory computer readable storage medium, wherein the non-transitory computer readable storage medium stores computer instructions, the computer instructions causing the computer to perform the method of any of claims 1-7 Barrage rendering method.