CN106598928B - A method and system for annotating on a display screen - Google Patents

Abstract

A method for annotating on a display screen includes creating an upper view and a lower view, wherein the upper view and the lower view have the same position and size in their parent view coordinate system; after the annotation operation begins, the upper view information of the annotation line that the annotation marker passes through on the display screen is obtained and stored in real time, and the annotation line is continuously drawn in the upper view according to the upper view information of the annotation line; after the current annotation operation is completed, the annotation line in the lower view is redrawn according to the upper view information of the current annotation line and the lower view information of the existing annotation line; after the annotation line in the lower view is redrawn, the upper view information of the annotation line is cleared. The present invention also provides a system for annotating on a display screen. When the number of annotation lines is large, the present invention significantly improves the drawing performance, reduces the overall refresh frequency of the device screen, and saves system resources such as CPU and memory.

Description

A method and system for annotating on a display screen

technical field

The present invention relates to a display technology, in particular to a method and system for annotating on a display screen.

Background technique

With the development of mobile electronic equipment and touch screen technology, touch screens have been applied to more and more mobile devices. Along with the touch application, a variety of corresponding application software has emerged, enabling users to perform specific operations on the mobile device. Typically, the user can annotate and mark the displayed content on the touch screen through specific software.

When implementing real-time annotation and line marking operations on the touch screen of a mobile device, the existing implementation is to frequently perform refresh operations on a view object to display annotation lines, that is, regardless of the number of annotation lines on the current touch screen, the view Objects must redraw all previously annotated lines on each refresh.

When there are too many annotation lines on the view object, the device needs to redraw all the previously drawn lines every time. Limited by the processing power of the mobile device, its annotation display performance will be significantly affected, resulting in the loss of lines when annotating. The display obviously does not follow the touch point.

Contents of the invention

The invention provides a method for annotating on a display screen, comprising the following steps:

Step 1: Create the upper layer view and the lower layer view, the upper layer view and the lower layer view have the same position and size in the coordinate system of their parent class view;

Step 2: After the annotation operation starts, obtain and store the upper layer view information of the current annotation line passing by the annotation marker on the display screen in real time, and continue to draw the annotation line in the upper layer view according to the upper layer view information of the annotation line;

Step 3: After the current annotation operation is completed, redraw the annotation line in the lower view according to the upper view information of the annotation line and the lower view information of the existing annotation line in the lower view;

Step 4: After redrawing the annotation lines in the lower view, clear the upper view information of the annotation lines.

Further, in step 3, by storing the upper-layer view information of the annotation line completed this time, calling the upper-layer view information of the annotation line for each annotation operation, and redrawing the annotation line in the lower-layer view.

Further, the stored upper layer view information of the annotation line includes the position coordinates of the annotation line and the last storage time of the information.

Further, in step 3, the storage and calling of the upper-layer view information of the annotation line is carried out through a public class, and the upper-layer view information of the annotation line is added to the array of the public class for storing the upper-layer view information of the annotation line through the upper layer view, and each time it is completed The annotation operation stores the upper layer view information of an annotation line; when the annotation line is redrawn in the lower layer view, in this public class, the annotation line upper layer view information of each annotation operation is called sequentially according to the last storage time of the annotation line upper layer view information .

Further, the stored upper layer view information of the annotation line also includes the thickness, color and information generation time of the annotation line.

Further, when the annotation marker is a finger or a touch pen, when the finger or the touch pen touches the touch screen, the annotation operation starts; when the finger or the touch pen leaves the touch screen, the annotation operation is completed.

Further, when the annotation identifier is a mouse, when a specific button of the mouse is pressed on the display screen, the annotation operation starts; when the specific button of the mouse is released, the annotation operation is completed.

The present invention also provides a system for annotating on a display screen, including a view creation module, an upper-layer view information acquisition and storage module for the current annotation line, an upper-layer view annotation line drawing module, a lower-layer view annotation line drawing module, and an upper-layer view annotation line removal module, where,

View creation module: create the upper view and the lower view, the position and size of the upper view and the lower view are the same in the coordinate system of their parent class view;

Obtaining and storing module of the upper layer view information of the current annotation line: after the annotation operation starts, obtain and store the upper layer view information of the current annotation line passing by the annotation marker on the display screen in real time;

Upper-layer view annotation line drawing module: continuously draw the annotation line in the upper-layer view according to the upper-layer view information of the annotation line;

Lower layer view annotation line drawing module: after the current annotation operation is completed, redraw the annotation line in the lower layer view according to the upper layer view information of the annotation line and the existing annotation line lower view information in the lower layer view;

