阅读说明：本技术 一种在显示屏上进行批注的方法及其系统 (Method and system for annotating on display screen ) 是由 唐广超 于 2016-12-01 设计创作，主要内容包括：一种在显示屏上进行批注的方法,包括创建上层视图和下层视图,上层视图和下层视图在其父类视图坐标系统中的位置和大小相同；批注操作开始后,实时获取并存储批注标识物在显示屏上经过的批注线条的上层视图信息,并根据批注线条上层视图信息持续在上层视图中绘制批注线条；当前批注操作完成后,根据此次批注线条的上层视图信息和已有的批注线条下层视图信息,重新绘制下层视图中的批注线条；重新绘制下层视图中的批注线条后,清空批注线条的上层视图信息。本发明还提供一种在显示屏上进行批注的系统。本发明在批注线条数量较多时,绘制性能明显提升,减少了设备屏幕的整体刷新频率,节省CPU、内存等系统资源。(A method for annotating on a display screen comprises the steps of creating an upper layer view and a lower layer view, wherein the positions and the sizes of the upper layer view and the lower layer view in a parent view coordinate system are the same; after the annotating operation is started, acquiring and storing upper-layer view information of an annotating line which an annotating marker passes through on a display screen in real time, and continuously drawing the annotating line in the upper-layer view according to the upper-layer view information of the annotating line; after the current annotation operation is finished, redrawing the annotation lines in the lower layer view according to the upper layer view information of the annotation lines and the existing lower layer view information of the annotation lines; and after the annotation line in the lower layer view is redrawn, emptying the upper layer view information of the annotation line. The invention also provides a system for annotating on the display screen. When the number of the annotation lines is large, the drawing performance is obviously improved, the overall refreshing frequency of the equipment screen is reduced, and system resources such as a CPU (central processing unit), a memory and the like are saved.)

1. A method for annotating on a display screen, comprising the steps of:

displaying an upper layer view and a lower layer view, the upper layer view being positioned above the lower layer view;

receiving annotation operation of an annotation marker acting on a current display screen, displaying an annotation line drawn corresponding to the annotation operation in an upper-layer view, and storing upper-layer view information of the annotation line;

confirming that the annotation operation is completed, and drawing an annotation line in the lower-layer view according to the upper-layer view information so that the annotation line corresponding to the upper-layer view information is displayed in the lower-layer view; wherein the upper layer view and the lower layer view have the same position in the same coordinate system.

2. The method according to claim 1, wherein the redrawing the annotation line in the lower layer view so that the annotation line corresponding to the upper layer view information is displayed in the lower layer view, further comprises the steps of:

and clearing the annotation line which is displayed by the upper layer view and corresponds to the upper layer view information.

3. The method of claim 1, further comprising the step of:

and creating the upper layer view and the lower layer view, wherein the upper layer view and the lower layer view belong to the same parent class view.

4. The method of claim 3, wherein:

the upper layer view and the lower layer view are the same in size, and the coordinate origins of the upper layer view and the lower layer view in the parent view coordinate system are the same.

5. The method of claim 1, wherein the stored upper view information includes position coordinates of annotated lines.

6. The method of claim 1, wherein the stored upper layer view information further comprises at least one or more of:

the thickness of the annotation line,

The color of the annotation line,

Information generation time of the upper view information,

A last storage time of the upper view information.

7. The method of claim 1, wherein: and the operation of confirming the annotation is completed, and the annotation line in the lower layer view is redrawn according to the upper layer view information, and the operation comprises the following steps:

and confirming that the annotation operation is finished, and redrawing the annotation lines in the lower-layer view by calling the upper-layer view information and the lower-layer view information corresponding to the existing annotation lines in the lower-layer view.

8. The method of claim 1, wherein: the annotation marker comprises one or more of a finger, a stylus, and a mouse.

9. The method of claim 8, wherein: when the annotation marker is a finger or a touch pen, the annotation operation is started when the finger or the touch pen is detected to contact the display screen; and when the finger or the touch pen is detected to leave the display screen, the completion of the annotation operation is confirmed.

