WO2018161709A1 - 一种弹幕渲染方法及装置 - Google Patents

一种弹幕渲染方法及装置 Download PDF

Info

Publication number
WO2018161709A1
WO2018161709A1 PCT/CN2017/120146 CN2017120146W WO2018161709A1 WO 2018161709 A1 WO2018161709 A1 WO 2018161709A1 CN 2017120146 W CN2017120146 W CN 2017120146W WO 2018161709 A1 WO2018161709 A1 WO 2018161709A1
Authority
WO
WIPO (PCT)
Prior art keywords
barrage
rendering
canvas
trajectory
data
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.)
Ceased
Application number
PCT/CN2017/120146
Other languages
English (en)
French (fr)
Inventor
姚尧
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Wuhan Douyu Network Technology Co Ltd
Original Assignee
Wuhan Douyu Network Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Wuhan Douyu Network Technology Co Ltd filed Critical Wuhan Douyu Network Technology Co Ltd
Publication of WO2018161709A1 publication Critical patent/WO2018161709A1/zh
Anticipated expiration legal-status Critical
Ceased legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; 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 OR CALCULATING; 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
    • 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

Definitions

  • the present invention relates to the field of web page rendering, and more particularly to a barrage rendering method and apparatus.
  • 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.
  • 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.
  • a barrage rendering method including:
  • a barrage rendering apparatus comprising:
  • 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.
  • an embodiment of the present application further provides an electronic device, including:
  • At least one processor 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:
  • the 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.
  • 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:
  • the 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.
  • 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.
  • FIG. 1 is a flow chart of a method for rendering a barrage according to an embodiment of the present invention
  • FIG. 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.
  • 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.
  • a barrage rendering method 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.
  • HTML5 is the core language of the Internet
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • a rendering thread configures 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.
  • 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. .
  • 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.
  • 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.
  • 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.
  • 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.
  • a barrage rendering apparatus 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:
  • 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.
  • 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
  • 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:
  • the object generation module 22 is specifically configured to:
  • 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:
  • an electronic device 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.
  • 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 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.
  • 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. .

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

一种弹幕渲染方法及装置，所述的方法包括：获取弹幕原始数据（S1）；将每一条弹幕原始数据按照相应的预设样式生成对应的弹幕对象（S2）；当渲染画布Canvas中存在空闲弹道时，将弹幕对象插入到所述空闲弹道中，并对当前所有弹道中的所有弹幕对象进行渲染（S3）。该方法利用HTML5的Canvas功能，使得弹幕不在依赖于Flash，增加了弹幕绘制的效率，使弹幕动画在浏览器上展示更流畅，增加了用户体验度。

Description

