A method for recognizing hand-drawn circles on a smartphone screen

Abstract

The present invention discloses a method for recognizing a hand-drawn circle on a smart phone screen, including storing the positions of all points of a gesture on a canvas, taking any three points to find the position of the center O, and taking the center as the origin of the rectangular coordinate axis to calculate the radius R; measuring the distances from all points to the center O, and calculating △Rn by subtracting them from the radius R; extracting the point when △Rn is greater than a preset range and marking it as the first category, calculating the fan angle a between each two adjacent points of the figure drawn by the gesture: calculating the angle between the line connecting each two adjacent points of the drawn figure and the center of the circle, and summing SUM(a). If SUM(a) is less than 360 degrees, calculating the angle between the radius where the initial point (X0, Y0) is located and the X-axis as A0, and the angle between the radius where the end point (Xlen, Ylen) is located and the X-axis as Alen, and marking it as the second category. Correcting the figure drawn by the gesture to a circle; the present invention can improve the success rate of hand-drawn circular figures, and will not affect other figures on the canvas.

Description

Technical Field

[0001] The invention relates to the field of smart phone software, and in particular to a method for recognizing a hand-drawn circle on a smart phone screen. Background Art

[0002] Smartphones are becoming more powerful, screens are getting bigger, and smartphone-based image software is becoming more mature. When shopping or playing games on mobile phones, some interactive activities are achieved by hand-painting on the surface of the mobile phone screen. HTML5 is commonly used to draw pictures on mobile phone screens. <canvas>The tag draws images through JavaScript scripts, and also provides methods and properties for drawing on the canvas. Use getContext("2d") object properties and methods to draw text, lines, rectangles, circles, etc. on the canvas. In terms of gesture drawing, if the touch trajectory of a person is far from the preset circular trajectory during the drawing process, a request to redraw the image is required, which makes the original script-based drawing software unsuitable. Summary of the invention

[0003] 1. Technical problems to be solved:

[0004] In view of the above technical problems, the present invention provides a circle drawing method based on a smart phone. Through this method, the circle drawn by the user on the mobile phone interface can be corrected, which effectively reduces the time for the user to draw the circle and helps to improve the user experience.

[0005] 2. Technical solution:

[0006] A method for recognizing a hand-drawn circle on a smartphone screen comprises the following steps:

[0007] Step 1: The mobile phone interface displays the page for drawing the circular graph, and the system creates a transparent canvas on the page.

[0008] Step 2: The page listener detects the gesture, that is, it detects that the user draws on the surface of the mobile phone display along the line displayed in step 1. The gesture TochStart event obtains the position of the finger on the screen and draws the corresponding point on the canvas; the gesture TochMove event obtains the position of the finger movement and draws a line on the canvas; the position coordinates of all points of the gesture on the canvas are stored as (x n ,y n ), where n is an integer greater than or equal to 1.

[0009] Step 3: Select any three points from the points used to draw the circular graph, and use the perpendicular diameter law and the perpendicular line function to find the location of the center O of the circular graph drawn by the gesture, and use the center as the origin of the rectangular coordinate axis. At the same time, calculate the radius R of the circle based on the coordinates of the three points and the center of the circle; update the coordinates of all points to (x n ,y n ), where n is an integer greater than or equal to 1.

[0010] Step 4: Measure the distances from all points in the figure drawn by the gesture to the center O of the circle, and subtract them from the radius R calculated in step 3 to calculate △Rn; if △Rn is greater than the preset range, extract the point and mark it as the first category.

[0011] Step 5: Calculate the sector angle a between each two adjacent points of the figure drawn by the gesture: The calculation formula is as follows:

[0012] a=180*[arctan abs(x m -x m-1 ) / abs(y m -y m-1 )+arctan abs(x m -x m-2 ) / abs(y m -y m-2 )] / π;

[0013] In the above formula, m is an integer less than or equal to n. The angle between each two adjacent points of the drawn figure and the line connecting the center of the circle is calculated, and the sum SUM(a) is taken. If SUM(a) is less than the preset small angle, the figure is considered invalid. If the angle sum SUM(a) is less than 360 degrees, the initial point (X 0 ,Y 0 The angle between the radius of the X axis is A 0 , and the angle between the radius of the end point (Xlen, Ylen) and the X axis is A len , and marked as the second category.

[0014] Correct the figure drawn by the gesture to a circle; loop all the points of the figure drawn by the gesture, if the point belongs to the first category, clear the original point, redraw the point (newx, newy), make the distance from the new point to the center of the circle R, and the angle between the radius of the new point and the X axis remains unchanged; determine whether the second category exists, if so, create an arc / curve from A0 to Alen, the command to create the arc / curve is: canvas.arc(x O ,y O ,R,Min(A 0 , Alen), Max (A 0 , A len )), where x O ,y O are the coordinates of the center of the circle.

[0015] Further, in step three, △Rn is greater than a preset range, specifically -5 to 5 pixels.

[0016] Furthermore, the preset small angle in step 4 is 45 degrees.

[0017] 3. Beneficial effects:

[0018] In the present invention, three points are randomly selected according to the trajectory drawn by the gesture, and the radius and the center of the circle where the three points are located are calculated through the three points, and then the distance between other points of the gesture figure and the center of the circle is calculated. The overall shape of the hand-drawn figure can be adjusted by the length of the distance; by calculating whether the sum of the sizes of all the angles of the hand-drawn figure is equal to 360 degrees, if not, the figure is supplemented, thereby improving the success rate of hand-drawn circular figures without affecting other figures on the canvas. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] Figure 1 The figure is a schematic diagram of an example of a specific implementation. DETAILED DESCRIPTION

[0020] The present invention will be described in detail below with reference to the accompanying drawings.

[0021] A method for recognizing a hand-drawn circle on a smartphone screen comprises the following steps:

[0022] Step 1: The mobile phone interface displays the page for drawing the circular graph, and the system creates a transparent canvas on the page.

[0023] Step 2: The page listener detects the gesture, that is, it detects that the user draws on the surface of the mobile phone display along the line displayed in step 1. The gesture TochStart event obtains the position of the finger on the screen and draws the corresponding point on the canvas; the gesture TochMove event obtains the position of the finger movement and draws a line on the canvas; the position coordinates of all points of the gesture on the canvas are stored as (x n ,y n ), where n is an integer greater than or equal to 1.

[0024] Step 3: Select any three points from the points used to draw the circular graph, and use the perpendicular diameter law and the perpendicular line function to find the location of the center O of the circular graph drawn by the gesture, and use the center as the origin of the rectangular coordinate axis. At the same time, calculate the radius R of the circle based on the coordinates of the three points and the center of the circle; update the coordinates of all points to (x n ,y n ), where n is an integer greater than or equal to 1.

[0025] Step 4: Measure the distances from all points in the figure drawn by the gesture to the center O of the circle, and subtract them from the radius R calculated in step 3 to calculate △Rn; if △Rn is greater than the preset range, extract the point and mark it as the first category.

[0026] Step 5: Calculate the sector angle a between each two adjacent points of the figure drawn by the gesture: The calculation formula is as follows:

[0027] a=180*[arctan abs(x m -x m-1 ) / abs(y m -y m-1 )+arctan abs(x m -x m-2 ) / abs(y m -y m-2 )] / π;

