Graphic drawing method and device

Abstract

The present invention provides a graphics drawing method and device, which are applied to terminal equipment, and the terminal equipment includes a canvas deployed on the upper layer of a video stream display window, and structural feature data of at least one basic graphic matching the canvas. The method includes: monitoring in real time whether the target graphics drawing event performed by the brush based on the selected basic graphics is generated; when the target graphics drawing event is monitored, acquiring the brush at the time point when each frame of image in the video stream is displayed respectively The drawing coordinates at the current time point; when the drawing coordinates are obtained, according to the drawing coordinates and the structured feature data of the selected basic graphics, render and draw the target graphics corresponding to the image displayed at the current time point on the canvas. The method has a small amount of data processing and high data processing efficiency, can draw graphics on the video played and displayed by the browser, achieve the animation effect of graphics drawing, and ensure that the drawn graphics can be processed interactively.

Description

technical field [0001] The present invention relates to the technical field of browser graphic drawing, in particular to a graphic drawing method and device. Background technique [0002] Video surveillance products usually need to be equipped with a terminal device based on B / S (Browser / Server, browser / server) structure that can be used to watch live video and draw some graphics (including geometric graphics and text graphics) on the live video. Through such a terminal device, business functions such as labeling and commenting can be realized by drawing graphics on the live video. However, with the continuous development of browser technology, the plug-in technology that can be used to realize the graphics drawing function in the browser in the past has become unsuitable for the new version of the browser based on HTML5 technology. The graphics drawing function realized by the videos tag and the canvas tag of the new version of the browser can only realize complex graphics...

AI Technical Summary

Problems solved by technology

However, with the continuous development of browser technology, the plug-in technology that can be used to realize the graphics drawing function in the browser in the past has become unsuitable for the new version of the browser based on HTML5 technology. The graphics drawing function realized by the videos tag and the canvas tag of the new version of the browser can only realize complex graphics drawing at the image display level, but cannot perform graphics drawing on the live video while playing the live video, and the graphics drawing corresponds to The amount of data processing is large, the data processing efficiency is low, and it is impossible to perform interactive processing similar to selection on the drawn graphics

Images