Webpage electronic whiteboard writing method and device and storage medium
By intercepting touch events in the web-based electronic whiteboard and sending data directly to the native client, the problem of slow writing response speed in the web-based electronic whiteboard is solved by leveraging the efficient rendering capabilities of the native client, resulting in faster handwriting display and a better user experience.
Patent Information
- Application Number
- CN202511227892.3
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-08-29
- Publication Date
- 2026-01-16
AI Technical Summary
The writing response speed of web-based electronic whiteboards is slow, resulting in a poor user experience. This is mainly due to the long data communication link, which causes touch events to pass through the web view controls, the page layer, and the writing logic in sequence, resulting in a long communication time.
By intercepting touch events through a web view control, touch data is sent directly to the native client. After confirming the pen-dropping event on the native client, the pen strokes are drawn. The efficient rendering capabilities of the native client are used to accelerate the pen stroke display. At the same time, after receiving the pen-lifting event on the web client, the pen stroke display is switched to the web client.
It improves the writing response speed of the web-based electronic whiteboard, optimizes the user experience, reduces the delay and lag in handwriting drawing, and ensures the continuity and consistency of handwriting display.
Smart Images
Figure CN121349353A_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of computer technology, and in particular to a method, device and storage medium for writing on a web-based electronic whiteboard. Background Technology
[0002] Web technologies (such as HTML5) have gained widespread popularity among developers due to their enhanced multimedia support, interactivity, and cross-platform compatibility. Software developed using web technologies, such as electronic whiteboards, can run on desktop systems (such as Windows) as well as mobile systems (such as Android), and their cross-platform nature greatly improves the efficiency of whiteboard application development and deployment.
[0003] Because the system's touch events need to be transmitted sequentially to the webpage view control (e.g., WebView), the page layer (e.g., JavaScript layer), and the writing logic (e.g., JavaScript logic) before the webpage can draw handwriting based on the touch data, the data communication link is relatively long, resulting in a slow writing response speed for the webpage electronic whiteboard, which seriously affects the user experience. Summary of the Invention
[0004] This application provides a web-based electronic whiteboard writing method, device, and storage medium to solve the technical problem in related technologies where long data communication links result in slow writing response speed and poor user experience of web-based electronic whiteboards. This can improve the writing response speed of web-based electronic whiteboards and optimize the user experience.
[0005] In a first aspect, embodiments of this application provide a method for writing on a web-based electronic whiteboard, including: Display the whiteboard writing interface of the web-based electronic whiteboard software, and intercept touch events on the whiteboard writing interface through web view controls. The touch events include pen-drop events, movement events, and pen-lifting events. The system continuously acquires touch data corresponding to the touch events and sends the touch data sequentially to the native end of the operating system and the web page running the web page electronic whiteboard software through the web page view control. When the native terminal receives a drawing start notification sent by the web terminal through the communication bridge, the native terminal draws and displays the first handwriting based on the touch data. The web terminal generates the drawing start notification when it confirms that the touch point of the pen stroke event is on the canvas of the whiteboard writing interface during the movement event. When the pen lifting event is received on the web page, the second stroke drawn on the web page based on the touch data is displayed, and a drawing end notification is sent to the native device. Upon receiving the drawing end notification on the native device, the first stroke is deleted.
[0006] This application embodiment intercepts touch events on the whiteboard writing interface through a web view control, continuously acquires touch data corresponding to the touch events, and sends the touch data to the native client and the web client sequentially through the web view control. When the native client confirms that the touch point of the pen-drop event is on the canvas of the whiteboard writing interface, it receives a drawing start notification sent by the web client through the communication bridge. The native client draws and displays the first stroke based on the touch data. When the web client receives the pen-lifting event, it displays the second stroke drawn by the web client based on the touch data and sends a drawing end notification to the native client to delete the first stroke. The touch data does not need to go through the web view control, page layer and writing logic sequentially to render the stroke. Instead, it uses the efficient rendering capability of the native client to accelerate the stroke display and switches to the stroke display on the web client when the user lifts the pen. This can effectively improve the writing response speed of the web electronic whiteboard and optimize the user experience while ensuring the writing display effect of the web electronic whiteboard.
[0007] Furthermore, after sending the touch data sequentially to the native end of the operating system and the web page running the web page electronic whiteboard software via the web page view control, the method further includes: The native terminal draws pre-drawn strokes based on the touch data and saves the pre-drawn strokes in memory; Accordingly, when the native terminal receives a drawing start notification from the web page via a communication bridge, drawing and displaying the first handwriting based on the touch data on the native terminal includes: When the native terminal receives a drawing start notification sent by the web terminal through the communication bridge, it displays the pre-drawn strokes stored in memory, and draws and displays the first strokes based on the touch data.
[0008] The above-mentioned method of drawing pre-drawn strokes based on touch data on the native client and then displaying the pre-drawn strokes when a drawing start notification is received from the web client, and drawing the first stroke based on the subsequently received touch data on the native client, can reduce the situation where the strokes are incomplete due to the discarding of earlier received touch data because it is unclear whether the touch point is on the canvas, thus optimizing the stroke display effect.
[0009] Furthermore, after drawing a pre-drawn handwriting based on the touch data via the native terminal and storing the pre-drawn handwriting in memory, the method further includes: If the pen-lifting event is received on the native client and no drawing start notification is received from the web client, the pre-drawn strokes are cleared.
[0010] The above-mentioned method reduces the occurrence of incorrect pen stroke display when the touch point of the pen stroke event is not on the canvas by clearing the pre-drawn strokes when a pen lift event is detected and no drawing start notification is received from the web page.
[0011] Furthermore, after sending the touch data sequentially to the native end of the operating system and the web page running the web page electronic whiteboard software via the web page view control, the method further includes: The touch data is recorded via the web page. Accordingly, before displaying the second handwriting drawn based on the touch data on the webpage, the method further includes: The second handwriting is drawn based on the recorded touch data on the web page.
[0012] The above-mentioned method records touch data on the web page, and then draws a second stroke based on the recorded touch data after detecting a pen lift event. This effectively reduces the performance overhead and lag of stroke drawing while ensuring the stroke display effect.
[0013] Furthermore, after sending the touch data sequentially to the native end of the operating system and the web page running the web page electronic whiteboard software via the web page view control, the method further includes: The second handwriting is drawn based on the touch data on the web page, wherein the rendering layer of the first handwriting is higher than the rendering layer of the second handwriting.
[0014] As described above, by setting the rendering layer of the first handwriting to be higher than the rendering layer of the second handwriting, the normal display of the handwriting is ensured, and the user experience is optimized.
[0015] Furthermore, after deleting the first handwriting, the method further includes: Hide the native rendering layer.
[0016] As described above, after deleting the first stroke, the native rendering layer is hidden to prevent it from obscuring the second stroke and to ensure its normal display.
[0017] Furthermore, after drawing and displaying the first handwriting based on the touch data via the native terminal, the method further includes: The device continuously receives the touch data and updates the first handwriting based on the latest received touch data and the last received touch data.
[0018] As described above, the stroke between the two latest touch points is drawn based on the latest received touch data and the last received touch data, thereby locally redrawing the smallest area where the newly added stroke is located, realizing a local refresh of the first stroke, avoiding the redrawing of the entire screen area, reducing the time and performance overhead required for redrawing, and effectively reducing the latency of stroke drawing.
[0019] Furthermore, after displaying the whiteboard writing interface of the web-based electronic whiteboard software, it also includes: Handwriting configuration is obtained through a web page and synchronized to the native client via a communication bridge; Accordingly, the step of drawing and displaying the first handwriting based on the touch data via the native terminal includes: The first handwriting is drawn and displayed based on the touch data according to the handwriting configuration via the native terminal.
[0020] As described above, by synchronizing the handwriting configuration on the web page to the native page, the visual consistency of handwriting drawn on the native page and the web page is ensured, and the same handwriting display effect is maintained when switching between the native page and the web page. This reduces the abruptness caused to users by handwriting switching and improves the writing display effect of the web page electronic whiteboard.
[0021] In a second aspect, embodiments of this application provide a web-based electronic whiteboard writing device, including: a memory and one or more processors; The memory is used to store one or more programs; When the one or more programs are executed by the one or more processors, the one or more processors implement the web page electronic whiteboard writing method as described in the first aspect.
[0022] In a third aspect, embodiments of this application provide a storage medium for storing computer-executable instructions, which, when executed by a computer processor, are used to perform the webpage electronic whiteboard writing method as described in the first aspect. Attached Figure Description
[0023] Figure 1 This is a flowchart illustrating a web-based electronic whiteboard writing method provided in an embodiment of this application; Figure 2 This is a flowchart of another web-based electronic whiteboard writing method provided in the embodiments of this application; Figure 3 This is a schematic diagram illustrating the drawing effect of pre-drawn handwriting provided in an embodiment of this application; Figure 4 This is a schematic diagram illustrating the drawing effect of a first handwriting provided in an embodiment of this application; Figure 5This is a schematic diagram showing a first handwriting and a second handwriting according to an embodiment of this application; Figure 6 This is a schematic diagram of a second handwriting display provided in an embodiment of this application; Figure 7 This is a schematic diagram of the structure of a web-based electronic whiteboard writing device provided in an embodiment of this application. Detailed Implementation
[0024] To make the objectives, technical solutions, and advantages of this application clearer, specific embodiments of this application will be described in further detail below with reference to the accompanying drawings. It should be understood that the specific embodiments described herein are merely for explaining this application and not for limiting it. It should also be noted that, for ease of description, only the parts relevant to this application are shown in the drawings, not all of them. Before discussing exemplary embodiments in more detail, it should be mentioned that some exemplary embodiments are described as processes or methods depicted as flowcharts. Although the flowcharts describe operations (or steps) as sequential processes, many of these operations can be performed in parallel, concurrently, or simultaneously. Furthermore, the order of the operations can be rearranged. The process can be terminated when its operation is completed, but additional steps not included in the drawings may also be present. The above processes can correspond to methods, functions, procedures, subroutines, subroutines, etc.
[0025] In existing web-based electronic whiteboard applications, there is a significant reliance on JavaScript (hereinafter referred to as JS) and browser rendering engines, resulting in substantial performance bottlenecks on Android devices (especially in low-performance, large-screen scenarios). For example, on high-resolution screens (such as 4K / 8K), the device needs to process more pixels. Frame-by-frame rendering by rendering engines such as WebGL and Canvas 2D takes a long time, and browser compositing rendering also requires layout calculations and layer merging, making the rendering speed unable to keep up with the rapid writing on the electronic whiteboard in real time. Moreover, touch events need to be distributed to the page layer through web view controls, resulting in a long communication link (touch events pass through the system, web view controls, and writing logic sequentially), and the communication time is also long. Furthermore, when JS executes the drawing logic in a single thread, it may block the user interface thread (UI thread), exacerbating the lag in the display of the writing trajectory. Based on this, this application provides a web-based electronic whiteboard writing method to solve the technical problem that the long data communication link in existing web-based electronic whiteboard writing solutions leads to slow writing response speed and poor user experience.
[0026] Figure 1A flowchart of a web-based electronic whiteboard writing method provided in this application embodiment is given. The web-based electronic whiteboard writing method provided in this application embodiment can be implemented by hardware and / or software and integrated into a web-based electronic whiteboard writing device.
[0027] The following description uses a web-based electronic whiteboard writing device as an example to illustrate the web-based electronic whiteboard writing method. (Reference) Figure 1 The writing methods for this webpage's electronic whiteboard include: S110: Displays the whiteboard writing interface of the web-based electronic whiteboard software. It intercepts touch events on the whiteboard writing interface through web view controls. Touch events include pen-down events, movement events, and pen-up events.
[0028] In one embodiment, the web-based electronic whiteboard writing device provided in this application is equipped with web-based electronic whiteboard software. After the web-based electronic whiteboard software is turned on, the whiteboard writing interface of the web-based electronic whiteboard software will be displayed. Users can perform touch operations on the whiteboard writing interface displayed on the screen using touch objects such as styluses and fingers.
[0029] The whiteboard writing interface can be divided into a canvas area and a non-canvas area. When the user performs a touch operation (writing operation) in the canvas area, a corresponding writing trajectory will be generated based on the touch operation. When the user touches a button or menu in a non-canvas area (for example, when the user's touch point falls on a button or menu in a non-canvas area), the touch operation will be responded to based on a pre-configured response method, and no writing trajectory needs to be generated.
[0030] The web-based electronic whiteboard writing device can detect user actions on the whiteboard writing interface and generate corresponding touch events. These touch events include pen-down events, movement events, and pen-up events. For example, when a user writes on the whiteboard, they sequentially perform pen-down, movement, and pen-up operations, leaving a corresponding movement trajectory on the whiteboard. The web-based electronic whiteboard writing device collects the corresponding touch data and generates the appropriate pen-down, movement, and pen-up events based on this data.
[0031] S120: Continuously acquire touch data corresponding to touch events, and send the touch data sequentially to the native end of the operating system and the web end running the web electronic whiteboard software through the web view control.
[0032] It needs to be explained that in the touch event dispatch mechanism, touch events (including pen-down events, movement events, and pen-up events) are dispatched from the WebView control to the web page. Therefore, the native side can intercept touch events in advance and send the touch data corresponding to the touch events to the native side by customizing the WebView control, that is, by overriding the touch event dispatch function of the WebView control (such as the dispatchTouchEvent function), and then render the handwriting on the native side accordingly.
[0033] For example, upon detecting a touch event, the web view control continuously intercepts the touch event, obtains the touch data corresponding to the touch event, and sequentially sends the touch data to the native end of the operating system (e.g., the native Android end) and the web end running the web-based electronic whiteboard software (e.g., the H5 end) until a pen-lifting event is detected (the sent touch data includes the touch data corresponding to the pen-lifting event). In one embodiment, the web view control first sends the touch data to the native end and then sends the touch data to the web end, improving the pen drawing efficiency on the native end.
[0034] S130: When the native terminal receives a drawing start notification sent by the web terminal through the communication bridge, the native terminal draws and displays the first stroke based on the touch data. The web terminal generates the drawing start notification when it confirms that the touch point of the pen stroke event is on the canvas of the whiteboard writing interface during the movement event.
[0035] In one embodiment, the native client and the web client can communicate and synchronize via a communication bridge (e.g., JS-Bridge). After receiving touch data, the web client can determine whether the touch point of the pen event is on the whiteboard writing interface canvas based on the touch data corresponding to the pen event. If it is determined that the touch point of the pen event is on the whiteboard writing interface canvas, a drawing start notification is generated and sent to the native client via the communication bridge. Since the web client receives the touch data later than the native client, and determining whether the touch point of the pen event is on the whiteboard writing interface canvas takes time, the determination result is generally generated during the movement event, and the native client can receive the drawing start notification during the movement event.
[0036] For example, after receiving touch data, the native application may not immediately draw and display the writing strokes. Instead, it may wait for the web application to send a drawing start notification to avoid incorrect display of the writing trajectory due to the touch point of the pen stroke not being on the canvas of the whiteboard writing interface. When the native application receives the drawing start notification from the web application via the communication bridge, it can draw and display the first stroke based on the received touch data (including touch data received at the time of receiving the drawing start notification and before), and continuously update the first stroke based on touch data received after receiving the drawing start notification.
[0037] Among them, the native side can perform more efficient handwriting rendering through frame buffer direct drive. The frame buffer direct drive rendering method can effectively bypass the system graphics rendering service (such as Android Surface Flinger) and write touch data directly to the video memory, thereby improving handwriting rendering efficiency.
[0038] In one embodiment, after drawing and displaying the first handwriting based on touch data via the native device, touch data can be continuously received via the native device, and the first handwriting can be updated based on the latest received touch data and the last received touch data.
[0039] For example, after responding to the drawing start notification and drawing and displaying the first stroke, touch data is continuously received, and the first stroke is updated according to the latest received touch data and the last received touch data. For example, the stroke between the two latest touch points is drawn according to the latest received touch data and the last received touch data, thereby partially redrawing the smallest area where the newly added stroke is located, realizing a partial refresh of the first stroke, avoiding the redrawing of the entire screen area, reducing the time and performance overhead required for redrawing, and effectively reducing the latency of stroke drawing.
[0040] In one possible embodiment, the web-based electronic whiteboard writing method provided in this application draws the first handwriting based on touch data on the native client. This can be achieved by drawing the first handwriting based on touch data in a sub-thread on the native client. It should be explained that while touch data is distributed on the main thread of the web page, performing time-consuming operations on the main thread can affect the refresh of the interactive interface, causing application lag. Therefore, the native client provided in this application can schedule the touch data to be drawn asynchronously in a sub-thread upon receiving the touch data. The sub-thread can be created before or upon receiving the touch data. By scheduling the touch data to a sub-thread to draw the first handwriting, this application reduces the lag caused by handwriting drawing in the web-based electronic whiteboard writing application, ensuring the smoothness of real-time handwriting drawing.
[0041] S140: Upon receiving a pen lift event on the webpage, display the second stroke drawn on the webpage based on touch data, and send a drawing end notification to the native device.
[0042] S150: Delete the first stroke when a drawing end notification is received on the native side.
[0043] For example, when the web page receives a pen lift event, it can display a second stroke drawn based on touch data and send a drawing end notification to the native device. Upon receiving the drawing end notification, the native device will delete the first stroke to display the second stroke drawn by the web page. The second stroke can be drawn by the web page after detecting the pen lift event, or it can be drawn in real-time after detecting the pen fall event and determining that the touch point is on the canvas.
[0044] In one embodiment, the first stroke can be hidden after the second stroke is displayed, or the second stroke can be displayed after the first stroke is deleted. Alternatively, the second stroke can be drawn in real time on the webpage, and the rendering layer of the first stroke can be set higher than that of the second stroke. In this case, during the user's writing process, the first stroke will be rendered before the second stroke and can occlude the second stroke at the next lower level. After detecting a pen lift event, the native client can delete the first stroke, at which point the second stroke at the next lower level will be displayed.
[0045] As described above, by intercepting touch events on the whiteboard writing interface through a web view control, continuously acquiring touch data corresponding to the touch events, and sending the touch data sequentially to the native client and the web client through the web view control, the native client receives a drawing start notification from the web client via the communication bridge when it confirms that the touch point of the pen-drop event is on the canvas of the whiteboard writing interface. The native client then draws and displays the first stroke based on the touch data. When the web client receives the pen-lifting event, it displays the second stroke drawn by the web client based on the touch data and sends a drawing end notification to the native client to delete the first stroke. The touch data does not need to go through the web view control, page layer, and writing logic sequentially to render the stroke. Instead, it utilizes the efficient rendering capabilities of the native client to accelerate the stroke display and switches to the stroke display on the web client when the user lifts the pen. This can effectively improve the writing response speed of the web electronic whiteboard and optimize the user experience while ensuring the writing display effect of the web electronic whiteboard.
[0046] Based on the above embodiments, Figure 2 A flowchart of another web-based electronic whiteboard writing method provided in this application embodiment is given, which is a concretization of the above-described web-based electronic whiteboard writing method. (Reference) Figure 2 The writing methods for this webpage's electronic whiteboard include: S210: Displays the whiteboard writing interface of the web-based electronic whiteboard software. It intercepts touch events on the whiteboard writing interface through web view controls. Touch events include pen-down events, movement events, and pen-up events.
[0047] S220: Continuously acquire touch data corresponding to touch events, and send the touch data sequentially to the native end of the operating system and the web end running the web electronic whiteboard software through the web view control.
[0048] In one possible embodiment, the web-based electronic whiteboard writing method provided in this application, after displaying the whiteboard writing interface of the web-based electronic whiteboard software, further includes: obtaining handwriting configuration through the web interface and synchronizing the handwriting configuration to the native interface via a communication bridge. Correspondingly, drawing and displaying the first handwriting based on touch data on the native interface can be achieved by drawing and displaying the first handwriting based on touch data according to the handwriting configuration on the native interface.
[0049] For example, after the web-based electronic whiteboard writing application is launched and initialized, the web client obtains its handwriting configuration and synchronizes it to the native client via a communication bridge. The native client then draws handwriting (including pre-drawn handwriting and the first handwriting) based on the latest synchronized handwriting configuration. Simultaneously, upon detecting an update to the handwriting configuration, the web client obtains the updated handwriting configuration or corresponding update information and synchronizes it to the native client via the communication bridge, ensuring that the native client updates its handwriting configuration synchronously and maintaining consistency between the handwriting drawn on the native client and the web client. Optionally, the handwriting configuration provided in this application may include one or more combinations of handwriting color, handwriting thickness, and handwriting type.
[0050] This application synchronizes the handwriting configuration on the web page to the native page, ensuring visual consistency between handwriting drawn on the native page and the web page, maintaining the same handwriting display effect when switching between the native page and the web page, reducing the abruptness caused to users by handwriting switching, and improving the writing display effect of the web page electronic whiteboard.
[0051] S230: Draws pre-drawn strokes based on touch data via the native terminal and saves the pre-drawn strokes in memory.
[0052] S240: When the native device receives a drawing start notification sent by the web page through the communication bridge, it displays the pre-drawn strokes stored in memory, and draws and displays the first stroke based on the touch data on the native device.
[0053] For example, when the native device receives touch data, it has not yet received the drawing start notification sent by the web page. The native device first draws a pre-drawn stroke (off-screen pre-drawn stroke, that is, pre-drawn stroke on an off-screen Bitmap) based on the received touch data and saves the pre-drawn stroke in memory. At this time, the pre-drawn stroke will not be displayed on the device screen and needs to wait for the drawing start notification sent by the web page.
[0054] In this scenario, when the web browser confirms that the touch point of the pen stroke event is on the canvas of the whiteboard writing interface during a movement event, it generates a drawing start notification. In one embodiment, when the native client receives the drawing start notification from the web browser, it displays the pre-drawn pen strokes stored in memory and draws and displays the first pen stroke based on subsequently received touch data. At this point, it is confirmed that the touch point of the pen stroke event is on the canvas, and the first pen stroke will be directly displayed on the screen after drawing. At this time, the pre-drawn pen strokes and the first pen stroke are connected end to end, forming a continuous writing handwriting.
[0055] It needs to be explained that when the webpage detects a touch event, it needs to determine if the user's touch point is on the canvas before drawing the stroke. If the touch point is on a non-canvas area such as a button or menu, no stroke needs to be drawn. Since touch data is first distributed to the native client and then to the webpage, and considering the communication time between the native and webpages, the data communication delay is significant. When the native client receives a touch event, it doesn't know whether the webpage needs to draw the stroke. By the time the webpage determines that the touch point is on the canvas and notifies the native client to draw the stroke via the communication bridge, the native client may have missed touch data from multiple touch points, resulting in incomplete strokes. This application uses the native client to draw pre-drawn strokes based on touch data, and then displays the pre-drawn strokes upon receiving a drawing start notification from the webpage. The native client then draws the first stroke based on subsequently received touch data. This reduces the possibility of incomplete strokes due to discarding earlier received touch data because it's unclear whether the touch point is on the canvas, thus optimizing the stroke display effect.
[0056] In one possible embodiment, the web-based electronic whiteboard writing method provided in this application, after drawing pre-drawn strokes based on touch data on the native end and storing the pre-drawn strokes in memory, further includes: clearing the pre-drawn strokes when the native end receives a pen lift event and does not receive a drawing start notification sent by the web end.
[0057] In one embodiment, when the web client receives touch data corresponding to a pen stroke event, it determines whether the touch point of the pen stroke event is on the canvas based on the touch point position corresponding to the touch data. If it is determined that the touch point of the pen stroke event is not on the canvas, it may not send a drawing start notification to the native client.
[0058] For example, before receiving a drawing start notification from the webpage, the native application continuously pre-draws strokes off-screen based on received touch data. If, upon receiving a pen lift event notification from the webpage view control, a drawing start notification has not yet been received from the webpage, it can be assumed that the touch point of the pen drop event is not on the canvas. The pre-drawn strokes can then be cleared (e.g., the Bitmap can be cleared), and the off-screen pre-drawn strokes will not be displayed. This application reduces the likelihood of incorrect stroke display when the touch point of the pen drop event is not on the canvas by clearing the pre-drawn strokes when a pen lift event is detected and a drawing start notification from the webpage has not been received.
[0059] S250: Upon receiving a pen lift event on the webpage, display the second stroke drawn on the webpage based on touch data, and send a drawing end notification to the native device.
[0060] S260: Delete the first stroke when the drawing end notification is received on the native side.
[0061] In one possible embodiment, the web-based electronic whiteboard writing method provided in this application, after sending touch data sequentially to the native end of the operating system and the web end running the web-based electronic whiteboard software through the web view control, can also draw a second handwriting based on the touch data through the web end, wherein the rendering layer of the first handwriting is higher than the rendering layer of the second handwriting.
[0062] For example, after receiving touch data and a drawing start notification from the web application via the communication bridge, the native application draws a first stroke on its corresponding rendering layer based on the touch data. After receiving touch data and confirming that the touch point of the pen stroke event is on the whiteboard writing interface canvas, the web application draws a second stroke on its corresponding rendering layer based on the received touch data, setting the rendering layer of the first stroke to be higher than that of the second stroke. At this point, the first and second strokes formed by the same touch data overlap on the vertical projection plane (the first stroke is drawn faster than the second stroke), and the second stroke is obscured by the upper layer of the first stroke. When a pen lift event is detected, deleting the first stroke reveals the lower layer of the second stroke. This application ensures normal display of the strokes and optimizes the user experience by setting the rendering layer of the first stroke to be higher than that of the second stroke. In one embodiment, after deleting the first stroke, the rendering layer of the native application can also be hidden to avoid the native application's rendering layer obscuring the second stroke, ensuring normal display of the second stroke.
[0063] In one possible embodiment, the web-based electronic whiteboard writing method provided in this application, after sending touch data sequentially to the native end of the operating system and the web end running the web-based electronic whiteboard software via a web view control, may further include: recording the touch data via the web end. Accordingly, before displaying the second handwriting drawn on the web end based on the touch data, it further includes: drawing the second handwriting on the web end based on the recorded touch data.
[0064] For example, after receiving touch data, the web page does not immediately draw a second stroke based on the touch data, but instead records the touch data received during this period. After detecting a pen lift event, it can draw and display a second stroke based on the recorded touch data (at this time, the rendering layer of the first stroke can be set to a higher rendering layer than the second stroke). The web page then notifies the native client to end the drawing process via a communication bridge, so that the native client can delete the first stroke, thus achieving the switching display between the first and second strokes.
[0065] It needs to be explained that during the process of drawing handwriting, even if the second handwriting is drawn in real time on the web page, it will be obscured by the first handwriting drawn on the native device. This application records touch data on the web page, and draws the second handwriting on the web page based on the recorded touch data after detecting the pen lift event. While ensuring the handwriting display effect, it effectively reduces the performance overhead and lag of handwriting drawing.
[0066] Figure 3 This is a schematic diagram of the drawing effect of pre-drawn handwriting provided in an embodiment of this application. In this diagram, layer A is the first rendering layer used by the native end to draw the trajectory, and layer B is the second rendering layer used by the web page to draw the trajectory. The layer of the first rendering layer is higher than the layer of the second rendering layer.
[0067] When a user writes on the whiteboard writing interface, they perform pen-down, pen-movement, and pen-lifting operations, respectively, which are detected. Upon detecting a pen-down event, touch data is continuously sent to both the native client and the web client. During this process, the web client continuously records the received touch data. At this time, the native client has not received the drawing start notification sent by the web client. The native client first pre-draws the pen stroke L11 off-screen based on the received touch data (in fact, the user cannot see the pre-drawn pen stroke L11 on the screen at this time).
[0068] When the native device receives a drawing start notification from the web page, it displays the pre-drawn stroke L11, and then draws and displays the first stroke L12 based on subsequently received touch data, such as... Figure 4 The provided illustration shows the effect of drawing a first handwriting. At this time, the user can observe the pre-drawn handwriting L11 and the first handwriting L12 on the screen. The pre-drawn handwriting L11 and the first handwriting L12 form a continuous writing handwriting.
[0069] Upon detecting a pen lift event, the webpage will draw a second handwriting L21 based on the recorded touch data, such as... Figure 5 The provided schematic diagram shows a first handwriting and a second handwriting. At this time, the orthographic projections of the second handwriting L21 and the first handwriting on the screen coincide. Since the first handwriting is on top of the second handwriting L21, the user can only observe the first handwriting.
[0070] After completing the drawing of the second stroke L21, the native client can be notified to delete the first stroke, such as... Figure 6 As shown in the provided schematic diagram of a second handwriting display, the user observes the second handwriting L21 on the screen. Since the orthographic projection of the second handwriting L21 and the first handwriting on the screen coincides, the process of switching from displaying the second handwriting to displaying the second handwriting L21 is imperceptible to the user. This can improve the writing response speed of the web-based electronic whiteboard while ensuring the writing display effect.
[0071] As described above, by intercepting touch events on the whiteboard writing interface through a web view control, continuously acquiring touch data corresponding to the touch events, and sending the touch data sequentially to the native client and the web client through the web view control, the native client receives a drawing start notification from the web client via the communication bridge when it confirms that the touch point of the pen-drop event is on the canvas of the whiteboard writing interface. The native client then draws and displays the first stroke based on the touch data. When the web client receives the pen-lifting event, it displays the second stroke drawn by the web client based on the touch data and sends a drawing end notification to the native client to delete the first stroke. The touch data does not need to go through the web view control, page layer, and writing logic sequentially to render the stroke. Instead, it utilizes the efficient rendering capabilities of the native client to accelerate the stroke display and switches to the stroke display on the web client when the user lifts the pen. This can effectively improve the writing response speed of the web electronic whiteboard and optimize the user experience while ensuring the writing display effect of the web electronic whiteboard. Meanwhile, by pre-drawing handwriting off-screen based on touch data on the native device, and then displaying the pre-drawn handwriting when a drawing start notification is received from the web page, and drawing the first handwriting based on subsequently received touch data on the native device, the situation of incomplete handwriting drawing caused by discarding earlier received touch data due to uncertainty about whether the touch point is on the canvas can be reduced, thus optimizing the handwriting display effect.
[0072] This application also provides a web-based electronic whiteboard writing device. Figure 7 This is a schematic diagram of the structure of a web-based electronic whiteboard writing device provided in an embodiment of this application. (Reference) Figure 7The web-based electronic whiteboard writing device includes: an input device 73, an output device 74, a memory 72, and one or more processors 71; the memory 72 is used to store one or more programs; when one or more programs are executed by one or more processors 71, the one or more processors 71 implement the web-based electronic whiteboard writing method provided in the above embodiments. The input device 73, output device 74, memory 72, and processors 71 can be connected via a bus or other means. Figure 7 Taking the example of a connection between China and Israel via a bus.
[0073] The memory 72, as a computing device-readable storage medium, can be used to store software programs, computer-executable programs, and modules, such as the program instructions / modules corresponding to the webpage electronic whiteboard writing method provided in any embodiment of this application. The memory 72 may primarily include a program storage area and a data storage area. The program storage area may store the operating system and at least one application program required for a function; the data storage area may store data created based on the use of the device. Furthermore, the memory 72 may include high-speed random access memory and may also include non-volatile memory, such as at least one disk storage device, flash memory device, or other non-volatile solid-state storage device. In some instances, the memory 72 may further include memory remotely located relative to the processor 71, and these remote memories can be connected to the device via a network. Examples of such networks include, but are not limited to, the Internet, corporate intranets, local area networks, mobile communication networks, and combinations thereof.
[0074] Input device 73 can be used to receive input digital or character information, and to generate key signal inputs related to user settings and function control of the device. Output device 74 may include display devices such as a display screen.
[0075] The processor 71 executes various functional applications and data processing of the device by running software programs, instructions and modules stored in the memory 72, thereby realizing the above-mentioned web page electronic whiteboard writing method.
[0076] The web-based electronic whiteboard writing device and computer provided above can be used to execute the web-based electronic whiteboard writing method provided in any of the above embodiments, and have corresponding functions and beneficial effects.
[0077] This application embodiment also provides a storage medium for storing computer-executable instructions. When executed by a computer processor, the computer-executable instructions are used to execute the web-based electronic whiteboard writing method provided in the above embodiment. The web-based electronic whiteboard writing method includes: displaying the whiteboard writing interface of the web-based electronic whiteboard software; intercepting touch events on the whiteboard writing interface through a web view control, the touch events including pen-down events, movement events, and pen-up events; continuously acquiring touch data corresponding to touch events, and sending the touch data sequentially to the native end of the operating system and the web end running the web-based electronic whiteboard software through the web view control; when the native end receives a drawing start notification sent by the web end through a communication bridge, drawing and displaying a first stroke based on the touch data through the native end, wherein the web end generates a drawing start notification when it confirms that the touch point of the pen-down event is on the canvas of the whiteboard writing interface during the movement event; when the web end receives a pen-up event, displaying a second stroke drawn by the web end based on the touch data, and sending a drawing end notification to the native end; and deleting the first stroke when the native end receives the drawing end notification.
[0078] Storage medium – any type of memory device or storage device. The term “storage medium” is intended to include: mounting media, such as CD-ROMs, floppy disks, or magnetic tape devices; computer system memory or random access memory, such as DRAM, DDR RAM, SRAM, EDO RAM, Rambus RAM, etc.; non-volatile memory, such as flash memory, magnetic media (e.g., hard disks or optical storage); registers or other similar types of memory elements, etc. Storage media may also include other types of memory or combinations thereof. Furthermore, storage media may reside in a first computer system in which a program is executed, or may reside in a different second computer system connected to the first computer system via a network (such as the Internet). The second computer system can provide program instructions to the first computer for execution. The term “storage medium” can include two or more storage media that may reside in different locations (e.g., in different computer systems connected via a network). Storage media may store program instructions (e.g., specifically implemented as a computer program) executable by one or more processors.
[0079] Of course, the computer-executable instructions provided in the embodiments of this application are not limited to the web page electronic whiteboard writing method provided above, but can also perform related operations in the web page electronic whiteboard writing method provided in any embodiment of this application.
[0080] The web-based electronic whiteboard writing device and storage medium provided in the above embodiments can execute the web-based electronic whiteboard writing method provided in any embodiment of this application. For technical details not described in detail in the above embodiments, please refer to the web-based electronic whiteboard writing method provided in any embodiment of this application.
[0081] The above description is merely a preferred embodiment and the technical principles employed in this application. This application is not limited to the specific embodiments provided herein, and various obvious changes, readjustments, and substitutions that can be made by those skilled in the art will not depart from the scope of protection of this application. Therefore, although this application has been described in detail through the above embodiments, this application is not limited to the above embodiments, and may include many other equivalent embodiments without departing from the concept of this application, the scope of which is determined by the scope of the claims.
Claims
1. A web page electronic whiteboard writing method, characterized by, The method comprises: displaying a whiteboard writing interface of a webpage electronic whiteboard software, intercepting a touch event on the whiteboard writing interface through a webpage view control, the touch event comprising a pen-down event, a movement event and a pen-up event; continuously obtaining touch data corresponding to the touch event, and sequentially sending the touch data to a native side of an operating system and a webpage side running the webpage electronic whiteboard software through the webpage view control; in a case where the native side receives a drawing start notification sent by the webpage side through a communication bridge, drawing and displaying first handwriting according to the touch data through the native side, wherein the webpage side generates the drawing start notification when confirming that a touch point of the pen-down event is on a canvas of the whiteboard writing interface during the movement event; in a case where the webpage side receives the pen-up event, displaying second handwriting drawn by the webpage side based on the touch data, and sending a drawing end notification to the native side; in a case where the native side receives the drawing end notification, deleting the first handwriting.
2. The web page electronic whiteboard writing method of claim 1, wherein, after the step of sequentially sending the touch data to the native side of the operating system and the webpage side running the webpage electronic whiteboard software through the webpage view control, the method further comprises: drawing pre-drawing handwriting based on the touch data through the native side, and saving the pre-drawing handwriting in a memory; correspondingly, the step of, in a case where the native side receives a drawing start notification sent by the webpage side through a communication bridge, drawing and displaying first handwriting according to the touch data through the native side, comprises: in a case where the native side receives a drawing start notification sent by the webpage side through a communication bridge, displaying the pre-drawing handwriting saved in the memory, and drawing and displaying first handwriting according to the touch data through the native side.
3. The web page electronic whiteboard writing method of claim 2, wherein, after the step of drawing pre-drawing handwriting based on the touch data through the native side, and saving the pre-drawing handwriting in a memory, the method further comprises: in a case where the native side receives the pen-up event and does not receive the drawing start notification sent by the webpage side, clearing the pre-drawing handwriting.
4. The web page electronic whiteboard writing method of claim 1, wherein, after the step of sequentially sending the touch data to the native side of the operating system and the webpage side running the webpage electronic whiteboard software through the webpage view control, the method further comprises: recording the touch data through the webpage side; correspondingly, before the step of displaying second handwriting drawn by the webpage side based on the touch data, the method further comprises: drawing second handwriting based on the recorded touch data through the webpage side.
5. The web page electronic whiteboard writing method of claim 1, wherein, after the step of sequentially sending the touch data to the native side of the operating system and the webpage side running the webpage electronic whiteboard software through the webpage view control, the method further comprises: drawing second handwriting based on the touch data through the webpage side, wherein a rendering layer of the first handwriting is higher than a rendering layer of the second handwriting.
6. The web page electronic whiteboard writing method of claim 5, wherein, after the step of deleting the first handwriting, the method further comprises: hiding the rendering layer of the native side.
7. The web page electronic whiteboard writing method of claim 1, wherein, after the step of drawing and displaying first handwriting according to the touch data through the native side, the method further comprises: The touch data is continuously received through the native end, and the first handwriting is updated according to the latest received touch data and the last received touch data.
8. The web page electronic whiteboard writing method of claim 1, wherein, After the whiteboard writing interface of the webpage electronic whiteboard software is displayed, the method further includes: The handwriting configuration is obtained through the webpage end, and the handwriting configuration is synchronized to the native end through the communication bridge. Correspondingly, the first handwriting is drawn and displayed according to the touch data through the native end, including: The first handwriting is drawn and displayed according to the touch data through the native end according to the handwriting configuration.
9. A web page electronic whiteboard writing apparatus, characterized by comprising: Including: A memory and one or more processors; The memory is configured to store one or more programs; When the one or more programs are executed by the one or more processors, the one or more processors implement the webpage electronic whiteboard writing method according to any one of claims 1-8.
10. A storage medium storing computer-executable instructions, wherein: The computer executable instructions, when executed by a computer processor, are configured to perform the webpage electronic whiteboard writing method according to any one of claims 1-8.