10. The method of claim 8, wherein: when the annotation marker is a mouse and a signal sent by pressing a specific key of the mouse is detected, the annotation operation starts; when the signal sent by releasing the specific key of the mouse is detected, the completion of the annotation operation is confirmed.

11. The method of claim 1, wherein: the upper layer view is a transparent layer.

12. A system for annotating on a display screen, comprising:

the view creating module is used for displaying an upper view and a lower view, and the upper view is positioned above the lower view;

the upper-layer view annotation line drawing module is used for receiving annotation operation of an annotation marker acting on the current display screen, displaying an annotation line drawn corresponding to the annotation operation in the upper-layer view, and storing upper-layer view information of the annotation line;

the lower-layer view annotation line drawing module is used for confirming that annotation operation is finished, and drawing the annotation line in the lower-layer view according to the upper-layer view information so as to display the annotation line corresponding to the upper-layer view information in the lower-layer view;

wherein the upper layer view and the lower layer view have the same position in the same coordinate system.

13. The system of claim 12, further comprising an upper-level view annotation line deletion module to:

the upper-layer view annotation line deleting module is used for redrawing the annotation line in the lower-layer view by the lower-layer view annotation line drawing module so that the annotation line corresponding to the upper-layer view information is displayed in the lower-layer view,

and clearing the annotation line which is displayed by the upper layer view and corresponds to the upper layer view information.

14. The system of claim 12, wherein the view creation module is further configured to:

and creating the upper layer view and the lower layer view, wherein the upper layer view and the lower layer view belong to the same parent class view.

15. The system of claim 14, wherein:

the upper layer view and the lower layer view are the same in size, and the coordinate origins of the upper layer view and the lower layer view in the parent view coordinate system are the same.

16. The system according to claim 1, wherein the stored upper view information includes position coordinates of annotated lines.

17. The system of claim 1, wherein the stored upper layer view information further comprises at least one or more of:

the thickness of the annotation line,

The color of the annotation line,

Information generation time of the upper view information,

A last storage time of the upper view information.

18. The system of claim 1, wherein: the lower-layer view annotation line drawing module is configured to confirm that annotation operation is completed, and redraw an annotation line in the lower-layer view according to the upper-layer view information, and specifically includes:

and confirming that the annotation operation is finished, and redrawing the annotation lines in the lower-layer view by calling the upper-layer view information and the lower-layer view information corresponding to the existing annotation lines in the lower-layer view.

19. The system of claim 1, wherein: the annotation marker comprises one or more of a finger, a stylus, and a mouse.

20. The system of claim 19, wherein: when the annotation marker is a finger or a touch pen, the annotation operation is started when the finger or the touch pen is detected to contact the display screen; and when the finger or the touch pen is detected to leave the display screen, the completion of the annotation operation is confirmed.

21. The system of claim 19, wherein: when the annotation marker is a mouse and a signal sent by pressing a specific key of the mouse is detected, the annotation operation starts; when the signal sent by releasing the specific key of the mouse is detected, the completion of the annotation operation is confirmed.

22. The system of claim 12, wherein: the upper layer view is a transparent layer.

23. The system of claim 12, wherein: the system is a mobile electronic device.

Technical Field

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

Background

With the development of mobile electronic devices and touch screen technologies, touch screens have been applied to more and more mobile devices. Along with touch applications, a variety of corresponding application software has emerged to enable users to implement specific operations on mobile devices. Typically, the user can annotate the display content on the touch screen with specific software.

When a real-time annotation line marking operation is implemented on a touch screen of a mobile device, the existing implementation scheme is to frequently perform a refresh operation on one view object to display an annotation line, that is, the view object must redraw all previously annotated lines at each refresh regardless of the number of annotation lines on the current touch screen.

When too many annotation lines exist on the view object, the device needs to redraw all the lines drawn before each time, which is limited by the processing capability of the mobile device, and the annotation display performance of the device is obviously affected, so that the phenomenon that the display of the lines obviously does not follow the touch points during annotation occurs.

Disclosure of Invention

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

step 1: creating an upper layer view and a lower layer view, wherein the positions and the sizes of the upper layer view and the lower layer view in a parent view coordinate system are the same;

