CN108733293B - Writing track processing method and device - Google Patents

Writing track processing method and device Download PDF

Info

Publication number
CN108733293B
CN108733293B CN201810596701.4A CN201810596701A CN108733293B CN 108733293 B CN108733293 B CN 108733293B CN 201810596701 A CN201810596701 A CN 201810596701A CN 108733293 B CN108733293 B CN 108733293B
Authority
CN
China
Prior art keywords
writing
point
canvas
track
sub
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201810596701.4A
Other languages
Chinese (zh)
Other versions
CN108733293A (en
Inventor
朱志豪
刘少杰
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Guangzhou Shiyuan Electronics Thecnology Co Ltd
Guangzhou Shirui Electronics Co Ltd
Original Assignee
Guangzhou Shiyuan Electronics Thecnology Co Ltd
Guangzhou Shirui Electronics Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Guangzhou Shiyuan Electronics Thecnology Co Ltd, Guangzhou Shirui Electronics Co Ltd filed Critical Guangzhou Shiyuan Electronics Thecnology Co Ltd
Priority to CN201810596701.4A priority Critical patent/CN108733293B/en
Publication of CN108733293A publication Critical patent/CN108733293A/en
Application granted granted Critical
Publication of CN108733293B publication Critical patent/CN108733293B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

The application provides a writing track processing method and device, wherein an erasing area input by a user in a canvas displayed on a browser is obtained; further, sequentially determining whether each point on the writing track in the canvas is positioned in the erasing area; further, removing the points in the erasing area from the writing track displayed in the canvas, and deleting the points from the writing path corresponding to the writing track stored in the storage unit, so that each segment of sub-writing track obtained after erasing in the canvas respectively corresponds to one segment of sub-writing path; and further, receiving the dragging operation of the user on any point on the canvas, and if the coordinate information of any point is located on any segment of the erased sub-writing path, dragging the sub-writing path corresponding to the sub-writing path. The function of dragging any sub-writing tracks formed after erasing respectively based on the browser is achieved.

Description

Writing track processing method and device
Technical Field
The present application relates to the field of computer technologies, and in particular, to a writing trajectory processing method and apparatus.
Background
With the increasing demand of users for writing on terminal devices, the tablet function has become a common product interaction function in terminal devices. Generally, a user can write on a canvas of a writing board to form one or more writing tracks; the writing track written on the canvas can also be erased.
In the related art based on a browser in a terminal device, writing and erasing at a visual level can be realized through an Application Programming Interface (API) provided by the browser. With the further increase of the writing requirements of the user, a function of dragging a plurality of sub-writing tracks formed after erasing respectively based on the browser requirement is provided. However, in the related art, the plurality of sub-writing tracks formed by erasing from the visual layer only cannot be dragged separately.
Disclosure of Invention
The application provides a writing track processing method and device, which realize a writing track segmentation function based on a browser and improve user experience.
In a first aspect, the present application provides a writing trajectory processing method, including:
acquiring an erasing area input by a user in a canvas displayed on a browser;
sequentially determining whether each point on a writing track in the canvas is positioned in the erasing area;
removing the points in the erasing area from the writing track displayed in the canvas, and deleting the points from the writing path corresponding to the writing track stored in the storage unit, so that each segment of sub-writing track obtained after erasing in the canvas respectively corresponds to one segment of sub-writing path; each segment of the sub-writing path comprises coordinate information of each point on a sub-writing track corresponding to the sub-writing path in the canvas;
and receiving the dragging operation of the user to any point on the canvas, and if the coordinate information of any point is located on any section of the erased sub-writing path, dragging the sub-writing track corresponding to the sub-writing path.
In one possible implementation manner, the acquiring an erasure area input by a user in a canvas displayed on a browser includes:
acquiring an erasing track input by the user in the canvas;
and determining a corresponding erasing area in the canvas according to the erasing track.
In a possible implementation manner, the determining, according to the erase trajectory, a corresponding erase region in the canvas includes:
determining pixel points corresponding to the erasing track in all pixel points of a virtual canvas according to the coordinate information of each point in the erasing track in the canvas, wherein the size of the virtual canvas is the same as that of the canvas displayed on the browser, and the coordinate information of each pixel point in the virtual canvas is stored in a storage unit;
and configuring image information for pixel points corresponding to the erasing track in the virtual canvas and storing the image information in the storage unit, wherein the area corresponding to the pixel points configuring the image information in the canvas displayed on the browser is the erasing area, and the image information comprises at least one of a color value and a transparency value.
In one possible implementation manner, the sequentially determining whether each point on the writing trajectory in the canvas is located in the erasing area includes:
determining a pixel point corresponding to the writing track in the virtual canvas according to coordinate information of each point in the writing track in the canvas displayed on the browser and coordinate information of each pixel point in the virtual canvas;
and if the image information exists in the pixel point corresponding to the writing track, determining that the pixel point is located in the erasing area.
In one possible implementation manner, the acquiring an erasure track input by a user in a canvas displayed on a browser includes:
receiving a starting erasing instruction of a user;
after the pressing operation of the left mouse button by the user is monitored, starting to acquire each point of the movement of the mouse until the left mouse button is monitored to bounce, wherein a track formed by each point of the movement of the mouse is the erasing track.
In a possible implementation manner, the sequentially determining whether each point on the writing track in the canvas is located before the erasing area further includes:
receiving a writing starting instruction of a user;
after the pressing operation of the left mouse button by the user is monitored, starting to acquire each point of the movement of the mouse until the left mouse button is monitored to bounce, wherein a track formed by each point of the movement of the mouse is the writing track.
In one possible implementation, the method further includes:
sequentially connecting lines of all points moved by the mouse by adopting a quadratic Bezier curve, wherein the obtained key points of the Bezier curve are the key points in the writing track;
storing the writing path corresponding to the writing track in a storage unit; and the writing path comprises coordinate information of key points in the writing track.
In one possible implementation manner, the sequentially determining whether each point on the writing trajectory in the canvas is located in the erasing area includes:
determining a sampling value according to the distance of the key points in the writing track;
determining sampling points on the writing track according to key points in the writing track, the sampling values and the secondary Bezier curve formula;
and sequentially determining whether each sampling point on the writing track is positioned in the erasing area.
In one possible implementation, the removing the point located in the erasing area from the writing track displayed in the canvas includes:
and calling a cleaning Application Programming Interface (API) in the browser to remove the key points in the erasing area from the writing track displayed in the canvas so as to form at least two segments of sub-writing tracks.
In one possible implementation manner, deleting the point located in the erasing area from the writing path corresponding to the writing track stored in the storage unit includes:
determining a first critical point and/or a second critical point critical to the erasing area in the key points of the writing track, wherein the next key point of the first critical point along the writing track direction is located in the erasing area, and the last key point of the second critical point along the writing track direction is located in the erasing area;
and adding a first control point and an end point of a quadratic Bezier curve to the first critical point, adding a second control point and a start point of the quadratic Bezier curve to the second critical point according to a quadratic Bezier curve segmentation algorithm, and deleting the coordinate information of the key point in the erasing area from the writing path corresponding to the writing track to form at least two segments of sub-writing paths.
In a possible implementation manner, the receiving a dragging operation of the user to any point on the canvas, and if the coordinate information of the any point is located on any segment of the erased sub-writing path, dragging a sub-writing track corresponding to the sub-writing path includes:
monitoring the pressing operation of a user on a left mouse button, determining that the coordinate information of the position of the pressing operation in the canvas is located on any segment of sub-writing path stored in the storage unit, and starting to acquire the moving distance of the mouse until the left mouse button is monitored to bounce;
determining termination coordinate information of each key point on the sub-writing path on the canvas according to the coordinate information of each key point on the sub-writing path stored in the storage unit and the moving distance of the mouse;
and displaying a sub-writing track corresponding to the sub-writing path on the canvas according to the termination coordinate information.
In a possible implementation manner, after displaying, on the canvas, a sub-writing track corresponding to the sub-writing path according to the termination coordinate information, the method further includes:
and modifying the coordinate information of each key point on the sub-writing path stored in the storage unit into the termination coordinate information.
In a second aspect, the present application provides a writing trace processing apparatus comprising:
the first acquisition module is used for acquiring an erasing area input by a user in a canvas displayed on a browser;
the determining module is used for sequentially determining whether each point on a writing track in the canvas is positioned in the erasing area;
the removing module is used for removing the points in the erasing area from the writing tracks displayed in the canvas and deleting the points from the writing paths corresponding to the writing tracks stored in the storage unit, so that each segment of sub-writing track obtained after the points in the canvas are erased respectively corresponds to one segment of sub-writing path; each segment of the sub-writing path comprises coordinate information of each point on a sub-writing track corresponding to the sub-writing path in the canvas;
and the dragging module is used for receiving the dragging operation of the user on any point on the canvas, and if the coordinate information of any point is located on any section of the erased sub-writing path, dragging the sub-writing track corresponding to the sub-writing path.
In one possible implementation manner, the first obtaining module includes:
the first acquisition unit is used for acquiring an erasing track input by the user in the canvas;
and the first determining unit is used for determining a corresponding erasing area in the canvas according to the erasing track.
In a possible implementation manner, the first determining unit is specifically configured to:
determining pixel points corresponding to the erasing track in all pixel points of a virtual canvas according to the coordinate information of each point in the erasing track in the canvas, wherein the size of the virtual canvas is the same as that of the canvas displayed on the browser, and the coordinate information of each pixel point in the virtual canvas is stored in a storage unit;
and configuring image information for pixel points corresponding to the erasing track in the virtual canvas and storing the image information in the storage unit, wherein the area corresponding to the pixel points configuring the image information in the canvas displayed on the browser is the erasing area, and the image information comprises at least one of a color value and a transparency value.
In a possible implementation manner, the determining module is specifically configured to:
determining a pixel point corresponding to the writing track in the virtual canvas according to coordinate information of each point in the writing track in the canvas displayed on the browser and coordinate information of each pixel point in the virtual canvas;
and if the image information exists in the pixel point corresponding to the writing track, determining that the pixel point is located in the erasing area.
In a possible implementation manner, the first obtaining unit is specifically configured to:
receiving a starting erasing instruction of a user;
after the pressing operation of the left mouse button by the user is monitored, starting to acquire each point of the movement of the mouse until the left mouse button is monitored to bounce, wherein a track formed by each point of the movement of the mouse is the erasing track.
In one possible implementation, the apparatus further includes:
the receiving module is used for receiving a writing starting instruction of a user;
and the second acquisition module is used for starting to acquire each point of the movement of the mouse after monitoring the pressing operation of the left mouse button by the user until the left mouse button is monitored to bounce, wherein a track formed by each point of the movement of the mouse is the writing track.
In one possible implementation, the apparatus further includes:
the processing module is used for sequentially adopting a quadratic Bezier curve to carry out line connection processing on each point moved by the mouse, and the obtained key points of the Bezier curve are the key points in the writing track;
the storage module is used for storing the writing path corresponding to the writing track in a storage unit; and the writing path comprises coordinate information of key points in the writing track.
In one possible implementation manner, the determining module includes:
the second determining unit is used for determining a sampling value according to the distance of the key point in the writing track;
the third determining unit is used for determining sampling points on the writing track according to the key points in the writing track, the sampling values and the quadratic Bezier curve formula;
and the fourth determining unit is used for sequentially determining whether each sampling point on the writing track is positioned in the erasing area.
In a possible implementation manner, the removing module is specifically configured to:
and calling a cleaning Application Programming Interface (API) in the browser to remove the key points in the erasing area from the writing track displayed in the canvas so as to form at least two segments of sub-writing tracks.
In a possible implementation manner, the removing module is specifically configured to:
determining a first critical point and/or a second critical point critical to the erasing area in the key points of the writing track, wherein the next key point of the first critical point along the writing track direction is located in the erasing area, and the last key point of the second critical point along the writing track direction is located in the erasing area;
and adding a first control point and an end point of a quadratic Bezier curve to the first critical point, adding a second control point and a start point of the quadratic Bezier curve to the second critical point according to a quadratic Bezier curve segmentation algorithm, and deleting the coordinate information of the key point in the erasing area from the writing path corresponding to the writing track to form at least two segments of sub-writing paths.
In one possible implementation manner, the dragging module includes:
the second acquisition unit is used for monitoring the pressing operation of a user on a left mouse button, determining that the coordinate information of the position of the pressing operation in the canvas is located on any segment of sub-writing path stored in the storage unit, and starting to acquire the moving distance of the mouse until the left mouse button is monitored to bounce;
a fifth determining unit, configured to determine, according to the coordinate information of each key point on the sub-writing path and the distance over which the mouse moves, which are stored in the storage unit, termination coordinate information of each key point on the sub-writing path on the canvas;
and the display unit is used for displaying the sub-writing track corresponding to the sub-writing path on the canvas according to the termination coordinate information.
In one possible implementation, the apparatus further includes:
and the modifying module is used for modifying the coordinate information of each key point on the sub-writing path stored in the storage unit into the termination coordinate information.
In a third aspect, the present application provides a writing trace processing apparatus, comprising: a memory and a processor; wherein the memory is for storing a computer program executable by the processor;
the processor is configured to execute the computer program to implement the method of any of the first aspect above.
In a fourth aspect, the present application provides a computer-readable storage medium comprising computer-readable instructions which, when read and executed by a writing trace processing apparatus, cause the writing trace processing apparatus to perform the method of any of the first aspects above.
According to the writing track processing method and device, the erasing area input by the user in the canvas displayed on the browser is obtained; further, sequentially determining whether each point on the writing track in the canvas is positioned in the erasing area; further, removing the points in the erasing area from the writing track displayed in the canvas, and deleting the points from the writing path corresponding to the writing track stored in the storage unit, so that each segment of sub-writing track obtained after erasing in the canvas respectively corresponds to one segment of sub-writing path; and further, receiving the dragging operation of the user on any point on the canvas, and if the coordinate information of any point is located on any section of the sub-writing path after the erasing, dragging the sub-writing path corresponding to the sub-writing path. Therefore, the function of dragging any sub-writing tracks formed after erasing based on the browser is achieved, and user experience is improved.
Drawings
In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, it is obvious that the drawings in the following description are only some embodiments of the present application, and for those skilled in the art, other drawings can be obtained according to the drawings without creative efforts.
Fig. 1A is a schematic flow chart of a writing trace processing method according to an embodiment of the present application;
FIG. 1B is a schematic diagram of an input method for erasing a track according to an embodiment of the present disclosure;
FIG. 1C is a schematic diagram of a partitioned sub-writing track provided in an embodiment of the present application;
fig. 1D is a schematic drawing of dragging a sub-writing track according to an embodiment of the present application;
fig. 2A is a schematic flow chart of a writing trajectory processing method according to another embodiment of the present application;
FIG. 2B is a diagram illustrating an input method for a writing trace according to an embodiment of the present application;
fig. 2C is a schematic diagram of a key point and an erasing area of a writing track according to an embodiment of the present disclosure;
FIG. 3 is a flowchart illustrating a writing trajectory processing method according to another embodiment of the present application;
fig. 4 is a schematic structural diagram of a writing trace processing apparatus according to an embodiment of the present application;
fig. 5 is a schematic structural diagram of a writing trace processing apparatus according to another embodiment of the present application.
Detailed Description
The technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are only a part of the embodiments of the present application, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.
First, an application scenario and a part of words related in the embodiments of the present application will be explained.
During the process of using the terminal device, the user sometimes opens a web page in the browser to perform some operations (for example, consulting resources, and/or performing online communication with a remote user). In general, during the operations performed based on the browser, the user may need to perform some basic writing operations such as writing and/or erasing.
With the increase of writing requirements of a user in an operation process, on the basis of writing and visual layer erasing of the browser, the user provides a function of respectively dragging a plurality of sub-writing tracks formed after erasing on the basis of the browser. However, in the related art, the plurality of sub-writing tracks formed after the erasing from the visual layer only cannot be dragged respectively. Therefore, how to implement a function of dragging a plurality of sub-writing tracks formed after erasing respectively based on a browser becomes an urgent problem to be solved.
In the embodiment of the present application, the device for executing the writing trace processing method may be a terminal device, or may be a writing trace processing device in the terminal device. For example, in the following embodiments of the present application, a writing trace processing method in the embodiments of the present application is described by taking a writing trace processing apparatus as an example.
For example, the writing trace processing device may be a chip system, a circuit or a module, and the like, and the application is not limited thereto.
The terminal device related to the present application may include, but is not limited to, any one of the following: mobile phones, tablet computers, desktop computers, personal digital assistants, and the like.
The terminal device related to the application can comprise a hardware layer, an operating system layer running on the hardware layer, and an application layer running on the operating system layer. The hardware layer includes hardware such as a Central Processing Unit (CPU), a Memory Management Unit (MMU), and a Memory (also referred to as a main Memory). The operating system may be any one or more computer operating systems that implement business processing through processes (processes), such as a Linux operating system, a Unix operating system, an Android operating system, an iOS operating system, or a windows operating system. The application layer comprises applications such as a browser, an address list, word processing software, instant messaging software and the like.
The storage unit referred to in the embodiments of the present application may include, but is not limited to, at least one of the following: memory and temporary storage units.
The principle of the quadratic bezier curve segmentation algorithm involved in the embodiment of the present application is as follows:
assuming that the coordinates of the starting point S (Sx, Sy), the coordinates of the control point C (Cx, Cy), and the coordinates of the end point E (Ex, Ey) of the secondary bezier curve, and assuming that the secondary bezier curve is divided into two at t0 (0< t0<1) to obtain two divided curves (e.g., curve 1 and curve 2), the coordinates of the starting point S1 (Sx, Sy), the coordinates of the control point C1 (Sx t1+ Cx t0, Sy t1+ Cy t0), and the coordinates of the end point E1 (Z1x t1+ Z2x t0, Z1y t1+ Z2 t y t0) in curve 1 are determined; wherein t1 is 1-t0, Z1x is Sx t1+ Cx t0, Z1y is Sy t1+ Cy t0, Z2x is Cx t1+ Ex t0, and Z2y is Cy t1+ Ey t 0. Further, coordinates of the starting point S2 (Z1x × t1+ Z2x × t0, Z1y × t1+ Z2y × t0), coordinates of the control point C2 (Cx t1+ Ex × t0, Cy × t1+ Ey t0), and coordinates (Ex, Ey) of the end point E2 were determined in curve 2.
Alternatively, t0 refers to a division ratio of the division point (or the critical point) on the quadratic bezier curve. For example, assuming that the sampling points of the quadratic bezier curve are 10 in total, and the dividing point (or the critical point) is the 4 th sampling point, t0 is 4/10.
The numbers "first" and "second" in the embodiments of the present application are used for distinguishing similar objects, and are not necessarily used for describing a specific order or sequence order, and should not constitute any limitation to the embodiments of the present application.
The following describes the technical solutions of the present application and how to solve the above technical problems with specific embodiments. The following several specific embodiments may be combined with each other, and details of the same or similar concepts or processes may not be repeated in some embodiments.
Fig. 1A is a schematic flow chart of a writing trajectory processing method according to an embodiment of the present application. As shown in fig. 1A, the method of the embodiment of the present application may include:
and step S101, acquiring an erasing area input by a user in a canvas displayed on a browser.
In this step, for example, the writing trace processing device may obtain an erasing trace input in a canvas (for convenience of description, may be referred to as a display canvas in this embodiment) displayed on the browser by the user, and determine a corresponding erasing area in the display canvas according to the erasing trace. For example, a user may input an erasing instruction (for indicating an erasing track input by the user) into a display canvas on the browser through an input device (for example, the input device may include, but is not limited to, a mouse or a control pen), and correspondingly, the writing track processing device obtains the erasing track input by the user in the display canvas of the browser according to the erasing instruction; further, the writing trace processing apparatus may determine a corresponding erase region in the canvas (i.e., the display canvas) based on the size of the erase trace and/or the erase component to facilitate a subsequent determination of whether each point on the writing trace is within the erase region. Alternatively, the size of the erase assembly may be a preset size or may be a user-selected size.
Illustratively, the writing trace processing device may also acquire, in real time, the erasure area input in the display canvas by the user through the first API in the browser.
The following embodiments of the present application describe an implementation manner for acquiring an erase trajectory input by a user in a canvas displayed on a browser:
one possible implementation: receiving a starting erasing instruction of a user; further, after the pressing operation of the left mouse button by the user is monitored, starting to acquire each point of the movement of the mouse until the left mouse button is monitored to bounce, wherein a track formed by each point of the movement of the mouse is an erasing track.
Fig. 1B is a schematic diagram of an input method of an erase track according to an embodiment of the present disclosure. In this implementation, for example, as shown in fig. 1B, a user may click an erasing control (e.g., an eraser control, etc.) in a display canvas of a browser through a mouse to input an erasing start instruction; further, the user drives an erasing component (such as an eraser) in the display canvas of the browser to move by long pressing and moving the left mouse button until the user releases the left mouse button to complete the erasing operation. Correspondingly, the writing track processing device starts to monitor the operation of the user on the mouse after detecting that the user inputs an erasing starting instruction. After the pressing operation of the left mouse button by the user is monitored, starting to acquire each point of the movement of the mouse until the left mouse button is monitored to bounce; and the track formed by each point moved by the mouse is an erasing track. Optionally, the points of the mouse movement may be obtained by calling a second API provided by the browser, or may also be obtained in other manners, which is not limited in this embodiment of the application.
Another possible implementation: receiving a starting and erasing instruction input by a user through a control pen; further, starting to acquire each point of the movement of the pen point of the control pen until an erasing ending instruction input by the user through the control pen is monitored, wherein a track formed by each point of the movement of the pen point of the control pen is an erasing track.
Of course, the erasing track input by the user in the canvas displayed on the browser may also be obtained in other implementation manners, which is not limited in the embodiment of the present application.
The following embodiments of the present application describe an implementation manner of determining a corresponding erase region in a canvas according to an erase trajectory:
one possible implementation: determining pixel points corresponding to the erasing track in each pixel point of the virtual canvas according to the coordinate information of each point in the erasing track in the canvas; further, image information is configured on pixel points corresponding to the erasing tracks in the virtual canvas and stored in the storage unit, wherein an area corresponding to the pixel points of the configured image information in the canvas displayed on the browser is an erasing area.
In this implementation manner, for example, the writing trace processing apparatus may create a virtual canvas in the storage unit (that is, the virtual canvas related in this embodiment is not displayed to a user through a browser, and is only stored in the storage unit), where the size of the virtual canvas is the same as that of the canvas displayed on the browser (that is, the display canvas), and the coordinate information of each pixel point in the virtual canvas is stored in the storage unit. Further, the writing track processing device determines, according to the coordinate information of each point in the erasing track in the display canvas, a pixel point corresponding to each point in the erasing track from each pixel point of the virtual canvas (for convenience of description, this embodiment may be referred to as a first target pixel point).
Exemplarily, the point in the display canvas related to in the embodiment of the present application corresponds to the pixel point in the virtual canvas means: the point is located in the coordinate information in the display canvas, which is the same as the coordinate information of the point in the virtual canvas. For example, assuming that the erasing trace located in the display canvas includes a point a (corresponding to coordinate information a) and a point B (corresponding to coordinate information B), a first target pixel point a '(corresponding to coordinate information a) corresponding to the point a and a first target pixel point B' (corresponding to coordinate information B) corresponding to the point B are determined from the pixels of the virtual canvas.
Further, image information (e.g., first preset image information) is configured for the first target pixel point corresponding to the erasing track in the virtual canvas and stored in the storage unit, where the image information (e.g., the first preset image information) may include but is not limited to: at least one of a color value (e.g., a first color value) and a transparency value (e.g., a first transparency value). Illustratively, the first target pixel point corresponding to the erasing track in the virtual canvas is subjected to a coloring process according to the size of the erasing component (which is equivalent to synchronously erasing the virtual canvas and the display canvas), wherein the first preset image information corresponding to the first target pixel point after the coloring process may include but is not limited to: the corresponding first color value and/or first transparency value (e.g., a value other than 0) is colorized.
Optionally, other pixel points in the virtual canvas except for the first target pixel point corresponding to the erasing track may not be configured with any image information, or may be configured with other image information (for example, second preset image information), and the second preset image information may include, but is not limited to: at least one of the second color value and the second transparency value. As can be seen, by configuring the first preset image information for the first target pixel point corresponding to the erasing track in the virtual canvas, it can be determined that the area corresponding to the first target pixel point configured with the first preset image information in the virtual canvas is the erasing area, and it is determined that the area corresponding to each first target pixel point in the display canvas on the browser is the erasing area.
Another possible implementation: and determining an erasing area input by the user in the display canvas by calling a third API provided by the browser according to the erasing track and the size of the erasing component.
Of course, the corresponding erase region in the canvas may also be determined by other realizable manners according to the erase trajectory, which is not limited in the embodiment of the present application.
Of course, the erasing area input by the user in the canvas may also be obtained by other ways, which is not limited in the embodiment of the present application.
And step S102, sequentially determining whether each point on the writing track in the canvas is positioned in the erasing area.
In this step, the writing trace processing device sequentially determines whether each point on the writing trace (which may be referred to as an initial writing trace in this embodiment for convenience of description) in the display canvas is located in the erasing area, so as to perform corresponding processing on each point located in the erasing area (for example, removing the coordinate information of each point stored in the display and/or deletion storage unit in the display canvas).
For example, the writing trace processing apparatus may determine, according to coordinate information in a canvas displayed on a browser by each point in the writing trace (i.e., a display canvas) and coordinate information of each pixel point in the virtual canvas, a pixel point (for convenience of description, in this embodiment, may be referred to as a second target pixel point) in the virtual canvas corresponding to the writing trace. Exemplarily, the point in the display canvas related to in the embodiment of the present application corresponds to the pixel point in the virtual canvas means: the point is located in the coordinate information in the display canvas, which is the same as the coordinate information of the point in the virtual canvas. For example, assuming that the writing trajectory located in the display canvas includes a point C (corresponding to coordinate information C) and a point D (corresponding to coordinate information D), a second target pixel point C '(corresponding to coordinate information C) corresponding to the point C and a second target pixel point D' (corresponding to coordinate information D) corresponding to the point D are determined from the pixels of the virtual canvas.
Further, if image information (e.g., first preset image information) exists in a pixel point (e.g., a second target pixel point) corresponding to the writing track, it is determined that the pixel point (e.g., the second target pixel point) is located in the erasing area. Optionally, if there is no image information (for example, there is no image information, or there is no first preset image information, etc.) in the pixel (for example, the second target pixel) corresponding to the writing track, it is determined that the pixel (for example, the second target pixel) is not located in the erasing area.
Of course, whether each point on the writing track in the canvas is located in the erasing area may also be determined in sequence through other realizable manners, which is not limited in the embodiment of the present application.
And step S103, removing the points in the erasing area from the writing track displayed in the canvas, and deleting the points from the writing path corresponding to the writing track stored in the storage unit, so that each segment of sub-writing track obtained after erasing in the canvas respectively corresponds to one segment of sub-writing path.
In the step, on one hand, the writing track processing device removes the points in the erasing area from the writing track displayed in the canvas, so that the writing track is divided into at least two segments of sub-writing tracks on the visual aspect; on the other hand, in order to facilitate subsequent operations such as dragging each segment of sub-writing track respectively, the writing track processing device also deletes the point located in the erasing area from the writing path corresponding to the writing track stored in the storage unit, so as to divide the writing path into at least two segments of sub-writing paths on the data plane, wherein each segment of sub-writing track obtained after erasing in the canvas corresponds to one segment of sub-writing path respectively, and each segment of sub-writing path includes coordinate information of each point in the canvas on the sub-writing track corresponding to the segment of sub-writing path.
Fig. 1C is a schematic diagram of a divided sub-writing track according to an embodiment of the present application. In this step, as shown in fig. 1C, the writing trace processing apparatus may determine each critical point in the writing trace that is critical to the erasing area (where a critical point refers to a next point or a previous point in the writing trace that is located at the point and is located in the erasing area), and remove a point located in the erasing area between every two adjacent critical points from the writing trace displayed in the display canvas of the browser, so as to display at least two segments of the sub-writing traces after erasing in the display canvas, thereby implementing the division of the writing trace into multiple segments of sub-writing traces on the visual level.
For example, the writing track processing device may delete, in real time, coordinate information of a point located in the erasing area between every two adjacent critical points in the canvas from the writing path corresponding to the writing track stored in the storage unit during the erasing process of the user, thereby implementing the division of the writing path into at least two segments of sub-writing paths on the data level.
Illustratively, the writing trace processing device can clear each point located in the erasing area from the writing trace displayed in the display canvas in real time during the erasing process of the user so as to achieve the visual effect of erasing (namely, the coordinate information of each point located in the erasing area in the writing trace still exists in the storage unit); further, after the user stops erasing, the writing path is divided into at least two sub-writing paths on the data level by determining each critical point in the writing path which is critical to the erasing area and deleting the coordinate information of each point which is positioned in the erasing area between every two adjacent critical points from the writing path corresponding to the writing path stored in the storage unit; therefore, the fluency of the user in the erasing process can be ensured, and the user experience is improved.
And step S104, receiving the dragging operation of the user to any point on the canvas, and if the coordinate information of any point is located on any section of erased sub-writing path, dragging the sub-writing track corresponding to the sub-writing path.
In the step, when receiving a dragging operation of a user on any point on the canvas, the writing track processing device firstly judges whether the coordinate information of the point is located on any segment of the erased sub-writing path; further, if the coordinate information of the point is determined to be located on a segment of the erased sub-writing path (that is, the sub-writing path corresponding to the segment of the sub-writing path is selected), performing corresponding dragging operation on the sub-writing path corresponding to the sub-writing path; if the coordinate information of the point is determined not to be located on any segment of the sub-writing path after the erasing (that is, the sub-writing path corresponding to the segment of the sub-writing path is not selected), no response is needed, or the user can be prompted to reselect other points for a dragging operation.
Fig. 1D is a schematic drawing of dragging a sub-writing track according to an embodiment of the present application. For example, when receiving a drag operation of a user on a certain point on a canvas, if it is determined that coordinate information of the point is located on a segment of the sub-writing path after erasing (that is, the sub-writing path corresponding to the segment of the sub-writing path is selected), the writing trace processing apparatus may perform a corresponding drag operation on the sub-writing path corresponding to the sub-writing path, for example, detect the drag trace corresponding to the drag operation in real time, so as to move the position of the sub-writing path corresponding to the sub-writing path in the drawing in real time, and finally move the position to a target position corresponding to the drag operation.
In addition, when receiving other operations (for example, including but not limited to stretching and/or changing color and the like) of the user on any point on the canvas, if the coordinate information of the point is located on any segment of the sub-writing path after the erasing, the writing trace processing device can also perform corresponding operations such as stretching and/or changing color and the like on the sub-writing trace corresponding to the sub-writing path.
In the embodiment of the application, an erasing area input by a user in a canvas displayed on a browser is obtained; further, sequentially determining whether each point on the writing track in the canvas is positioned in the erasing area; further, removing the points in the erasing area from the writing track displayed in the canvas, and deleting the points from the writing path corresponding to the writing track stored in the storage unit, so that each segment of sub-writing track obtained after erasing in the canvas respectively corresponds to one segment of sub-writing path; and further, receiving the dragging operation of the user on any point on the canvas, and if the coordinate information of the point is located on any section of the erased sub-writing path, dragging the sub-writing track corresponding to the sub-writing path. Therefore, the function of dragging any sub-writing tracks formed after erasing based on the browser is achieved, and user experience is improved.
Fig. 2A is a schematic flow chart of a writing trajectory processing method according to another embodiment of the present application. On the basis of the above embodiments, the embodiments of the present application describe how to acquire key points and sampling points in a writing trajectory and how to divide the writing trajectory. As shown in fig. 2A, on the basis of the foregoing embodiment, the method of the embodiment of the present application may further include:
and step S105, receiving a writing starting instruction of a user, starting to acquire each point moved by the mouse after monitoring the pressing operation of the left mouse button by the user, until the left mouse button is monitored to bounce, wherein a track formed by each point moved by the mouse is a writing track.
Fig. 2B is a schematic diagram of an input manner of a writing trace provided in the embodiment of the present application, and as shown in fig. 2B, a user may click a writing control (e.g., a brush control, etc.) in a display canvas of a browser through a mouse to input a start writing instruction; further, the user drives a writing component (such as a painting brush) in the display canvas of the browser to move by long-pressing and moving the left mouse button until the user releases the left mouse button to complete the writing operation.
In the present embodiment, before step S102, the writing trace processing device starts to monitor the operation of the mouse by the user, for example, after detecting that the user inputs the start writing instruction. After the pressing operation of the left mouse button by the user is monitored, starting to acquire each point of the movement of the mouse until the left mouse button is monitored to bounce; and the track formed by each point moved by the mouse is a writing track. Optionally, the points of the mouse movement may be obtained by calling a second API provided by the browser, or may also be obtained in other manners, which is not limited in this embodiment of the application.
Of course, in this embodiment of the present application, a writing track input by a user in a canvas displayed on a browser may also be obtained in other implementation manners, which is not limited in this embodiment of the present application.
And S106, sequentially adopting a quadratic Bezier curve to carry out connection processing on each point moved by the mouse, obtaining key points of the Bezier curve as key points in the writing track, and storing the writing path corresponding to the writing track in a storage unit.
In this step, exemplarily, the writing trajectory processing device performs connection processing by using a quadratic bezier curve in sequence according to the initial point of the movement of the mouse, the other points except the initial point among the points of the movement of the mouse, and the midpoint between every two adjacent points among the other points, thereby obtaining each key point in the writing trajectory; further, the coordinate information of each key point in the writing track is stored in the storage unit, and a writing path corresponding to the writing track is formed, so that the writing track can be subsequently divided and/or dragged and the like. For example, assuming that the points moved by the mouse include a1, B1, C1, D1, E1 and F1, first, a quadratic bezier curve is used to perform a connection process with a starting point of a1, a control point of B1 and a midpoint X between B1 and C1 as an end point; secondly, connecting lines by adopting a quadratic Bezier curve with X as a starting point, C1 as a control point and a middle point Y between C1 and D1 as an end point; further, with Y as a starting point, D1 as a control point and a middle point Z between D1 and E1 as an end point, performing connection processing by using a quadratic Bezier curve; further, taking Z as a starting point, E1 as a control point and a midpoint W between E1 and F1 as an end point, performing connection processing by adopting a quadratic Bezier curve, and finally obtaining each key point in the writing track; further, all key points (forming writing paths corresponding to the writing tracks) in the writing tracks are stored in the storage unit.
Considering that the refresh frequency of the browser is limited, each pixel point passed by the mouse cannot be acquired in step S105, and actually only some discrete points are acquired. In order to improve the erasing precision, in the embodiment of the application, sampling processing may be performed on the writing track to obtain sufficiently dense sampling points on the writing track.
Further, in step S102, the writing trace processing means may determine a sampling value according to the distance of the key point in the writing trace; and further, determining sampling points on the writing track according to key points, sampling values and a quadratic Bezier curve formula in the writing track, and sequentially determining whether each sampling point on the writing track is positioned in the erasing area.
Since every three adjacent key points in the writing track are connected in the form of a quadratic bezier curve, in step S102 in the present embodiment, for example, the writing track processing device may determine corresponding sampling values according to distances between every three adjacent key points in the writing track, respectively (for example, the sampling values may include a sampling interval Δ and/or a parameter t in a quadratic bezier formula, where Δ is a positive integer greater than 0, and t is greater than or equal to 0 and less than or equal to 1). Optionally, a ratio result (which may be rounded down) between a sum of distances of every three adjacent key points and a preset value (e.g., 2) is used as the sampling interval Δ, and a value of the parameter t is determined according to the sampling interval Δ.
For example, assume the coordinates of three neighboring keypoints are: a1(0, 0), B1(1, 0) and X (1, 3), determining that the distance between a1 and B1 is 1 and the distance between B1 and X is 2, and dividing the sum of the distance between a1 and B1 and the distance between B1 and X by a preset value (such as 2) to obtain a sampling interval Δ of 2 (rounded down); further, the values of the parameter t are determined to be 0, 0.5 and 1 respectively according to the sampling interval delta.
Further, the sampling points corresponding to every three adjacent key points are determined according to every three adjacent key points, the sampling values corresponding to every three adjacent key points and a quadratic Bezier curve formula. For example, assume the coordinates of three neighboring keypoints are: a1(0, 0), B1(1, 0), and X (1, 3), and the sample values corresponding to the three adjacent keypoints comprise: the sampling interval delta is 2 and the value of the parameter t is 0, 0.5 and 1 respectively, thenObtaining coordinates of three sampling points corresponding to the three adjacent key points according to a quadratic Bezier curve formula; wherein, the quadratic Bezier curve formula can be B (t) ═ (1-t)2P0+2t(1-t)P1+t2P2B (t) represents a quadratic Bezier curve function, P0Represents the starting point (e.g. A1), P1Representing a control point (e.g. B1), P2Represents the endpoint (e.g., X).
Further, the writing trace processing means sequentially determines whether or not each sampling point on the writing trace is located within the erasing area, so as to perform corresponding processing on each key point located within the erasing area (for example, removing the coordinate information of each key point stored in the display and/or deletion storage unit in the display canvas, etc.).
For example, the writing trace processing apparatus may determine, according to coordinate information in a canvas displayed on a browser by each sampling point in the writing trace (i.e., a display canvas) and coordinate information of each pixel point in the virtual canvas, a pixel point (for convenience of description, may be referred to as a second target pixel point in this embodiment) in the virtual canvas corresponding to each sampling point in the writing trace. Further, if image information (for example, first preset image information) exists in a pixel point (for example, a second target pixel point) corresponding to any sampling point in the writing track, it is determined that the pixel point (for example, the second target pixel point) is located in the erasing area. Optionally, if there is no image information (for example, there is no image information, or there is no first preset image information, etc.) in a pixel point (for example, a second target pixel point) corresponding to any sampling point in the writing track, it is determined that the pixel point (for example, the second target pixel point) is not located in the erasing area.
According to the embodiment of the application, whether any sampling point belongs to the erasing area or not is judged according to the image information of any sampling point in the writing track and the corresponding pixel point in the virtual canvas, the judgment speed is high, and therefore the writing track processing efficiency is improved.
Of course, it may also be determined whether each sampling point on the writing track is located in the erasing area in sequence through other realizable manners, which is not limited in the embodiment of the present application.
Further, in step S103, on the one hand, the writing trace processing device may call an API in the browser to remove the key points located in the erasing area from the writing trace displayed in the canvas to form at least two segments of sub-writing traces. For example, the writing trace processing device may determine, among sampling points on the writing trace, sampling critical points critical to the erasing area (that is, key points located before or after the sampling critical points are located in the erasing area), and call an API in the browser to remove, from the writing trace displayed in the canvas, a key point located in the erasing area between every two adjacent sampling critical points, so as to divide the writing trace into at least two sub-writing traces, thereby implementing the division and erasing at the visual level.
On the other hand, the writing trace processing device may determine a first critical point and/or a second critical point that is critical to the erasing area among the key points of the writing trace, as shown in fig. 2C (fig. 2C is a schematic diagram of the key points of the writing trace and the erasing area provided in the embodiment of the present application); the next key point of the first critical point along the writing track direction is located in the erasing area, and the last key point of the second critical point along the writing track direction is located in the erasing area. It should be noted that the key points of the writing trajectory referred to in the embodiments of the present application may include a plurality of first critical points and/or a plurality of second critical points.
Illustratively, the writing trace processing device sequentially traverses each sampling point in the writing trace and judges whether each sampling point is located in the erasing area. If the first sampling point is determined not to be located in the erasing area but the next sampling point (along the writing track direction) of the first sampling point is located in the erasing area, determining a key point located before the first sampling point as a first critical point; and if the second sampling point is determined not to be located in the erasing area but the last sampling point (along the writing track direction) of the second sampling point is located in the erasing area, determining that the key point located behind the second sampling point is the second critical point.
Furthermore, according to a quadratic Bezier curve segmentation algorithm, a first control point and an end point of a quadratic Bezier curve are added to each first critical point, a second control point and a start point of the quadratic Bezier curve are added to each second critical point, and coordinate information of key points in the erasing area is deleted from a writing path corresponding to the writing track to form at least two segments of sub-writing paths, so that the segmentation of the writing path on a data layer is realized, and the storage space of a storage unit can be saved.
For example, in this embodiment of the present application, a specific implementation manner of adding the first control point and the end point to the first critical point according to the quadratic bezier curve segmentation algorithm may refer to a related memory related to the quadratic bezier curve segmentation algorithm in the foregoing embodiment of the present application, and details are not described here again.
For example, in this embodiment of the present application, a specific implementation manner of adding the second control point and the starting point to the second critical point according to the quadratic bezier curve segmentation algorithm may refer to a related memory related to the quadratic bezier curve segmentation algorithm in the foregoing embodiment of the present application, and details are not described here again.
In the embodiment of the application, each point moved by the mouse is obtained, and the point moved by the mouse is sequentially subjected to connection processing by adopting a quadratic Bezier curve, so that the obtained key point of the Bezier curve is a key point in a writing track, and a writing path (including coordinate information of the key point in the writing track) corresponding to the writing track is stored in a storage unit; further, determining each sampling point on the writing track, and sequentially determining whether each sampling point on the writing track is located in the erasing area; further, on one hand, removing key points in the erasing area from the writing track displayed in the canvas by calling an API in the browser to form at least two segments of sub-writing tracks; and on the other hand, a first critical point and/or a second critical point critical to the erasing area are determined from the key points of the writing track, a first control point and an end point of a quadratic Bezier curve are added to the first critical point, a second control point and a start point of the quadratic Bezier curve are added to the second critical point, and the coordinate information of the key points in the erasing area is deleted from the writing path corresponding to the writing track, so that at least two segments of sub-writing paths are formed. Therefore, the method and the device for segmenting the writing track on the visual layer and the writing path on the data layer are achieved, and each segmented sub-writing path can be dragged and the like conveniently in the follow-up process.
Fig. 3 is a flowchart illustrating a writing trajectory processing method according to another embodiment of the present application. On the basis of the above embodiments, an implementation manner of dragging the divided sub-writing tracks (or the above step S104) in the embodiment of the present application is described. As shown in fig. 3, the step S104 may include:
step S301, monitoring the pressing operation of the left mouse button by the user, determining that the coordinate information of the pressing operation position in the canvas is located on any segment of sub-writing path stored in the storage unit, and starting to acquire the moving distance of the mouse until the left mouse button is monitored to bounce.
In this step, for example, the writing trace processing apparatus may start to monitor a dragging operation of the user to any point on the canvas after receiving a dragging start instruction input by the user (for example, the user may click a selection control in the display canvas of the browser through a mouse), for example, start to detect a pressing operation of the user to a left mouse button and a position of the pressing operation. Further, when the coordinate information of the position where the pressing operation of the left mouse button by the user is detected in the display canvas is located on a segment of the sub-writing path stored in the storage unit (i.e. the sub-writing path corresponding to the segment of the sub-writing path is selected), the writing path processing device starts to detect the moving distance (for example, including but not limited to the transverse distance and/or the longitudinal distance) of the mouse in real time until the left mouse button is monitored to bounce, so as to perform subsequent operations such as dragging on the selected segment of the sub-writing path.
Of course, the writing trace processing apparatus may also start to detect a position of the left mouse button pressed by the user in the display canvas under other trigger conditions, which is not limited in the embodiment of the present application. ,
step S302, determining the ending coordinate information of each key point on the sub-writing path on the canvas according to the coordinate information of each key point on the sub-writing path and the distance moved by the mouse stored in the storage unit.
In this step, the writing trace processing device determines the ending coordinate information of each key point on the sub-writing path on the display canvas of the browser in real time according to the coordinate information of each key point on the sub-writing path and the moving distance of the mouse, which are stored in the storage unit. For example, the writing trace processing device may respectively determine the termination coordinate information of each key point on the sub-writing path on the display canvas in real time according to the coordinate information of each key point on the sub-writing path and the distance (for example, the transverse distance and/or the longitudinal distance) of the mouse movement detected in real time.
And step S303, displaying the sub-writing track corresponding to the sub-writing path on the canvas according to the termination coordinate information.
In this step, the writing trajectory processing device displays the sub-writing trajectory corresponding to the sub-writing path on the display canvas of the browser in real time according to the termination coordinate information of each key point on the sub-writing path, thereby implementing the dragging processing of the sub-writing trajectory corresponding to any sub-writing path.
Optionally, in order to facilitate subsequent continuous dragging, after the writing trajectory processing device displays the sub-writing trajectory corresponding to the sub-writing path on the canvas according to the termination coordinate information, the writing trajectory processing device may further modify the coordinate information of each key point on the sub-writing path stored in the storage unit to the termination coordinate information.
In the embodiment of the application, by monitoring the pressing operation of a user on the left mouse button and determining that the coordinate information of the pressing operation position in the canvas is located on any segment of sub-writing path stored in the storage unit, the movement distance of the mouse is started to be acquired until the left mouse button is monitored to bounce; further, according to the coordinate information of each key point on the sub-writing path and the moving distance of the mouse, which are stored in the storage unit, the termination coordinate information of each key point on the sub-writing path on the canvas is determined, and the sub-writing track corresponding to the sub-writing path is displayed on the canvas according to the termination coordinate information. Therefore, the dragging processing of any sub-writing track after being divided is realized.
Fig. 4 is a schematic structural diagram of a writing trace processing apparatus according to an embodiment of the present application. As shown in fig. 4, the writing trace processing device 40 provided in the present embodiment may include: a first obtaining module 401, a determining module 402, a removing module 403 and a dragging module 404.
The first obtaining module 401 is configured to obtain an erasing area input by a user in a canvas displayed on a browser;
a determining module 402, configured to sequentially determine whether each point on a writing trajectory in the canvas is located in the erasing area;
a removing module 403, configured to remove a point located in the erasing area from a writing track displayed in the canvas, and delete the point from a writing path corresponding to the writing track stored in a storage unit, so that each segment of sub-writing track obtained after the erasing in the canvas corresponds to one segment of sub-writing path respectively; each segment of the sub-writing path comprises coordinate information of each point on a sub-writing track corresponding to the sub-writing path in the canvas;
and a dragging module 404, configured to receive a dragging operation of the user on any point on the canvas, and if the coordinate information of the any point is located on any segment of the erased sub-writing path, drag a sub-writing track corresponding to the sub-writing path.
Optionally, the first obtaining module 401 includes:
the first acquisition unit is used for acquiring an erasing track input by the user in the canvas;
and the first determining unit is used for determining a corresponding erasing area in the canvas according to the erasing track.
Optionally, the first determining unit is specifically configured to:
determining pixel points corresponding to the erasing track in all pixel points of a virtual canvas according to the coordinate information of each point in the erasing track in the canvas, wherein the size of the virtual canvas is the same as that of the canvas displayed on the browser, and the coordinate information of each pixel point in the virtual canvas is stored in a storage unit;
and configuring image information for pixel points corresponding to the erasing track in the virtual canvas and storing the image information in the storage unit, wherein the area corresponding to the pixel points configuring the image information in the canvas displayed on the browser is the erasing area, and the image information comprises at least one of a color value and a transparency value.
Optionally, the determining module 402 is specifically configured to:
determining a pixel point corresponding to the writing track in the virtual canvas according to coordinate information of each point in the writing track in the canvas displayed on the browser and coordinate information of each pixel point in the virtual canvas;
and if the image information exists in the pixel point corresponding to the writing track, determining that the pixel point is located in the erasing area.
Optionally, the first obtaining unit is specifically configured to:
receiving a starting erasing instruction of a user;
after the pressing operation of the left mouse button by the user is monitored, starting to acquire each point of the movement of the mouse until the left mouse button is monitored to bounce, wherein a track formed by each point of the movement of the mouse is the erasing track.
Optionally, the apparatus further comprises:
the receiving module is used for receiving a writing starting instruction of a user;
and the second acquisition module is used for starting to acquire each point of the movement of the mouse after monitoring the pressing operation of the left mouse button by the user until the left mouse button is monitored to bounce, wherein a track formed by each point of the movement of the mouse is the writing track.
Optionally, the apparatus further comprises:
the processing module is used for sequentially adopting a quadratic Bezier curve to carry out line connection processing on each point moved by the mouse, and the obtained key points of the Bezier curve are the key points in the writing track;
the storage module is used for storing the writing path corresponding to the writing track in a storage unit; and the writing path comprises coordinate information of key points in the writing track.
Optionally, the determining module 402 includes:
the second determining unit is used for determining a sampling value according to the distance of the key point in the writing track;
the third determining unit is used for determining sampling points on the writing track according to the key points in the writing track, the sampling values and the quadratic Bezier curve formula;
and the fourth determining unit is used for sequentially determining whether each sampling point on the writing track is positioned in the erasing area.
Optionally, the removing module 403 is specifically configured to:
and calling a cleaning Application Programming Interface (API) in the browser to remove the key points in the erasing area from the writing track displayed in the canvas so as to form at least two segments of sub-writing tracks.
Optionally, the removing module 403 is specifically configured to:
determining a first critical point and/or a second critical point critical to the erasing area in the key points of the writing track, wherein the next key point of the first critical point along the writing track direction is located in the erasing area, and the last key point of the second critical point along the writing track direction is located in the erasing area;
and adding a first control point and an end point of a quadratic Bezier curve to the first critical point, adding a second control point and a start point of the quadratic Bezier curve to the second critical point according to a quadratic Bezier curve segmentation algorithm, and deleting the coordinate information of the key point in the erasing area from the writing path corresponding to the writing track to form at least two segments of sub-writing paths.
Optionally, the dragging module 404 includes:
the second acquisition unit is used for monitoring the pressing operation of a user on a left mouse button, determining that the coordinate information of the position of the pressing operation in the canvas is located on any segment of sub-writing path stored in the storage unit, and starting to acquire the moving distance of the mouse until the left mouse button is monitored to bounce;
a fifth determining unit, configured to determine, according to the coordinate information of each key point on the sub-writing path and the distance over which the mouse moves, which are stored in the storage unit, termination coordinate information of each key point on the sub-writing path on the canvas;
and the display unit is used for displaying the sub-writing track corresponding to the sub-writing path on the canvas according to the termination coordinate information.
Optionally, the apparatus further comprises:
and the modifying module is used for modifying the coordinate information of the key point on the sub-writing path stored in the storage unit into the termination coordinate information.
The writing trace processing apparatus of this embodiment may be configured to execute the technical solution of the above writing trace processing method embodiment of this application, and the implementation principle and the technical effect of the apparatus are similar, which are not described herein again.
Fig. 5 is a schematic structural diagram of a writing trace processing apparatus according to another embodiment of the present application. As shown in fig. 5, the writing trace processing apparatus 50 provided in the present embodiment may include: a memory 501 and a processor 502. Optionally, the memory 501 and the processor 502 are connected by a bus 503. For ease of illustration, only one thick line is shown in FIG. 5, but this is not intended to represent only one bus or type of bus.
Wherein the memory 501 is used for storing computer programs executable by the processor 502;
the processor 502 is configured to execute the computer program to implement the technical solution of the writing trace processing method embodiment of the present application, and the implementation principle and the technical effect are similar, which are not described herein again.
The embodiment of the present invention further provides a computer-readable storage medium, which includes a computer-readable instruction, and when the writing trajectory processing device reads and executes the computer-readable instruction, the writing trajectory processing device executes the technical solution of the embodiment of the writing trajectory processing method in the present application, and the implementation principle and the technical effect are similar, and are not described herein again.
It should be understood by those of ordinary skill in the art that, in the various embodiments of the present application, the sequence numbers of the above-mentioned processes do not mean the execution sequence, and the execution sequence of the processes should be determined by their functions and inherent logic, and should not limit the implementation process of the embodiments of the present application.
Those of ordinary skill in the art will understand that: all or part of the steps for implementing the method embodiments may be implemented by hardware related to program instructions, and the program may be stored in a computer readable storage medium, and when executed, the program performs the steps including the method embodiments; and the aforementioned storage medium includes: various media capable of storing program codes, such as Read-Only Memory (ROM), Random Access Memory (RAM), magnetic disk, or optical disk.
Finally, it should be noted that: the above embodiments are only used for illustrating the technical solutions of the present application, and not for limiting the same; although the present application has been described in detail with reference to the foregoing embodiments, it should be understood by those of ordinary skill in the art that: the technical solutions described in the foregoing embodiments may still be modified, or some or all of the technical features may be equivalently replaced; and the modifications or the substitutions do not make the essence of the corresponding technical solutions depart from the scope of the technical solutions of the embodiments of the present application.

Claims (25)

1. A writing trajectory processing method is characterized by comprising the following steps:
acquiring an erasing area input by a user in a canvas displayed on a browser;
sequentially determining whether each point on a writing track in the canvas is positioned in the erasing area;
removing the points in the erasing area from the writing track displayed in the canvas, and deleting the points from the writing path corresponding to the writing track stored in the storage unit, so that each segment of sub-writing track obtained after erasing in the canvas respectively corresponds to one segment of sub-writing path; each segment of the sub-writing path comprises coordinate information of each point on a sub-writing track corresponding to the sub-writing path in the canvas;
and receiving the dragging operation of the user to any point on the canvas, and if the coordinate information of any point is located on any section of the erased sub-writing path, dragging the sub-writing track corresponding to the sub-writing path.
2. The method of claim 1, wherein obtaining an erasure area entered by a user in a canvas displayed on a browser comprises:
acquiring an erasing track input by the user in the canvas;
and determining a corresponding erasing area in the canvas according to the erasing track.
3. The method of claim 2, wherein determining a corresponding erase region in the canvas from the erase trajectory comprises:
determining pixel points corresponding to the erasing track in all pixel points of a virtual canvas according to the coordinate information of each point in the erasing track in the canvas, wherein the size of the virtual canvas is the same as that of the canvas displayed on the browser, and the coordinate information of each pixel point in the virtual canvas is stored in a storage unit;
and configuring image information for pixel points corresponding to the erasing track in the virtual canvas and storing the image information in the storage unit, wherein the area corresponding to the pixel points configuring the image information in the canvas displayed on the browser is the erasing area, and the image information comprises at least one of a color value and a transparency value.
4. The method of claim 3, wherein the sequentially determining whether each point on the writing trajectory in the canvas is within the erasing zone comprises:
determining a pixel point corresponding to the writing track in the virtual canvas according to coordinate information of each point in the writing track in the canvas displayed on the browser and coordinate information of each pixel point in the virtual canvas;
and if the image information exists in the pixel point corresponding to the writing track, determining that the pixel point is located in the erasing area.
5. The method according to any one of claims 2-4, wherein the obtaining of the erasure track input by the user in the canvas displayed on the browser comprises:
receiving a starting erasing instruction of a user;
after the pressing operation of the left mouse button by the user is monitored, starting to acquire each point of the movement of the mouse until the left mouse button is monitored to bounce, wherein a track formed by each point of the movement of the mouse is the erasing track.
6. The method of any of claims 1-4, wherein the sequentially determining whether each point on a writing trajectory in the canvas is located before within the erasure area, further comprises:
receiving a writing starting instruction of a user;
after the pressing operation of the left mouse button by the user is monitored, starting to acquire each point of the movement of the mouse until the left mouse button is monitored to bounce, wherein a track formed by each point of the movement of the mouse is the writing track.
7. The method of claim 6, further comprising:
sequentially connecting lines of all points moved by the mouse by adopting a quadratic Bezier curve, wherein the obtained key points of the Bezier curve are the key points in the writing track;
storing a writing path corresponding to the writing track in the storage unit; and the writing path comprises coordinate information of key points in the writing track.
8. The method of claim 7, wherein sequentially determining whether each point on a writing trajectory in the canvas is within the erasure area comprises:
determining a sampling value according to the distance of the key points in the writing track;
determining sampling points on the writing track according to key points in the writing track, the sampling values and the secondary Bezier curve formula;
and sequentially determining whether each sampling point on the writing track is positioned in the erasing area.
9. The method of claim 8, wherein removing the point located within the erase region from the writing trace displayed in the canvas comprises:
and calling a cleaning Application Programming Interface (API) in the browser to remove the key points in the erasing area from the writing track displayed in the canvas so as to form at least two segments of sub-writing tracks.
10. The method according to claim 8 or 9, wherein deleting the point located in the erasing area from the writing path corresponding to the writing track stored in the storage unit comprises:
determining a first critical point and/or a second critical point critical to the erasing area in the key points of the writing track, wherein the next key point of the first critical point along the writing track direction is located in the erasing area, and the last key point of the second critical point along the writing track direction is located in the erasing area;
and adding a first control point and an end point of a quadratic Bezier curve to the first critical point, adding a second control point and a start point of the quadratic Bezier curve to the second critical point according to a quadratic Bezier curve segmentation algorithm, and deleting the coordinate information of the key point in the erasing area from the writing path corresponding to the writing track to form at least two segments of sub-writing paths.
11. The method according to claim 10, wherein the receiving of the user's dragging operation on any point on the canvas, and if the coordinate information of the any point is located on any segment of the erased sub-writing path, dragging the sub-writing track corresponding to the sub-writing path includes:
monitoring the pressing operation of a user on a left mouse button, determining that the coordinate information of the position of the pressing operation in the canvas is located on any segment of sub-writing path stored in the storage unit, and starting to acquire the moving distance of the mouse until the left mouse button is monitored to bounce;
determining the termination coordinate information of each key point on the sub-writing path on the canvas according to the coordinate information of each key point on the sub-writing path stored in the storage unit and the moving distance of the mouse;
and displaying a sub-writing track corresponding to the sub-writing path on the canvas according to the termination coordinate information.
12. The method according to claim 11, wherein after displaying the sub-writing track corresponding to the sub-writing path on the canvas according to the termination coordinate information, the method further comprises:
and modifying the coordinate information of each key point on the sub-writing path stored in the storage unit into the termination coordinate information.
13. A writing trajectory processing device characterized by comprising:
the first acquisition module is used for acquiring an erasing area input by a user in a canvas displayed on a browser;
the determining module is used for sequentially determining whether each point on a writing track in the canvas is positioned in the erasing area;
the removing module is used for removing the points in the erasing area from the writing tracks displayed in the canvas and deleting the points from the writing paths corresponding to the writing tracks stored in the storage unit, so that each segment of sub-writing track obtained after the points in the canvas are erased respectively corresponds to one segment of sub-writing path; each segment of the sub-writing path comprises coordinate information of each point on a sub-writing track corresponding to the sub-writing path in the canvas;
and the dragging module is used for receiving the dragging operation of the user on any point on the canvas, and if the coordinate information of any point is located on any section of the erased sub-writing path, dragging the sub-writing track corresponding to the sub-writing path.
14. The apparatus of claim 13, wherein the first obtaining module comprises:
the first acquisition unit is used for acquiring an erasing track input by the user in the canvas;
and the first determining unit is used for determining a corresponding erasing area in the canvas according to the erasing track.
15. The apparatus according to claim 14, wherein the first determining unit is specifically configured to:
determining pixel points corresponding to the erasing track in all pixel points of a virtual canvas according to the coordinate information of each point in the erasing track in the canvas, wherein the size of the virtual canvas is the same as that of the canvas displayed on the browser, and the coordinate information of each pixel point in the virtual canvas is stored in a storage unit;
and configuring image information for pixel points corresponding to the erasing track in the virtual canvas and storing the image information in the storage unit, wherein the area corresponding to the pixel points configuring the image information in the canvas displayed on the browser is the erasing area, and the image information comprises at least one of a color value and a transparency value.
16. The apparatus of claim 15, wherein the determining module is specifically configured to:
determining a pixel point corresponding to the writing track in the virtual canvas according to coordinate information of each point in the writing track in the canvas displayed on the browser and coordinate information of each pixel point in the virtual canvas;
and if the image information exists in the pixel point corresponding to the writing track, determining that the pixel point is located in the erasing area.
17. The apparatus according to any one of claims 14 to 16, wherein the first obtaining unit is specifically configured to:
receiving a starting erasing instruction of a user;
after the pressing operation of the left mouse button by the user is monitored, starting to acquire each point of the movement of the mouse until the left mouse button is monitored to bounce, wherein a track formed by each point of the movement of the mouse is the erasing track.
18. The apparatus according to any one of claims 13-16, further comprising:
the receiving module is used for receiving a writing starting instruction of a user;
and the second acquisition module is used for starting to acquire each point of the movement of the mouse after monitoring the pressing operation of the left mouse button by the user until the left mouse button is monitored to bounce, wherein a track formed by each point of the movement of the mouse is the writing track.
19. The apparatus of claim 18, further comprising:
the processing module is used for sequentially adopting a quadratic Bezier curve to carry out line connection processing on each point moved by the mouse, and the obtained key points of the Bezier curve are the key points in the writing track;
the storage module is used for storing the writing path corresponding to the writing track in the storage unit; and the writing path comprises coordinate information of key points in the writing track.
20. The apparatus of claim 19, wherein the determining module comprises:
the second determining unit is used for determining a sampling value according to the distance of the key point in the writing track;
the third determining unit is used for determining sampling points on the writing track according to the key points in the writing track, the sampling values and the quadratic Bezier curve formula;
and the fourth determining unit is used for sequentially determining whether each sampling point on the writing track is positioned in the erasing area.
21. The apparatus according to claim 20, wherein the removal module is specifically configured to:
and calling a cleaning Application Programming Interface (API) in the browser to remove the key points in the erasing area from the writing track displayed in the canvas so as to form at least two segments of sub-writing tracks.
22. The apparatus according to claim 20 or 21, wherein the removal module is specifically configured to:
determining a first critical point and/or a second critical point critical to the erasing area in the key points of the writing track, wherein the next key point of the first critical point along the writing track direction is located in the erasing area, and the last key point of the second critical point along the writing track direction is located in the erasing area;
and adding a first control point and an end point of a quadratic Bezier curve to the first critical point, adding a second control point and a start point of the quadratic Bezier curve to the second critical point according to a quadratic Bezier curve segmentation algorithm, and deleting the coordinate information of the key point in the erasing area from the writing path corresponding to the writing track to form at least two segments of sub-writing paths.
23. The apparatus of claim 22, wherein the drag module comprises:
the second acquisition unit is used for monitoring the pressing operation of a user on a left mouse button, determining that the coordinate information of the position of the pressing operation in the canvas is located on any segment of sub-writing path stored in the storage unit, and starting to acquire the moving distance of the mouse until the left mouse button is monitored to bounce;
a fifth determining unit, configured to determine, according to the coordinate information of each key point on the sub-writing path and the distance over which the mouse moves, which are stored in the storage unit, termination coordinate information of each key point on the sub-writing path on the canvas;
and the display unit is used for displaying the sub-writing track corresponding to the sub-writing path on the canvas according to the termination coordinate information.
24. The apparatus of claim 23, further comprising:
and the modifying module is used for modifying the coordinate information of each key point on the sub-writing path stored in the storage unit into the termination coordinate information.
25. A computer-readable storage medium comprising computer-readable instructions that, when read and executed by a written trace processing apparatus, cause the written trace processing apparatus to perform the method of any of claims 1 to 12.
CN201810596701.4A 2018-06-11 2018-06-11 Writing track processing method and device Active CN108733293B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201810596701.4A CN108733293B (en) 2018-06-11 2018-06-11 Writing track processing method and device

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201810596701.4A CN108733293B (en) 2018-06-11 2018-06-11 Writing track processing method and device

Publications (2)

Publication Number Publication Date
CN108733293A CN108733293A (en) 2018-11-02
CN108733293B true CN108733293B (en) 2021-09-07

Family

ID=63932945

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201810596701.4A Active CN108733293B (en) 2018-06-11 2018-06-11 Writing track processing method and device

Country Status (1)

Country Link
CN (1) CN108733293B (en)

Families Citing this family (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110764674B (en) * 2019-09-12 2021-03-26 湖南新云网科技有限公司 Method and system for erasing note primitives of electronic whiteboard and electronic whiteboard
CN112035035B (en) * 2020-08-27 2022-06-07 哈尔滨工业大学(深圳) Eraser realizing method and system capable of erasing strokes of top layer local area
CN112527182A (en) * 2020-12-23 2021-03-19 青岛海信移动通信技术股份有限公司 Electronic device and pattern drawing method
CN114115265A (en) * 2021-11-23 2022-03-01 未岚大陆(北京)科技有限公司 Path processing method of self-moving equipment and self-moving equipment
CN114356201B (en) * 2021-12-23 2024-02-20 科大讯飞股份有限公司 Writing beautifying method, device, equipment and readable storage medium

Family Cites Families (19)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101587495A (en) * 2009-07-08 2009-11-25 伍帝州 Method and system for downloading and disposing application through browser and providing application entrance
CN101609560B (en) * 2009-07-16 2011-09-14 广东威创视讯科技股份有限公司 Method for erasing handwriting
CN102262508B (en) * 2011-07-21 2013-03-06 福州锐达数码科技有限公司 Method for generating measuring tool by mouse track
CN104714724B (en) * 2011-09-30 2019-07-09 北京奇虎科技有限公司 A kind of touch-control type browser of portable mobile termianl
CN103064613A (en) * 2012-12-13 2013-04-24 鸿富锦精密工业(深圳)有限公司 Method and device for erasing contents of touch screen
US9030430B2 (en) * 2012-12-14 2015-05-12 Barnesandnoble.Com Llc Multi-touch navigation mode
CN103077025B (en) * 2012-12-28 2015-11-18 锐达互动科技股份有限公司 A kind of closed geometry figure is wiped trajectory and is generated the method for new trajectory
CN103257828A (en) * 2013-05-30 2013-08-21 无锡久源软件科技有限公司 Graffiti type full screen sliding and unlocking method
TWI515643B (en) * 2013-10-15 2016-01-01 緯創資通股份有限公司 Operation method for electronic apparatus
CN103729127A (en) * 2013-12-24 2014-04-16 广西大学 Method for controlling browser by mouse moving trajectory
JP2016071819A (en) * 2014-10-02 2016-05-09 株式会社東芝 Electronic apparatus and method
CN105653144A (en) * 2014-11-12 2016-06-08 北大方正集团有限公司 Webpage-based hand input method and editor
CN106933474B (en) * 2015-12-30 2020-02-04 网易(杭州)网络有限公司 Image mixing processing method and device
CN106227454B (en) * 2016-07-27 2019-10-25 努比亚技术有限公司 A kind of touch trajectory detection system and method
CN106325737B (en) * 2016-08-03 2021-06-18 海信视像科技股份有限公司 Writing path erasing method and device
CN112363657A (en) * 2016-10-26 2021-02-12 海信视像科技股份有限公司 Gesture erasing method and device
CN106886304A (en) * 2017-02-20 2017-06-23 联想(北京)有限公司 Data processing method, stylus applications client and electronic equipment
CN106991711A (en) * 2017-03-15 2017-07-28 广州视源电子科技股份有限公司 Person's handwriting edit methods and system
CN107193424A (en) * 2017-06-27 2017-09-22 北京北纬天辰科技有限公司 A kind of Intelligent electronic-type method for deleting and device

Also Published As

Publication number Publication date
CN108733293A (en) 2018-11-02

Similar Documents

Publication Publication Date Title
CN108733293B (en) Writing track processing method and device
US10373359B2 (en) Method and device for erasing a writing path on an infrared electronic white board, and a system for writing on an infrared electronic white board
US9207858B2 (en) Method and apparatus for drawing and erasing calligraphic ink objects on a display surface
CN107943365B (en) Line handwriting presenting method and device, electronic equipment and storage medium
US20130111380A1 (en) Digital whiteboard implementation
CN105335099A (en) Memory cleaning method and terminal
US8542207B1 (en) Pencil eraser gesture and gesture recognition method for touch-enabled user interfaces
JP5516535B2 (en) Electronic information terminal and area setting control program
CN105373291A (en) Interface switching method and device
US20200372208A1 (en) Enhanced digital ink erasing
CN103793178A (en) Vector graph editing method of touch screen of mobile device
WO2022242379A1 (en) Stroke-based rendering method and device, storage medium and terminal
CN108492349B (en) Processing method, device and equipment for writing strokes and storage medium
US20150135112A1 (en) Two step content selection
CN113926190A (en) Method and device for controlling three-dimensional model in game editor and storage medium
CN104978135A (en) Icon display method and device, and mobile terminal
CN104317492A (en) Wallpaper setting method
CN110347318B (en) Handwriting drawing method, device, equipment and storage medium
JP4886570B2 (en) Information processing apparatus, information processing method, and program
CN108255558B (en) Writing software calling method, device, equipment and computer readable storage medium
CN115564930A (en) Virtual camera collision detection method and device
CN113031817B (en) Multi-touch gesture recognition method and false touch prevention method
CN113836872A (en) Page diagram object editing method, device, equipment and readable medium
CN114063859A (en) Method for erasing graph, electronic equipment and storage medium
CN110647263B (en) Mobile terminal desktop icon moving method, device, medium and equipment

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant