图形绘制方法及装置制造方法及图纸

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

Graphic drawing method and device

【技术实现步骤摘要】
图形绘制方法及装置
本专利技术涉及浏览器图形绘制
，具体而言，涉及一种图形绘制方法及装置。
技术介绍
视频监控产品通常需要配备一个基于B/S(Browser/Server，浏览器/服务器)结构的能够用于观看实况视频并在实况视频上绘制一些图形(包括几何图形及文字图形)的终端设备，用户通过这样的终端设备在实况视频上通过绘制图形的方式实现标注、批注等业务功能。但随着浏览器技术的不断发展，以往能够在浏览器中用于实现图形绘制功能的插件技术，在基于HTML5技术形成的新版本浏览器上变得无法适用了，而目前基于HTML5技术形成的新版本浏览器通过videos标签和canvas标签实现的图形绘制功能也仅能在图像显示层面实现复杂图形绘制，而无法在播放实况视频的同时在该实况视频上进行图形绘制，且图形绘制时所对应的数据处理量大，数据处理效率低，无法针对绘制出的图形进行类似选中的交互性处理。
技术实现思路
为了克服现有技术中的上述不足，本专利技术的目的在于提供一种图形绘制方法及装置，所述图形绘制方法的数据处理量小，数据处理效率高，能够在浏览器播本文档来自技高网...

【技术保护点】
1.一种图形绘制方法，其特征在于，应用于终端设备，所述终端设备通过浏览器页面中的视频流显示窗口对视频流的每帧图像进行显示，所述终端设备包括部署在视频流显示窗口上层的画布，及与所述画布匹配的至少一个基础图形的结构化特征数据，所述方法包括：/n实时监听画笔基于被选定的基础图形进行的目标图形绘制事件是否产生；/n当监听到所述目标图形绘制事件时，在所述视频流中每帧图像各自显示时的时间点获取所述画笔在当前时间点的绘制坐标；/n当获取到当前时间点的所述绘制坐标时，根据所述绘制坐标及所述被选定的基础图形的结构化特征数据，在所述画布上渲染绘制出与所述视频流在当前时间点显示的图像对应的目标图形，以实现绘图动画效...

【技术特征摘要】
1.一种图形绘制方法，其特征在于，应用于终端设备，所述终端设备通过浏览器页面中的视频流显示窗口对视频流的每帧图像进行显示，所述终端设备包括部署在视频流显示窗口上层的画布，及与所述画布匹配的至少一个基础图形的结构化特征数据，所述方法包括：
实时监听画笔基于被选定的基础图形进行的目标图形绘制事件是否产生；
当监听到所述目标图形绘制事件时，在所述视频流中每帧图像各自显示时的时间点获取所述画笔在当前时间点的绘制坐标；
当获取到当前时间点的所述绘制坐标时，根据所述绘制坐标及所述被选定的基础图形的结构化特征数据，在所述画布上渲染绘制出与所述视频流在当前时间点显示的图像对应的目标图形，以实现绘图动画效果。


2.根据权利要求1所述的方法，其特征在于，所述目标图形绘制事件包括画笔按下子事件、绘制移动子事件及画笔弹起子事件，所述实时监听画笔基于被选定的基础图形进行的目标图形绘制事件是否产生的步骤包括：
分别对所述画笔按下子事件、所述绘制移动子事件及所述画笔弹起子事件的产生情况进行实时监听；
当监听到所述画笔按下子事件、所述绘制移动子事件及所述画笔弹起子事件中任意一项子事件产生时，判定所述目标图形绘制事件产生。


3.根据权利要求2所述的方法，其特征在于，所述绘制坐标包括绘制起始坐标及绘制终止坐标，所述在所述视频流中每帧图像各自显示时的时间点获取所述画笔在当前时间点的绘制坐标的步骤包括：
根据对所述画笔按下子事件、所述绘制移动子事件及所述画笔弹起子事件的监听结果，得到所述画笔在所述视频流中每帧图像显示时的时间点所对应的子事件信息；
当所述子事件信息与所述画笔按下子事件对应时，以当前时间点下的所述画笔在浏览器页面中的位置坐标作为所述目标图形的绘制起始坐标；
当所述子事件信息与所述绘制移动子事件或所述画笔弹起子事件对应时，以当前时间点下的所述画笔在所述浏览器页面中的位置坐标作为所述目标图形的绘制终止坐标。


4.根据权利要求3所述的方法，其特征在于，所述根据所述绘制坐标及所述被选定的基础图形的结构化特征数据，在所述画布上渲染绘制出与所述视频流在当前时间点显示的图像对应的目标图形的步骤包括：
对当前时间点的所述绘制起始坐标及所述绘制终止坐标进行坐标转换，得到当前时间点下的所述目标图形在所述画布上的渲染起始坐标及渲染终止坐标；
根据所述渲染起始坐标、所述渲染终止坐标及所述被选定的基础图形的结构化特征数据生成当前时间点下的所述目标图形的结构化特征数据；
基于所述目标图形的结构化特征数据在所述画布上渲染绘制出对应的所述目标图形。


5.根据权利要求1-4中任意一项所述的方法，其特征在于，所述方法还包括：
根据视频流显示窗口的位置、尺寸及视频流的分辨率对所述画布的位置及尺寸进行调整，并对应调整所述至少一个基础图形的结构化特征数据，以使所述画布部署在所述视频流显示窗口上层，且所述至少一个基础图形的结构化特征数据与所述画布匹配。

<...

【专利技术属性】
技术研发人员：余国生，
申请(专利权)人：浙江宇视科技有限公司，
类型：发明
国别省市：浙江;33