Upper layer view annotation line deletion module: After redrawing the annotation lines in the lower view, clear the upper layer view information of the annotation lines in the current annotation line upper view information acquisition and storage module.

Further, the lower layer view annotation line drawing module includes an annotation line upper layer view information storage module and an annotation line upper layer view information calling module,

Annotation line upper-level view information storage module: add the annotation line upper-level view information to the array of the public class for storing the annotation line upper-level view information through the upper-level view, and store an annotation line upper-level view information every time an annotation operation is completed;

Annotation line upper-layer view information calling module: when re-drawing annotation lines in the lower-layer view, in the public class, sequentially call the line upper-layer view information of each annotation operation according to the last storage time of the annotation line upper-layer view information.

Further, the system is a mobile electronic device.

The present invention uses two different view objects with upper and lower levels when annotating. The upper view only temporarily displays the annotation lines when annotating, and the lower view displays all the annotation lines that have been annotated. When annotating in real time, only the upper view is always refreshed/redrawn, and the lower view is only refreshed once after the annotation is complete.

The invention has the advantages that when the number of annotation lines is large, the annotation line drawing performance is significantly improved, the overall refresh frequency of the device screen is reduced, and system resources such as CPU and memory are saved, and it is especially suitable for mobile electronic devices.

Description of drawings

Fig. 1 is a flow chart of a method for annotating on a display screen according to the present invention;

Fig. 2 is a schematic diagram of changes in the display content of the upper layer view and the lower layer view in the method of the present invention;

Fig. 3 is a block diagram of a system for annotating on a display screen according to the present invention.

Detailed ways

In order to make the object, technical solution and advantages of the present invention clearer, the present invention will be described in further detail below in conjunction with specific embodiments and with reference to the accompanying drawings. However, those skilled in the art know that the present invention is not limited to the drawings and the following embodiments.

In a preferred embodiment of the present invention, with reference to Fig. 1, Fig. 2, the method that utilizes finger (or touch pen) to carry out annotation on comprising touch display screen, comprises the following steps:

Step 1: Create two views with the same position and size in the coordinate system of its parent class view - the upper view and the lower view, and add them to the parent view in turn, where the upper view is above the lower view.

The two created view objects have the same length and width, and the same origin of coordinates, and will directly display the image on the display screen. The reason for creating two views is that the upper view is used to display the real-time annotation lines on the display screen, and the lower view will display all the completed annotation lines after one annotation is completed, and the upper view is without any annotation handwriting is completely transparent.

Step 2: When the finger is pressed on the display screen, it means that the annotation operation starts, acquire and store the upper layer view information of the current annotation line passed by the finger on the display screen, and draw in the upper layer view according to the upper layer view information of the annotation line The annotated line until the finger is lifted from the display screen, and the annotation operation ends.

In this step, during the annotation process, that is, when the finger is pressed on the display screen, the finger is moved on the display screen, and the finger is lifted from the display screen, the upper layer view is constantly refreshed and the lines of the annotation are redrawn, so as to ensure that the upper layer The view displays the currently annotated line in real time.

In addition, the stored upper view information of the annotation line includes position coordinates, thickness, color, generation time and last storage time. Among them, the position coordinates are the continuous trajectory coordinates of the fingers across the touch screen; the line thickness can be converted by detecting the touch pressure value or selected by the user in advance; the line color information is selected by the user in advance; when the annotation line upper layer view information is stored The time of is its generation time, and the moment when the current annotation operation is completed is its last storage time.

Since the upper-level view information of the annotation line is displayed and stored by the lower-level view, the upper-level view information of the annotation line is stored in step 2, and key data such as the coordinates, thickness, color, generation time, and last storage time of the handwriting are stored, and these data are stored Can also be used to undo and redo annotation lines.

Step 3: After the finger is lifted from the display screen, it indicates that the current annotation operation is completed, and the upper view information of the annotation line is passed to the lower view, and the annotation line in the lower view is redrawn.

Store the upper-layer view information of the annotation line after each annotation operation, and call it for the lower-layer view. The storage and calling of the upper-layer view information of the annotation line is carried out through a public class, that is, the upper-layer view adds the upper-layer view information of the annotation line to the array of the public class dedicated to storing the upper-layer view information of the annotation line, and stores a annotation line every time an annotation operation is completed The upper layer view information; when the lower layer view is redrawn, this public class is requested, and the annotation line upper layer view information of each annotation operation is called sequentially according to the last storage time of the annotation line upper layer view information. The underlying view only needs to refresh the view once.

