Graph drawing method and device

Abstract

The invention provides a graph drawing method and device which are applied to terminal equipment, and the terminal equipment comprises canvas deployed on the upper layer of a video stream display window and structured feature data of at least one basic graph matched with the canvas. The method comprises the steps of monitoring whether a target graph drawing event performed by a painting brush based on a selected basic graph is generated or not in real time; when a target graph drawing event is monitored, obtaining drawing coordinates of a drawing pen at the current time point at the time pointwhen each frame of image in the video stream is displayed respectively; and when the drawing coordinates are obtained, rendering and drawing a target graph corresponding to the image displayed at thecurrent time point on the canvas according to the drawing coordinates and the structured feature data of the selected basic graph. The method is small in data processing amount and high in data processing efficiency, graph drawing can be carried out on the video played and displayed by the browser, the graph drawing animation effect is achieved, and it is ensured that the drawn graph can be interactively processed.

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