CN110795177B - 图形绘制方法及装置 - Google Patents

图形绘制方法及装置 Download PDF

Info

Publication number
CN110795177B
CN110795177B CN201810876250.XA CN201810876250A CN110795177B CN 110795177 B CN110795177 B CN 110795177B CN 201810876250 A CN201810876250 A CN 201810876250A CN 110795177 B CN110795177 B CN 110795177B
Authority
CN
China
Prior art keywords
event
graph
coordinate
time point
canvas
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201810876250.XA
Other languages
English (en)
Other versions
CN110795177A (zh
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.)
Zhejiang Uniview Technologies Co Ltd
Original Assignee
Zhejiang Uniview Technologies 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 Zhejiang Uniview Technologies Co Ltd filed Critical Zhejiang Uniview Technologies Co Ltd
Priority to CN201810876250.XA priority Critical patent/CN110795177B/zh
Priority to EP19843865.7A priority patent/EP3832459A4/en
Priority to PCT/CN2019/076000 priority patent/WO2020024580A1/zh
Priority to US17/265,801 priority patent/US11551392B2/en
Publication of CN110795177A publication Critical patent/CN110795177A/zh
Application granted granted Critical
Publication of CN110795177B publication Critical patent/CN110795177B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/60—Editing figures and text; Combining figures or text
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/001—Texturing; Colouring; Generation of texture or colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/20—Drawing from basic elements, e.g. lines or circles
    • G06T11/203—Drawing of straight lines or curves
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T2200/00—Indexing scheme for image data processing or generation, in general
    • G06T2200/24—Indexing scheme for image data processing or generation, in general involving graphical user interfaces [GUIs]

Abstract

本发明提供一种图形绘制方法及装置，应用于终端设备，所述终端设备包括部署在视频流显示窗口上层的画布，及与所述画布匹配的至少一个基础图形的结构化特征数据。所述方法包括：实时监听画笔基于被选定的基础图形进行的目标图形绘制事件是否产生；当监听到目标图形绘制事件时，在所述视频流中每帧图像各自显示时的时间点获取画笔在当前时间点的绘制坐标；当获取到绘制坐标时，根据绘制坐标及被选定的基础图形的结构化特征数据，在画布上渲染绘制出与当前时间点显示的图像对应的目标图形。所述方法的数据处理量小，数据处理效率高，可在浏览器播放显示的视频上进行图形绘制，达到图形绘制动画效果，并确保绘制出的图形能够进行交互性处理。

Description