step 2: after the annotating operation is started, acquiring and storing upper-layer view information of a current annotating line, which is passed by an annotating marker on a display screen, in real time, and continuously drawing the annotating line in the upper-layer view according to the upper-layer view information of the annotating line;

and step 3: after the current annotation operation is finished, redrawing the annotation lines in the lower layer view according to the upper layer view information of the annotation lines and the existing lower layer view information of the annotation lines in the lower layer view;

and 4, step 4: and after the annotation line in the lower layer view is redrawn, emptying the upper layer view information of the annotation line.

Further, in step 3, the upper-layer view information of the annotation line of each annotation operation is called through the stored upper-layer view information of the annotation line at the current time, and the annotation line in the lower-layer view is redrawn.

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

Further, in step 3, storing and calling the upper view information of the annotation lines are carried out through a public class, the upper view information of the annotation lines is added to an array of the public class for storing the upper view information of the annotation lines through the upper view, and one piece of upper view information of the annotation lines is stored every time the annotation operation is completed; and when the annotation lines are redrawn in the lower layer view, sequentially calling the annotation line upper layer view information of each annotation operation in the public class according to the sequence of the last storage time of the annotation line upper layer view information.

Further, the stored upper view information of the annotation line also comprises the thickness, the color and the 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 contacts the touch display screen, the annotation operation starts; when the finger or the touch pen leaves the touch display screen, the annotation operation is finished.

Further, 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 key of the mouse is released, the annotation operation is completed.

The invention also provides a system for annotating on a display screen, which comprises a view creating module, a current annotating line upper-layer view information acquisition and storage module, an upper-layer view annotating line drawing module, a lower-layer view annotating line drawing module and an upper-layer view annotating line deleting module, wherein,

a view creation module: creating an upper layer view and a lower layer view, wherein the positions and the sizes of the upper layer view and the lower layer view in a parent view coordinate system are the same;

the current annotating line upper view information acquisition and storage module comprises: after the annotation operation is started, acquiring and storing upper-layer view information of a current annotation line, which passes by an annotation marker on a display screen, in real time;

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

the lower-layer view annotation line drawing module: after the current annotation operation is finished, redrawing the annotation lines in the lower layer view according to the upper layer view information of the annotation lines and the existing lower layer view information of the annotation lines in the lower layer view;

the upper layer view annotation line deleting module: and after the annotation line in the lower layer view is redrawn, clearing the upper layer view information of the annotation line in the current annotation line and the upper layer view information of the annotation line in the storage module.

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

annotate line upper view information storage module: adding the upper-layer view information of the annotation lines into a public array for storing the upper-layer view information of the annotation lines through the upper-layer view, and storing one piece of upper-layer view information of the annotation lines every time the annotation operation is completed;

annotate line upper view information and call module: and when the annotation lines are redrawn in the lower layer view, sequentially calling the upper layer view information of the lines of each annotation operation in the public class according to the sequence of the last storage time of the upper layer view information of the annotation lines.

Further, the system is a mobile electronic device.

According to the invention, two different view objects with upper and lower levels are used during annotation, the upper view only temporarily displays the annotation lines during annotation, and the lower view displays all the annotated lines which are annotated. During real-time annotation, only the upper layer view is refreshed/redrawn all the time, and the lower layer view is refreshed only once after annotation is completed.

The invention has the advantages that when the number of the annotation lines is large, the drawing performance of the annotation lines is obviously improved, the overall refreshing frequency of the screen of the device is reduced, the system resources such as a CPU (central processing unit), a memory and the like are saved, and the invention is particularly suitable for mobile electronic devices.

Drawings

FIG. 1 is a flow chart of a method of annotating on a display screen in accordance with the present invention;

FIG. 2 is a schematic diagram of a variation of the display content of the upper and lower views 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 Description

In order to make the objects, technical solutions and advantages of the present invention more apparent, the present invention is described in further detail below with reference to specific embodiments and the accompanying drawings. Those skilled in the art will appreciate that the present invention is not limited to the drawings and the following examples.

In a preferred embodiment of the present invention, referring to fig. 1 and 2, a method for annotating with a finger (or a touch pen) on a touch-sensitive display screen includes the following steps:

