Method and system for collecting handwriting information of online drawing

Abstract

The invention discloses a handwriting information acquisition method and system for online drawing, and relates to the field of drawing and the technical field of computer information processing. Aiming at the problems that the existing digital painting software is inconvenient to install and use and the'process data 'of painting cannot be directly processed and analyzed, the invention provides a simple and convenient painting platform and handwriting information acquisition and analysis system. According to the system, canvas drawing is achieved through Web canvas, installation is not needed, and good equipment compatibility is achieved; the method comprises the following steps: monitoring a paintbrush state based on a browser unified pointer event Pointer Event, and further collecting handwriting information data such as pressure, timestamp and rate; the data are converted into characteristic indexes such as time characteristics, space characteristics, kinematics characteristics and pressure characteristics which are effective for drawing analysis through data processing, and the characteristic indexes are transmitted and stored in a database, so that online extraction of the data characteristics is realized. According to the system, data management and query can be conveniently carried out, and data analysis and research of a neuropsychological drawing test and a psychological projection drawing experiment can be effectively assisted.

Description

Technical Field

[0001] The present invention relates to the fields of painting and computer information processing technology, and in particular to a method for collecting handwriting information in painting. Background Art

[0002] Nowadays, in the digital age, the combination of computer technology and painting art has become an increasingly popular trend. People can use computers and related software to draw, but for some scenes that require hand-drawing (such as painters' creations), the traditional brush method is still irreplaceable. In this case, people often need to digitize hand-drawn works for storage, transmission, editing and other operations. In some neuropsychological drawing tests and psychological projection drawing analysis, the time characteristics, spatial characteristics, kinematic characteristics and other research-related data of the painting process also need to be recorded.

[0003] At present, there are many digital painting devices on the market, such as digital tablets and smart handwriting tablets. These devices can record the user's hand-drawing process by sensing the trajectory of the pen and convert it into digital data. However, these devices usually need to be connected to a computer or other device to store and modify data, and the "process data" related to the research, such as the time characteristics, spatial characteristics, and kinematic characteristics of the painting process, cannot be directly recorded and processed. In addition, the client programs supporting these devices must be installed. For users to install the client by themselves, certain computer knowledge is required, and the maintenance of the client is also difficult; secondly, the client program often has poor hardware platform compatibility, and the developed client is limited to a certain platform. For example, the client developed for Windows can only be used on desktop PCs, and cannot be used on mobile phones and pads. In order to achieve cross-platform, multiple clients must be developed, which increases development and operating costs.

[0004] Therefore, it is necessary to design a method and system that is convenient for users to create paintings and can directly digitize the data in the hand-painting process, so as to facilitate data analysis and research on related painting tests. Summary of the invention

[0005] The present invention aims to solve the problems that the existing digital painting software is inconvenient to install and use and the "process data" of the painting cannot be directly processed and analyzed, and provides an online painting handwriting information collection and analysis method, and provides a simple and convenient painting platform and handwriting information collection and analysis system for painting testing.

[0006] The technical solution of the present invention to solve the above technical problems is to propose a painting method and a handwriting information collection method for brush input detection on a web page, including: realizing online drawing in a custom canvas area of ​​a web page by monitoring brush input events through PointerEvent; selecting feature indicators to be recorded by researching relevant literature on painting tests; using brush monitoring events and feature value algorithms to obtain data during the painting process; and using canvas's toDataURL() method and front-end and back-end transmission technology to save drawing data.

[0007] Preferably, the PointerEvent brush listening event is developed from the mouse event and the touch event. It abstracts their common points and introduces new concepts and properties, such as pointer type, pointer ID, pointer state, etc. The PointerEvent event can listen to events generated by multiple types of input devices, such as digital tablets and digital pens, mice, touch screens, etc., so it can be used in the development of this system to adapt to different hardware platforms. The pointerType attribute of PointerEvent can be used to distinguish which type of input device it is. For example, when the attribute is "mouse", it is mouse input, when it is "pen", it is digital pen input on the digital tablet, and when it is "touch", it is finger or other touch media input on the touch screen.

[0008] Preferably, the data that needs to be recorded in the drawing test further include: timestamp, coordinate point, pressure, speed value, strokes in the online drawing process, record the whole process from the pen down to the completion of drawing, and save the completed picture at the same time; the handwriting feature acquisition needs to listen to events such as pointerdown, pointermove, pointerup, and set corresponding functions to process these events to obtain normalized data, such as the acquisition of the number of strokes and timestamps is completed by the following algorithm: define a counter for the number of strokes, and the counter increments by 1 every time the user completes a stroke; define two global arrays srokestart_time and srokeend_time, which are used to store the start time and end time of each stroke of the user; when a pointerdown event is detected, the start time of the current stroke is recorded. When a pointerup event is detected, the end time of the current stroke is recorded, and the stroke counter increments by 1.

[0009] Preferably, the drawing result is converted to a drawing file using the toDataURL() method of canvas. This method returns a data URL containing the image display. The format of the image can be specified in the parameter, as shown below:

[0010] letdataurl=canvas.toDataURL("image / png")

[0011] Next, you need to separate the image data from the dataurl and store it in the file data, so that the image file object file is generated. Next, you need to transfer the file object to the backend, and you can use the post method of the axios library to achieve the transfer. For the json string of the user's drawing feature value generated earlier, you can use the get method to transfer it to the backend.

[0012] The present invention also proposes a painting handwriting information collection system based on B / S architecture. The user logs in by entering the username and password; the user uses the brush to perform a painting test on the drawing board on the web page; the extracted and processed painting data is securely transmitted and stored in the database through the network; the user views the database data through query operations.

[0013] Preferably, the front-end page is developed using html, css and vue framework, and Django's render() function and template language are used to dynamically render the specific interface; the back-end uses the Django framework to implement database operations.

[0014] Optionally, the brush input device used by the user may be in the form of a mouse, touch input, or a digital pen with pressure sensitivity.

[0015] Optionally, the data network transmission protocol may use the HTTP protocol based on a request-response mode, the HTTPS protocol based on the SSL / TLS protocol to encrypt data transmission, or the WebSocket protocol based on the TCP protocol to achieve two-way communication.

[0016] Optionally, when querying the test results, you can select different data to view. You can view the drawing results or more detailed drawing process data.

[0017] The present invention realizes a digital drawing board that supports multiple input devices through a painting method of brush input detection on a web page. Pointerevent listening events and handwriting feature algorithms are used to extract the time, space and kinematic features of the strokes in the painting process online, and the storage of feature data is realized. It can effectively solve the problems of inconvenience in installation and use of current digital painting software and the inability to directly process and analyze the "process data" of painting, and can effectively assist in the data analysis and research of neuropsychological painting tests and psychological projection painting experiments. BRIEF DESCRIPTION OF THE DRAWINGS

[0018] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments are briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work.

[0019] Figure 1 This is a schematic diagram of the working principle of the painting handwriting collection system;

[0020] Figure 2 This is a flow chart of handwriting information collection of the present invention;

[0021] Figure 3 A schematic diagram of an image of handwriting information collected by a clock drawing test using a digital pen provided by an exemplary embodiment of the present invention. DETAILED DESCRIPTION

[0022] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0023] The technical solution of the present invention is further described in detail below in conjunction with the accompanying drawings. The handwriting collection system for online painting consists of an optional input device and a web-side painting program. Among them, the web-side painting program is used for user login, painting, online collection, storage, and viewing of painting feature data.

[0024] Figure 1 This is a schematic diagram of the working principle of the painting handwriting collection system of the present invention. The user who is painting inputs the painting through devices such as a mouse and a digital pen; based on the PointerEvent event, the strokes are rendered to the web page drawing board through WebCanvas, and the feature data of the painting process is obtained by using the brush monitoring event and the eigenvalue algorithm; the system backend is implemented based on Django, and the database data is stored and queried, and the data is transmitted to the front end through network transmission.

[0025] like Figure 2The figure shows a flow chart of handwriting information collection for painting of the present invention, including: the user logs in to the webpage painting system with an account and password and starts painting; when a pointerdown event is detected, the start time of the current stroke is recorded; when a pointermove event is detected, it means that the user is drawing, and the press attribute of the event is obtained at this time to obtain the current pressure value, which is stored in the pressure array, and the x and y values ​​of the current coordinate point are obtained and stored in the coordinate array, and the line is synchronously drawn on the drawing board based on the pressure data using the canvas object; when a pointerup event is detected, the end time of the current stroke is recorded, and the stroke counter is incremented by 1; when the painting is completed, the drawing result on the canvas is converted into a picture file, which is transmitted to the back end together with the handwriting information data; the back end receives the data, and stores the data in a database after normalization processing.

[0026] like Figure 3 The figure shows an image schematic diagram of handwriting information collected by a clock drawing test using a digital pen provided by an exemplary embodiment of the present invention. After drawing is completed, the webpage will display the result image, drawing time and drawing duration, number of drawing strokes, and the rate-time graph and pressure-time graph during the drawing process will also be displayed on the page in sequence.