图形绘制方法及装置
技术领域
本发明涉及浏览器图形绘制技术领域，具体而言，涉及一种图形绘制方法及装置。
背景技术
视频监控产品通常需要配备一个基于B/S(Browser/Server，浏览器/服务器)结构的能够用于观看实况视频并在实况视频上绘制一些图形(包括几何图形及文字图形)的终端设备，用户通过这样的终端设备在实况视频上通过绘制图形的方式实现标注、批注等业务功能。但随着浏览器技术的不断发展，以往能够在浏览器中用于实现图形绘制功能的插件技术，在基于HTML5技术形成的新版本浏览器上变得无法适用了，而目前基于HTML5技术形成的新版本浏览器通过videos标签和canvas标签实现的图形绘制功能也仅能在图像显示层面实现复杂图形绘制，而无法在播放实况视频的同时在该实况视频上进行图形绘制，且图形绘制时所对应的数据处理量大，数据处理效率低，无法针对绘制出的图形进行类似选中的交互性处理。
发明内容
为了克服现有技术中的上述不足，本发明的目的在于提供一种图形绘制方法及装置，所述图形绘制方法的数据处理量小，数据处理效率高，能够在浏览器播放显示的视频上进行图形绘制，以达到图形绘制动画效果，并确保绘制出的图形能够进行交互性处理。
就方法而言，本发明实施例提供一种图形绘制方法，所述方法应用于终端设备，所述终端设备通过浏览器页面中的视频流显示窗口对视频流的每帧图像进行显示，所述终端设备包括部署在视频流显示窗口上层的画布，及与所述画布匹配的至少一个基础图形的结构化特征数据，所述方法包括：
实时监听画笔基于被选定的基础图形进行的目标图形绘制事件是否产生；
当监听到所述目标图形绘制事件时，在所述视频流中每帧图像各自显示时的时间点获取所述画笔在当前时间点的绘制坐标；
当获取到当前时间点的所述绘制坐标时，根据所述绘制坐标及所述被选定的基础图形的结构化特征数据，在所述画布上渲染绘制出与所述视频流在当前时间点显示的图像对应的目标图形，以实现绘图动画效果。
就装置而言，本发明实施例提供一种图形绘制装置，所述装置应用于终端设备，所述终端设备通过浏览器页面中的视频流显示窗口对视频流的每帧图像进行显示，所述终端设备包括部署在视频流显示窗口上层的画布，及与所述画布匹配的至少一个基础图形的结构化特征数据，所述装置包括：
事件监听模块，用于实时监听画笔基于被选定的基础图形进行的目标图形绘制事件是否产生；
坐标获取模块，用于当监听到所述目标图形绘制事件时，在所述视频流中每帧图像各自显示时的时间点获取所述画笔在当前时间点的绘制坐标；
图形绘制模块，用于当获取到当前时间点的所述绘制坐标时，根据所述绘制坐标及所述被选定的基础图形的结构化特征数据，在所述画布上渲染绘制出与所述视频流在当前时间点显示的图像对应的目标图形，以实现绘图动画效果。
相对于现有技术而言，本发明实施例提供的图形绘制方法及装置具有以下有益效果：所述图形绘制方法的数据处理量小，数据处理效率高，能够在浏览器播放显示的视频上进行图形绘制，以达到图形绘制动画效果，并确保绘制出的图形能够进行交互性处理。所述方法应用于终端设备，所述终端设备通过浏览器页面中的视频流显示窗口对视频流的每帧图像进行显示，所述终端设备包括部署在视频流显示窗口上层的画布，及与所述画布匹配的至少一个基础图形的结构化特征数据。首先，所述方法实时监听画笔基于被选定的基础图形进行的目标图形绘制事件是否产生。接着，所述方法在监听到所述目标图形绘制事件时，在所述视频流中每帧图像各自显示时的时间点获取所述画笔在当前时间点的绘制坐标。最后，所述方法在每次获取到当前时间点的所述绘制坐标时，根据所述绘制坐标及所述被选定的基础图形的结构化特征数据，在所述画布上渲染绘制出与所述视频流在当前时间点显示的图像对应的目标图形，从而通过在与用于显示视频流的所述视频流显示窗口不在同一层面的画布上针对每帧图像绘制出对应的目标图形，达到在播放显示视频流的同时于该视频流上实现图形绘制动画效果，从而确保绘制出的目标图形能够进行交互性处理。其中因所述目标图形的绘制是基于基础图形的结构化特征数据实现的，便无需大量耗费终端设备的计算资源来从无到有地构建绘制所述目标图形，从而降低图形绘制过程的数据处理量，并相应提高数据处理效率。
为使本发明的上述目的、特征和优点能更明显易懂，下文特举本发明较佳实施例，并配合所附附图，作详细说明如下。
附图说明
为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对本发明权利要求保护范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
图1为本发明实施例提供的终端设备的一种方框示意图。
图2为本发明实施例提供的图形绘制方法的流程示意图之一。
图3为图2中步骤S210包括的子步骤的流程示意图。
图4为图2中步骤S220包括的子步骤的流程示意图。
图5为图2中步骤S230包括的子步骤的流程示意图。
图6为本发明实施例提供的图形绘制方法的流程示意图之二。
图7为本发明实施例提供的图形绘制装置的方框示意图之一。
图8为图7中事件监听模块的方框示意图。
图9为图7中图形绘制模块的方框示意图。
图10为本发明实施例提供的图形绘制装置的方框示意图之二。
图标：10-终端设备；11-存储器；12-处理器；13-通信单元；14-显示单元；100-图形绘制装置；110-事件监听模块；120-坐标获取模块；130-图形绘制模块；111-子事件监听子模块；112-绘制判断子模块；131-坐标转换子模块；132-特征生成子模块；133-渲染绘制子模块；140-参数调整模块。
具体实施方式
为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。
因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。
下面结合附图，对本发明的一些实施方式作详细说明。在不冲突的情况下，下述的实施例及实施例中的特征可以相互组合。
请参照图1，是本发明实施例提供的终端设备10的一种方框示意图。在本发明实施例中，所述终端设备10用于通过浏览器页面对视频流中的每帧图像进行显示，以实现对视频流的播放显示。所述终端设备10还用于在播放显示视频流的同时，供用户在所述视频流上进行图形绘制，并达到图形绘制动画效果。其中，所述终端设备10可以是，但不限于，智能手机、个人电脑(Personal Computer，PC)、平板电脑、个人数字助理(Personal DigitalAssistant，PDA)、移动上网设备(Mobile Internet Device，MID)等。
在本实施例中，所述终端设备10包括图形绘制装置100、存储器11、处理器12、通信单元13及显示单元14。所述存储器11、所述处理器12、所述通信单元13及所述显示单元14各个元件相互之间直接或间接地电性连接，以实现数据的传输或交互。例如，这些元件相互之间可通过一条或多条通讯总线或信号线实现电性连接。所述图形绘制装置100包括至少一个能够以软件或固件(firmware)的形式存储于所述存储器11中的软件功能模块，所述处理器12通过运行存储在存储器11内的所述图形绘制装置100对应的软件功能模块，从而执行各种功能应用以及数据处理。
在本实施例中，所述显示单元14包括显示屏，所述显示单元14通过所述显示屏对浏览器页面进行显示，从而在浏览器页面的视频流显示窗口中对视频流的每帧图像进行显示。所述终端设备10在所述视频流显示窗口所在层面的上层部署了覆盖所述视频流显示窗口的画布，并通过所述画布针对视频流的每帧图像绘制出对应的目标图形，然后通过所述显示单元14进行显示每帧图像对应的目标图形，达到播放显示视频流的同时于该视频流上实现图形绘制动画效果。其中，所述画布所在层面与所述视频流显示窗口所在层面并非同一层面，在所述画布上绘制图形并不会对播放显示的视频流造成干扰。在本实施例的一种实施方式中，因人眼对25帧/秒的画面会感受不到卡顿，故此所述视频流中相邻两帧图像之间的显示时间间隔应当不大于40ms，所述终端设备10针对每帧图像进行的图形绘制也需确保每次图形绘制时的时间点与时间间隔均与所述视频流播放显示状况相匹配，即每次图形绘制对应视频流的一帧图像。
在本实施例中，所述存储器11可用于存储至少一个基础图形的结构化特征数据，其中所述基础图形可以是几何图形，也可以是文字图形。当所述基础图形为几何图形时，所述基础图形可以是，但不限于，矩形、圆形、腰形、三角形、椭圆形等。每个基础图形的结构化特征数据用于表示该基础图形的关键特征，所述关键特征包括属性特征及行为特征，所述属性特征包括该基础图形在对应画布中被绘制时的左上角坐标、右下角坐标，线条的粗细、颜色，矩形中心是否填充，填充色，透明度等；所述行为特征包括该基础图形在对应画布中是否被选中，是否显示等。不同基础图形对应的结构化特征数据相互之间存在差异，所述基础图形的结构化特征数据与当前画布相互匹配。若当前画布的位置和/或尺寸发生改变时，该画布对应的所述至少一个基础图形的结构化特征数据也将进行调整，以确保所述至少一个基础图形的结构化特征数据始终与所述画布匹配，使得基于基础图形的结构化特征数据在所述画布上绘制出的目标图形能够进行交互性处理，并因为所述目标图形的绘制是基于基础图形的结构化特征数据实现的，便无需大量耗费终端设备10的计算资源来从无到有地构建绘制所述目标图形，从而降低图形绘制过程的数据处理量，并相应提高数据处理效率。
在本实施例中，所述存储器11可以是，但不限于，随机存取存储器(Random AccessMemory，RAM)，只读存储器(Read Only Memory，ROM)，可编程只读存储器(ProgrammableRead-Only Memory，PROM)，可擦除可编程只读存储器(Erasable Programmable Read-OnlyMemory，EPROM)，电可擦除可编程只读存储器(Electric Erasable Programmable Read-Only Memory，EEPROM)等。所述存储器11可用于存储程序，所述处理器12在接收到执行指令后，执行所述程序。
在本实施例中，所述处理器12可以是一种具有信号的处理能力的集成电路芯片。所述处理器12可以是通用处理器，包括中央处理器(Central Processing Unit，CPU)、网络处理器(Network Processor，NP)等。可以实现或者执行本发明实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。
在本实施例中，所述通信单元13用于通过网络建立所述终端设备10与其他电子设备之间的通信连接，并通过网络从所述其他电子设备处获取需要播放显示的视频流。其中所述其他电子设备可以是，但不限于，视频监控设备、存储有视频流数据的服务器、存储有视频流数据的其他终端设备等。
在本实施例中，所述终端设备10通过所述图形绘制装置100在浏览器播放显示的视频上进行图形绘制，以达到图形绘制动画效果，并确保绘制出的图形能够进行交互性处理。
可以理解的是，图1所示的结构仅为终端设备10的一种结构示意图，所述终端设备10还可包括比图1中所示更多或者更少的组件，或者具有与图1所示不同的配置。图1中所示的各组件可以采用硬件、软件或其组合实现。
请参照图2，是本发明实施例提供的图形绘制方法的流程示意图之一。在本发明实施例中，所述图形绘制方法应用于上述的终端设备10，所述终端设备10通过浏览器页面中的视频流显示窗口对视频流的每帧图像进行显示，其中所述终端设备10在所述视频流显示窗口上层部署有画布，所述终端设备10中存储有与所述画布匹配的至少一个基础图形的结构化特征数据。下面对图2所示的图形绘制方法的具体流程和步骤进行详细阐述。
步骤S210，实时监听画笔基于被选定的基础图形进行的目标图形绘制事件是否产生。
在本实施例中，所述画笔用于在所述终端设备10当前对应的画布上绘制图形，用户在选定所述至少一个基础图形中的某个被选定的基础图形进行图形绘制时，可通过操控所述画笔在所述终端设备10中的事件状态的方式，在所述画布上基于所述被选定的图形绘制出对应的目标图形，其中所述画笔的事件状态可通过操控鼠标的点击移动的方式进行调控，也可通过触屏点击移动的方式进行调控。所述终端设备10通过实时监听画笔基于被选定的基础图形进行的目标图形绘制事件是否产生的方式，可以直观地了解到是否需要在所述画布上针对当前显示的视频流进行图形绘制。
可选地，请参照图3，是图2中步骤S210包括的子步骤的流程示意图。在本实施例中，所述画笔的事件状态包括画笔按下状态、绘制移动状态及画笔弹起状态，所述画笔按下状态表示所述画笔当前处于被用户按下且准备进行图形绘制的状态，所述绘制移动状态表示所述画笔当前处于被按下并被用户操控移动以进行图形绘制的状态，所述画笔弹起状态表示所述画笔当前处于图形绘制完成的状态。其中，所述目标图形绘制事件包括画笔按下子事件、绘制移动子事件及画笔弹起子事件，所述画笔按下子事件对应所述画笔按下状态，所述绘制移动子事件对应所述绘制移动状态，所述画笔弹起子事件对应所述画笔弹起状态，所述步骤S210可以包括子步骤S211及子步骤S212。
子步骤S211，分别对画笔按下子事件、绘制移动子事件及画笔弹起子事件的产生情况进行实时监听。
子步骤S212，当监听到所述画笔按下子事件、所述绘制移动子事件及所述画笔弹起子事件中任意一项子事件产生时，判定目标图形绘制事件产生。
在本实施例中，当监听到所述画笔按下子事件、所述绘制移动子事件及所述画笔弹起子事件中任意一项子事件时，表明所述画笔当前被用户使用进行图形绘制，即所述画笔基于被选定的基础图形进行的目标图形绘制事件产生了。
步骤S220，当监听到所述目标图形绘制事件时，在视频流中每帧图像各自显示时的时间点获取所述画笔在当前时间点的绘制坐标。
在本实施例中，当所述终端设备10监听到所述目标图形绘制事件包括的所述画笔按下子事件、所述绘制移动子事件及所述画笔弹起子事件中任意一项子事件时，所述终端设备10将根据当前需要显示的视频流中每帧图像各自显示时的时间点，获取每个图像显示时间点下的所述画笔在所述浏览器页面中的绘制坐标，以通过每次获取到的绘制坐标在所述画布上绘制出与当前显示的视频流图像匹配的目标图形，其中每帧图像对应一个目标图形。
可选地，请参照图4，是图2中步骤S220包括的子步骤的流程示意图。在本实施例中，所述绘制坐标包括绘制起始坐标及绘制终止坐标，所述绘制起始坐标表示当前目标图形绘制事件所对应的目标图形的起始绘制位置，所述绘制终止坐标表示当前目标图形绘制事件所对应的目标图形在绘制过程中于当前时间点的绘制进度位置。所述步骤S220中的在视频流中每帧图像各自显示时的时间点获取所述画笔在当前时间点的绘制坐标的步骤包括子步骤S221、子步骤S222及子步骤S223。
子步骤S221，根据对所述画笔按下子事件、所述绘制移动子事件及所述画笔弹起子事件的监听结果，得到所述画笔在所述视频流中每帧图像显示时的时间点所对应的子事件信息。
在本实施例中，所述终端设备10在监听到目标图形绘制事件时，会在显示所述视频流中每帧图像的时间点根据监听结果，判断当前时间点监听到的子事件属于所述画笔按下子事件、所述绘制移动子事件及所述画笔弹起子事件中的哪一个子事件，从而得到所述画笔在所述视频流中每帧图像显示时的时间点所对应的子事件信息。
子步骤S222，当所述子事件信息与所述画笔按下子事件对应时，以当前时间点下的所述画笔在浏览器页面中的位置坐标作为所述目标图形的绘制起始坐标。
在本实施例中，当所述终端设备10得到的子事件信息与所述画笔按下子事件对应时，表明所述画笔在当前时间点还未被用户操控着进行对目标图形的绘制，当前时间点下的所述画笔在浏览器页面中的位置坐标即为所述目标图形的绘制起始坐标。
子步骤S223，当所述子事件信息与所述绘制移动子事件或所述画笔弹起子事件对应时，以当前时间点下的所述画笔在所述浏览器页面中的位置坐标作为所述目标图形的绘制终止坐标。
在本实施例中，当所述终端设备10得到的子事件信息与所述绘制移动子事件或所述画笔弹起子事件对应时，表明所述画笔在当前时间点正处于图形绘制阶段或逼近图形绘制完成的阶段，当前时间点下的所述画笔在所述在浏览器页面中的位置坐标为当前时间点下与显示的所述视频流图像匹配的目标图形的绘制终止坐标。
在本实施例中，当所述终端设备10得到的子事件信息与所述画笔按下子事件对应时，当前时间点下对应的目标图形的绘制终止坐标在数值上与此时的绘制起始坐标相同，以确保无论基于哪个基础图形进行绘制的所述目标图形在此时均显示为一个点；当所述终端设备10得到的子事件信息与所述绘制移动子事件或所述画笔弹起子事件对应时，当前时间点下的所述目标图形的绘制起始坐标，相同于所述子事件信息与所述画笔按下子事件对应时的目标图形的绘制起始坐标。
步骤S230，当获取到当前时间点的所述绘制坐标时，根据所述绘制坐标及所述被选定的基础图形的结构化特征数据，在所述画布上渲染绘制出与所述视频流在当前时间点显示的图像对应的目标图形，以实现绘图动画效果。
在本实施例中，每当所述终端设备10获取到所述画笔在当前图像显示时的时间点所对应的绘制坐标时，所述终端设备10都将根据获取到的所述绘制坐标及所述被选定的基础图形的结构化特征数据，得到当前时间点应当在所述画布上显示出的目标图形的结构化特征数据，并基于得到的所述目标图形的结构化特征数据在所述画布上渲染绘制出与当前时间点播放显示的视频流图像匹配的目标图形，从而通过每帧图像对应一个目标图形的方式实现绘图动画效果。
可选地，请参照图5，是图2中步骤S230包括的子步骤的流程示意图。在本实施例中，所述步骤S230包括子步骤S231、子步骤S232及子步骤S233。
子步骤S231，对当前时间点的所述绘制起始坐标及所述绘制终止坐标进行坐标转换，得到当前时间点下的所述目标图形在所述画布上的渲染起始坐标及渲染终止坐标。
在本实施例中，所述绘制起始坐标与所述绘制终止坐标为当前时间点的目标图形在所述浏览器页面上对应的绘制坐标，所述终端设备10需对所述绘制起始坐标及所述绘制终止坐标进行坐标转换，得到所述目标图形在所述画布上的渲染绘制显示时的渲染起始坐标及渲染终止坐标。
子步骤S232，根据所述渲染起始坐标、所述渲染终止坐标及所述被选定的基础图形的结构化特征数据生成当前时间点下的所述目标图形的结构化特征数据。
在本实施例中，所述终端设备10需根据得到的所述渲染起始坐标、所述渲染终止坐标对被选定的基础图形的结构化特征数据进行数据调整，生成用于表示当前时间点下的所述目标图形的结构化特征数据。例如，被选定的基础图形为矩形，且所述被选定的基础图形的结构化特征数据包括左上角坐标(left，top)及右下角坐标(right，bottom)时，所述终端设备10通过将所述渲染起始坐标、所述渲染终止坐标分别与所述左上角坐标(left，top)及所述右下角坐标(right，bottom)进行替换，并保留所述被选定的基础图形的其他结构化特征数据的方式，得到当前时间点应当被渲染绘制到所述画布上的目标图形的结构化特征数据。
子步骤S233，基于所述目标图形的结构化特征数据在所述画布上渲染绘制出对应的所述目标图形。
在本实施例中，因结构化特征数据是与所述画布匹配的，因此每当所述终端设备10得到与当前时间点显示的视频流图像匹配的目标图形的结构化特征数据，所述终端设备10都将在不与视频流显示窗口处于同一层面的所述画布上，基于所述目标图形的结构化特征数据渲染绘制出对应的所述目标图形，达到在播放显示视频流的同时于该视频流上实现图形绘制动画效果，从而确保绘制出的目标图形能够进行交互性处理。其中因所述目标图形的绘制是基于基础图形的结构化特征数据实现的，便无需大量耗费终端设备10的计算资源来从无到有地构建绘制所述目标图形，从而降低图形绘制过程的数据处理量，并相应提高数据处理效率。
在本发明实施例中，所述终端设备10每次在所述画布上渲染绘制完成与当前显示的视频流图像匹配的目标图形后，都将对当前时间点的所述目标图形进行擦除或设置为不显示状态，以使所述终端设备10在下一帧图像显示时能够在外观上呈空白状的画布上绘制对应匹配的目标图形。
请参照图6，是本发明实施例提供的图形绘制方法的流程示意图之二。在本发明实施例中，所述图形绘制方法还包括步骤S209。
步骤S209，根据视频流显示窗口的位置、尺寸及视频流的分辨率对所述画布的位置及尺寸进行调整，并对应调整所述至少一个基础图形的结构化特征数据。
在本实施例中，所述终端设备10在响应用户操作进行图形绘制之前，需要检测所述视频流显示窗口在所述浏览器页面中的位置信息及尺寸信息，并对待显示视频流进行解析得到该视频流的分辨率，从而基于获取到的所述视频流显示窗口的位置、尺寸及所述视频流的分辨率对所述画布在所述浏览器页面中的位置及尺寸进行调整，以确保所述画布部署在所述视频流显示窗口上层，且所述画布的尺寸与所述视频流显示窗口尺寸匹配。
所述终端设备10在完成对所述画布的调整后，会基于所述画布当前的尺寸信息及位置信息对所述至少一个基础图形的结构化调整数据进行调整，以确保所述至少一个基础图形的结构化特征数据始终与所述画布匹配。
请参照图7，是本发明实施例提供的图形绘制装置100的方框示意图之一。在本发明实施例中，所述图形绘制装置100应用于图1中所示的终端设备10，所述终端设备10通过浏览器页面中的视频流显示窗口对视频流的每帧图像进行显示，其中所述终端设备10在所述视频流显示窗口上层部署有画布，所述终端设备10中存储有与所述画布匹配的至少一个基础图形的结构化特征数据。所述图形绘制装置100包括事件监听模块110、坐标获取模块120及图形绘制模块130。
所述事件监听模块110，用于实时监听画笔基于被选定的基础图形进行的目标图形绘制事件是否产生。
可选地，请参照图8，是图7中事件监听模块110的方框示意图。在本实施例中，所述目标图形绘制事件包括画笔按下子事件、绘制移动子事件及画笔弹起子事件，所述事件监听模块110包括子事件监听子模块111及绘制判断子模块112。
所述子事件监听子模块111，用于分别对所述画笔按下子事件、所述绘制移动子事件及所述画笔弹起子事件的产生情况进行实时监听。
所述绘制判断子模块112，用于当监听到所述画笔按下子事件、所述绘制移动子事件及所述画笔弹起子事件中任意一项子事件产生时，判定目标图形绘制事件产生。
所述坐标获取模块120，用于当监听到所述目标图形绘制事件时，在视频流中每帧图像各自显示时的时间点获取所述画笔在当前时间点的绘制坐标。
在本实施例中，所述绘制坐标包括绘制起始坐标及绘制终止坐标，所述坐标获取模块120在视频流中每帧图像各自显示时的时间点获取所述画笔在当前时间点的绘制坐标的方式包括：
根据对所述画笔按下子事件、所述绘制移动子事件及所述画笔弹起子事件的监听结果，得到所述画笔在所述视频流中每帧图像显示时的时间点所对应的子事件信息；
当所述子事件信息与所述画笔按下子事件对应时，以当前时间点下的所述画笔在浏览器页面中的位置坐标作为所述目标图形的绘制起始坐标；
当所述子事件信息与所述绘制移动子事件或所述画笔弹起子事件对应时，以当前时间点下的所述画笔在所述在浏览器页面中的位置坐标作为所述目标图形的绘制终止坐标。
所述图形绘制模块130，用于当获取到当前时间点的所述绘制坐标时，根据所述绘制坐标及所述被选定的基础图形的结构化特征数据，在所述画布上渲染绘制出与所述视频流在当前时间点显示的图像对应的目标图形，以实现绘图动画效果。
可选地，请参照图9，是图7中图形绘制模块130的方框示意图。在本实施例中，所述图形绘制模块130包括坐标转换子模块131、特征生成子模块132及渲染绘制子模块133。
所述坐标转换子模块131，用于对当前时间点的所述绘制起始坐标及所述绘制终止坐标进行坐标转换，得到当前时间点下的所述目标图形在所述画布上的渲染起始坐标及渲染终止坐标。
所述特征生成子模块132，用于根据所述渲染起始坐标、所述渲染终止坐标及所述被选定的基础图形的结构化特征数据生成当前时间点下的所述目标图形的结构化特征数据。
所述渲染绘制子模块133，用于基于所述目标图形的结构化特征数据在所述画布上渲染绘制出对应的所述目标图形。
请参照图10，是本发明实施例提供的图形绘制装置100的方框示意图之二。在本发明实施例中，所述图形绘制装置100还可以包括参数调整模块140。
所述参数调整模块140，用于根据视频流显示窗口的位置、尺寸及视频流的分辨率对所述画布的位置及尺寸进行调整，并对应调整所述至少一个基础图形的结构化特征数据，以使所述画布部署在所述视频流显示窗口上层，且所述至少一个基础图形的结构化特征数据与所述画布匹配。
综上所述，在本发明实施例提供的图形绘制方法及装置中，所述图形绘制方法的数据处理量小，数据处理效率高，能够在浏览器播放显示的视频上进行图形绘制，以达到图形绘制动画效果，并确保绘制出的图形能够进行交互性处理。所述方法应用于终端设备，所述终端设备通过浏览器页面中的视频流显示窗口对视频流的每帧图像进行显示，所述终端设备包括部署在视频流显示窗口上层的画布，及与所述画布匹配的至少一个基础图形的结构化特征数据。首先，所述方法实时监听画笔基于被选定的基础图形进行的目标图形绘制事件是否产生。接着，所述方法在监听到所述目标图形绘制事件时，在所述视频流中每帧图像各自显示时的时间点获取所述画笔在当前时间点的绘制坐标。最后，所述方法在每次获取到当前时间点的所述绘制坐标时，根据所述绘制坐标及所述被选定的基础图形的结构化特征数据，在所述画布上渲染绘制出与所述视频流在当前时间点显示的图像对应的目标图形，从而通过在与用于显示视频流的所述视频流显示窗口不在同一层面的画布上针对每帧图像绘制出对应的目标图形，达到在播放显示视频流的同时于该视频流上实现图形绘制动画效果，从而确保绘制出的目标图形能够进行交互性处理。其中因所述目标图形的绘制是基于基础图形的结构化特征数据实现的，便无需大量耗费终端设备的计算资源来从无到有地构建绘制所述目标图形，从而降低图形绘制过程的数据处理量，并相应提高数据处理效率。
以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (9)