一种弹幕渲染方法及装置
交叉引用
本申请引用于2017年3月6号提交的专利名称为“一种弹幕渲染方法及装置”的第201710128398.0号中国专利申请，其通过引用被全部并入本申请。
技术领域
本发明涉及网页渲染领域，更具体地，涉及一种弹幕渲染方法及装置。
背景技术
在网页渲染领域，基于DOM的弹幕渲染技术是目前大部分弹幕应用都在采用的技术，其原理是将弹幕文字封装到一个HTML DOM元素中，再利用JavaScript将装载弹幕文字的DOM元素放入到HTML中进行渲染，然后对装载弹幕文字的DOM元素不断进行位置计算以及改变从而形成移动动画。
采用DOM的弹幕渲染技术，由于需要对所有的DOM元素的位置计算计算和改变，在弹幕文字量非常大的情况下会使系统CPU运算频率过高，内存占用过大，而且弹幕的动画会有卡顿现象，尤其在移动端上表现的更为明显。
发明内容
本发明提供一种克服上述问题或者至少部分地解决上述问题的弹幕渲染方法及装置，解决了基于DOM渲染的效率低下、占用内存过大的问题。
根据本发明的一个方面，提供了一种弹幕渲染方法，包括：
S1，获取弹幕原始数据；
S2，将每一条弹幕原始数据按照相应的预设弹幕样式生成对应的弹幕对象；
S3，当渲染画布Canvas中存在空闲弹道时，将所述弹幕对象插入到所述空闲弹道中，并对所有弹道中的所有弹幕对象进行渲染。
根据本发明的另一个方面，还提供了一种弹幕渲染装置，包括：
获取模块，用于获取弹幕原始数据；
对象生成模块，用于将每一条弹幕原始数据按照相应的预设弹幕样式生成对应的弹幕对象；
渲染模块，用于当渲染画布Canvas中存在空闲弹道时，将弹幕对象插入到所述空闲弹道中，并对所有弹道中的所有弹幕对象进行渲染。
第三方面，本申请的实施例还提供了一种电子设备，包括：
至少一个处理器；以及
与所述处理器通信连接的至少一个存储器，其中：
所述存储器存储有可被所述处理器执行的程序指令，所述处理器调用所述程序指令能够执行如下方法：
获取弹幕原始数据；
将每一条弹幕原始数据按照相应的预设弹幕样式生成对应的弹幕对象；
当渲染画布Canvas中存在空闲弹道时，将所述弹幕对象插入到所述空闲弹道中，并对所有弹道中的所有弹幕对象进行渲染。
第四方面，本申请的实施例还提供了一种计算机程序，包括程序代码，所述程序代码用于执行如下操作：
所述处理器用于调用所述存储器中的逻辑指令，以执行如下方法：
获取弹幕原始数据；
将每一条弹幕原始数据按照相应的预设弹幕样式生成对应的弹幕对象；
当渲染画布Canvas中存在空闲弹道时，将所述弹幕对象插入到所述空闲弹道中，并对所有弹道中的所有弹幕对象进行渲染。
第五方面，本申请的实施例还提供了一种存储介质，用于存储如前所述的计算机程序。
本申请实施例提供的一种弹幕渲染方法及装置，将弹幕原始数据生成对应的弹幕对象，并将弹幕对象插入到渲染画布Canvas的弹道中，对弹道中 的所有弹幕对象一起进行渲染，利用HTML5的Canvas功能，每一个弹幕对象是一幅图片，因此在形成弹幕动画时，只需要改变弹幕对象图片对应的位置即可，相比现有的基于DOM的渲染需要对每一个DOM元素中的弹幕文字不断地进行位置计算以及改变，可增加弹幕绘制的效率，无需占用过多的内存，使得弹幕动画在浏览器上展示得更为流畅，增加了用户体验度。
附图说明
图1为本发明一个实施例的弹幕渲染方法流程图；
图2为弹幕对象生成过程流程图；
图3为弹幕对象渲染过程流程图；
图4为弹幕渲染方法的整个工作流程图；
图5为本发明另一个实施例的弹幕渲染装置连接框图；
图6为弹幕渲染装置的总体连接框图；
图7为本发明一个实施例的电子设备连接框图。
具体实施方式
下面结合附图和实施例，对本发明的具体实施方式作进一步详细描述。以下实施例用于说明本发明，但不用来限制本发明的范围。
参见图1，为本发明一个实施例的弹幕渲染方法，主要用于网页渲染、动画制作领域，其中，HTML5是互联网的核心语言，HTML的第5次重大修改，用于提供网页上显示的内容，现在大部分现代浏览器都支持HTML5。对比HTML4而言，HTML5具有原生视音频支持、原生动画自持、本地数据库和socket网络套接字等新特性，如今已经有很多网站都将技术转移到了HTML5。
Canvas表示一个HTML5画布元素，能支持脚本化浏览器端绘图操作。Canvas支持互动，能够响应用户的操作，比如鼠标点击、键盘按键等，还能够使用Canvas制作动画，目前很多网页游戏都是基于Canvas制作的。Canvas还能绘制2D和3D画面，在浏览器支持方面，只要是支持HTML5的浏览器都会支持Canvas，并且使用Canvas技术制作的游戏或动画不需要安装任意浏 览器插件。
本实施例提供的弹幕渲染方法主要包括：S1，获取弹幕原始数据；S2，将每一条弹幕原始数据按照相应的预设弹幕样式生成对应的弹幕对象；S3，当渲染画布Canvas中存在空闲弹道时，将弹幕对象插入到所述空闲弹道中，并对所有弹道中的所有弹幕对象进行渲染。
本实施例将弹幕原始数据生成对应的弹幕对象，并将弹幕对象插入到渲染画布Canvas的弹道中，对弹道中的所有弹幕对象一起进行渲染，利用HTML5的Canvas功能，每一个弹幕对象是一幅图片，因此在形成弹幕动画时，只需要改变弹幕对象图片对应的位置即可，相比现有的基于DOM的渲染需要对每一个DOM元素中的弹幕文字不断地进行位置计算以及改变，可增加弹幕绘制的效率，无需占用过多的内存，使得弹幕动画在浏览器上展示得更为流畅，增加了用户体验度。
在本发明的一个实施例中，上述步骤S1获取弹幕原始数据的过程为，在浏览器中可以设计一个弹幕数据获取线程，通常，弹幕数据获取线程采用WebSocket封装，采用WebSocket技术与弹幕服务器进行交互来获取弹幕服务器上的弹幕原始数据。具体的，创建一个WebSocket对象，通过消息监听机制，获取从弹幕服务器传递的弹幕原始数据，并将获取的弹幕原始数据存放到弹幕池中。其中，弹幕服务器中的弹幕原始数据是具有顺序的，弹幕数据获取线程将获取的弹幕原始数据按照原始顺序放入弹幕池中。其中，弹幕池采用JavaScript数组存放弹幕原始数据，可以向JavaScript数组中增加弹幕原始数据，也可以从JavaScript数组中提取弹幕原始数据，并将提取后的弹幕原始数据进行擦除。
在本发明的另一个实施例中，需要说明的是，弹幕原始数据中携带有弹幕特征数据，比如弹幕发送者等级、节日特征、礼物特征(是否火箭、飞机、跑车等)以及发送者指定的弹幕字体等。在将弹幕原始数据生成弹幕对象时，需要按照某一种样式进行生成，故需要知道弹幕原始数据对应的预设弹幕样式。因此，在本实施例中建立弹幕特征数据与预设弹幕样式之间的对应关系，比如，建立弹幕原始数据的发送者等级与预设弹幕样式之间的对应关系。
在上述步骤S2将每一条弹幕原始数据按照相应的预设弹幕样式生成对应的弹幕对象的过程中，按照固定频率从弹幕池中获取预定数量的弹幕原始数据，即定时从弹幕池中提取弹幕原始数据。例如，本实施例中，可以开启一线程以每秒60次的频率从弹幕池中获取弹幕原始数据。避免由于每次提取的弹幕原始数据量过大影响提取效率，每一个只从弹幕池中提取预定数量的弹幕原始数据。
参见图2，从弹幕池中提取了多条弹幕原始数据后，获取每一条弹幕原始数据的弹幕特征数据，并根据事先建立的弹幕特征数据与预设弹幕样式之间的对应关系，得到每一条弹幕原始数据对应的预设弹幕样式。按照相应的预设弹幕样式先将每一条弹幕原始数据生成对应的弹幕图像，然后将弹幕图像以及弹幕相关数据，比如弹幕图像宽度、弹幕图像移动速度等，封装成弹幕对象，并将生成的弹幕对象存放于弹幕队列中。
其中，弹幕对象是单条弹幕画面的封装，弹幕对象的属性信息包括弹幕内容和弹幕样式，弹幕样式主要包括弹幕字体、弹幕颜色、弹幕字间距、弹幕宽度、弹幕背景，弹幕对象还包含弹幕移动速度和弹幕当前所处位置等属性信息。
在本发明的一个实施例中，步骤S3中进行弹幕对象的渲染时，首先，绘制一渲染画布Canvas，获取该渲染画布Canvas的高度，根据预设的弹道的高度，计算渲染画布Canvas中的弹道的数量，用一数组来存储整个渲染画布Canvas中的所有弹道，对所有的弹道进行标识，本实施例中，可以对所有的弹道进行编号。
随后，配置一渲染线程，在渲染线程中循环渲染画布Canvas中的弹道，获取每一个弹道中最后一个弹幕对象的位置；当弹道中最后一个弹幕对象的位置与弹幕区域最边缘的距离大于预设距离时，确定渲染画布Canvas中存在空闲弹道，否则，不存在空闲弹道。
在本实施例中，使用canvas.width–danmaku.getX()-danmaku.getWidth()>100判断来寻找空闲弹道，预设距离值100是指弹道中最后一个弹幕对象的X轴坐标离弹幕区域最右边的距离。参见图3，当满 足该条件时，表明渲染画布Canvas中存在空闲弹道，此时，从弹幕队列中提取出弹幕对象，插入空闲弹道中，并对该弹幕对象所处的弹道给予编号，即给弹幕对象设置当前弹道编号。
按照固定频率将所有弹道中的所有弹幕对象渲染到渲染画布中，即对所有弹道中的所有的弹幕对象进行渲染。具体实现时，可以按照固定频率检测每一个弹道中是否存在弹幕对象，如果存在，则对弹道中的所有弹幕对象进行渲染。Canvas弹幕绘制原理为：Canvas可以理解为一个画板，无论这个画板的内容是什么，它所生产出来的都会是一幅图片。可以将Canvas理解为一个简单的Photoshop，无论是一根线条还是一段文字或者是一张图片，最后得到的永远是一幅图片。
当多个图片快速翻动时就形成了动画，所以在Canvas上实现动画，即是一个不断擦除和不断重绘的过程。把Canvas画板里的内容擦除掉，然后对原内容的位置做一些改变，再重新绘制出来，快速循环这个过程即可以形成动画，动画中每帧的内容就是在Canvas中进行了重绘的内容。
本实施例在形成Canvas动画的过程中，先清除整个Canvas画布，再循环整个弹道，每次循环时获取弹道中的每个弹幕对象，计算弹幕对象再当前帧所处的位置，并绘制每一个弹幕对象，在渲染线程中不断擦除-绘制就形成了弹幕动画。
参见图4，为本发明的另一个实施例的弹幕渲染方法的整个流程图，首先，在支持HTML5的浏览器中可以配置弹幕数据获取线程、弹幕样式计算线程、弹幕对象生成线程、渲染线程和弹幕调度线程等。弹幕数据获取线程从弹服务器中获取到弹幕原始数据，并将弹幕原始数据存储于弹幕池中。弹幕样式计算线程从弹幕池中提取出弹幕原始数据，获取每一条弹幕原始数据的弹幕特征数据，根据弹幕特征数据与预设弹幕样式之间的对应关系，得到每一条弹幕原始数据相应的预设弹幕样式。根据相应的预设弹幕样式，将每一条弹幕原始数据生成对应的弹幕对象，并将生成的弹幕对象存储于弹幕队列中。渲染线程检测渲染画布Canvas中是否存在空闲弹道，若存在空闲弹道，从弹幕队列中提取弹幕对象插入空闲弹道中，并按照一定的频率将所有弹道 中的所有弹幕对象渲染到渲染画布Canvas中。其中弹幕调度线程是每个线程的统筹地调度线程，对其它的每个线程进行统一调度协调。
本实施例将弹幕原始数据生成对应的弹幕对象，并将弹幕对象插入到渲染画布Canvas的弹道中，对所有弹道中的所有弹幕对象一起进行渲染，利用HTML5的Canvas功能，每一个弹幕对象是一幅图片，因此在形成弹幕动画时，只需要改变弹幕对象图片对应的位置即可，相比现有的基于DOM的渲染需要对每一个DOM元素中的弹幕文字不断地进行位置计算以及改变，可增加弹幕绘制的效率，无需占用过多的内存，使得弹幕动画在浏览器上展示得更为流畅，增加了用户体验度。
参见图5，为本发明一个实施例的弹幕渲染装置，包括获取模块21、对象生成模块22和渲染模块23。
获取模块21，用于获取弹幕原始数据；
对象生成模块22，用于将每一条弹幕原始数据按照相应的预设弹幕样式生成对应的弹幕对象；
渲染模块23，用于当渲染画布Canvas中存在空闲弹道时，将所述弹幕对象插入到所述空闲弹道中，并对所有弹道中的所有弹幕对象进行渲染。
其中，获取模块21具体用于：
通过消息监听机制，获取从弹幕服务器传递的弹幕原始数据，并将获取的弹幕原始数据存放入弹幕池中，其中弹幕池采用JavaScript数组存放弹幕原始数据。
参见图6，本实施例提供的弹幕渲染装置中还包括对应关系建立模块24和判断模块25。
其中，弹幕原始数据中携带有弹幕特征数据，对应关系建立模块24，用于预先建立弹幕特征数据与预设弹幕样式之间的对应关系；
所述获取模块21还用于：
从弹幕池中获取多条弹幕原始数据时，获取每条弹幕原始数据的弹幕特征数据；
所述对象生成模块22具体用于：
根据每条弹幕原始数据的弹幕特征数据以及弹幕特征数据和预设弹幕样式的对应关系，得到每条弹幕原始数据对应的预设弹幕样式；根据预设弹幕样式，将每一条弹幕原始数据生成对应的弹幕对象，并将生成的弹幕对象存放于弹幕队列中。
判断模块25，用于判断渲染画布Canvas中是否存在空闲弹道；具体包括：
配置并启动一渲染线程，在渲染线程中循环弹道，获取弹道中最后一个弹幕对象的位置；
当弹道中最后一个弹幕对象的位置与弹幕区域最边缘的距离大于预设距离时，确定渲染画布Canvas中存在空闲弹道，否则，不存在空闲弹道。
参见图7，为本发明一种电子设备，包括：处理器(processor)701、存储器(memory)702和总线703；其中，所述处理器701和存储器702通过所述总线703完成相互间的通信。
所述处理器701用于调用所述存储器702中的程序指令，以执行上述各方法实施例所提供的方法，例如包括：获取弹幕原始数据；将每一条弹幕原始数据按照相应的预设弹幕样式生成对应的弹幕对象；当渲染画布Canvas中存在空闲弹道时，将所述弹幕对象插入到所述空闲弹道中，并对所有弹道中的所有弹幕对象进行渲染。
本发明公开一种计算机程序产品，该计算机程序产品包括存储在非暂态计算机可读存储介质上的计算机程序，该计算机程序包括程序指令，当程序指令被计算机执行时，计算机能够执行上述对应实施例所提供的智能过滤的控件布局方法，例如包括：获取弹幕原始数据；将每一条弹幕原始数据按照相应的预设弹幕样式生成对应的弹幕对象；当渲染画布Canvas中存在空闲弹道时，将所述弹幕对象插入到所述空闲弹道中，并对所有弹道中的所有弹幕对象进行渲染。
本发明还提供一种非暂态计算机可读存储介质，该非暂态计算机可读存储介质存储计算机指令，该计算机指令使计算机执行上述对应实施例所提供的智能过滤的控件布局方法，例如包括：获取弹幕原始数据；将每一条弹幕 原始数据按照相应的预设弹幕样式生成对应的弹幕对象；当渲染画布Canvas中存在空闲弹道时，将所述弹幕对象插入到所述空闲弹道中，并对所有弹道中的所有弹幕对象进行渲染。
本领域普通技术人员可以理解：实现上述方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成，前述的程序可以存储于一计算机可读取存储介质中，该程序在执行时，执行包括上述方法实施例的步骤；而前述的存储介质包括：ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。
以上所描述的实施例仅仅是示意性的，其中作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分方法。
本发明提供的一种弹幕渲染方法及装置，将弹幕原始数据生成对应的弹幕对象，并将弹幕对象插入到渲染画布Canvas的弹道中，对弹道中的所有弹幕对象一起进行渲染，利用HTML5的Canvas功能，每一个弹幕对象是一幅图片，因此在形成弹幕动画时，只需要改变弹幕对象图片对应的位置即可，相比现有的基于DOM的渲染需要对每一个DOM元素中的弹幕文字不断地进行位置计算以及改变，可增加弹幕绘制的效率，无需占用过多的内存，使得弹幕动画在浏览器上展示得更为流畅，增加了用户体验度。
最后，本申请的方法仅为较佳的实施方案，并非用于限定本发明的保护 范围。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (13)

  1. 一种弹幕渲染方法，其特征在于，包括：
    S1，获取弹幕原始数据；
    S2，将每一条弹幕原始数据按照相应的预设弹幕样式生成对应的弹幕对象；
    S3，当渲染画布Canvas中存在空闲弹道时，将所述弹幕对象插入到所述空闲弹道中，并对所有弹道中的所有弹幕对象进行渲染。
  2. 如权利要求1所述的弹幕渲染方法，其特征在于，所述步骤S1进一步包括：
    通过消息监听机制，获取从弹幕服务器传递的弹幕原始数据，并将获取的弹幕原始数据存放入弹幕池中。
  3. 如权利要求2所述的弹幕渲染方法，其特征在于，所述弹幕池采用JavaScript数组存放弹幕原始数据。
  4. 如权利要求2所述的弹幕渲染方法，其特征在于，所述弹幕原始数据中携带有对应的弹幕特征数据，事先建立弹幕特征数据与预设弹幕样式之间的对应关系；
    所述步骤S2进一步包括：
    S21,从弹幕池中获取多条弹幕原始数据，并获取每条弹幕原始数据对应的弹幕特征数据；
    S22，根据每条弹幕原始数据的弹幕特征数据以及弹幕特征数据和预设弹幕样式的对应关系，得到每条弹幕原始数据相应的预设弹幕样式；
    S23，按照相应的预设弹幕样式，将每一条弹幕原始数据生成对应的弹幕对象，并将生成的所述弹幕对象存放于弹幕队列中。
  5. 如权利要求4所述的弹幕渲染方法，其特征在于，所述步骤S21进一步包括：
    按照固定频率从所述弹幕池中提取预定数量的弹幕原始数据。
  6. 如权利要求5所述的弹幕渲染方法，其特征在于，所述步骤S3中通 过如下方式判断渲染画布Canvas中是否存在空闲弹道：
    配置并启动一渲染线程，在渲染线程中循环渲染画布Canvas中的弹道，获取每一个弹道中最后一个弹幕对象的位置；
    当弹道中最后一个弹幕对象的位置与弹幕区域最边缘的距离大于预设距离时，确认渲染画布Canvas中存在空闲弹道，否则，不存在空闲弹道。
  7. 如权利要求6所述的弹幕渲染方法，其特征在于，所述步骤S3之前还包括：
    获取渲染画布Canvas的高度以及预设的弹道高度，计算渲染画布Canvas中弹道的数量，并对所有的弹道进行标识；
    所述步骤S3中将弹幕对象插入到所述空闲弹道中时，对所述弹幕对象所处的弹道给予标识。
  8. 一种弹幕渲染装置，其特征在于，包括：
    获取模块，用于获取弹幕原始数据；
    对象生成模块，用于将每一条弹幕原始数据按照相应的预设弹幕样式生成对应的弹幕对象；
    渲染模块，用于当渲染画布Canvas中存在空闲弹道时，将弹幕对象插入到所述空闲弹道中，并对所有弹道中的所有弹幕对象进行渲染。
  9. 如权利要求8所述的弹幕渲染装置，其特征在于，所述弹幕原始数据中携带有弹幕特征数据，还包括：
    对应关系建立模块，用于建立弹幕特征数据与预设弹幕样式之间的对应关系；
    所述获取模块还用于：
    从弹幕池中获取多条弹幕原始数据时，获取每条弹幕原始数据的弹幕特征数据；
    所述对象生成模块具体用于：
    根据每条弹幕原始数据的弹幕特征数据以及弹幕特征数据和预设弹幕样式的对应关系，得到每条弹幕原始数据对应的预设弹幕样式；以及根据预设弹幕样式，将每一条弹幕原始数据生成对应的弹幕对象，并将生成的所述 弹幕对象存放于弹幕队列中。
  10. 如权利要求9所述的弹幕渲染装置，其特征在于，还包括：
    判断模块，用于判断渲染画布Canvas中是否存在空闲弹道。
  11. 一种电子设备，其特征在于，包括：
    至少一个处理器、至少一个存储器、通信接口和总线；
    其中，所述处理器、存储器、通信接口通过所述总线完成相互间的通信；
    所述通信接口用于该设备与玩具控制系统的通信设备之间的信息传输；
    所述存储器存储有可被所述处理器执行的程序指令，所述处理器调用所述程序指令能够执行如权利要求1-7任一项所述的弹幕渲染方法。
  12. 一种计算机程序产品，其特征在于，所述计算机程序产品包括存储在非暂态计算机可读存储介质上的计算机程序，所述计算机程序包括程序指令，当所述程序指令被计算机执行时，所述计算机指令使所述计算机执行如权利要求1-7任一项所述的弹幕渲染方法。
  13. 一种非暂态计算机可读存储介质，其特征在于，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令使所述计算机执行如权利要求1-7任一项所述的弹幕渲染方法。