In step 3, the process of storing the upper layer view information of the annotation line and calling the upper layer view information of the line seems complicated, but the time spent on such storage and return operations in the CPU is much less than the time it takes to refresh the upper layer view in real time when annotating , greatly saving system resources.

Step 4: After redrawing the annotated lines in the lower view, clear the annotated lines in the upper view.

Since step 3 has already drawn in the lower view according to the upper view information of all the annotation lines that have been annotated (including the annotation operation just completed on the upper view), at this time, only the annotation lines of the upper view need to be cleared, Clear the upper layer view information of the annotation line.

Repeat steps 1-4 to complete subsequent annotation operations.

In the present invention, the display screen will refresh the view objects at a fairly fast frequency, and every time an annotation is made with a finger, the upper view will be refreshed. From the start of the annotation operation in step 2 to the clearing of the annotation lines in the upper view in step 4, the upper view will be refreshed continuously, so as to ensure that the annotation lines displayed on the display screen are relatively smooth during the annotation process without feeling dull.

Above, the present invention has been described in detail by taking finger operation on the touch screen as an example. Those skilled in the art can understand that the above method can also be used in a general home computer with a display screen. Compared with the above embodiment, only the mouse is used for the annotation operation instead of the finger for the annotation operation. When a specific button of the mouse is pressed on the display screen, it means that the annotation operation starts, and when the specific button of the mouse is released, it means that the annotation operation ends. The upper view information of the annotation line.

The method of the present invention can be applied to various existing operating systems, such as Windows, iOS or Android operating systems, and is especially suitable for the operation of mobile devices, such as mobile phones and tablets. Hereinafter, a mobile electronic device with a touch screen installed with an iOS system is taken as an example for description.

Step 21: Create two UIView subview objects with the same frame property in a UIView—the upper view and the lower view. The two views have a hierarchical relationship between top and bottom, and both can implement the drawRect method. This method is executed every time the device refreshes the view. will be called every time.

Step 22: When the finger touches the screen, the touchesBegan:withEvent method of the upper view is called, and the setNeedsDisplay method is called in this method in real time to refresh the upper view in real time;

When the finger moves on the screen, the touchesMoved:withEvent method of the upper view is called. In this method, while the upper view is refreshed in real time, the upper view information of the annotation line such as UIBezierPath and UIColor is stored in a temporary object of SLAnnotationModel ;

When the finger leaves the screen, the touchesEnded:withEvent method of the upper layer view is called, and in the method, the temporary object SLAnnotationModel containing the annotation line upper layer view information of this annotation is added to the array property of the public class SLAnnotationModelManager.

Step 23: When the finger leaves the screen, the lower view requests the upper view information of each completed annotation line from the public class SLAnnotationModelManager, and redraws the annotation line according to the upper view information of each annotation line in the drawRect method.

Step 24: The upper view calls the removeAllPoints method of UIBezierPath to clear the lines drawn in this annotation.

The present invention also provides a system for annotating on the display screen, as shown in Figure 3, including a view creation module, an upper-layer view information acquisition and storage module for the current annotation line, an upper-layer view annotation line drawing module, and a lower-layer view annotation line The drawing module and the upper layer view annotation line deletion module. in,

View creation module: used to create two views with the same position and size in the coordinate system of its parent class view—the upper view and the lower view, and add them to the parent view in turn, where the upper view is between the lower view superior.

The two created view objects have the same length and width, and the same origin of coordinates, and will directly display the image on the display screen. The reason for creating two views is that the upper view is used to display real-time annotation lines on the display, and the lower view will display all completed annotation lines after one annotation is completed.

Obtaining and storing module of upper layer view information of current annotation line: used for acquiring and storing the upper layer view information of the current annotation line passed by the annotation marker (finger or mouse) on the display screen after the annotation operation starts.

An upper-layer view annotation line drawing module: used to draw annotated lines in the upper-layer view according to the upper-layer view information of the annotation lines until the annotation operation ends.

The stored upper layer view information of annotation lines includes position coordinates, thickness, color, generation time and last storage time. Among them, the position coordinates are the continuous trajectory coordinates of the fingers across the touch screen; the line thickness can be converted by detecting the touch pressure value or selected by the user in advance; the line color information is selected by the user in advance; when the upper layer of the annotation line is stored The time of view information is its generation time, and the moment when the current annotation operation is completed is its last storage time.

Since the upper-level view information of the annotation line is displayed and stored by the lower-level view, the upper-level view information of the annotation line is stored in step 2, and key data such as the coordinates, thickness, color, generation time, and last storage time of the handwriting are stored, and these data are stored Can also be used to undo and redo annotation lines.

Lower layer view annotation line drawing module: after the current annotation operation is completed, redraw the annotation lines in the lower layer view according to the upper layer view information of each annotation operation.