[0027] Of course, the above description is not a limitation of the present invention, and the present invention is not limited to the above examples. Changes, modifications, additions or substitutions made by ordinary technicians in this technical field within the essential scope of the present invention should all fall within the protection scope of the present invention.

Claims

1. A method for collecting handwriting information of online painting, characterized in that: include: The user logs in through the account; Drawing input is performed on the canvas constructed by Webcanvas through mouse, digital pen, finger touch, etc. Based on the browser unified pointer event PointerEvent, the brush state is monitored, the handwriting is synchronously rendered to the canvas, and the handwriting information of the whole drawing process is recorded according to the brush state value, including pressure, timestamp, coordinates, etc. After drawing is completed, the image and process data are transmitted to the back end through the network; the back end receives the data, normalizes the process data, forms characteristic indicators and saves them in the database.

2. The method according to claim 1, characterized in that Recording the entire painting process's handwriting information based on the brush status value includes: when a pointerdown event is detected, recording the start time of the current stroke; when a pointermove event is detected, it means that the user is drawing, and at this time, obtaining the press attribute of the event can obtain the current pressure value, store it in the pressure array, and obtain the x, y values ​​of the current coordinate point and store it in the coordinate array; when a pointerup event is detected, recording the end time of the current stroke, and the stroke counter is incremented by 1; the above process is repeated until the drawing is completed.

3. The method according to claim 1 or 2, characterized in that: The characteristic indicators formed after the handwriting information of the entire painting process is standardized include: drawing time, stagnation time, number of strokes, speed sequence, pressure sequence, average speed, average pressure, etc.

4. An online painting handwriting information collection system, characterized in that: Users register and log in to the web system; use input devices to draw, and the drawing handwriting is synchronized with the web page; the data of the entire painting process including time, pressure, and coordinates are recorded; after drawing is completed, the image and drawing handwriting information data are transmitted to the back end through the network; the back end receives the data, normalizes the process data, and forms feature indicators that are saved in the database; users can view historical painting status through query operations.

5. The system according to claim 4, characterized in that Developed based on B / S architecture, it has good device compatibility and does not require installation; the front end is a drawing board developed based on Webcanvas, which obtains the brush status through the browser and then obtains the data of the painting process.

6. The system according to claim 4 or 5, characterized in that: The user views the historical painting status through query operations, specifically, the user views the historical test results by clicking on them; after receiving the request, the backend reads the corresponding data in the database and returns it to the frontend, which is then processed and analyzed and displayed on the interface, including the result image, drawing time and drawing duration, number of drawing strokes, and rate-time graph and pressure-time graph during the drawing process.

Images