PCT/CN2017/120146 2017-03-06 2017-12-29 一种弹幕渲染方法及装置 Ceased WO2018161709A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201710128398.0A CN107092643B (zh) 2017-03-06 2017-03-06 一种弹幕渲染方法及装置
CN201710128398.0 2017-03-06

Publications (1)

Publication Number Publication Date
WO2018161709A1 true WO2018161709A1 (zh) 2018-09-13

Family

ID=59646173

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2017/120146 Ceased WO2018161709A1 (zh) 2017-03-06 2017-12-29 一种弹幕渲染方法及装置

Country Status (2)

Country Link
CN (1) CN107092643B (zh)
WO (1) WO2018161709A1 (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109525885A (zh) * 2018-12-13 2019-03-26 广州华多网络科技有限公司 信息处理方法、装置、电子设备及计算机可读取可读介质
CN112118474A (zh) * 2019-06-19 2020-12-22 上海哔哩哔哩科技有限公司 视频弹幕的显示方法、系统、计算机设备及可读存储介质

Families Citing this family (20)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107092643B (zh) * 2017-03-06 2020-10-16 武汉斗鱼网络科技有限公司 一种弹幕渲染方法及装置
CN107484036B (zh) * 2017-09-07 2018-09-21 深圳市迅雷网络技术有限公司 一种弹幕显示方法和装置
CN108600852B (zh) * 2018-04-28 2020-12-15 北京酷我科技有限公司 一种弹幕效果的实现方法
CN108848398B (zh) * 2018-06-21 2021-01-01 武汉斗鱼网络科技有限公司 一种本地弹幕消息的分发方法、装置、终端和存储介质
CN109640154B (zh) * 2018-12-14 2019-09-10 苏州好玩友网络科技有限公司 网页弹幕显示方法、装置、设备及存储介质
CN109714627B (zh) * 2018-12-29 2021-06-18 广州方硅信息技术有限公司 一种评论信息的渲染方法、装置及设备
CN110045958B (zh) * 2019-04-17 2021-09-28 腾讯科技（深圳）有限公司 纹理数据生成方法、装置、存储介质及设备
CN110392293B (zh) * 2019-06-21 2023-04-07 平安普惠企业管理有限公司 基于canvas的弹幕控制方法、装置、设备及存储介质
CN112752131B (zh) * 2019-10-30 2023-02-10 腾讯科技（深圳）有限公司 弹幕信息的显示方法和装置、存储介质及电子装置
CN111031400B (zh) * 2019-11-25 2021-04-27 上海哔哩哔哩科技有限公司 弹幕呈现方法和系统
CN111031376B (zh) * 2019-11-25 2020-09-25 上海哔哩哔哩科技有限公司 基于微信小程序的弹幕处理方法和系统
CN111083551B (zh) * 2019-12-17 2022-01-11 腾讯科技（深圳）有限公司 弹幕渲染方法、装置、计算机可读存储介质和计算机设备
CN111131910B (zh) * 2020-01-02 2022-04-12 广州虎牙科技有限公司 弹幕实现方法、装置、电子设备和可读存储介质
CN111796825B (zh) * 2020-06-30 2024-02-09 北京字节跳动网络技术有限公司 一种弹幕的绘制方法、装置、设备和存储介质
CN114938474B (zh) * 2021-01-11 2024-05-28 花瓣云科技有限公司 一种弹幕处理方法及电子设备
CN112799578B (zh) * 2021-01-26 2022-06-17 挂号网（杭州）科技有限公司 键盘绘制方法、装置、电子设备和存储介质
CN114942795A (zh) * 2022-04-29 2022-08-26 湖南茶旅云科技有限公司 小程序里直播礼物数据的加载方法、电子装置及存储介质
CN115297355B (zh) * 2022-08-02 2024-01-23 北京奇艺世纪科技有限公司 弹幕显示方法、生成方法、装置、电子设备及存储介质
CN119402702B (zh) * 2024-12-31 2025-04-08 成都华栖云科技有限公司 用于视频播放的基于浏览器的高效率渲染方法及其系统
CN120640019A (zh) * 2025-06-20 2025-09-12 广州蜂群互联网科技有限公司 直播间弹幕渲染方法、装置、存储介质及计算机设备

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105597321A (zh) * 2015-12-18 2016-05-25 武汉斗鱼网络科技有限公司 一种全屏游戏状态下的弹幕显示方法与系统
CN105898521A (zh) * 2016-04-12 2016-08-24 王邈 弹幕添加装置和方法
CN105939493A (zh) * 2016-03-30 2016-09-14 广州华多网络科技有限公司 一种视频弹幕的显示方法及显示装置
CN106469165A (zh) * 2015-08-18 2017-03-01 腾讯科技（深圳）有限公司 弹幕展示方法及弹幕展示装置
CN107092643A (zh) * 2017-03-06 2017-08-25 武汉斗鱼网络科技有限公司 一种弹幕渲染方法及装置

Family Cites Families (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102937968B (zh) * 2012-10-11 2015-10-14 上海交通大学 一种基于Canvas的双目3D网页实现方法及系统
CN105307030B (zh) * 2015-09-30 2018-07-17 广州酷狗计算机科技有限公司 弹幕显示方法及装置
CN106131643A (zh) * 2016-07-13 2016-11-16 乐视控股（北京）有限公司 一种弹幕处理方法、处理装置及其电子设备

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106469165A (zh) * 2015-08-18 2017-03-01 腾讯科技（深圳）有限公司 弹幕展示方法及弹幕展示装置
CN105597321A (zh) * 2015-12-18 2016-05-25 武汉斗鱼网络科技有限公司 一种全屏游戏状态下的弹幕显示方法与系统
CN105939493A (zh) * 2016-03-30 2016-09-14 广州华多网络科技有限公司 一种视频弹幕的显示方法及显示装置
CN105898521A (zh) * 2016-04-12 2016-08-24 王邈 弹幕添加装置和方法
CN107092643A (zh) * 2017-03-06 2017-08-25 武汉斗鱼网络科技有限公司 一种弹幕渲染方法及装置

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109525885A (zh) * 2018-12-13 2019-03-26 广州华多网络科技有限公司 信息处理方法、装置、电子设备及计算机可读取可读介质
CN109525885B (zh) * 2018-12-13 2021-07-20 广州华多网络科技有限公司 信息处理方法、装置、电子设备及计算机可读存储介质
CN112118474A (zh) * 2019-06-19 2020-12-22 上海哔哩哔哩科技有限公司 视频弹幕的显示方法、系统、计算机设备及可读存储介质
CN112118474B (zh) * 2019-06-19 2022-09-09 上海哔哩哔哩科技有限公司 视频弹幕的显示方法、系统、计算机设备及可读存储介质

Also Published As

Publication number Publication date
CN107092643B (zh) 2020-10-16
CN107092643A (zh) 2017-08-25

Similar Documents

Publication Publication Date Title
CN107092643B (zh) 一种弹幕渲染方法及装置
CN105373567B (zh) 页面生成方法及客户端
US10380227B2 (en) Generating layout for content presentation structures
CN109254773B (zh) 骨架页面生成方法、装置、设备和存储介质
CN106021421B (zh) 一种加速网页渲染的方法及装置
EP3832459B1 (en) Graphic drawing method and apparatus, device, and storage medium
CN107992301A (zh) 用户界面实现方法、客户端及存储介质
CN105096368B (zh) 三维对象处理方法和相关装置
KR20150091132A (ko) 페이지 렌더링 방법 및 장치
CN111915705B (zh) 图片可视化编辑方法、装置、设备和介质
CN107707965B (zh) 一种弹幕的生成方法和装置
CN112711729A (zh) 基于页面动画的渲染方法、装置、电子设备及存储介质
CN104866318A (zh) 一种多窗口中标签页的展示方法及装置
US20150370439A1 (en) Gpu-optimized scrolling systems and methods
CN104915186A (zh) 一种制作页面的方法和装置
US10558745B2 (en) Information processing apparatus and non-transitory computer readable medium
CN110209965B (zh) 用于显示信息的方法和装置
CN112307378B (zh) 网络视图展示方法
CN105739962A (zh) 基于html的表格单元格编辑器控件扩展方法和系统
CN106933439B (zh) 一种基于社交平台的图片处理方法及系统
CN119538351A (zh) 一种基于设计工具的原型动态组件实时预览方法及装置
CN106548501B (zh) 一种图像绘制方法及设备
CN117763644A (zh) 设计图自适应调整的方法和装置
CN112700555B (zh) 高可配组态化3d数据可视化实现方法、电子设备、存储介质
CN111580909B (zh) 图片生成方法、装置、设备和存储介质

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 17900137

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 17900137

Country of ref document: EP

Kind code of ref document: A1