The lower layer view annotation line drawing module includes an annotation line upper layer view information storage module and an annotation line upper layer view information calling module, wherein:

Annotation line upper layer view information storage module: store the line upper layer view information after each annotation operation. The storage and calling of the upper layer view information of the line is carried out through a public class, that is, the upper layer view adds the upper layer view information of the annotation line to the array of the public class dedicated to storing the upper layer view information of the annotation line, and stores a line upper layer view every time an annotation operation is completed information.

Annotation line upper-layer view information calling module: when the lower-layer view is redrawn, the public class is requested, and the line upper-layer view information of each annotation operation is called sequentially according to the last storage time of the annotation line upper-layer view information.

Upper view annotation line drawing module: After redrawing the annotation lines in the lower view, acquire the upper view information of the current annotation line and the upper view information of the empty annotation lines in the storage module.

The embodiments of the present invention have been described above. However, the present invention is not limited to the above-mentioned embodiments. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principles of the present invention shall be included within the protection scope of the present invention.

Claims (9)

1. A method for annotating on a display screen, comprising the following steps: Create an upper layer view and a lower layer view, and the position and size of the upper layer view and the lower layer view in the coordinate system of its parent class view are the same; After the annotation operation starts, obtain and store the upper layer view information of the current annotation line that the annotation marker passes through on the display screen in real time, and continue to draw the annotation line in the upper layer view according to the upper layer view information of the annotation line; After the current annotation operation is completed, store the upper view information of the completed annotation line, call the upper layer view information of each annotation operation, and redraw the annotation line in the lower view; After redrawing the annotation lines in the lower view, clear the upper view information of the annotation lines. 2. The method according to claim 1, wherein the stored upper-level view information of the annotation line includes the position coordinates of the annotation line and the last storage time of the information. 3. The method according to claim 2, characterized in that: the storage and calling of the annotation line upper layer view information is carried out through a public class, and the annotation line upper layer view information is added to the upper layer of the public class for storing the annotation line by the upper layer view In the array of view information, every time an annotation operation is completed, the upper layer view information of an annotation line is stored; when the annotation line is redrawn in the lower layer view, in this public class, the last storage time of the upper layer view information of the annotation line is sequentially called. The upper layer view information of the annotation line for the annotation operation. 4. The method according to claim 2, wherein the stored upper-layer view information of the annotation line further includes the thickness, color and/or information generation time of the annotation line. 5. The method according to claim 1, characterized in that: when the annotation marker is a finger or a touch pen, when the finger or the touch pen touches the touch screen, the annotation operation starts; when the finger or the touch pen leaves When the screen is touched, the annotation operation is completed. 6. The method according to claim 1, characterized in that: when the annotation marker is a mouse, when a specific button of the mouse is pressed on the display screen, the annotation operation starts; when the specific button of the mouse is released When it is turned on, the annotation operation is completed. 7. A system for annotating on a display screen, characterized in that it includes a view creation module, an upper layer view information acquisition and storage module for the current annotation line, an upper layer view annotation line drawing module, a lower layer view annotation line drawing module and an upper layer View annotation line deletion module, in which, View creation module: create the upper view and the lower view, the position and size of the upper view and the lower view are the same in the coordinate system of their parent class view; Obtaining and storing module of the upper layer view information of the current annotation line: after the annotation operation starts, obtain and store the upper layer view information of the current annotation line passing by the annotation marker on the display screen in real time; Upper-layer view annotation line drawing module: continuously draw the annotation line in the upper-layer view according to the upper-layer view information of the annotation line; Lower layer view annotation line drawing module: after the current annotation operation is completed, store the upper layer view information of the completed annotation line, call the upper layer view information of the annotation line for each annotation operation, and redraw the annotation line in the lower layer view; Upper layer view annotation line deletion module: After redrawing the annotation lines in the lower view, clear the upper layer view information of the annotation lines in the current annotation line upper view information acquisition and storage module. 8. The system according to claim 7, characterized in that: the lower layer view annotation line drawing module includes an annotation line upper layer view information storage module and an annotation line upper layer view information calling module, Annotation line upper-level view information storage module: add the annotation line upper-level view information to the array of the public class for storing the annotation line upper-level view information through the upper-level view, and store an annotation line upper-level view information every time an annotation operation is completed; Annotation line upper-layer view information calling module: when re-drawing annotation lines in the lower-layer view, in the public class, sequentially call the line upper-layer view information of each annotation operation according to the last storage time of the annotation line upper-layer view information. 9. The system of claim 8, wherein the system is a mobile electronic device.