step 1: two views, an upper view and a lower view, of the same position and size in their parent view coordinate system are created and added to the parent view in turn, with the upper view above the lower view.

The created two view objects have the same length and width and the same coordinate origin, and the images of the display screen can be directly displayed. The reason for creating two views is that the upper view is used to display lines of real-time annotations on the display screen, the lower view will display lines of all annotations that have been completed after one annotation is completed, and the upper view is completely transparent when there is no annotation handwriting.

Step 2: when a finger is pressed down on the display screen, the annotating operation is started, the upper-layer view information of the current annotating line which the finger passes through on the display screen is obtained and stored, the annotating line is drawn in the upper-layer view according to the upper-layer view information of the annotating line until the finger is lifted from the display screen, and the annotating operation is finished.

In the step, in the annotating process, namely the process that fingers are pressed down on the display screen, the fingers move on the display screen and the fingers are lifted up from the display screen, the upper layer view is constantly refreshed, and the annotated lines are redrawn, so that the current annotated lines are displayed in real time by the upper layer view.

In addition, the stored annotation line upper view information includes position coordinates, thickness, color, generation time, and last storage time. The position coordinates are continuous track coordinates of the fingers on the touch display screen; the thickness of the line can be obtained by detecting the touch pressure value and converting or selected by a user in advance; the line color information is selected by a user in advance; and when the time for starting to store the upper-layer view information of the annotation line is the generation time of the annotation line, the time for finishing the current annotation operation is the last storage time of the annotation line.

Since the upper view information of the annotation line is displayed and stored by the lower view, the upper view information of the annotation line is stored in step 2, and key data such as coordinates, thickness, color, generation time, last storage time and the like of handwriting are stored, and the stored data can be used for withdrawing and recovering the annotation line.

And step 3: and after the fingers are lifted from the display screen, the current annotation operation is finished, the information of the upper layer view of the annotation line is transmitted to the lower layer view, and the annotation line in the lower layer view is redrawn.

And storing the upper-layer view information of the annotation line after each annotation operation for the lower-layer view to call. The storage and calling of the upper view information of the annotation lines are carried out through a public class, namely the upper view adds the upper view information of the annotation lines into a public array which is specially used for storing the upper view information of the annotation lines, and one piece of upper view information of the annotation lines is stored every time the annotation operation is finished; and when the lower layer view is redrawn, requesting the public class, and sequentially calling the annotation line upper layer view information of each annotation operation according to the sequence of the last storage time of the annotation line upper layer view information. The lower view only needs to be refreshed once.

In the step 3, the process of storing the upper view information of the annotation line and calling the upper view information of the annotation line seems to be complex, but the time spent on the operation of storing and returning in the CPU is far less than the time spent on refreshing the upper view in real time during annotation, so that the system resources are greatly saved.

And 4, step 4: and after the annotation lines in the lower layer view are redrawn, clearing the annotation lines in the upper layer view.

Since the drawing is already performed in the lower layer view according to all the annotated upper layer view information (including the annotation operation just completed on the upper layer view) of the annotated lines in step 3, at this time, only the annotated lines of the upper layer view need to be removed, and the upper layer view information of the annotated lines is emptied.

And repeating the steps 1-4 to complete the subsequent annotation operation.

In the invention, the display screen refreshes the view objects at a relatively fast frequency, and the upper view is refreshed each time the finger is used for annotating. And (4) removing the lines of the annotation from the annotation operation in the step (2) to the upper layer view in the step (4), wherein the upper layer view is constantly refreshed, so that the annotation lines displayed on the display screen in the annotation process are guaranteed to be smooth and not to be sensitive to delay.

The present invention has been described in detail above with reference to the example of a finger operating a touch panel. It will be appreciated by those skilled in the art that the above method can also be used in a general home computer having a display screen. Compared with the above embodiment, the annotating operation is performed only by a mouse instead of by fingers. When a specific key of the mouse is pressed on the display screen, the annotating operation is started, when the specific key of the mouse is released, the annotating operation is ended, and in the annotating process, the upper-layer view information of the annotating line which the mouse passes through on the display screen is also obtained and stored.