1.一种图形绘制方法，其特征在于，应用于终端设备，所述终端设备通过浏览器页面中的视频流显示窗口对视频流的每帧图像进行显示，所述终端设备包括部署在视频流显示窗口上层的画布，及与所述画布匹配的至少一个基础图形的结构化特征数据，所述方法包括：
实时监听画笔基于被选定的基础图形进行的目标图形绘制事件是否产生；
当监听到所述目标图形绘制事件时，在所述视频流中每帧图像各自显示时的时间点获取所述画笔在当前时间点的绘制坐标；
当获取到当前时间点的所述绘制坐标时，根据所述绘制坐标及所述被选定的基础图形的结构化特征数据，在所述画布上渲染绘制出与所述视频流在当前时间点显示的图像对应的目标图形，以实现绘图动画效果；
其中，所述基础图形的结构化特征数据为用于表示基础图形的属性特征及行为特征，所述属性特征包括基础图形在对应画布中被绘制时的左上角坐标、右下角坐标、线条的粗细和/或线条的颜色；所述行为特征包括所述基础图形在对应画布中是否被选中和/或是否显示，并且所述基础图形的结构化特征数据与当前画布相互匹配；
其中，在所述画布上绘制出与所述视频流在当前时间点显示的对象对应的目标图形包括：对当前时间点的绘制起始坐标及绘制终止坐标进行坐标转换，得到当前时间点下的所述目标图形在所述画布上的渲染起始坐标及渲染终止坐标；
根据所述渲染起始坐标、所述渲染终止坐标及所述被选定的基础图形的结构化特征数据生成当前时间点下的所述目标图形的结构化特征数据；
基于所述目标图形的结构化特征数据在所述画布上渲染绘制出对应的所述目标图形。
2.根据权利要求1所述的方法，其特征在于，所述目标图形绘制事件包括画笔按下子事件、绘制移动子事件及画笔弹起子事件，所述实时监听画笔基于被选定的基础图形进行的目标图形绘制事件是否产生的步骤包括：
分别对所述画笔按下子事件、所述绘制移动子事件及所述画笔弹起子事件的产生情况进行实时监听；
当监听到所述画笔按下子事件、所述绘制移动子事件及所述画笔弹起子事件中任意一项子事件产生时，判定所述目标图形绘制事件产生。
3.根据权利要求2所述的方法，其特征在于，所述绘制坐标包括绘制起始坐标及绘制终止坐标，所述在所述视频流中每帧图像各自显示时的时间点获取所述画笔在当前时间点的绘制坐标的步骤包括：
根据对所述画笔按下子事件、所述绘制移动子事件及所述画笔弹起子事件的监听结果，得到所述画笔在所述视频流中每帧图像显示时的时间点所对应的子事件信息；
当所述子事件信息与所述画笔按下子事件对应时，以当前时间点下的所述画笔在浏览器页面中的位置坐标作为所述目标图形的绘制起始坐标；
当所述子事件信息与所述绘制移动子事件或所述画笔弹起子事件对应时，以当前时间点下的所述画笔在所述浏览器页面中的位置坐标作为所述目标图形的绘制终止坐标。
4.根据权利要求1-3中任意一项所述的方法，其特征在于，所述方法还包括：
根据视频流显示窗口的位置、尺寸及视频流的分辨率对所述画布的位置及尺寸进行调整，并对应调整所述至少一个基础图形的结构化特征数据，以使所述画布部署在所述视频流显示窗口上层，且所述至少一个基础图形的结构化特征数据与所述画布匹配。
5.一种图形绘制装置，其特征在于，应用于终端设备，所述终端设备通过浏览器页面中的视频流显示窗口对视频流的每帧图像进行显示，所述终端设备包括部署在视频流显示窗口上层的画布，及与所述画布匹配的至少一个基础图形的结构化特征数据，所述装置包括：
事件监听模块，用于实时监听画笔基于被选定的基础图形进行的目标图形绘制事件是否产生；
坐标获取模块，用于当监听到所述目标图形绘制事件时，在所述视频流中每帧图像各自显示时的时间点获取所述画笔在当前时间点的绘制坐标；
图形绘制模块，用于当获取到当前时间点的所述绘制坐标时，根据所述绘制坐标及所述被选定的基础图形的结构化特征数据，在所述画布上渲染绘制出与所述视频流在当前时间点显示的图像对应的目标图形，以实现绘图动画效果，其中，所述基础图形的结构化特征数据为用于表示基础图形的属性特征及行为特征，所述属性特征包括基础图形在对应画布中被绘制时的左上角坐标、右下角坐标、线条的粗细和/或线条的颜色；所述行为特征包括所述基础图形在对应画布中是否被选中和/或是否显示，并且所述基础图形的结构化特征数据与当前画布相互匹配；
其中，在所述画布上绘制出与所述视频流在当前时间点显示的对象对应的目标图形包括：对当前时间点的绘制起始坐标及绘制终止坐标进行坐标转换，得到当前时间点下的所述目标图形在所述画布上的渲染起始坐标及渲染终止坐标；
根据所述渲染起始坐标、所述渲染终止坐标及所述被选定的基础图形的结构化特征数据生成当前时间点下的所述目标图形的结构化特征数据；
基于所述目标图形的结构化特征数据在所述画布上渲染绘制出对应的所述目标图形。
6.根据权利要求5所述的装置，其特征在于，所述目标图形绘制事件包括画笔按下子事件、绘制移动子事件及画笔弹起子事件，所述事件监听模块包括：
子事件监听子模块，用于分别对所述画笔按下子事件、所述绘制移动子事件及所述画笔弹起子事件的产生情况进行实时监听；
绘制判断子模块，用于当监听到所述画笔按下子事件、所述绘制移动子事件及所述画笔弹起子事件中任意一项子事件产生时，判定所述目标图形绘制事件产生。
7.根据权利要求6所述的装置，其特征在于，所述绘制坐标包括绘制起始坐标及绘制终止坐标，所述坐标获取模块在所述视频流中每帧图像各自显示时的时间点获取所述画笔在当前时间点的绘制坐标的方式包括：
根据对所述画笔按下子事件、所述绘制移动子事件及所述画笔弹起子事件的监听结果，得到所述画笔在所述视频流中每帧图像显示时的时间点所对应的子事件信息；
当所述子事件信息与所述画笔按下子事件对应时，以当前时间点下的所述画笔在浏览器页面中的位置坐标作为所述目标图形的绘制起始坐标；
当所述子事件信息与所述绘制移动子事件或所述画笔弹起子事件对应时，以当前时间点下的所述画笔在所述在浏览器页面中的位置坐标作为所述目标图形的绘制终止坐标。
8.根据权利要求7所述的装置，其特征在于，所述图形绘制模块包括：
坐标转换子模块，用于对当前时间点的所述绘制起始坐标及所述绘制终止坐标进行坐标转换，得到当前时间点下的所述目标图形在所述画布上的渲染起始坐标及渲染终止坐标；
特征生成子模块，用于根据所述渲染起始坐标、所述渲染终止坐标及所述被选定的基础图形的结构化特征数据生成当前时间点下的所述目标图形的结构化特征数据；
渲染绘制子模块，用于基于所述目标图形的结构化特征数据在所述画布上渲染绘制出对应的所述目标图形。
9.根据权利要求5-8中任意一项所述的装置，其特征在于，所述装置还包括：
参数调整模块，用于根据视频流显示窗口的位置、尺寸及视频流的分辨率对所述画布的位置及尺寸进行调整，并对应调整所述至少一个基础图形的结构化特征数据，以使所述画布部署在所述视频流显示窗口上层，且所述至少一个基础图形的结构化特征数据与所述画布匹配。
CN201810876250.XA 2018-08-03 2018-08-03 图形绘制方法及装置 Active CN110795177B (zh)