[0028] In the above formula, m is an integer less than or equal to n. The angle between each two adjacent points of the drawn figure and the line connecting the center of the circle is calculated, and the sum SUM(a) is taken. If SUM(a) is less than the preset small angle, the figure is considered invalid. If the angle sum SUM(a) is less than 360 degrees, the initial point (X 0 ,Y 0 The angle between the radius of the X axis is A 0 , and the angle between the radius of the end point (Xlen, Ylen) and the X axis is A len , and marked as the second category.

[0029] Step 6: Correct the figure drawn by the gesture to a circle; loop all the points of the figure drawn by the gesture, if the point belongs to the first category, clear the original point, redraw the point (newx, newy), make the distance from the new point to the center of the circle R, and the angle between the radius of the new point and the X axis remains unchanged; determine whether the second category exists, if so, create an arc / curve from A0 to Alen, the command to create the arc / curve is: canvas.arc(x O ,y O ,R,Min(A 0 , Alen), Max (A 0 , A len )), where x O ,y O are the coordinates of the center of the circle.

[0030] Further, in step three, △Rn is greater than a preset range, specifically -5 to 5 pixels.

[0031] Furthermore, the preset small angle in step 4 is 45 degrees. Specific embodiment:

[0033] Attach Figure 1 Take the circle shown as an example, the circle in the figure is a circle that needs to be drawn by gestures. In the figure, seven points 1, 2, 3, 4, 5, 6, and 7 are taken as examples, and the 7 points are points drawn on the mobile phone screen by gestures; among them, any three points 1, 2, and 3 are selected, and according to the perpendicular diameter law and the vertical line function, the position of the center O of the circular graph drawn by the gesture is calculated, and the position is set as the origin of the rectangular coordinate axis; the distance between points 4 and 5 and the center of the circle is less than the preset radius, and the distance between points 6 and 7 is greater than the preset radius of the circle. 4, 5, 6, and 7 all belong to the first category of points; all the points drawn on the mobile phone screen by all gestures are classified as the 7 points above, and the average values ​​of the differences between the first category points, the second category points and the preset radius are calculated respectively; according to the size of the two average values, it can be judged whether the hand-drawn picture meets the hand-drawn requirements. If not, the original point is cleared and the point (newx, newy) is redrawn. 4', 5', 6', and 7' in the figure are the corrected points 4, 5, 6, and 7 respectively; taking the 7 points in the figure as an example, where point 1 is the initial point and point 7 is the final point, then the sum of the adjacent angles from point 1 to point 7 is less than 360 degrees, then an arc is drawn between point 1 and point 7 through commands.

[0034] Although the present invention has been disclosed as above in terms of preferred embodiments, they are not intended to limit the present invention. Anyone skilled in the art can make various changes or modifications without departing from the spirit and scope of the present invention. Therefore, the scope of protection of the present invention should be based on the scope of protection defined by the claims of this application.< / canvas>

Claims

1. A method for recognizing a hand-drawn circle on a smartphone screen, comprising the following steps: Step 1: The mobile phone interface displays the page for drawing a circular line, and the system creates a transparent canvas on the page; Step 2: The page listener detects that the user draws on the surface of the mobile phone display along the line displayed in step 1. The gesture TouchStart event obtains the position of the finger on the screen and draws the corresponding point on the canvas; the gesture TouchMove event obtains the position of the finger movement and draws a line on the canvas; the positions of all points of the gesture on the canvas are stored; Step 3: Select any three points from the points used to draw the circular graph, and use the perpendicular diameter law and the perpendicular line function to find the location of the center O of the circular graph drawn by the gesture, and use the center as the origin of the rectangular coordinate axis. At the same time, calculate the radius R of the circular graph based on the coordinates of the three points and the center of the circle; update the coordinates of all points to (x n ,y n ), where n is an integer greater than or equal to 0; Step 4: Measure the distances from all points in the figure drawn by the gesture to the center O of the circle, and subtract them from the radius R of the circle calculated in step 3 to calculate △Rn; extract points whose △Rn is greater than the preset range and mark them as the first category; Step 5: Calculate the fan angle a between each two adjacent points of the figure drawn by the gesture: Calculate the angle between each two adjacent points of the drawn figure and the line connecting the center of the circle, and sum SUM(a); if SUM(a) is less than the preset small angle, the figure is judged to be invalid; if the angle sum SUM(a) is less than 360 degrees, calculate the angle between the radius of the initial point (X0, Y0) and the X-axis as A0, and the angle between the radius of the end point (Xn, Yn) and the X-axis as A len , and marked as the second category; Step 6: Correct the figure drawn by the gesture to a circle; loop all the points of the figure drawn by the gesture, if the point belongs to the first category, clear the original point, redraw the point (newx, newy), make the distance from the new point to the center of the circle R, and the angle between the radius of the new point and the X axis remains unchanged; determine whether the second category exists, if so, create angle A0 to angle A len The corresponding arc is: canvas.arc(x O ,y O ,R,Min(A0,A len ),Max(A0,A len )), where x O ,y O are the coordinates of the center of the circle.

2. The method for recognizing a hand-drawn circle on a smart phone screen according to claim 1, characterized in that: In step 3, the preset range of △Rn is specifically -5 to 5 pixels.

3. The method for recognizing a hand-drawn circle on a smart phone screen according to claim 1, characterized in that: The preset small angle in step 5 is 45 degrees.

Images