The method can be suitable for various existing operating systems, such as Windows, iOS or Android operating systems, and is particularly suitable for operating mobile equipment, such as a mobile phone and a tablet. Hereinafter, a mobile electronic device having a touch panel with an iOS system mounted thereon will be described as an example.

Step 21: two UIView sub-view objects with the same frame attribute, namely an upper view and a lower view, are created in one UIView, the two views have an upper-lower hierarchical relationship and can both realize a draw Rect method, and the method is called when a device refreshes the views each time.

Step 22: when a finger touches a screen, a touchbits method of an upper view is called, a setneedledsisplay method is called in the method in real time, and the upper view is refreshed in real time;

when a finger moves on a screen, a touchmoved method of an upper layer view is called, and when the upper layer view is refreshed in real time in the method, upper layer view information of an annotation line, such as UIBezierPath, UIColor and the like, of the annotation line is stored in a temporary object of SLANTATIONModel;

when the finger leaves the screen, touchends of the upper layer view is called, and a temporary object SLANTATATIONModel containing the annotation line upper layer view information of the annotation is added to the array attribute of the public class SLANTATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATATAT.

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

Step 24: and the upper layer view calls a removeAllPoints method of the UIBezierPath to clear the line of the current annotation.

The invention also provides a system for annotating on the display screen, which comprises a view creating module, an upper-layer view information acquisition and storage module of 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 deleting module, as shown in fig. 3. Wherein the content of the first and second substances,

a view creation module: for creating two views of the same position and size in their parent view coordinate system-an upper view and a lower view-and adding them in turn to the parent view, with the upper view above the lower view.

The created two view objects have the same length and width and the same coordinate origin, and the images of the display screen can be directly displayed. The reason for creating two views is that the upper view is used to display lines of real-time annotations on the display screen, and the lower view displays lines of all completed annotations after one annotation is completed.

The current annotating line upper view information acquisition and storage module comprises: the method is used for acquiring and storing the upper-layer view information of the current annotation line which is passed by the annotation marker (finger or mouse) on the display screen after the annotation operation is started.

The upper layer view annotation line drawing module: and drawing the annotation line in the upper view according to the annotation line upper view information until the annotation operation is finished.

The stored upper view information of the annotation line comprises position coordinates, thickness, color, generation time and final storage time. The position coordinates are continuous track coordinates of the fingers on the touch display screen; the thickness of the line can be obtained by detecting the touch pressure value or selected by a user in advance; the line color information is selected by the user in advance; and when the time for starting to store the upper-layer view information of the annotation line is the generation time of the annotation line, the time for finishing the current annotation operation is the last storage time of the annotation line.

Since the upper view information of the annotation line is displayed and stored by the lower view, the upper view information of the annotation line is stored in step 2, and key data such as coordinates, thickness, color, generation time, last storage time and the like of handwriting are stored, and the stored data can be used for withdrawing and recovering the annotation line.

The lower-layer view annotation line drawing module: and after the current annotation operation is finished, redrawing the annotation lines in the lower layer view according to the information of the upper layer view of the lines of each annotation operation.

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

annotate line upper view information storage module: and storing the information of the upper layer view of the line after each annotation operation. The storage and calling of the upper-layer view information of the lines are carried out through a public class, namely the upper-layer view adds the upper-layer view information of the annotation lines into a public-class array which is specially used for storing the upper-layer view information of the annotation lines, and one piece of upper-layer view information of the lines is stored every time the annotation operation is completed.

Annotate line upper view information and call module: and when the lower layer view is redrawn, requesting the public class, and sequentially calling the upper layer view information of the lines of each annotation operation according to the sequence of the last storage time of the upper layer view information of the annotation lines.

The upper layer view annotation line drawing module: and after the annotation line in the lower layer view is redrawn, the upper layer view information of the annotation line is emptied from the current annotation line upper layer view information acquisition and storage module.

The embodiments of the present invention have been described above. However, the present invention is not limited to the above embodiment. Any modification, equivalent replacement, or improvement made within the spirit and principle of the present invention should be included in the protection scope of the present invention.