Priority Applications (4)

Application Number Priority Date Filing Date Title
CN201810876250.XA CN110795177B (zh) 2018-08-03 2018-08-03 图形绘制方法及装置
EP19843865.7A EP3832459A4 (en) 2018-08-03 2019-02-25 GRAPHIC DRAWING METHOD AND APPARATUS, DEVICE AND STORAGE MEDIA
PCT/CN2019/076000 WO2020024580A1 (zh) 2018-08-03 2019-02-25 图形绘制方法及装置、设备及存储介质
US17/265,801 US11551392B2 (en) 2018-08-03 2019-02-25 Graphic drawing method and apparatus, device, and storage medium

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201810876250.XA CN110795177B (zh) 2018-08-03 2018-08-03 图形绘制方法及装置

Publications (2)

Publication Number Publication Date
CN110795177A CN110795177A (zh) 2020-02-14
CN110795177B true CN110795177B (zh) 2021-08-31

Family

ID=69231429

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201810876250.XA Active CN110795177B (zh) 2018-08-03 2018-08-03 图形绘制方法及装置

Country Status (4)

Country Link
US (1) US11551392B2 (zh)
EP (1) EP3832459A4 (zh)
CN (1) CN110795177B (zh)
WO (1) WO2020024580A1 (zh)

Families Citing this family (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111243378B (zh) * 2020-03-17 2022-02-22 广东智媒云图科技股份有限公司 基于分形布朗运动模型的作画方法及装置
CN112233009A (zh) * 2020-10-13 2021-01-15 广州南方卫星导航仪器有限公司 一种图片渲染方法、装置、设备和存储介质
CN112381907B (zh) * 2020-11-12 2023-04-18 上海哔哩哔哩科技有限公司 多媒体轨道绘制方法和系统
CN113052714B (zh) * 2021-03-02 2023-04-14 厦门盈趣科技股份有限公司 镭雕方法、系统、移动终端及存储介质
CN113535280B (zh) * 2021-08-04 2023-03-21 北京字跳网络技术有限公司 图案绘制方法、装置、设备、计算机可读存储介质及产品

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103974209A (zh) * 2013-01-29 2014-08-06 华为技术有限公司 视频短信的发送、接收方法及其装置和手持电子设备
CN105635519A (zh) * 2015-06-15 2016-06-01 广州市动景计算机科技有限公司 视频处理方法、装置及系统
CN106385591A (zh) * 2016-10-17 2017-02-08 腾讯科技（上海）有限公司 视频处理方法及视频处理装置
CN107835464A (zh) * 2017-09-28 2018-03-23 努比亚技术有限公司 视频通话窗口画面处理方法、终端和计算机可读存储介质
CN107888845A (zh) * 2017-11-14 2018-04-06 腾讯数码（天津）有限公司 一种视频图像处理方法、装置及终端

Family Cites Families (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8984406B2 (en) * 2009-04-30 2015-03-17 Yahoo! Inc! Method and system for annotating video content
US8719776B2 (en) * 2009-12-30 2014-05-06 Foneclay, Inc. System for creation and distribution of software applications usable on multiple mobile device platforms
JP2012084122A (ja) * 2010-09-15 2012-04-26 Ricoh Co Ltd 画像表示装置、画像表示システム、画像表示方法、プログラムおよび記録媒体
US20160232144A1 (en) * 2015-02-06 2016-08-11 Liang Zhou Browser extension allowing web users to draw on live web pages
CN104883515B (zh) * 2015-05-22 2018-11-02 广东威创视讯科技股份有限公司 一种视频标注处理方法及视频标注处理服务器
US10762675B2 (en) * 2016-12-12 2020-09-01 Facebook, Inc. Systems and methods for interactive broadcasting

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103974209A (zh) * 2013-01-29 2014-08-06 华为技术有限公司 视频短信的发送、接收方法及其装置和手持电子设备
CN105635519A (zh) * 2015-06-15 2016-06-01 广州市动景计算机科技有限公司 视频处理方法、装置及系统
CN106385591A (zh) * 2016-10-17 2017-02-08 腾讯科技（上海）有限公司 视频处理方法及视频处理装置
CN107835464A (zh) * 2017-09-28 2018-03-23 努比亚技术有限公司 视频通话窗口画面处理方法、终端和计算机可读存储介质
CN107888845A (zh) * 2017-11-14 2018-04-06 腾讯数码（天津）有限公司 一种视频图像处理方法、装置及终端

Also Published As

Publication number Publication date
CN110795177A (zh) 2020-02-14
EP3832459A4 (en) 2022-04-27
US11551392B2 (en) 2023-01-10
EP3832459A1 (en) 2021-06-09
US20210166457A1 (en) 2021-06-03
WO2020024580A1 (zh) 2020-02-06

Similar Documents

Publication Publication Date Title
CN110795177B (zh) 图形绘制方法及装置
US11100901B2 (en) Method for controlling rendering of layers, terminal, and storage medium
CN110088799B (zh) 图像处理设备和图像处理方法
CN110989878B (zh) 小程序中的动画展示方法、装置、电子设备及存储介质
JP2011128204A (ja) 広告配信装置、方法及びプログラム
CN112416346B (zh) 界面配色方案的生成方法、装置、设备及存储介质
CN113126862B (zh) 截屏方法、装置、电子设备以及可读存储介质
CN105930464B (zh) Web富媒体跨屏适配方法和装置
CN108255546A (zh) 一种数据加载动画的实现方法及装置
CN113268303A (zh) 界面元素配置方法、装置、存储介质及电子设备
JP5563703B2 (ja) コンテンツ配信装置、コンテンツ配信方法、コンテンツ配信プログラム及び端末用プログラム
CN110765384A (zh) 客户端的分辨率适配方法、存储介质及终端
CN114115637A (zh) 显示设备及电子画板优化方法
CN109064537A (zh) 基于3d渲染引擎的图像生成方法以及装置
CN112099714A (zh) 截图方法、装置、电子设备及可读存储介质
JP6339550B2 (ja) 端末用プログラム、端末装置及び端末制御方法
CN112035877A (zh) 信息隐藏方法、装置、电子设备及可读存储介质
CN111915705A (zh) 图片可视化编辑方法、装置、设备和介质
CN113934500A (zh) 渲染方法、装置、存储介质及电子设备
CN114518859A (zh) 显示控制方法、装置、电子设备及存储介质
WO2023142370A1 (zh) 投屏显示方法、装置、电子设备及可读存储介质
CN109675312B (zh) 游戏物品列表显示方法及装置
CN113495641A (zh) 触摸屏鬼点识别方法、装置、终端及存储介质
CN116071459B (zh) 基于墨水屏的手绘控制方法、系统和可读存储介质
CN113760212B (zh) 一种基于win7实现屏幕自适应翻转的方法及装置

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