Data processing method, electronic device, and storage medium

Abstract

The embodiment of the application provides a data processing method, an electronic device and a storage medium, and relates to the technical field of data processing. The data processing method is applied to the electronic device, and the method comprises the following steps: displaying a first page; in response to a first operation, displaying a first window on the first page, wherein the first window is used for receiving an input operation, and the first window is also used for displaying first data obtained based on the input operation; in response to a second operation, switching the first page to a second page, wherein the first window is displayed on the second page; in the case that the first window is displayed on the second page, in response to a save operation on the first window, displaying a first window icon of the first window on the second page. The interaction space with the user can be expanded in the form of expanding the canvas. Before the first window is not bound to a certain page, the first window can be kept displayed in front of the user, so that the user can operate the first window conveniently.

Description

Technical Field

[0001] This application relates to the field of terminal technology, specifically to a data processing method, an electronic device, and a storage medium. Background Technology

[0002] In scenarios such as meetings or classrooms, users can use a stylus to add new content to a target document. However, due to the limited length of the target document, the space available for input is often insufficient. For example, when users use a stylus to annotate exercises, because the text layout of the exercises is fixed, users can only add content within a limited area of ​​the exercises to avoid obscuring the original text. Summary of the Invention

[0003] This application provides a data processing method, an electronic device, and a storage medium that can expand the interactive space with the user by extending the canvas, solving the problem of limited writing space due to the length limitation of the target file. Before the first window is bound to a page, it can remain displayed in front of the user, facilitating user operation of the first window.

[0004] A first aspect provides a data processing method applied to an electronic device, the method comprising: displaying a first page; in response to a first operation, displaying a first window on the first page, wherein the first window is configured to receive an input operation and further configured to display first data obtained based on the input operation; in response to a second operation, switching the first page to a second page, wherein the first window is displayed on the second page; and, when the first window is displayed on the second page, in response to a save operation on the first window, displaying a first window icon of the first window on the second page.

[0005] In this embodiment, the interaction space with the user is expanded by extending the canvas. Specifically, when the electronic device displays a first page, a first window is displayed on the first page in response to a first operation. By expanding the canvas with the first window, the user can input, such as writing, within the first window, thereby expanding the interaction space with the user. The first window provides an additional writing hotspot, thereby expanding the writing space and solving the problem of cramped writing space due to the length limitation of the target document. When the electronic device responds to a second operation, it switches from the first page to the second page, and the first window is displayed on the second page. Before the first window is bound to a page, it can remain displayed in front of the user for convenient operation. When the first window is displayed on the second page, in response to a save operation on the first window, the first window is bound to the second page, and the first window icon is displayed on the second page. Subsequently, when the second page is displayed, the user can operate on the first window icon on the second page to open the first window. By displaying the first window icon on the second page, the user is informed that the first window is bound to the second page, making it easier for the user to determine the location of the expanded first window and quickly find it.

[0006] In one possible implementation, the method further includes: displaying a first window on a second page in response to a third operation on the first window icon; receiving an input operation through the first window; displaying first data obtained based on the input operation through the first window in response to receiving the input operation in the first window; switching the second page to a third page in response to a fourth operation, wherein the first window is displayed on the third page; and, if the first window is displayed on the third page, displaying the first window icon on the second page in response to a save operation on the first window.

[0007] In this embodiment, since the first window is already associated with the second page when it is first saved, the saved first window is opened for input operations and page switching is performed. When the first window is saved on another page, it is still associated with the second page, thus establishing a strong association between the first window and the second page.

[0008] In one possible implementation, the method further includes: displaying the first window on a second page in response to a third operation on the first window icon; switching the second page to a third page in response to a fourth operation, wherein the first window is displayed on the third page; and, if the first window is displayed on the third page, displaying the first window icon on the second page in response to a save operation on the first window.

[0009] In this embodiment, since the first window is already associated with the second page when it is first saved, the saved first window is opened and the page is switched. When the first window is saved on another page, the first window is still associated with the second page, thus establishing a strong association between the first window and the second page.

[0010] In one possible implementation, the first window includes a first writing area for receiving input operations and for displaying first data obtained based on the input operations. The method further includes: when the first window is displayed, in response to a fifth operation on the first window, displaying the first data slid along a first direction through the first writing area; if the first data slid along the first direction cannot be displayed in the first writing area, in response to a sixth operation on the first window, displaying magnified first data through the first writing area; and after displaying the magnified first data through the first writing area, in response to a fifth operation on the first window, displaying the magnified first data slid along the first direction through the first writing area.

[0011] In this embodiment, the content displayed in the first window can be scrolled to view more information or expand the writing space. When it is impossible to scroll the content displayed in the first window, a zoom-in operation can be used to expand the writing space, allowing the user to continue scrolling the content displayed in the first window.

[0012] In one possible implementation, the first window includes a first writing area for receiving input operations and for displaying first data obtained based on the input operations. The method further includes: when the first window is displayed, in response to a fifth operation on the first window, displaying the first data sliding along a first direction through the first writing area; if the first data sliding along the first direction cannot be displayed in the first writing area, receiving a seventh operation on the first window; in response to the seventh operation, reducing the display size of the first writing area; and after reducing the display size of the first writing area, in response to the fifth operation on the first window, displaying the first data sliding along the first direction through the first writing area.

[0013] In this embodiment, the content displayed in the first window can be scrolled. When it is impossible to scroll the content displayed in the first window, the content can be scrolled again by shrinking the first writing area.

[0014] In one possible implementation, displaying a first window on a first page in response to a first operation includes: displaying a first window in a preset area of ​​the screen in response to the first operation, wherein the first window is located on the first page; switching the first page to a second page in response to a second operation includes: switching the first page to a second page in response to the second operation and displaying a first window in a preset area in response to the second operation, wherein the first window is located on the second page.

[0015] In this embodiment of the application, by displaying the first window in a preset area of ​​the screen, it can be ensured that the first window is displayed in front of the user, making it convenient for the user to operate the first window.

[0016] In one possible implementation, the method further includes: displaying the first window in full-screen or non-full-screen mode when the electronic device is in a first state; and displaying the first window in drawer mode when the electronic device is in a second state.

[0017] In this embodiment, different display modes are provided for the first window based on the device status, so as to display the first window according to the specific application scenario and user needs, thereby improving the user experience.

[0018] In one possible implementation, in response to a save operation on the first window, the method further includes: in response to a save operation on the first window, saving a window file of the first window, wherein the window file includes a bitmap file of the first data and a first image, the first image including an image obtained based on the displayed first data.

[0019] In this embodiment of the application, when saving the first window, the point file of the first data and the first image are saved, so that different magnification logic can be implemented based on different display modes of the first window.

[0020] In one possible implementation, the method further includes: when the first window is displayed in full-screen or non-full-screen mode, in response to a sixth operation on the first window, enlarging the first data according to the point file; when the first window is displayed in drawer mode, in response to the sixth operation on the first window, enlarging the first image and displaying the enlarged first image through a first writing area.

[0021] In this embodiment, different magnification logics are implemented based on the display mode of the first window. When the first window is displayed in full-screen mode or non-full-screen mode, the first data is magnified according to the point file. When the first window is displayed in drawer mode, the first image is magnified, thereby realizing the magnification of the first data.

[0022] In one possible implementation, the first window includes a first writing area for receiving input operations and for displaying first data obtained based on the input operations. The electronic device includes a first canvas engine, a second canvas engine, and a page data management module. Displaying the first window further includes: rendering a draft canvas of the first window using the first canvas engine and displaying the rendered draft canvas in the first window. Displaying the first page includes: rendering the first page using the second canvas engine and displaying the rendered first page. In response to a save operation on the first window, the device further includes: saving a window file of the first window, wherein the window file includes a bitmap file of the first data and a first image, the first image including an image obtained based on the first data displayed in the first writing area. The page data management module saves a first association between the unique identifier of the first window and the window file. In response to a fourth operation, switching the second page to the third page includes: in response to the fourth operation, switching the second page to the third page and saving the page data of the second page. The page data management module saves a second association between the unique identifier of the first window and the second page.

[0023] In this embodiment, a new engine (first canvas engine) is built on top of the second canvas engine where the page exists to render the draft canvas. Then, in response to a save operation on the first window, the window file of the first window is directly saved. This allows the draft canvas to be bound to a specific page of the notes when a save operation on the first window is performed. When switching pages, the page data of the switched page is saved, achieving separate storage of the window file and page data.

[0024] In one possible implementation, the electronic device includes a page data management module, which, in response to receiving an input operation in the first window, further includes: obtaining a new window file based on the input operation in response to receiving an input operation in the first window; and, if the first window is displayed on a third page, further includes: saving the new window file in response to a save operation on the first window; and saving a third association between the unique identifier of the first window and the new window file through the page data management module.

[0025] In this embodiment, when responding to a save operation on the first window, the association relationship (second association relationship) between the unique identifier of the first window and the associated page is saved, so that the newly created draft paper can be bound to the associated page. When the window file of the first window is subsequently updated, the association relationship between the unique identifier of the first window and the new window file is saved to obtain a third association relationship. The new window file can still be bound to the associated page that has been saved to disk based on the second association relationship and the third association relationship.

[0026] In one possible implementation, the first window includes a draft paper canvas and a canvas data layer. The fifth operation on the first window includes: sliding the draft paper canvas along a first direction according to the relationship between the first writing area and the draft paper canvas; and if the draft paper canvas cannot be slid along the first direction in response to the fifth operation on the first window, sliding the canvas data layer along the first direction according to the relationship between the draft paper canvas and the canvas data layer.

[0027] In one possible implementation, the first window includes a draft canvas and a canvas data layer, and receiving a sixth operation on the first window includes: determining a zoom center based on the sixth operation; and adjusting the relationship between the draft canvas and the canvas data layer based on the zoom center.

[0028] In a second aspect, an electronic device is provided, comprising a memory, a processor, a pose sensor, an audio acquisition device, and a display screen. The pose sensor is used to acquire pose data of the electronic device, the audio acquisition device is used to acquire audio data of the electronic device, the display screen is used to display an interface, the memory is used to store instructions, and the processor is used to execute the instructions stored in the memory, causing the electronic device to perform any of the above data processing methods.

[0029] Thirdly, a computer-readable storage medium is provided, which stores instructions that, when executed on a computer, cause the computer to perform any of the data processing methods described above.

[0030] The technical effects brought about by the second and third aspects of the embodiments of this application can be found in the relevant description of the data processing method of the first aspect above, and will not be repeated here. Attached Figure Description

[0031] Figure 1 This is a schematic diagram of the hardware structure of the electronic device provided in the embodiments of this application.

[0032] Figure 2 This is a schematic diagram of the software structure of the electronic device provided in the embodiments of this application.

[0033] Figures 3A to 3R This is a schematic diagram of an application scenario provided in an embodiment of this application.

[0034] Figures 4A to 4C This is a schematic diagram of another application scenario provided in the embodiments of this application.

[0035] Figures 5A to 5D This is a schematic diagram of another application scenario provided by the embodiments of this application.

[0036] Figures 6A to 6B This is a schematic diagram of another application scenario provided by the embodiments of this application.

[0037] Figure 7 This is a schematic flowchart of the sliding scaling control method provided in the embodiments of this application.

[0038] Figures 8A to 8F This is a schematic diagram illustrating the relationship between a draft paper window, a draft paper writing area, a draft paper canvas, and a canvas data layer, as provided in an embodiment of this application.

[0039] Figures 9A to 9B This is a schematic diagram illustrating the relationship between another draft paper window, draft paper writing area, draft paper canvas, and canvas data layer provided in this application embodiment.

[0040] Figure 10 This is a schematic flowchart of a data processing method provided in an embodiment of this application.

[0041] Figure 11 This is a schematic diagram of another data processing method provided in an embodiment of this application.

[0042] Figure 12 This is a schematic diagram of another data processing method provided in an embodiment of this application.

[0043] Figure 13 This is a schematic diagram of another data processing method provided in an embodiment of this application.

[0044] Figure 14 This is a schematic diagram of another data processing method provided in an embodiment of this application.

[0045] Figure 15 This is a schematic diagram of the software architecture of another electronic device provided in an embodiment of this application. Detailed Implementation

[0046] The technical solutions in the embodiments of this application will be clearly and thoroughly described below with reference to the accompanying drawings. In the description of the embodiments of this application, unless otherwise stated, " / " means "or," for example, A / B can mean A or B; the word "and / or" in the text is merely a description of the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A existing alone, A and B existing simultaneously, and B existing alone.

[0047] Hereinafter, the terms "first" and "second" are used for descriptive purposes only and should not be construed as implying or suggesting relative importance or implicitly indicating the number of indicated technical features. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of that feature, and in the description of the embodiments of this application, unless otherwise stated, "multiple" means two or more.

[0048] In this application, the reference to "embodiment" means that a specific feature, structure, or characteristic described in connection with an embodiment may be included in at least one embodiment of this application. The appearance of this phrase in various places throughout the specification does not necessarily refer to the same embodiment, nor is it a mutually exclusive, independent, or alternative embodiment. It will be explicitly and implicitly understood by those skilled in the art that the embodiments described in this application can be combined with other embodiments.

[0049] In this document, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one" does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes that element.

[0050] In this application, "and / or" describes the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A existing alone, A and B existing simultaneously, or B existing alone, where A and B can be singular or plural. The terms "first," "second," "third," "fourth," etc. (if present) in the specification, claims, and drawings of this application are used to distinguish similar objects, not to describe a specific order or sequence.

[0051] With the trend towards paperless offices, using a stylus pen allows for faster annotation in scenarios such as meetings and classrooms. However, due to the limited space of the target document, annotations often result in writing too crampedly.

[0052] In view of this, embodiments of this application provide a data processing method that expands the interaction space with the user by extending the canvas. Specifically, when the electronic device displays a first page, a first window is displayed on the first page in response to a first operation. By expanding the canvas with the first window, the user can input, such as writing, within the first window, thereby expanding the interaction space with the user. The first window provides an additional writing hotspot, thereby expanding the writing space and solving the problem of cramped writing space due to the length limitation of the target document. When the electronic device responds to a second operation, it switches from the first page to the second page, and the first window is displayed on the second page. Before the first window is bound to a page, it can remain displayed in front of the user for convenient operation. When the first window is displayed on the second page, in response to a save operation on the first window, the first window is bound to the second page, and the first window icon is displayed on the second page. Subsequently, when the second page is displayed, the user can operate on the first window icon on the second page to open the first window. By displaying the first window icon on the second page, the user is informed that the first window is bound to the second page, making it easier for the user to determine the location of the expanded first window and quickly find it.

[0053] The data processing method provided in this application can be executed by an electronic device. This electronic device can be a terminal device, also referred to as a terminal, user equipment (UE), mobile station (MS), mobile terminal (MT), etc. The electronic device can be a mobile phone, tablet, laptop, smart TV, personal digital assistant (PDA), wearable device, augmented reality (AR) / virtual reality (VR) device, media player, or other portable mobile device. In some embodiments, the electronic device can also be an in-vehicle device, an Internet of Things (IoT) device, or other device capable of interaction via a display screen.

[0054] The electronic device provided in this application embodiment has a draft paper function. The draft paper function can expand the canvas, extending it beyond the existing main canvas to provide users with more interactive space, allowing them to input data in specific areas beyond the traditional display screen. The draft paper function can expand the canvas by adding a writing hotspot. The interactive space provided by the draft paper function can be a writing hotspot. When the main canvas space is insufficient, the writing hotspot provides additional space for users to write or draw. The writing hotspot can recognize handwritten input and convert it into text or preserve it as a graphic. Visual or tactile feedback can be provided when the user inputs within the writing hotspot. The writing hotspot can dynamically expand according to the user's needs, providing more space. The writing hotspot allows users to input handwriting on the screen using a stylus or touch pen. In some embodiments, the writing hotspot allows users to input handwriting on the screen using body parts such as fingers. Users can write directly within the writing hotspot without additional tools or buttons. In some embodiments, users can also write within the writing hotspot using additional tools or buttons.

[0055] In some embodiments, the interactive space provided by the draft paper function can be a text input space. For example, by providing a text box, users can enter text.

[0056] The draft paper function provided in this application embodiment can be integrated into a first application to provide functions such as handwriting input, drawing, or annotation. The type of the first application into which the draft paper function is integrated may include, but is not limited to: note-taking applications, Portable Document Format (PDF), electronic documents, drawing and design software, educational software, e-book readers, meeting and collaboration tools, mathematics and science software, handwriting input methods, children's educational games, medical record systems, legal document editing, architecture and engineering applications, music notation software, diary and log applications, language learning applications, data visualization tools, project management software, and interactive whiteboards.

[0057] The draft paper feature is integrated into the note-taking app. For example, users can use the draft paper feature to record notes, sketches, and ideas within the note-taking app.

[0058] The draft paper feature is integrated into PDF files or electronic documents. For example, users can use the draft paper feature to annotate directly on PDF files or electronic documents.

[0059] The draft paper feature is integrated into drawing and design software. For example, users can use the draft paper feature to create new drawing spaces for artistic creation and design.

[0060] The draft paper function is integrated into educational software. For example, users can use the draft paper function to write and draw during the teaching and learning process.

[0061] The draft paper function is integrated into the e-book reader. For example, users can use the draft paper function to make marks and annotations directly on the e-book.

[0062] The draft paper feature is integrated into meeting and collaboration tools. For example, users can use the draft paper feature to brainstorm and collaborate in real time during meetings.

[0063] The scratch paper feature is integrated into math and science software. For example, users can use the scratch paper feature to write complex formulas and diagrams.

[0064] The draft paper function is integrated into the handwriting input method. For example, users can use the draft paper function to convert handwriting into text input.

[0065] The scratch paper feature is integrated into children's educational games. For example, users can use the scratch paper feature to combine games and learning to teach letters, numbers, and basic concepts.

[0066] The draft paper feature is integrated into the medical record system. For example, doctors or medical professionals can use the draft paper feature to take handwritten notes.

[0067] The draft paper feature is integrated into legal document editing. For example, lawyers or legal professionals can use the draft paper feature to edit and annotate legal documents.

[0068] The draft paper feature is integrated into architecture and engineering applications. For example, users can use the draft paper feature to design sketches and make annotations on engineering drawings.

[0069] The draft paper function is integrated into music notation software. For example, composers or musicians can use the draft paper function to create and edit scores.

[0070] The draft paper feature is integrated into diary and journal apps. For example, individuals can use the draft paper feature to record daily activities and feelings.

[0071] The draft paper feature is integrated into language learning applications. For example, learners can use the draft paper feature to practice writing characters in different languages.

[0072] The draft paper feature is integrated into data visualization tools. For example, users can use the draft paper feature to add annotations and explanations to charts and graphs.

[0073] The draft paper feature is integrated into project management software. For example, team members can use the draft paper feature to discuss and plan project tasks.

[0074] The draft paper feature is integrated into the interactive whiteboard. For example, the draft paper feature can be used for real-time communication and discussion in online teaching or remote meetings.

[0075] The electronic device provided in this application embodiment can have a note-taking function, for example, the electronic device has installed a note-taking application (hereinafter referred to as the note-taking application). The note-taking application can provide various note types, including but not limited to: handwritten notes, text notes, image notes, audio notes, etc. The draft paper function is integrated into the note-taking application, and users can use the draft paper function to expand new interactive spaces on the pages of handwritten notes, text notes, image notes, etc.

[0076] The term "user interface (UI)" used in the following embodiments of this application refers to the medium interface through which an application or operating system interacts and exchanges information with the user. It realizes the conversion between the internal form of information and the form that the user can accept. The user interface is source code written in a specific computer language such as Java or Extensible Markup Language (XML). The interface source code is parsed and rendered on the electronic device, ultimately presenting content that the user can recognize. A common form of user interface is the graphical user interface (GUI), which refers to a user interface related to computer operation displayed graphically. It can be visible interface elements such as text, icons, buttons, menus, tabs, text boxes, dialog boxes, status bars, navigation bars, and widgets displayed on the screen of an electronic device.

[0077] Please see Figure 1 Taking the electronic device 100 provided in this application embodiment as a mobile phone as an example, the hardware structure of the electronic device 100 provided in this application embodiment is described exemplarily.

[0078] Electronic device 100 may include: processor 110, external memory interface 120, internal memory 121, display screen 130, camera 140, antenna 1, antenna 2, mobile communication module 150, wireless communication module 160, sensor module 170, USB interface 180, charging management module 190, power management module 191, battery 192, etc.

[0079] The sensor module 170 may include one or more of the following: pressure sensor, gyroscope sensor, barometric pressure sensor, magnetic sensor, accelerometer, distance sensor, proximity sensor, fingerprint sensor, temperature sensor, touch sensor, ambient light sensor, or bone conduction sensor, etc., which are not specifically limited in this embodiment.

[0080] Processor 110 may include one or more processing units, such as: application processor (AP), modem processor, graphics processing unit (GPU), image signal processor (ISP), controller, memory, video codec, digital signal processor (DSP), baseband processor, and / or neural network processing unit (NPU), etc. Different processing units may be independent devices or integrated into one or more processors.

[0081] The controller can be the nerve center and command center of the electronic device 100. The controller can generate operation control signals according to the instruction opcode and timing signals to complete the control of fetching and executing instructions.

[0082] The processor 110 may also include a memory for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. This memory can store instructions or data that the processor 110 has just used or that are used repeatedly. If the processor 110 needs to use the instruction or data again, it can retrieve it directly from the memory. This avoids repeated accesses, reduces the waiting time of the processor 110, and thus improves the efficiency of the system.

[0083] In some embodiments, the processor 110 may include one or more interfaces. Interfaces may include an inter-integrated circuit (I2C) interface, an inter-integrated circuit sound (I2S) interface, a pulse code modulation (PCM) interface, and / or a universal serial bus (USB) interface, etc.

[0084] The GPU is a microprocessor for image processing, connected to the display screen 130 and the application processor. The GPU performs mathematical and geometric calculations for graphics rendering. The processor 110 may include one or more GPUs that execute program instructions to generate or modify display information. During the rendering of graphics or images, the GPU performs a series of operations, including but not limited to: vertex processing, primitive processing, rasterization, and fragment processing.

[0085] The display screen 130 is used to display images, videos, etc. The display screen 130 includes a display panel. The display panel can be a Liquid Crystal Display (LCD). The display panel can also be manufactured using Organic Light-Emitting Diode (OLED), Active-Matrix Organic Light-Emitting Diode (AMOLED), Flexible Light-Emitting Diode (FLED), Quantum Dot Light-Emitting Diodes (QLED), etc. In some embodiments, the electronic device 100 may include one or N display screens 130, where N is a positive integer greater than 1.

[0086] The electronic device 100 implements its display function through a GPU, a display screen 130, and an application processor. The display screen 130 can be used for displaying... Figures 3A to 3R , Figures 4A to 4C , Figures 5A to 5D , Figures 6A to 6B The user interface shown.

[0087] In this embodiment, the display screen 130 can receive and display handwriting input. A touch sensor can be used to receive click operations and collect the trajectory of handwriting input. A pressure sensor can detect the pressure applied to the display screen 130, thereby using the magnitude of the pressure to determine whether it is handwriting input; for example, higher pressure indicates handwriting input. For instance, assuming a first pressure value is detected, it is considered that the screen is being wiped, and a second pressure value is detected, it is considered that handwriting input is being performed, where the first pressure value is less than the second pressure value.

[0088] Electronic device 100 can perform shooting functions through ISP, camera 140, video codec, GPU, display 130 and application processor.

[0089] The ISP (Image Signal Processor) is used to process data fed back from the camera 140. For example, when taking a picture, the shutter is opened, and light is transmitted through the lens to the camera's photosensitive element. The light signal is converted into an electrical signal, and the camera's photosensitive element transmits the electrical signal to the ISP for processing, transforming it into an image visible to the naked eye. The ISP can also perform algorithmic optimization of image noise, brightness, and skin tone. The ISP can also optimize parameters such as exposure and color temperature of the shooting scene. In some embodiments, the ISP can be set within the camera 140.

[0090] Camera 140 is used to capture still images or videos. An object is projected onto a photosensitive element by generating an optical image through the lens. The photosensitive element can be a charge-coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor. The photosensitive element converts the light signal into an electrical signal, which is then passed to an ISP for conversion into a digital image signal. The ISP outputs the digital image signal to a DSP for processing. The DSP converts the digital image signal into image signals in standard RGB, YUV, or other formats. In some embodiments, the electronic device 100 may include one or N cameras 140, where N is a positive integer greater than 1.

[0091] Digital signal processors (DSPs) are used to process digital signals. Besides digital image signals, they can also process other digital signals. For example, when electronic device 100 selects a frequency, the DSP can perform Fourier transforms on the frequency energy.

[0092] Video codecs are used to compress or decompress digital video. Electronic device 100 may support one or more video codecs. Thus, electronic device 100 can play or record videos in various encoding formats, such as Moving Picture Experts Group (MPEG) 1, MPEG2, MPEG3, MPEG4, etc.

[0093] An NPU (Neural Processing Unit) is a computational processor for neural networks (NNs). By borrowing the structure of biological neural networks, such as the transmission patterns between neurons in the human brain, it can rapidly process input information and continuously learn on its own. NPUs enable intelligent cognitive applications in electronic devices, such as image recognition, facial recognition, speech recognition, and text understanding.

[0094] The external storage interface 120 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 100. The external memory card communicates with the processor 110 through the external storage interface 120 to perform data storage functions. For example, music, video, and other files can be saved on the external memory card.

[0095] Internal memory 121 can be used to store executable program code, which includes instructions. Processor 110 executes various functional applications and data processing of electronic device 100 by running the instructions stored in internal memory 121. Internal memory 121 may include a program storage area and a data storage area.

[0096] USB port 180 is a USB standard compliant interface, specifically a Mini USB port, Micro USB port, USB Type-C port, etc. USB port 180 can be used to connect a charger to charge electronic device 100, and can also be used for data transfer between electronic device 100 and peripheral devices. It can also be used to connect headphones for audio playback. This interface can also be used to connect other electronic devices, such as AR devices.

[0097] The charging management module 190 receives charging input from a charger. The charger can be a wireless charger or a wired charger. In some wired charging embodiments, the charging management module 190 receives charging input from the wired charger via a USB interface 180. In some wireless charging embodiments, the charging management module 190 receives wireless charging input via the wireless charging coil of the electronic device 100. While charging the battery 192, the charging management module 190 can also supply power to the electronic device via the power management module 191.

[0098] The power management module 191 connects the battery 192, the charging management module 190, and the processor 110. The power management module 191 receives input from the battery 192 and / or the charging management module 190, providing power to the processor 110, internal memory 121, display screen 130, camera 140, and wireless communication module 160, etc. The power management module 191 can also monitor parameters such as battery capacity, battery cycle count, and battery health status (leakage current, impedance). In some other embodiments, the power management module 191 may also be located within the processor 110. In other embodiments, the power management module 191 and the charging management module 190 may be located in the same device.

[0099] In some embodiments, the electronic device 100 may further include an audio module, a speaker, a receiver, a microphone, a headphone jack, etc., to implement audio functions.

[0100] It should be understood that, Figure 1 The electronic device 100 shown is merely an example, and the electronic device 100 may have more than Figure 1 The more or fewer components shown can be combined into two or more components, or they can have different component configurations. The various components shown in the figure can be implemented in hardware, software, or a combination of hardware and software, including one or more signal processing and / or application-specific integrated circuits.

[0101] The software system of electronic device 100 can adopt a layered architecture, event-driven architecture, microkernel architecture, microservice architecture, or cloud architecture.

[0102] Please see Figure 2 Taking the layered architecture of the Android system as an example, the software structure of the electronic device 100 is illustrated.

[0103] A layered architecture divides software into several layers, each with a clear role and function. Layers communicate with each other through software interfaces. In some embodiments, the Android system is divided into four layers, from top to bottom: application layer, application framework layer, Android runtime and system libraries, hardware abstraction layer, kernel layer, and hardware layer.

[0104] The application layer can include a series of application packages. An application package may include a first application that integrates draft paper functionality. Details regarding the first application can be found above and will not be repeated here.

[0105] The application framework layer provides application programming interfaces (APIs) and a programming framework for applications in the application layer. The application framework layer includes some predefined functions.

[0106] The application framework layer may include a window manager service (WMS). Optionally, it may also include an activity manager service (AMS), a content provider, a view system, a resource manager, a notification manager, etc.

[0107] The window management service is used to manage window applications. It can obtain the screen size, determine if a status bar is present, lock the screen, allow screen touch, drag the screen, and capture the screen, among other things.

[0108] In this embodiment, the Window Management Service (WMS) acts as the manager of the View. When the screen of a particular application needs to be displayed on the display, the application can issue a window task to the WMS. The WMS can receive the window task from the application layer. The window task can include attribute information of the display interface. After the WMS manages the window and obtains the attribute information of various aspects of the display interface, the WMS can pass this attribute information of the Window to the SurfaceFlinger. The attribute information can include the orientation, position, size, etc. of the window. Here, the window is a container for the View, and each window contains a display interface Surface.

[0109] Content providers are used to store and retrieve data, making that data accessible to applications. This data can include videos, images, audio, made and received phone calls, browsing history and bookmarks, phone books, and more.

[0110] The Activity Manager is responsible for managing the launch, state, lifecycle, and other activity-related aspects of an application. An activity is an application component that provides a user interface (UI) through which users interact with the electronic device to complete a task.

[0111] A view system includes visual controls, such as controls for displaying text and controls for displaying images. View systems can be used to build applications. A display interface can consist of one or more views. For example, a display interface including a text notification icon could include views for displaying text and views for displaying images.

[0112] The file explorer provides applications with various resources, such as localized strings, icons, images, layout files, video files, and more.

[0113] The notification manager allows applications to display notifications in the status bar. These notifications can be used to deliver informational messages and can disappear automatically after a short pause, requiring no user interaction. For example, the notification manager can be used to notify users of completed downloads or message alerts. The notification manager can also display notifications as icons or scrolling text in the top status bar, such as notifications from background applications, or as dialog boxes on the screen. Examples include displaying text messages in the status bar, emitting sounds, vibrating electronic devices, and flashing indicator lights.

[0114] The Android runtime consists of the core libraries and the virtual machine. The Android runtime is responsible for scheduling and managing the Android system. The core libraries comprise two parts: one part contains the functionalities that Java calls, and the other part consists of the Android core libraries.

[0115] The application layer and application framework layer run in a virtual machine. The virtual machine executes the Java files of the application layer and application framework layer as binary files. The virtual machine is used to perform functions such as object lifecycle management, stack management, thread management, security and exception management, and garbage collection.

[0116] The system library can include multiple functional modules. Examples include: a surface manager, media libraries, a graphics rendering module (hwui), and a surface mixer (SurfaceFlinger). The graphics rendering module is responsible for drawing and rendering images before they are displayed on the interface. This module can include a drawing management module and a rendering module. The drawing management module can draw graphics on the canvas, meaning it can draw graphics using the CPU; the rendering module can render the drawn images using the GPU.

[0117] The graphics rendering module can call 3D graphics processing libraries and 2D graphics engines. The 3D graphics processing library can be the Open Graphics Library (OpenGL), used for image rendering. The 2D graphics engine can be SGL. A 2D graphics engine is a drawing engine for 2D graphics. OpenGL refers to a professional graphics programming interface that defines a cross-programming language, cross-platform programming interface specification. It is used for 3D graphics (and also 2D), and is a powerful and easy-to-use low-level graphics library. OpenGL ES is a subset of the OpenGL 3D graphics API, designed for embedded devices such as mobile phones and game consoles.

[0118] SurfaceFlinger is a system service responsible for processing and compositing upper-layer data and interacting with the display. SurfaceFlinger can composite images based on information provided by the WMS and submit the composited information to the screen's buffer, waiting for the display to map it onto the screen. SurfaceFlinger uses a Hardware Composer (HWC) or the GPU to composite the display layers.

[0119] During the image drawing, rendering, and compositing processes described above, data exchange can be performed using buffers. For example, OpenGL places the completed drawing and rendering data into a buffer queue (BufferQueue), and SurfaceFlinger composites the data obtained from the BufferQueue and then puts it back into the BufferQueue.

[0120] The Surface Manager is used to manage the display subsystem and provides the blending of 2D and 3D layers for multiple applications.

[0121] The media library supports playback and recording of various common audio and video formats, as well as still image files. It supports multiple audio and video encoding formats, such as MPEG4, H.264, MP3, AAC, AMR, JPG, and PNG.

[0122] The hardware abstraction layer (HAL) includes a hardware composer (HWC). Optionally, the hardware abstraction layer may also include a graphics memory allocator (Galloc), etc.

[0123] HWC can work with SurfaceFlinger to composite the Surface onto the screen. Assuming the electronic device's screen is portrait orientation with the status bar at the top, HWC, being a hardware abstraction of the display controller system, delegates some compositing work to SurfaceFlinger to reduce the GPU load. This consumes less power than compositing solely through the GPU.

[0124] The kernel layer is the layer between the hardware layer and the software layer. The kernel layer can include display drivers, etc. Display drivers control the display to map the data synthesized in SurfaceFlinger onto the screen.

[0125] The hardware layer can include the CPU, graphics processing unit (GPU), and display screen, among other things.

[0126] GPUs are primarily used for processing graphics calculations. In this embodiment, if a device supports GPU hardware-accelerated rendering, then when an Android application calls the OpenGL interface to draw the UI, the Android application's UI is rendered using the GPU via hardware acceleration technology.

[0127] The CPU can execute task instructions for window management services, drawing management modules, and SurfaceFlinger.

[0128] The following example uses a tablet as an electronic device, with the draft paper function integrated into a note-taking application, to illustrate the application scenario of this application.

[0129] Scenario for creating and saving draft paper

[0130] like Figure 3A As shown, the electronic device 100 is a tablet computer, and the tablet computer is in landscape mode. The user interface 11 includes multiple application icons, such as a tablet manager application icon, a notes application icon 12, a browser application icon, a camera application icon, a music application icon, a settings application icon, a gallery application icon, and an email application icon. The application icons can be used to trigger the electronic device 100 to launch the corresponding application.

[0131] The icon 12 for the note-taking app is shown. Note-taking apps are a type of note-taking application. Users can use note-taking apps to record text, images, and other information.

[0132] Electronic device 100 receives user input to note-taking application icon 12 and, in response to input to note-taking application icon 12, displays as shown below. Figure 3B The note-taking interface shown in Figure 13.

[0133] like Figure 3B As shown, the note-taking interface 13 includes one or more notes. Examples include all notes, text notes, handwritten notes, and saved notes. The user clicks on a handwritten note to select it. Based on the selection of the handwritten note, the note-taking interface 13 also displays a handwritten note icon 14.

[0134] The note-taking interface 13 may also include a new note control. When the user clicks the new note control, a new note is created.

[0135] Electronic device 100 receives a user's operation on the handwritten note icon 14, and in response to the operation on the handwritten note icon 14, displays as shown below. Figure 3C The handwritten note interface shown in Figure 15.

[0136] like Figure 3C As shown, the handwriting note interface 15 includes a note writing area 16 and a first toolbar 17. The handwriting note interface 15 may also include a menu bar and other user interaction elements.

[0137] The note-writing area 16 is the area on the page where the user inputs information (such as writing or drawing). The note-writing area 16 receives handwriting input, allowing users to write or draw on the screen using a stylus or finger. The note-writing area 16 can also be used to insert text boxes, images, or other multimedia content. The note-writing area 16 can display the entered data. The note-writing area 16 can occupy all or part of the page space.

[0138] A page is the basic unit for user interaction (such as writing and viewing content) in the first application. In a note-taking application, a page is similar to a single sheet of paper in a traditional notebook, serving as the basic unit for users to write and view content. Each page is an independent unit. A note can include multiple pages. For example, a handwritten note consists of multiple pages, which together form a complete note document in the handwritten note interface 15. Similarly, pages in PDFs and documents are the basic units that make up these documents.

[0139] The handwriting note interface 15 provides ways to access and manage pages, such as adding new pages, deleting pages, and page navigation. Users can manipulate the handwriting note interface 15 to switch between different pages. The handwriting note interface 15 allows users to view one or more pages and provides page previews or thumbnails.

[0140] The first toolbar 17 provides quick access to tools and functions. The first toolbar 17 may include, but is not limited to: pen tool, eraser, color picker, brush size adjustment, and add controls 18.

[0141] Electronic device 100 receives user input to add control 18, and in response to the input to add control 18, displays as shown below. Figure 3D Add box 19 as shown.

[0142] like Figure 3D As shown, the add box 19 includes options for adding a page, adding draft paper, importing images, and importing documents. The electronic device 100 can respond to the user's operation on the add page option to add a new page to the existing notes to expand the note content. The electronic device 100 can respond to the user's operation on the import image option to import image files into the notes. The electronic device 100 can respond to the user's operation on the import document option, supporting the import of content from other document formats (such as PDF, Word, Excel, etc.).

[0143] The option to add a draft paper provides the aforementioned draft paper functionality, expanding the user's interactive space.

[0144] Electronic device 100 receives a user's operation on the "Add Scratch Paper" option and, in response to the operation, displays as shown below. Figure 3E The draft paper window 20 is shown.

[0145] The draft paper window 20 is used to receive user input. The draft paper window 20 is also used to display the initial data obtained based on the user input.

[0146] The user's input operations may include, but are not limited to: writing, drawing, inserting text boxes, images, or other multimedia content. The user can input these operations onto the draft paper window 20 using a stylus, pen, or finger. This application does not impose specific limitations on the specific form or method of the input operation.

[0147] like Figure 3E As shown, the draft paper window 20 includes a draft writing area 21 and a second toolbar 22.

[0148] The draft writing area 21 is used to receive user input. The draft writing area 21 is also used to display the first data obtained based on the user input.

[0149] The second toolbar 22 provides quick access to tools and functions. The second toolbar 22 may include a close control, a clear control, a share control, and a save control 23. The electronic device 100 can close the draft paper window 20 in response to the user's operation of the close control. The electronic device 100 can clear the corresponding data displayed in the draft paper window 20 in response to the user's operation of the clear control. The electronic device 100 can share the data in the draft paper window 20 according to a preset method in response to the user's operation of the share control.

[0150] like Figure 3F As shown, the user handwrites "12" in the draft writing area 21, and the draft writing area 21 displays the handwritten input "12". The first data includes the handwritten input "12". The user can use a stylus or touch pen to handwrite "12" in the draft writing area 21, or the user can use their finger to handwrite "12" in the draft writing area 21, and this application does not specifically limit this.

[0151] After the electronic device 100 displays the draft paper window 20, the user wants to switch pages on the handwriting note interface 15. During the page switching process, the screen displays the draft paper window 20, and the draft paper window 20 is on the page. Figure 3G As shown, when the user slides the page upwards, the electronic device 100 displays the page number 1 / 4 and slides it upwards. The handwriting note interface 15 displays the page number 1 / 4, the page break, and another page. The draft paper window 20 displays the page number 1 / 4, the page break, and the other page.

[0152] When a user wants to switch to page 3 / 4, the user switches pages in the handwriting note interface 15 from page 1 / 4 to page 2 / 4, and then from page 2 / 4 to page 3 / 4. For example... Figure 3H As shown, the electronic device 100 displays a page numbered 3 / 4 and a draft paper window 20, which is located on the page numbered 3 / 4.

[0153] During the process of switching from page 1 / 4 to page 2 / 4, and then from page 2 / 4 to page 3 / 4, the draft paper window 20 is located on the page displayed by the electronic device 100. Specifically, during the page switching process, if the electronic device displays page 1 / 4, the draft paper window 20 is located on page 1 / 4; if the electronic device displays both page 1 / 4 and page 2 / 4, the draft paper window 20 is located on both page 1 / 4 and page 2 / 4; if the electronic device displays both page 2 / 4 and page 3 / 4, the draft paper window 20 is located on both page 2 / 4 and page 3 / 4; and if the electronic device displays page 3 / 4, the draft paper window 20 is located on page 3 / 4.

[0154] like Figure 3H As shown, when the draft paper window 20 is on a page with page number 3 / 4, the electronic device 100 receives the user's operation on the save control 23 of the draft paper window 20, and in response to the operation on the save control 23, displays the save box 24 as shown in 2I.

[0155] The save box 24 displays the text "Saving" to inform the user that the draft paper window 20 is being saved. For example, the handwritten input "12" is displayed in the save draft paper window 20.

[0156] Electronic device 100 display Figure 3I Then, it displays Figure 3J .like Figure 3J As shown, the electronic device 100 displays the draft paper window icon 24 of the draft paper window 20, and the draft paper window icon 24 is located on the page with page number 3 / 4.

[0157] In some embodiments, the electronic device 100 receives a user's operation on the save control 23 of the draft paper window 20, and in response to the operation on the save control 23, displays as shown in the image. Figure 3J The draft paper window icon 24 is shown.

[0158] When the electronic device saves the draft paper window 20 for the first time (that is, when the draft paper window 20 has not been saved before), the draft paper window 20 is located on page 3 / 4. Therefore, the electronic device 100 binds the draft paper window 20 to the page 3 / 4, and thus the draft paper window icon 24 is located on the page 3 / 4.

[0159] In this embodiment, the draft paper window icon 24 is located on the page associated with (bound to) the draft paper window 20 when it is saved. The page associated with the draft paper window 20 may include the current page of the note-taking application (such as the page with focus), the page with the largest display size, or the page that is ranked first in the list.

[0160] like Figure 3H As shown, when the draft paper window 20 is displayed on page 3 / 4, the electronic device 100 saves the draft paper window 20 in response to the operation of the save control 23. Since the note-taking application is displayed on page 3 / 4 when the draft paper window 20 is saved, and page 3 / 4 is the current page, that is, the page with focus, page 3 / 4 is the page associated with the draft paper window 20, and the draft paper window icon 24 is displayed on the page associated with the draft paper window 20.

[0161] In some embodiments, the electronic device 100 displays a draft paper window 20 and two pages. When saving the draft paper window 20, neither of the two pages displayed by the electronic device 100 has focus, so the page with the largest display size among the two displayed pages is determined as the page associated with saving the draft paper window 20.

[0162] In some embodiments, the electronic device 100 displays a draft paper window 20 and two pages. When saving the draft paper window 20, neither of the two pages displayed by the electronic device 100 has focus, and the two displayed pages have the same display size. In this case, the page that appears first in the order is used as the page associated with saving the draft paper window 20. For example, if the page numbers of the two pages are 2 / 4 and 3 / 4, then the page with page number 2 / 4 is used as the page associated with saving the draft paper window 20.

[0163] In some embodiments, the draft paper window icon 24 can be located anywhere on the page at page 3 / 4. For example, in response to an operation on the save control 23, the electronic device 100 saves the draft paper window 20 and displays the draft paper window icon 24 of the draft paper window 20 in the center area (or upper right corner area, etc.) of the page at page 3 / 4. The user can drag the draft paper window icon 24 from the center area of ​​the page to the upper left corner area of ​​the page.

[0164] In this embodiment, the display style of the draft paper window icon 24 is related to the first data obtained by the draft paper window 20 based on the input operation. For example, if the first data is a handwritten input of "12", then the display style of the draft paper window icon 24 can be a screenshot of the handwritten input of "12", etc.

[0165] like Figure 3K As shown, the electronic device 100 receives user operations on the draft paper window icon 24 (such as clicking, double-clicking, or long-pressing), and in response to the operation on the draft paper window icon 24, displays as shown. Figure 3L The draft paper window 20 is shown.

[0166] Users Figure 3L If you handwrite "1" in the draft writing area 21 shown, then... Figure 3M As shown, the draft writing area 21 displays the handwritten input "1 2 1". When the user... Figure 3L After the user inputs "1" in the draft writing area 21, the user can switch pages by manipulating the handwritten note interface 15.

[0167] like Figure 3M As shown, when the user is Figure 3L After the user inputs "1" by handwriting in the draft writing area 21, they can slide down the page to switch to page 1 / 4. The electronic device 100 responds to the user's page switch, as follows: Figure 3N As shown, the page number 1 / 4 and the draft paper window 20 are displayed.

[0168] like Figure 3N As shown, when the draft paper window 20 is located on a page with page number 1 / 4, the electronic device 100 receives the user's operation on the save control 23 of the draft paper window 20, and in response to the operation on the save control 23, displays as shown. Figure 3O The save box 24 is shown.

[0169] Electronic device 100 display Figure 3O Then, it displays Figure 3P .like Figure 3P As shown, the electronic device 100 displays a page numbered 1 / 4, and the draft paper window icon 24 is not displayed on this page.

[0170] In some embodiments, such as Figure 3N As shown, when the draft paper window 20 is located on a page with page number 1 / 4, the electronic device 100 receives the user's operation on the save control 23 of the draft paper window 20, and in response to the operation on the save control 23, displays as shown. Figure 3P .

[0171] In display Figure 3P Then, the user manipulates the handwritten note interface 15 to switch pages.

[0172] like Figure 3P As shown, the user swipes up the page to switch to page 3 / 4. Figure 3Q As shown, the electronic device 100 responds to the user switching pages by displaying page number 3 / 4, and the draft paper window icon 24 is located on page number 3 / 4.

[0173] In this embodiment, the draft paper window 20 is bound to the page number 3 / 4, and the draft paper window icon 24 is located on the page number 3 / 4. Even if the draft paper window 20 is re-edited, such as by entering new data, modifying existing data, or deleting existing data, the draft paper window 20 remains bound to the page number 3 / 4, and the draft paper window icon 24 remains on the page number 3 / 4. Alternatively, if the draft paper window 20 is re-edited and the page is switched, the draft paper window 20 remains bound to the page number 3 / 4, and the draft paper window icon 24 remains on the page number 3 / 4. Alternatively, in response to an operation on the draft paper window icon 24, the draft paper window 20 is opened, but without re-editing the draft paper window 20 or switching pages, the draft paper window 20 remains bound to the page number 3 / 4, and the draft paper window icon 24 remains on the page number 3 / 4.

[0174] like Figure 3Q As shown, the electronic device 100 receives the user's operation on the draft paper window icon 24, and in response to the operation on the draft paper window icon 24, displays as shown. Figure 3R The draft paper window 20 is shown. Figure 3R The draft paper window 20 shown displays the handwritten input "1 2 1".

[0175] The user's actions on the note application icon 12, handwritten note icon 14, add control 18, add page option, add draft paper option, import image option, import document option, close control, clear control, share control, save control 23, draft paper window icon 24, etc., can be click, double-click, long press, etc., and this application does not make specific limitations on this.

[0176] It is understood that the above only illustrates the creation of a draft paper window; two or more draft paper windows can be created on a single page. One or more draft paper windows can also be created on different pages; this application does not specifically limit this.

[0177] Interactive scenarios in the draft writing area

[0178] Users can refer to the above scenario for creating and saving draft paper to create a draft paper and handwrite "1 2 1". For example... Figure 3RAs shown, the electronic device 100 displays a draft paper window 20, which displays the user's handwritten input data "121".

[0179] To move the data displayed in the draft paper writing area 21 to the left, the user can slide the draft paper window 20 to the left. For example, in... Figure 3R Based on this, the user slides the draft paper window 20 to the left, and the electronic device 100 responds to the user's leftward sliding operation on the draft paper window 20, such as... Figure 4A As shown, the draft writing area 21 is displayed to the left.

[0180] Figure 4A and Figure 3R The difference is that, Figure 4A The handwritten input data displayed in the draft writing area 21 is relative to Figure 3R The handwritten input data "1 2 1" displayed in the draft writing area 21 has been moved to the left. Figure 4A The draft writing area 21 displays the handwritten input data "2 1" after moving to the left.

[0181] To scroll the data displayed in the draft paper writing area 21 upwards, the user can scroll upwards on the draft paper window 20. For example, in... Figure 3R Based on this, the user slides the draft paper window 20 upwards. The electronic device 100 responds to the user's upward slide operation on the draft paper window 20, such as... Figure 4B As shown, the draft writing area 21 is displayed facing upwards.

[0182] Figure 4B and Figure 3R The difference is that, Figure 4B The handwritten input data displayed in the draft writing area 21 is relative to Figure 3R The handwritten input data "1 2 1" displayed in the draft writing area 21 moves upward as a whole. Figure 4B The draft writing area 21 displays the handwritten input data "1 2" after moving upwards, with the handwritten data "1".

[0183] To zoom in on the data displayed in the draft paper writing area 21, the user can zoom in on the draft paper window 20. For example, in... Figure 3R Based on this, the user zooms in on the draft paper window 20, and the electronic device 100 responds to the user's zooming in operation on the draft paper window 20, such as... Figure 4C As shown, the draft writing area 21 is enlarged as a whole.

[0184] Figure 4C and Figure 3RThe difference is that, Figure 4C The handwritten input data displayed in the draft writing area 21 is relative to Figure 3R The handwritten input data "1 2 1" displayed in the draft writing area 21 is enlarged as a whole. Figure 4C The draft writing area 21 shows the enlarged portion of the handwritten input data "1 2 1".

[0185] In some embodiments, the user can also move the data displayed in the draft paper writing area 21 to the right or down by sliding the draft paper window 20 to the right or down. After zooming in on the data displayed in the draft paper writing area 21, the user can also zoom out on the zoomed-out data by zooming out on the draft paper window 20.

[0186] The user can perform a leftward swipe operation on the draft paper window 20 by using two fingers to swipe left, double-clicking, or manipulating controls. Similarly, the user can perform an upward swipe operation on the draft paper window 20 by using two fingers to swipe up, double-clicking, or manipulating controls. Finally, the user can zoom in or out on the draft paper window 20 by using two fingers to zoom in or double-clicking, or manipulating controls.

[0187] This application does not specifically limit the operations of swiping left, swiping up, swiping right, swiping down, zooming in, or zooming out.

[0188] Interactive scenario 1 of the draft paper window

[0189] A user wants to expand the draft paper window 20 to the left. The user can perform this leftward expansion operation on the draft paper window 20. For example, in... Figure 3R Based on this, the user expands the draft paper window 20 to the left. In response to this operation, the electronic device 100 expands the draft paper window 20 to the left, as follows: Figure 5A As shown.

[0190] Figure 5A and Figure 3R The difference is that, Figure 5A Draft paper window 20 relative to Figure 3R The draft paper window 20 expands to the left. Figure 5A Draft paper window 20 relative to Figure 3R The display size of the draft paper window 20 has been increased. Figure 5A The draft writing area 21 is relative to Figure 3R The display size of the draft writing area 21 has been increased.

[0191] If a user wants to adjust the display position of the draft paper window 20, the user can move the draft paper window 20. For example, in... Figure 3RBased on this, the user moves the draft paper window 20 to the left. In response to this operation, the electronic device 100 moves the draft paper window 20 to the left, such as... Figure 5B As shown.

[0192] Figure 5B and Figure 3R The difference is that, Figure 5B The position displayed in the draft paper window 20 is determined by... Figure 3R The left area moves to the middle area.

[0193] In some embodiments, the user can also expand the draft paper window 20 to the right, down, or up. The user can perform rightward expansion, upward expansion, and upward expansion operations on the draft paper window 20. Leftward expansion, rightward expansion, upward expansion, and upward expansion operations can be two-finger upward swiping, double-clicking, or operation controls, etc., and this application does not specifically limit them.

[0194] When the user receives input from the handwritten note interface 15, the display mode will switch to, for example... Figure 5C The drawer mode is shown. When in drawer mode, the display sizes of both the draft paper window 20 and the handwritten note interface 15 change.

[0195] Figure 5C and Figure 3R The difference is that, Figure 3R The display mode is draggable. Figure 5C The display mode is drawer mode. In draggable mode, the draft paper window 20 can be displayed in full-screen or non-full-screen mode. In drawer mode, the draft paper window 20 is displayed in drawer mode. When the draft paper window 20 is displayed in drawer mode, only a portion of the draft paper window 20 is displayed. Users can fully display or hide the draft paper window 20 by sliding or clicking buttons.

[0196] Figure 5C and Figure 3R The difference is that, Figure 5C The draft paper window 20 contains handwritten data "1 2". Figure 3R Handwritten data "1 2 1" in window 20 of the draft paper.

[0197] The user slides the draft paper window 20 upwards to expand it upwards, as shown below. Figure 5D As shown.

[0198] like Figure 5D As shown, the draft paper window 20 expands upwards, and the draft paper area 21 fully displays the user's handwritten input data "1 2 1".

[0199] Users can switch display modes by double-clicking or using touch controls; this application does not impose specific limitations on this.

[0200] In the draft paper window 20 Figure 5C Transform into Figure 5D , or by Figure 5D Transform into Figure 5C At this time, users can operate using methods such as two-finger operation, and this application does not make specific limitations on this.

[0201] The following example, using a foldable mobile phone as an example, demonstrates another application scenario of the embodiments of this application.

[0202] Interactive scenario 2 of the draft paper window

[0203] like Figure 6A As shown, when the electronic device 100 is in an unfolded state, the electronic device 100 displays the draft paper window 20 in either full-screen or non-full-screen mode in response to being in the unfolded state. This allows for... Figure 6A In the draft paper window 20, perform the operations in the first interactive scenario of the draft paper window, such as... Figure 5A As shown, the draft paper window 20 can be expanded to cover a larger area of ​​the note-writing area 16. Figure 5B As shown, you can drag and drop the draft paper window 20 onto the handwritten note interface 15 to display it in the corresponding position.

[0204] The user folds the electronic device 100 degrees, such as Figure 6B As shown, when the electronic device 100 is in a folded state, the electronic device 100 displays the draft paper window 20 in a drawer-style display manner in response to being in the folded state.

[0205] It is understandable that the above Figures 3A to 3R , Figures 4A to 4C , Figures 5A to 5D , Figures 6A to 6B The user interface shown does not constitute a limitation on the corresponding functional interfaces provided in the embodiments of this application, particularly not on the buttons and layout style of the interface. In other embodiments, the interface provided in this application may also be in other forms, and may have more or fewer functional controls. The responsive functional controls may be deployed on different interfaces, and this application does not impose any restrictions on this.

[0206] In this embodiment of the application, when an electronic device invokes the draft paper function, the electronic device may include a draft paper window, a draft paper writing area, a draft paper canvas, and a canvas data layer.

[0207] The draft paper window acts as a container, including a draft paper writing area where users can write or draw. This writing area occupies a certain amount of layout space within the draft paper window and can be all or part of it. The draft paper writing area is the visible portion of the draft paper window, excluding parts obscured by toolbars, menus, or other interface elements. The draft paper window provides functions directly related to the writing area, such as toolbars and menu options.

[0208] The draft paper writing area includes the draft paper canvas. The draft paper writing area can serve as a container for the draft paper canvas, which can occupy all or part of the draft paper writing area and is used to display specific graphics, text, and images.

[0209] A draft paper canvas is a surface used for presenting and drawing graphic content; it can be physical or virtual. A draft paper canvas typically refers to an area where one can write, draw, or display images.

[0210] In some embodiments, the draft paper canvas can be expanded, allowing users to scroll through different sections of the draft paper canvas, thereby expanding the visible area of ​​the draft paper window (the draft writing area).

[0211] The size of the writing area on the draft paper affects the display on the draft paper canvas. The size of the writing area on the draft paper determines how much content can be displayed on the draft paper canvas at the same time.

[0212] The canvas data layer contains all the data in the draft canvas. It includes all drawn content, such as graphics, text, and images. The canvas data layer represents the data stored in the database within the draft canvas. By understanding the relationship between the draft canvas and the canvas data layer, it's possible to determine which data in the database needs to be drawn onto the draft canvas and then draw that data onto the draft canvas.

[0213] In the embodiments of this application, as in the interactive scenario of the draft writing area described above, the electronic device can adjust the display of the draft writing area. For example, the display of the draft writing area can be moved along a certain direction, the display of the draft writing area can be enlarged, or the display of the draft writing area can be enlarged and then reduced.

[0214] In this embodiment, moving the display of the draft writing area in a certain direction involves two layers of movement logic. First, it is determined whether the draft paper canvas can be moved. If the draft paper canvas can be moved, it is moved first. If the draft paper canvas cannot be moved, it is determined whether the canvas data layer can be moved. If the canvas data layer can be moved, it is moved.

[0215] In this embodiment, the electronic device receives a sliding operation, which indicates the sliding direction and sliding distance. The sliding direction indicates the direction of sliding. The sliding distance indicates the distance slid along the sliding direction. Figure 4A As shown, the sliding direction is to the left. Figure 4B As shown, the sliding direction is upward.

[0216] In some embodiments, the swiping direction can be the direction in which a finger or stylus moves on the screen.

[0217] In this embodiment, the electronic device responds to a sliding operation by determining the sliding direction and sliding distance, and calculating the difference between the draft writing area and the draft paper / canvas in the sliding direction, i.e., calculating the maximum distance the draft paper / canvas can move relative to the draft writing area along the sliding direction. When the difference between the draft writing area and the draft paper / canvas in the sliding direction (i.e., the maximum distance the draft paper / canvas can move relative to the draft writing area along the sliding direction) is greater than 0, the draft paper / canvas moves along the sliding direction. When the difference between the draft writing area and the draft paper / canvas in the sliding direction is equal to 0, the difference between the draft paper / canvas and the canvas data layer in the sliding direction is calculated, i.e., calculating the distance the canvas data layer can move relative to the draft paper / canvas along the sliding direction. When the difference between the draft paper / canvas and the canvas data layer in the sliding direction (i.e., the maximum distance the canvas data layer can move relative to the draft paper / canvas along the sliding direction) is greater than 0, the canvas data layer moves along the sliding direction. When the difference between the draft paper / canvas and the canvas data layer in the sliding direction is equal to 0, the sliding stops.

[0218] Please refer to the following: Figure 7 When a user swipes the screen with two fingers, the application window detects the touch event, which indicates the swipe direction and distance. The electronic device calculates the difference between the draft writing area and the draft canvas along the swipe direction, moving the draft canvas within that difference. If further movement of the draft canvas is impossible, the difference between the draft canvas and the canvas data layer along the swipe direction is calculated, moving the canvas data layer within that difference.

[0219] Specifically, in step 1, the electronic device calculates the maximum distance (first distance) that the draft paper canvas can move relative to the draft writing area along the sliding direction. If the first distance that the draft paper canvas can move relative to the draft writing area along the sliding direction is greater than 0 and greater than or equal to the sliding distance, then step 2 is executed. If the first distance that the draft paper canvas can move relative to the draft writing area along the sliding direction is greater than 0 and less than the sliding distance, then steps 3 to 8 are executed. If the first distance that the draft paper canvas can move relative to the draft writing area along the sliding direction is equal to 0, then step 9 is executed.

[0220] Step 2: Move the draft paper canvas along the sliding direction by a sliding distance.

[0221] Step 3: Move the draft paper canvas a first distance along the sliding direction.

[0222] Step 4: Calculate the difference between the sliding distance and the first distance to obtain the second distance.

[0223] Step 5: Calculate the maximum distance (third distance) that the canvas data layer can move relative to the draft canvas along the sliding direction.

[0224] If the third distance is greater than 0 and less than the second distance, proceed to step 6. If the third distance is equal to 0, proceed to step 7. If the third distance is greater than or equal to the second distance, proceed to step 8.

[0225] Step 6: Move the canvas data layer a third distance along the sliding direction, and stop moving the canvas data layer along the general sliding direction.

[0226] Based on the fact that the third distance is greater than 0 and less than the second distance, the distance that the draft canvas moves plus the distance that the canvas data layer moves is less than the sliding distance.

[0227] Step 7: Do not move the canvas data layer along the sliding direction.

[0228] Given that the third distance is equal to 0 and the second distance is greater than 0, the distance the draft paper canvas moves is still less than the second distance before reaching the sliding distance.

[0229] Step 8: Move the canvas data layer a second distance along the sliding direction.

[0230] Step 9: Calculate the maximum distance (third distance) that the canvas data layer can move relative to the draft canvas along the sliding direction.

[0231] If the third distance is greater than 0 and greater than or equal to the sliding distance, proceed to step 10. If the third distance is equal to 0, proceed to step 11. If the third distance is greater than 0 and less than the sliding distance, proceed to step 12.

[0232] Step 10: Move the canvas data layer a sliding distance along the sliding direction.

[0233] Step 11: Do not move the canvas data layer along the sliding direction.

[0234] Step 12: Move the canvas data layer a third distance along the sliding direction, and stop moving the canvas data layer along the general sliding direction.

[0235] For example, taking a sliding direction to the left and a sliding distance of 5cm as an example, the electronic device calculates the maximum distance the draft paper canvas moves to the left relative to the draft writing area, i.e., the first distance.

[0236] If the first distance is greater than 0 and greater than or equal to the sliding distance of 5cm, then move the draft paper canvas 5cm to the left.

[0237] When the first distance is greater than 0 and less than the sliding distance of 5cm (e.g., the first distance is 3cm), move the draft canvas 3cm to the left. Then calculate the difference between the sliding distance and the first distance to obtain the second distance: 5cm - 3cm = 2cm. Next, calculate the maximum distance the canvas data layer can move relative to the draft canvas along the sliding direction, which is the third distance. When the third distance is greater than 0 and less than the second distance of 2cm (e.g., the third distance is 1cm), move the canvas data layer 1cm to the left and stop moving it to the left. When the third distance is equal to 0, do not move the canvas data layer to the left. When the third distance is greater than or equal to the second distance of 2cm, move the canvas data layer to the left by the second distance of 2cm.

[0238] When the first distance is 0, calculate the maximum distance the canvas data layer can move relative to the draft canvas along the sliding direction, i.e., the third distance. When the third distance is greater than 0 and greater than or equal to the sliding distance, move the canvas data layer to the left by the sliding distance of 2cm. When the third distance is 0, do not move the canvas data layer to the left. When the third distance is greater than 0 and less than the sliding distance, such as when the third distance is 1cm, move the canvas data layer to the left by 1cm and stop moving the canvas data layer to the left.

[0239] In this embodiment, the content is already drawn on the draft canvas. The only difference is the selection of the draft writing area (view) to display which part of the drawn content. Therefore, when sliding the draft canvas, the data content of the draft canvas remains unchanged; only the relationship between the view and the draft canvas changes. This makes sliding the draft canvas fast, requiring no data redrawing. In contrast, the canvas data layer is a virtual layer. If the canvas data layer were to be slid, all the content on the draft canvas would need to be redrawn based on the relationship between the canvas data layer and the draft canvas. Therefore, sliding the draft canvas reduces the amount of data processing.

[0240] In this embodiment, the draft writing area can be regarded as a first coordinate system for describing the display range of the draft paper, the draft paper canvas can be regarded as a second coordinate system for describing the drawing area, and the canvas data layer can be regarded as a third coordinate system for describing the data stored in the database.

[0241] The following example uses a first application with a draft paper function as a note-taking application, and the note-taking application is displayed in a draggable mode, to illustrate the relationship between the draft paper window, the draft paper writing area, the draft paper canvas, and the canvas data layer.

[0242] In draggable mode, the electronic device 100 responds to the operation of adding draft paper option by displaying, as shown below. Figure 3E The draft paper window 20 is shown. On the electronic device 100, it is displayed as follows: Figure 3E When the draft paper window is shown, the relationship between the draft paper window, the draft paper writing area, the draft paper canvas, and the canvas data layer is as follows: Figure 8A As shown.

[0243] like Figure 8A As shown, the note-taking application's window includes a note-writing area. The draft paper window is located in a preset area of ​​the screen, such as the left side of the screen. The display size of the draft writing area is smaller than the display size of the draft paper window. The size of the draft paper canvas is larger than the size of the draft writing area. The size of the canvas data layer is larger than the size of the draft paper canvas.

[0244] In this embodiment, the display size of the draft writing area can be expanded, and the expanded display size of the draft writing area can be the same as or similar to the display size of the note writing area. For example... Figure 3E As shown, when the handwritten note interface is displayed in full screen (15), the display size of the note writing area is at its maximum.

[0245] In this embodiment, the size of the draft paper canvas can be the same as or similar to the maximum display size of the note-writing area. When the size of the note-writing area changes, the size of the draft paper canvas will also change. For example, when an electronic device switches from landscape to portrait mode, the draft paper canvas will change accordingly.

[0246] In this embodiment, the width of the canvas data layer is the same as the width of the draft canvas, and the height of the canvas data layer is N times the height of the draft canvas, where N is an integer greater than 1, such as 16 or 20. The size of the enlarged canvas data layer can be M times the size of the draft canvas, where M can be an integer greater than or equal to 1, such as 1, 2, 3, 4, or 5.

[0247] In response to the operation of adding the draft paper option, the electronic device 100 displays as follows: Figure 3E When the draft paper window 20 is shown, the origins of the first, second, and third coordinate systems coincide. The origin can be the upper left corner of the coordinate system.

[0248] like Figure 8A As shown, the top left corners of the first, second, and third coordinate systems coincide. When sliding upwards, there is still a distance between the bottom edge of the draft canvas and the bottom edge of the draft writing area, allowing the draft canvas to slide upwards. When sliding to the left, there is still a distance between the right edge of the draft canvas and the right edge of the draft writing area, allowing the draft canvas to slide to the left.

[0249] Users can swipe left to view different parts of the draft paper canvas, such as... Figure 8B As shown, the electronic device responds to the user's left swipe gesture, swiping the draft canvas to the left. Figure 4A As shown, when the electronic device 100 slides the draft paper canvas to the left, the draft writing area displays the data "2 1" that has been slid to the left.

[0250] Users can swipe up to view different parts of the draft paper canvas. Figure 8A Based on this, the electronic device receives the user's upward swipe gesture and responds by swiping upwards on the draft canvas, as if... Figure 8C As shown.

[0251] like Figure 8C As shown, when the lower edge of the draft paper canvas coincides with the lower edge of the draft writing area, the size of the draft paper canvas is the same as or similar to the size of the note writing area.

[0252] like Figure 8C As shown, when the bottom edge of the draft canvas coincides with the bottom edge of the draft writing area, the draft canvas can only slide upwards by 0 distance relative to the draft writing area, meaning it cannot continue to slide upwards. If there is a distance between the bottom edge of the draft canvas and the bottom edge of the canvas data layer along the upward sliding direction, then the canvas data layer can be slid upwards.

[0253] exist Figure 8C Based on this, the electronic device receives the user's upward swipe gesture and responds by swiping up the canvas data layer, such as... Figure 8D As shown.

[0254] exist Figure 8A Based on this, the electronic device receives the user's zoom-in operation and, in response, zooms in on the canvas data layer, such as... Figure 8E As shown. At this time, there is a distance between the draft canvas and the canvas data layer in the up, down, left, and right sliding directions. Therefore, when the draft canvas cannot be moved relative to the draft writing area, the canvas data layer can be moved in the up, down, left, and right directions.

[0255] In some embodiments, the electronic device, in response to a zoom-in operation, zooms in on the canvas data layer from the center outwards, using the center of the canvas data layer as the zoom center.

[0256] In some embodiments, the zoom operation indicates a zoom center, and the electronic device, in response to the zoom operation, zooms in on the canvas data layer according to the zoom center indicated by the zoom operation.

[0257] In some embodiments, the zoom operation indicates a scaling ratio, and the electronic device, in response to the zoom operation, zooms in on the canvas data layer according to the scaling ratio indicated by the zoom operation.

[0258] In some embodiments, the zoom operation indicates a zoom center and a zoom ratio, and the electronic device, in response to the zoom operation, zooms in on the canvas data layer according to the zoom center and zoom ratio indicated by the zoom operation.

[0259] exist Figure 8A Based on this, the electronic device receives the user's operation to adjust the display size of the draft writing area, and reduces the display size of the draft writing area, such as... Figure 8F As shown. Figure 8F As shown, if there is a distance between the right edge of the draft canvas and the right edge of the draft writing area, you can slide the draft canvas to the left. If there is a distance between the top edge of the draft canvas and the top edge of the draft writing area, you can slide the draft canvas down. If there is a distance between the bottom edge of the draft canvas and the bottom edge of the draft writing area, you can slide the draft canvas up.

[0260] The following example uses a first application with a draft paper function as a note-taking application, and the note-taking application is displayed in drawer mode, to illustrate the relationship between the draft paper window, the draft paper writing area, the draft paper canvas, and the canvas data layer.

[0261] In drawer mode, the electronic device 100 responds to the operation of adding draft paper option by displaying, as shown below. Figure 5C or Figure 6B The draft paper window 20 is shown. On the electronic device 100, it is displayed as follows: Figure 5C or Figure 6B When the draft paper window is shown, the relationship between the draft paper window, the draft paper writing area, the draft paper canvas, and the canvas data layer is as follows: Figure 9A As shown.

[0262] like Figure 9A As shown, the note-taking application window includes a note-writing area. The draft paper window is located in a preset area of ​​the screen, such as the lower area. The display size of the draft writing area is smaller than the display size of the draft paper window. The size of the draft paper canvas is larger than the size of the draft writing area. The size of the canvas data layer is larger than the size of the draft paper canvas.

[0263] like Figure 9A As shown, when the display mode is drawer mode, the draft paper window can be expanded upwards. Figure 9B As shown, after expanding the draft paper window upwards, the display size of the draft writing area expands accordingly. The expanded display size of the draft writing area can be the same as or similar to the display size of the note writing area. The size of the draft paper canvas can be the same as or similar to the maximum display size of the note writing area.

[0264] In response to the operation of adding the draft paper option, the electronic device 100 displays as follows: Figure 5Cor Figure 6B When the draft paper window 20 is shown, the origins of the first, second, and third coordinate systems coincide. The origin can be the upper left corner of the coordinate system.

[0265] like Figure 9A As shown, the top left corners of the first, second, and third coordinate systems coincide. If there is still a distance between the bottom edge of the draft canvas and the bottom edge of the draft writing area while sliding upwards, the draft canvas can be slid upwards. If there is still a distance between the bottom edge of the draft canvas and the bottom edge of the canvas data layer while sliding upwards, the canvas data layer can be slid upwards.

[0266] like Figure 9A As shown, in drawer mode, the draft paper window, draft paper canvas, and canvas data layer can all be moved upwards, and the canvas data layer can also be enlarged. After enlarging the canvas data layer, it can be moved as needed.

[0267] like Figure 9B As shown, the electronic device 100 receives an operation from the user dragging the draft paper window upwards, expanding the draft paper window upwards. The draft writing area overlaps the note writing area. The draft writing area is similar in size to or the same as the size of the draft paper canvas. Figure 9B As shown, at this point, the bottom edge of the draft canvas coincides with the bottom edge of the draft writing area, and the draft canvas can only slide upwards relative to the draft writing area by 0 distance, meaning it cannot continue to slide upwards. If there is a distance between the bottom edge of the draft canvas and the bottom edge of the canvas data layer along the upward sliding direction, then the canvas data layer can be slid upwards.

[0268] It is understandable that the above Figures 8A to 8F , Figures 9A to 9B The dimensions of the application window, note writing area, draft paper window, draft paper writing area, draft paper canvas, and canvas data layer shown, as well as the relationships between them, do not constitute a limitation on the embodiments of this application. The dimensions shown and the relationships between them may vary depending on the design and function of the application.

[0269] Please see Figure 10 This document provides an exemplary flowchart of a data processing method according to an embodiment of this application. This data processing method is applied to the aforementioned electronic device, which has a draft paper function.

[0270] Step S101: Display the first page.

[0271] In this embodiment, the electronic device displays a first page. The first page can be a page of a first application integrated with the electronic device's draft paper function. For example, the first page could be a page of notes in a note-taking application, a page of an electronic document, or a page of an e-book reader; this application does not specifically limit this.

[0272] It is understandable that the first page can be any page in the first application.

[0273] Step S102: In response to the first operation, a first window is displayed on the first page, wherein the first window is used to receive input operations and also to display first data obtained based on the input operations.

[0274] In this embodiment of the application, the electronic device receives a first operation and, in response to the first operation, displays a first window on a first page. The first operation is used to instruct the creation of the first window. Specifically, the first operation is used to instruct the activation of the draft paper function to create the first window.

[0275] The first step may include manipulating controls on the interface to activate the draft paper function. For example... Figure 3D As shown, the first operation may include the user's operation on the option to add draft paper, and the first window includes a draft paper window 20. The first operation may be a click, double-click, long press, two-finger swipe, etc., and this application does not specifically limit it.

[0276] In some embodiments, the first operation may also include voice input, key operation, gesture operation, etc., to activate the draft paper function.

[0277] The relevant content regarding input operations can be found above and will not be repeated here.

[0278] When the input operation is to add data, the first data obtained based on the input operation is the data to be added. For example... Figure 3F As shown, the draft paper window 20 receives user input, and the first data "1 2" entered by the user is displayed on the draft paper window 20.

[0279] When the input operation is to delete data, the first data obtained based on the input operation is the data after deletion. For example, when a user... Figure 3F The first data "1 2" is completely deleted, and the first data entered in the draft paper window 20 is blank, that is, no data is displayed on the draft paper window 20.

[0280] When the input operation is to modify data, the first data obtained based on the input operation is the modified data. For example, the user will... Figure 3FThe "2" in the first data "1 2" is deleted, and the handwritten input "3" is added. The first data entered in the draft paper window 20 is the handwritten input "1 3".

[0281] In step S103, in response to the second operation, the first page is switched to the second page, wherein the first window is displayed on the second page.

[0282] In this embodiment, the electronic device receives a second operation and, in response to the second operation, switches from a first page to a second page. The second operation is used to instruct the page switch. The second page can be a page of a first application integrated into the draft paper function of the electronic device. The second page is different from the first page.

[0283] It is understood that the second page can be any page in the first application other than the first page. For example, the first page is page 1 and the second page is page 2. Or, for another example, the first page is page 2 and the second page is page 10.

[0284] In this application embodiment, the second operation may include, but is not limited to: user operations on page navigation buttons, swiping operations, page number selection operations, clicking on page thumbnails, operations on scroll bars, and two-finger swiping. For example, as shown... Figure 3G As shown, a user can swipe two fingers across the handwriting note interface 15 to switch pages. Alternatively, a user can tap the "Previous Page" and "Next Page" navigation buttons on the handwriting note interface 15 to switch pages. Another example is when the electronic device displays a page number input box or a page number list, allowing the user to directly select a specific page to jump to. Yet another example is when the electronic device displays page thumbnails, allowing the user to tap the thumbnail to switch to the corresponding page.

[0285] For example, if the page number of the first page is 1, and the second operation is to switch to "next page", then the page number of the second page is 2. If the second operation is to enter 3 in the page number input box, then the page number of the second page is 3.

[0286] In this embodiment, from the moment the first window is displayed until it is closed or saved, the first window remains displayed on the screen and located on the page. For example, the electronic device displays the first window on a page (such as a first page) in response to an operation to add a draft paper option. During page switching by the user, the first window remains displayed on the screen and located on the page. After the page switching is complete, the first window is displayed on the new page. When the electronic device closes or saves the first window, the screen does not display the first window.

[0287] like Figure 3E As shown, draft paper window 20 is displayed on the page. Figure 3FAs shown, the draft paper window 20 receives user input, displays the first data "1 2" entered, and is displayed on the page. The electronic device responds to a second operation by switching from the first page to the second page. (As shown...) Figure 3G As shown, during the process of switching from the first page to the second page, the draft paper window 20 is displayed on the page, such as on the page number 1 / 4 and another page. Figure 3H As shown, the electronic device switches from page 1 / 4 to page 3 / 4 and displays page 3 / 4. The second page may include page 3 / 4. Draft paper window 20 is displayed on page 3 / 4.

[0288] In step S104, if the first window is displayed on the second page, in response to the save operation of the first window, the first window icon of the first window is displayed on the second page.

[0289] The save operation for the first window is used to instruct the first window to be saved. The save operation for the first window can include operations on controls to save the first window. For example... Figure 3H As shown, the save operation for the first window can include user operations on the save control 26. The save operation for the first window can be a click, double-click, long press, two-finger swipe, etc., and this application does not specifically limit these operations.

[0290] In some embodiments, the saving operation of the first window may also include voice input, key operation, gesture operation, etc., to save the first window.

[0291] In this embodiment, in response to a save operation on the first window, the electronic device determines the associated page linked to the first window and displays the first window icon on the associated page. There is only one associated page linked to the first window, ensuring that the first window is only associated with the associated page and the first window icon is only displayed on the associated page.

[0292] In this embodiment, the electronic device, in response to a save operation on the first window, associates the current page with the first window. The current page can be understood as the page the user is currently viewing or editing. The current page is the active part of the user interface, where the user can read, write, or edit. The user's focus is on the current page, and all user interaction events (such as clicking, scrolling, and typing) occur on this page. If the user is editing notes, the current page may be in an editable state, allowing the user to add or modify content. The user can switch between the current page and other pages using navigation controls. Note-taking applications typically have page indicators, such as page numbers or thumbnails, showing the current page's position within the document.

[0293] In this embodiment of the application, when the first window is displayed on the second page, the electronic device responds to the save operation of the first window, determines the associated page with the first window as the second page based on the second page as the current page, and displays the first window icon of the first window on the second page.

[0294] like Figure 3H and Figure 3J As shown, the electronic device displays a draft paper window 20 on page 3 / 4. Responding to the user's operation on the save control 26, the electronic device uses page 3 / 4 as the current page, and then... Figure 3J As shown, the draft paper window icon 24 of the draft paper window 20 is displayed on the page with page number 3 / 4. Since the draft paper window 20 is the first window, the draft paper window icon 24 is the first window icon.

[0295] In other embodiments, in response to a save operation on the first window, the electronic device displays the page with the largest display size as the associated page with the first window. When the electronic device displays two or more pages, and none of these pages are the current page or have received user focus, the page with the largest display size among the two or more pages can be used as the associated page with the first window.

[0296] In other embodiments, in response to a save operation on the first window, the electronic device designates the page with the highest page number as the associated page with the first window. When the electronic device displays two or more pages, if none of these pages are the current page, none of these pages have user focus, and the display sizes of these pages are the same, then the page with the highest page number is designated as the associated page with the first window. For example, if the electronic device displays pages 1 and 2, and neither of these pages is the current page, and the display sizes of these pages are the same, then the page with page number 1 is designated as the associated page with the first window.

[0297] In other embodiments, when the first window is displayed on the second page and the first window is not displayed, regardless of whether the first window receives an input operation, that is, regardless of whether the user inputs data into the draft writing area of ​​the first window from the moment the first window is created, the electronic device responds to the save operation of the first window, determines the associated page associated with the first window, and displays the first window icon of the first window on the associated page.

[0298] In this embodiment, the electronic device, in response to a save operation on the first window, saves relevant data of the first window, including but not limited to: window content, window layout, etc. Window content may include data edited or viewed by the user, such as first data obtained based on input operations. Window layout may include layout information such as window size, position, and whether it is maximized.

[0299] In existing technologies, the first window is bound to the page on which it is created, preventing it from being displayed on other pages. However, in this embodiment, the first window is always displayed on the screen and located on the page until the electronic device responds to a save operation, facilitating user input into the first window.

[0300] In this embodiment of the application, the electronic device displays the window icon of the first window on the associated page associated with the first window, establishes the association between the first window and the associated page, and then the first window can also be opened through the window icon when the associated page is displayed.

[0301] Please see Figure 11 The following is an exemplary schematic diagram of another data processing method provided in an embodiment of this application.

[0302] In step S201, in response to a third operation on the first window icon, the first window is displayed on the second page.

[0303] The third operation is used to instruct the opening of the first window corresponding to the first window icon. The third operation may include operations on the first window icon to open the first window. The third operation may be a click, double-click, long press, etc., and this application does not specifically limit it.

[0304] In some embodiments, the save operation of the first window may also include voice input, key operation, gesture operation, etc., to open the first window corresponding to the first window icon.

[0305] In this embodiment of the application, a first window icon is displayed on a second page, and the electronic device displays the first window on the second page in response to a third operation on the first window icon.

[0306] like Figure 3K As shown, the draft paper window icon 24 is displayed on page 3 / 4. The user clicks the draft paper window icon 24. The electronic device responds to the user's click on the draft paper window icon 24 as follows: Figure 3L As shown, a draft paper window 20 is displayed on page 3 / 4. The second page includes page 3 / 4, the first window includes draft paper window 20, the first window icon includes draft paper window icon 24, and a third operation on the first window icon may include the user clicking draft paper window icon 24.

[0307] Step S202: Receive input operations through the first window.

[0308] In the embodiments of this application, after the electronic device receives the save operation of the first window, it can receive input operations through the first window again. That is, the user can modify, delete or add data in the first window. This application does not make specific limitations on this.

[0309] Step S203: In response to receiving an input operation in the first window, the first data obtained based on the input operation is displayed in the first window.

[0310] In this embodiment of the application, the electronic device responds to receiving an input operation in the first window and displays the first data obtained based on the input operation through the first window. For example, in step S104 above, the first window displays the handwritten data "1 21". In step S202, the user deletes the handwritten data "1 2 1" in the first window, so the handwritten data "1 2 1" will no longer be displayed in the first window.

[0311] In step S204, in response to the fourth operation, the second page is switched to the third page, wherein the first window is displayed on the third page.

[0312] In this embodiment, the electronic device receives a fourth operation and, in response to the fourth operation, switches from the second page to the third page. The fourth operation is used to instruct the page switching. The third page can be a page of a first application integrated into the draft paper function of the electronic device. The third page is different from the second page.

[0313] It's understandable that the third page can be any page in the first application other than the second page. The third page can be the first page.

[0314] The details of the fourth operation can be found in the second operation. The fourth operation may be the same as or different from the second operation.

[0315] For example, if the second page is numbered 2, and the second action is clicking the "Next Page" button, then the third page will be numbered 3. If the second action is clicking the "Previous Page" button, then the third page will be numbered 1.

[0316] In this embodiment, when a previously saved first window is opened, it remains displayed on the screen and located on the page until it is closed or saved again. For example, in response to a third operation on the first window icon, the electronic device displays the first window on a second page. After the first window is reopened, it remains displayed on the screen when the user inputs an operation into it. During page switching after the user inputs an operation into the first window, the first window remains displayed on the screen and located on the page. After the page switching is complete, the first window is displayed on the new page.

[0317] In step S205, if the first window is displayed on the third page, in response to the save operation of the first window, the icon of the first window is displayed on the second page.

[0318] In this embodiment of the application, when the electronic device displays the first window on the third page, in response to the save operation of the first window, the icon of the first window is displayed on the second page.

[0319] In this embodiment, when the electronic device first responds to a save operation on the first window, it has already determined the associated page linked to the first window. Subsequent updates to the data in the first window do not change the association between the first window and its corresponding associated page. Similarly, when the electronic device first responds to a save operation on the first window, it associates the first window with the second page. When the first window receives input and its data is updated, and the electronic device responds to another save operation on the first window, the first window remains associated with the second page, thus displaying the first window icon on the second page.

[0320] Please see Figure 12 The following is an exemplary schematic diagram of another data processing method provided in an embodiment of this application.

[0321] In step S301, in response to a third operation on the first window icon, the first window is displayed on the second page.

[0322] In step S302, in response to the fourth operation, the second page is switched to the third page, wherein the first window is displayed on the third page.

[0323] In step S303, if the first window is displayed on the third page, in response to the save operation of the first window, the icon of the first window is displayed on the second page.

[0324] The relevant content of steps S301, S302 and S303 can be referred to steps S201, S204 and S205, and will not be repeated here.

[0325] In this embodiment, when the electronic device first responds to a save operation on the first window, it has already determined the associated page. Even if the data in the first window is not updated subsequently, when the first window is saved again, the first window will still be associated with its corresponding associated page. When the electronic device first responds to a save operation on the first window, it associates the first window with the second page. Subsequently, when the user opens the first window, views it, and saves it, and the electronic device responds to a save operation on the first window again, the first window will still be associated with the second page, thus displaying the first window icon on the second page.

[0326] For example, after a user creates a first window without entering any data, the first window is saved and associated with the third page. If the user reopens the first window without entering any data and saves it again, the first window will still be associated with the third page.

[0327] For example, a user creates a first window, enters data, and saves the first window, which is then associated with a third page. The user then reopens the first window and receives further input (such as deleting, adding, or updating data), saving the first window again, which remains associated with the third page.

[0328] For example, a user creates a first window, enters data, and saves the first window, which is then associated with a third page. If the user reopens the first window without entering any data and saves it again, the first window remains associated with the third page.

[0329] In this embodiment, from the moment the first window is displayed until it is closed or saved, the first window can remain displayed in a preset area of ​​the screen. In response to a first operation, the electronic device displays the first window in the preset area of ​​the screen. The first window remains displayed in the preset area of ​​the screen until the electronic device closes or saves it.

[0330] The preset area of ​​the screen can be the left side of the screen, the bottom side of the screen, the right side of the screen, or the upper left corner of the screen, etc. This application does not specifically limit the preset area.

[0331] In this embodiment, when the electronic device displays the first window, the first window can be fixed relatively to a preset area of ​​the screen. The user can move the display position of the first window to other areas. Figure 5B The user moves the draft paper window 20 to the center area for display. The first window being displayed relatively fixed in the preset area of ​​the screen can include: except when the user moves the display position of the first window, closes or saves the first window, the first window is displayed in the preset area of ​​the screen.

[0332] In this embodiment, the electronic device responding to a first operation by displaying a first window on a first page includes: the electronic device responding to the first operation by displaying a first window floating in a preset area of ​​the screen, wherein the first window is located on the first page. The electronic device responding to a second operation by switching the first page to a second page includes: the electronic device responding to the second operation by switching the first page to a second page and displaying a first window floating in a preset area, wherein the first window is located on the second page. The electronic device responding to a fourth operation by switching the second page to a third page includes: the electronic device responding to the fourth operation by switching the second page to a third page and displaying a first window floating in a preset area, wherein the first window is located on the third page.

[0333] In this embodiment of the application, during the initial display of the first window, the reception of input operations by the first window, and page switching, the first window is displayed floating in a preset area of ​​the screen.

[0334] like Figure 3E As shown, in response to a first operation, the electronic device displays a first window floating in a preset area of ​​the screen. The draft paper window 20 is located on the page. The draft paper window 20 can be a floating window, located in a preset area of ​​the screen, such as the left side of the screen.

[0335] In this embodiment, when the electronic device is in a first state, the first window is displayed in full-screen or non-full-screen mode. When the first window is displayed in full-screen or non-full-screen mode, the first window can be as follows: Figure 5A As shown, adjust the size of the first window. Alternatively, as shown... Figure 5B The display position of the first window is moved as shown. Figures 3A to 4C The first window is displayed either in full-screen mode or in a non-full-screen mode.

[0336] For example, the electronic device is a foldable phone. When the foldable phone is in its unfolded state, the electronic device displays the first window in either a full-screen or non-full-screen display mode, such as... Figure 6A As shown.

[0337] When the electronic device, such as a laptop, tablet, or foldable phone, is in an unfolded state, the first window is displayed in either full-screen or non-full-screen mode.

[0338] In this embodiment, when the electronic device is in the second state, the first window is displayed in a drawer-style manner. When the first window is displayed in the drawer-style manner, only a portion of the first window may be shown, and the user can fully expand it through operations such as sliding.

[0339] For example, when the foldable phone is in the folded state, the first window can be as follows: Figure 5A As shown, the first window can slide out from the edge of the screen, either from the left, right, or bottom. Figure 5B As shown, users can open or close the first window by swiping.

[0340] When the electronic device is in candybar phone mode, the first window is displayed in a drawer-style layout.

[0341] In some embodiments, when the electronic device is a large-screen device, the first window is displayed in full-screen or non-full-screen mode. When the electronic device is a small-screen device, the first window is displayed in a drawer-style mode. The size of the electronic device can determine whether it is a large-screen or small-screen device; for example, if the display size of the electronic device is smaller than a preset size, it is a small-screen device, and vice versa. The preset size can be 7 inches, 8 inches, etc.

[0342] Please see Figure 13 This document provides an exemplary flowchart of another data processing method according to an embodiment of this application. The first window includes a first writing area, which is used to receive input operations and also to display first data obtained based on the input operations.

[0343] In step S401, when the first window is displayed, in response to the fifth operation on the first window, the first data that slides along the first direction is displayed through the first writing area.

[0344] The fifth operation is used to instruct the sliding of the created draft paper. The fifth operation includes the above... Figures 4A to 4B , Figure 7 , Figures 8A to 8D The sliding operation. The fifth operation indicates the sliding direction and distance. The details regarding the sliding direction and distance can be found above and will not be repeated here. The first direction includes the sliding direction indicated by the fifth operation.

[0345] In this embodiment of the application, when the electronic device displays a first window, in response to a fifth operation on the first window, it displays first data that slides along a first direction through a first writing area. For example... Figure 4A As shown, when the fifth operation instruction is to slide the draft paper to the left, the electronic device responds to the fifth operation on the first window by displaying the first data slid to the left through the draft writing area 21. The first writing area 21 includes the draft writing area.

[0346] In this embodiment, the electronic device's response to a fifth operation on the first window includes: the electronic device sliding the draft paper canvas along a first direction based on the relationship between the first writing area and the draft paper canvas. If the electronic device cannot slide the draft paper canvas along the first direction in response to the fifth operation on the first window, the canvas data layer is slid along the first direction based on the relationship between the draft paper canvas and the canvas data layer. For details, please refer to [reference needed]. Figure 7 This will not be elaborated upon here.

[0347] In step S402, if the first data that slides along the first direction cannot be displayed in the first writing area, a sixth operation is received on the first window, wherein the sixth operation is used to instruct the first data to be enlarged and the enlarged first data to be displayed through the first writing area.

[0348] In this embodiment, if the electronic device fails to respond to the fifth operation and the first writing area cannot display the first data slidable along the first direction (e.g., neither the draft paper canvas nor the canvas data layer can slide along the first direction), the electronic device receives a sixth operation on the first window. The sixth operation instructs the canvas data layer to be zoomed in. The sixth operation includes... Figure 4C and Figure 8E The magnification operation.

[0349] like Figure 8A As shown, the canvas data layer can slide 0 distance to the left relative to the draft canvas. Figure 8E As shown, in Figure 8A Based on this, if the canvas data layer is enlarged, the distance that the canvas data layer can slide to the left relative to the draft canvas increases, thus increasing the distance that the canvas data layer can slide to the left relative to the draft canvas. Therefore, it can be seen that the canvas data layer can continue to slide to the left.

[0350] In this embodiment, the electronic device receiving a sixth operation on the first window includes: determining a zoom center based on the sixth operation, and adjusting the relationship between the draft canvas and the canvas data layer based on the zoom center. For details, please refer to the above. Figure 8E This will not be elaborated upon here.

[0351] Step S403: After displaying the magnified first data through the first writing area, in response to the fifth operation on the first window, display the magnified first data that has been slid along the first direction through the first writing area.

[0352] In this embodiment of the application, the user slides the draft paper along the first direction. When the user can no longer slide, the user zooms in on the draft paper, that is, zooms in on the canvas data layer. At this time, the user can continue to slide along the first direction.

[0353] As in the example above, the fifth operation instructs a 2cm slide to the left. Given that the draft canvas can slide 1.5cm to the left relative to the draft writing area, and the canvas data layer can slide 0.3cm to the left relative to the draft canvas, after sliding the draft canvas 1.5cm to the left, further leftward sliding is not possible. Similarly, after sliding the canvas data layer 0.3cm to the left, further leftward sliding is not possible. At this point, the electronic device receives a sixth operation on the first window. In response to the sixth operation, the canvas data layer is enlarged. Enlarging the canvas data layer increases the distance it can slide to the left relative to the draft canvas, thus allowing further leftward sliding of the canvas data layer.

[0354] Please see Figure 14 This document provides an exemplary flowchart of another data processing method according to an embodiment of this application. The first window includes a first writing area, which is used to receive input operations and also to display first data obtained based on the input operations.

[0355] In step S501, when the first window is displayed, in response to the fifth operation on the first window, the first data that slides along the first direction is displayed through the first writing area.

[0356] The relevant content of step S501 can be referred to step S401 above, and will not be repeated here.

[0357] In step S502, if the first data that slides along the first direction cannot be displayed in the first writing area, a seventh operation on the first window is received.

[0358] In this embodiment, when the electronic device fails to respond to the fifth operation and the first writing area cannot display the first data slidable along the first direction (e.g., neither the draft paper canvas nor the canvas data layer can slide along the first direction), the electronic device receives a seventh operation on the first window. The seventh operation instructs the first writing area to be reduced in size. The seventh operation may include... Figure 8F The shrinking operation is shown.

[0359] In step S503, in response to the seventh operation, the display size of the first writing area is reduced.

[0360] exist Figure 8A Based on this, the electronic device responds to the seventh operation, such as Figure 8F As shown, the electronic device reduces the display size of the first writing area.

[0361] In this embodiment of the application, the electronic device responds to the seventh operation by reducing the display size of the first window and the first writing area. As shown in 8F, the display size of the first window is also reduced.

[0362] Users can reduce the display size of the first writing area according to the actual situation, such as reducing the height of the first writing area, reducing the width of the first writing area, or reducing both the height and width of the first writing area at the same time. This application does not make specific limitations in this regard.

[0363] In step S504, after reducing the display size of the first writing area, in response to the fifth operation on the first window, the first data that slides along the first direction is displayed through the first writing area.

[0364] In this embodiment of the application, after reducing the display size of the first writing area, the distance that the draft paper canvas can slide relative to the draft writing area in the first direction can be increased, thereby allowing the draft paper canvas to continue to slide in the first direction.

[0365] In this embodiment, the electronic device, in response to a save operation on a first window, saves a window file for the first window. The window file includes a point file of first data and a first image, the first image comprising an image obtained based on the displayed first data. The point file of the first data may be a file containing a series of point coordinate data. These points can be used to define graphics, paths, raster graphics, or other types of data sets.

[0366] For example, such as Figure 3H As shown, the first data displayed in the draft paper window 20 includes the handwritten input "1 2". In response to the operation of the save control 23, the electronic device 100 saves the dot file of the handwritten input "1 2". The first image is obtained by taking a screenshot of the handwritten input "1 2" displayed in the draft paper writing area 21.

[0367] In this embodiment, when the first window is displayed in full-screen or non-full-screen mode, in response to the sixth operation on the first window, the first data is enlarged according to the point file. When the first window is displayed in drawer mode, in response to the sixth operation on the first window, the first image is enlarged and the enlarged first image is displayed through the first writing area.

[0368] In this embodiment, the electronic device includes a first canvas engine, a second canvas engine, and a page data management module. Displaying a first page on the electronic device includes: rendering the first page using the second canvas engine and displaying the rendered first page. Displaying a first window on the electronic device further includes: rendering a draft canvas of the first window using the first canvas engine and displaying the rendered draft canvas in the first window. Responding to a save operation on the first window, the electronic device further includes: saving the window file of the first window and saving a first association between the unique identifier of the first window and the window file through the page data management module. Responding to a fourth operation, switching from a second page to a third page on the electronic device includes: switching the second page to a third page, saving the page data of the second page, and saving a second association between the unique identifier of the first window and the second page through the page data management module.

[0369] The page data may include, but is not limited to: stroke data files, icon JSON files, background PNG files, and attribute files. The attribute files indicate the relationships between the stroke data files, icon JSON files, and background PNG files.

[0370] In this embodiment, the first association indicates the relationship between the unique identifier of the first window and its window file. The first association may include the ID of the first window and the storage path of its window file. The second association indicates the relationship between the unique identifier of the first window and the associated pages bound to it. The second association may include the ID of the first window and the ID of the associated page.

[0371] like Figure 3H As shown, the second association includes the relationship between the ID of the draft paper window 20 and the page with page number 3 / 4.

[0372] In some embodiments, the second association also indicates the relative positional relationship between the first window and the associated page, such as the position of the first window icon displayed on the associated page.

[0373] In this embodiment of the application, in step S203, the electronic device, in response to receiving an input operation in the first window, further includes: obtaining a new window file based on the input operation in response to receiving an input operation in the first window. If the first window is displayed on a third page, in response to a save operation on the first window, the method further includes: saving the new window file, and saving the unique identifier of the first window and the third association relationship between the new window file through the page data management module.

[0374] In this embodiment of the application, the third association relationship indicates the relationship between the unique identifier of the first window and the new window file of the first window, and the first association relationship may include the ID of the first window and the storage path of the new window file of the first window.

[0375] The following uses a note-taking application as an example to illustrate another software architecture of an electronic device provided in the embodiments of this application.

[0376] Please see Figure 15 The application layer includes a note-taking application. This application includes a toolbar, main canvas, draft paper window, draft paper canvas, zoom and slide control module, and data storage management module. The application framework layer includes a window management service, a first canvas engine, a second canvas engine, an icon rendering engine, a page data management module, a pen attribute management module, and undo / redo stack management.

[0377] Toolbars can be used to provide access to draft paper functionality. For example... Figure 3D As shown, toolbar 17 includes an add control 18. In response to an operation on the add control 18, the electronic device displays an add box 19. Add box 19 includes an add draft paper option. In response to an operation on the add draft paper option, the draft paper function is activated. Alternatively, the add draft paper option can be directly set in toolbar 17; this application does not specifically limit this approach.

[0378] The main canvas is a virtual surface used to draw visual elements such as graphics, images, and text. When the primary application is a note-taking application, the main canvas is the main display panel of the note-taking software, such as... Figure 3C The content on the main canvas can be displayed through the note-writing area 16. Users can draw, edit, and perform other operations on the main canvas, but these operations are usually performed within the note-writing area 16.

[0379] The draft paper window is the window layout in which the draft paper is displayed. The draft paper window is a component of the user interface used to display and edit content. For example... Figure 3F As shown, a draft paper window 20 is displayed. The user can enter "1 2" in the draft paper window 20, and the draft paper window 20 displays the data entered by the user.

[0380] The draft paper window can include a small-screen interface window and a large-screen interface window. A small-screen interface window displays the draft paper window in a drawer-like manner. A large-screen interface window displays the draft paper window in either full-screen or non-full-screen mode. When the first application obtains device information (such as size or device type) and determines that the electronic device is a small-screen device, the draft paper window is a small-screen interface window. When the first application obtains device information and determines that the electronic device is a large-screen device, the draft paper window is a large-screen interface window.

[0381] In this embodiment, the draft paper window can read the data of the saved window file through the data storage management module and then display it on the draft paper canvas. For example, Figure 3K As shown, in response to the user's operation on the draft paper icon 25, the draft paper window 20 is opened. The draft paper window 20 can read the data of the window file through the data storage management module and then display it on the draft paper canvas, and then display it through the draft writing area 21.

[0382] The draft paper canvas is a view used to hold and display the user's handwriting, drawings, and other types of annotations.

[0383] The data storage management module is used for file read and write management of all data in the current note.

[0384] The data storage management module maintains the database and internal cache tables. The database records the attributes of the current note and the page. The attributes of the current note may include, but are not limited to: the name of the current note and the creation date. The attributes of the page may include, but are not limited to: the number of pages included in the current note and the width and height of the page.

[0385] The database is also used to record the binding relationships between files and pages. These binding relationships include the relationship between a page and the file corresponding to that page, and may also include the relationship between a file and its storage path. For example, the database records: the ID of the page and the ID of the file corresponding to that page (page -> file ID), and the ID of the file and its storage path (file ID -> file path).

[0386] It is understood that the files corresponding to the page can include, but are not limited to: window files, files containing inserted images, and files containing stroke data written on the main canvas. Window files can be understood as the actual carrier of the canvas data layer.

[0387] Page data, relationships (first relationship, second relationship, and third relationship), and window files are all stored in the database.

[0388] The internal cache table is used to temporarily store changes to window files. It records the association between the first window and the updated window files of that first window (the third association). Specifically, the internal cache table can record the unique identifier (such as an ID) of the first window and the storage path of the new window file (the updated window file corresponding to the first window).

[0389] The data storage management module also maintains the storage of files, which are the actual carriers of data. For example, it maintains the storage of files corresponding to pages, such as window files.

[0390] The zoom and slide control module is used to control the sliding and zooming of the draft paper. For a detailed implementation of the zoom and slide control module, please refer to [reference needed]. Figure 7 The zoom and slide control module can control the second canvas engine based on the above zoom and slide control logic and user operations (such as sliding, zooming in, or zooming out).

[0391] In this embodiment of the application, the scaling and sliding control module obtains the user's sliding operation of the draft paper, and adjusts the sliding and scaling of the draft paper according to the sliding direction and sliding distance indicated by the sliding operation.

[0392] The relevant content of the window management service can be found above and will not be repeated here.

[0393] The first canvas engine is responsible for handling all drawing operations on the draft canvas and rendering the drawn points, lines, shapes, etc., into images to display to the user.

[0394] The second canvas engine is responsible for handling all drawing operations on the main canvas and rendering the drawn points, lines, shapes, etc., into images to display to the user.

[0395] The icon rendering engine is the engine that renders the first window icons (placeholder icons) on the main canvas, and it can control the changes in the display position of the first window icons. The icon rendering engine can be understood as a software component or system specifically designed for rendering the first window icons; it is responsible for converting the vector graphics or bitmap resources of the first window icons into visual images in the user interface.

[0396] The page data management module is responsible for the memory management of the page data (file) of the currently visible page, the draft paper data (window file) of the first window, and the binding (association) relationships.

[0397] The page data management module maintains a first association table. This table records the various pages of the note-taking application and their positions; each page has its own main canvas content. In response to a save operation on the first window, the page data management module binds the first window to the associated page and stores the second association relationship between the first window and the associated page in the first association table. The first association table can include the various pages of the note-taking application, the positions of each page, and the first window associated with each page.

[0398] The page data management module does not manage all pages of the note-taking application; it only manages the page data of currently visible pages. In response to page switching, when a target page is switched to a page that is no longer visible, the page data management module caches the file of that target page and the unique identifier of the first window associated with that target page, and then stores the file of that target page and the unique identifier of the first window associated with that target page in the data storage management module.

[0399] In response to a save operation on the first window, the page data management module saves the window file of the first window and records the unique identifier of the first window and the first association relationship with that window file. Then, it binds the first window to the associated page (second association relationship). After the associated page is swiped out, the page data management module updates the page data (file), window file, first association relationship, and second association relationship of the associated page to the data storage management module.

[0400] The page data management module corresponds to the display cache, specifically the data for the current page and the draft paper. The second canvas engine directly retrieves data from the page data management module's cache for rendering. The data storage management module corresponds to data persistence, meaning data is stored in memory.

[0401] The pen attribute management module is responsible for managing changes to pen attributes on the main canvas and draft paper. Pen attributes include, but are not limited to: color, thickness, and type. Through this module, users can use the same set of pen attributes in both the draft paper writing area and the note-taking writing area. Figure 3F As shown, the user writes "1 2" in the draft paper writing area using the first pen attribute. The user can also continue to write data in the note writing area using the first pen attribute.

[0402] The undo / restore stack manages the log of operations on the main canvas and draft canvas, including both forward and reverse operations. For example, a user first writes "1" and "2" sequentially in the draft canvas area, and then writes "3" in the notes area. When undoing, the user can first undo "3" in the notes area, and then undo "2" in the draft canvas area.

[0403] The following section details the working principle of the draft paper function.

[0404] Creating a draft paper window, confirming the display panel, and operating the display panel.

[0405] Step 1: The toolbar receives the "Add Draft Paper" request.

[0406] Step 2: In response to the addition of draft paper on the toolbar being clicked, the draft paper panel pops up.

[0407] Before the draft paper panel pops up, you can choose whether it's a draggable panel or a drawer panel. A draggable panel allows you to display the draft paper window in full-screen or non-full-screen mode. A drawer panel allows you to display the draft paper window in a drawer-style layout. When the draft paper panel is draggable, the draft paper window is displayed in a large-screen interface. When the draft paper panel is a drawer panel, the draft paper window is displayed in a small-screen interface.

[0408] In this embodiment of the application, the electronic device can determine the draft paper panel based on the device information of the electronic device, such as the display size or device type (candybar phone, tablet computer).

[0409] Step 3: You can adjust the panel or write content in response to the user's operation.

[0410] like Figure 15 As shown, the draft paper window can be adjusted through the window management service, and content can be written through the draft paper canvas and the second canvas engine.

[0411] The relevant content of step three can be summarized above and will not be repeated here.

[0412] Preservation of draft paper

[0413] Step 4: Receive the save operation for the draft paper window.

[0414] Step four can be found in the above-mentioned content.

[0415] Step 5: In response to the save operation of the draft paper window, store the window file of the draft paper window.

[0416] like Figure 15 As shown, the draft paper window receives a save operation and, in response, stores the first data within the draft paper window as a file (window file). The first canvas engine stores the window file in the cache of the page data management module, which then stores it in the file of the data storage management module. When storing the window file, the first canvas engine is responsible for converting all user operations and content on the canvas into a persistent format.

[0417] After saving the window file, its storage path can be determined. This window file's storage path is then bound to the draft paper window, establishing the first association. The first association indicates the relationship between the draft paper window and its window file.

[0418] In some embodiments, the first association indicates a unique identifier (such as an ID) for the draft paper window and the storage path of the window file for that draft paper window.

[0419] In some embodiments, the first association indicates the unique identifier of the draft paper window and the unique identifier (such as ID) of the window file of the draft paper window, and the storage path of the window file is subsequently determined based on the ID of the window file.

[0420] In this embodiment, the electronic device, in response to the save operation of the draft paper window, stores the window file of the draft paper window and stores the first association relationship to the page data management module.

[0421] Step 6: In response to the save operation of the draft paper window, determine the associated page associated with the draft paper window, and associate the draft paper canvas with the main canvas.

[0422] In this embodiment, the electronic device, in response to a save operation on the draft paper window, determines the associated page linked to the draft paper window. Then, it associates the draft paper canvas with the main canvas of the associated page, thus determining a second association between the draft paper window and the associated page.

[0423] The second association indicates the relationship between the draft paper window and the associated pages associated with it. The second association indication may include a unique identifier for the draft paper window and a unique identifier for the associated pages associated with it.

[0424] like Figure 15 As shown, the main canvas retrieves page data from the page data management module for display. The page data management module obtains the display range of page data (such as which pages to display and the size of the display range) from the main canvas, and then calculates the current page. After determining the current page, the page data management module, in response to the save operation of the draft paper window, determines that the current page is the associated page with the draft paper window.

[0425] Step 7: Add a draft paper window icon to the associated page.

[0426] like Figure 15 As shown, there is a bidirectional arrow between the main canvas and the icon rendering engine. The icon rendering engine can draw the draft paper window icon onto the main canvas of the associated page, and then add and display the draft paper window icon on the associated page.

[0427] Initially, in response to saving, the draft paper window displays the draft paper window icon in the center of the current page using the icon rendering engine.

[0428] Step 8: In response to the user's operation on the window icon, adjust the position of the window icon within the associated page.

[0429] like Figure 15As shown, the main canvas can also notify the icon rendering engine of drag events related to the draft paper window icon, thereby controlling the icon rendering engine to adjust the display position of the draft paper window icon. The drag event can indicate the display position of the draft paper window icon.

[0430] Step 9: In response to user page switching, cache page data and the second association relationship.

[0431] In this embodiment, in response to a user switching the current page, the page data management module caches the page data of the current page, including the file corresponding to the current page (such as the window file of the first window associated with the current page). The page data management module stores page data, a first association relationship, and a second association relationship. When the target page scrolls out of the currently visible area, the page data management module stores the target page's page data, the first association relationship, and the second association relationship in the data storage management module. Then, when scrolling back to the target page, the second canvas engine can read the target page's page data, the first association relationship, and the second association relationship from the data storage management module, and display the page according to the target page's page data, the first association relationship, and the second association relationship.

[0432] In this embodiment, the timing for saving page data and binding relationships is: (1) when closing the application; (2) when scrolling the page until it is completely invisible.

[0433] Step 10: In response to the user's operation on the draft paper window, obtain the new window file and cache the new window file and its association with the third party.

[0434] In this embodiment of the application, the user can edit the saved draft paper. For example... Figure 3K As shown, the user opens the draft paper icon 25. Figure 3L Display the draft paper window, in Figure 3M When performing input operations on the draft paper window, such as adding, deleting, or updating data, the following actions will occur after the input operation: Figure 3N In response to saving the draft paper window, a new window file is saved. The new window file is obtained and the third association between the new window file and the draft paper window is cached.

[0435] The third association indicates the relationship between the draft paper window and the new window file. The third association can include the unique identifier of the draft paper window and the unique identifier (or storage path) of the new window file.

[0436] For example, on page 1, in response to a save operation on draft window A, the window file B of draft window A is saved, and the ID of draft window A is bound to the window file B, resulting in a first association C. Draft window A is reopened, and the page is switched to page 2. In response to the switch to page 2, page 2 is bound to draft window A, resulting in a second association D. The page data management module saves the page data of page 2, the first association C, and the second association D to the data storage management module.

[0437] When draft window A is displayed on page 2, an input operation is performed on draft window A. Responding to the save operation on page 2, a new window file E of draft window A is saved, and the ID of draft window A is bound to the new window file E, resulting in a third association F. This third association F is cached in the electronic device's memory. When draft window A is opened again, the system first checks if the latest association for draft window A exists in memory. If it does, the third association F is read, and the window file is retrieved based on the third association F. If not, it is read from the data storage management module. Finally, when the first application saves, the third association F in memory is saved to the data storage management module.

[0438] In some embodiments, the window file of the first window is already stored. When the first window is displayed on the associated page, the window file of the first window is re-edited to obtain a new window file. In response to the save operation of the first window, the new window file and the first association relationship of the first window are saved, and the first association relationship is stored in the page data management module. In response to switching out of the associated page, the page data of the associated page, the first association relationship, and the second association relationship are stored in the data storage management module. That is, when the window file of the first window is edited and saved on the associated page, it is not necessary to use memory to store the third association relationship.

[0439] Step 11: Store the page data, the first association, the second association, and the third association in a unified manner.

[0440] In this embodiment, the page data and the aforementioned associations (first association, second association, and third association) are stored together; that is, the associations are saved in the page data. One record in the page data is a list of draft papers (JSON file). The draft paper list records a draft paper at a specific location on the page and its ID. The draft paper list may include: the position of the draft paper icon, the style of the draft paper icon, the size of the draft paper icon, and a unique identifier for the window file corresponding to the draft paper icon. The unique identifier for the window file can be the storage path of the window file or the draft paper ID. A subsequent table maintains the draft paper ID and the storage path of the window file.

[0441] In this embodiment, the window file and page data are stored separately. The window file is stored in response to a save operation on the first window. The page data is stored only when the page is switched out of view. That is, the saving of the window file and page data is asynchronous. When a stored window file is edited and the current page is swiped out, and then saved on another page, the icon of the edited window file is saved to the associated page based on its original relationship (i.e., the relationship between the draft ID and the associated page). Furthermore, since the storage path of the re-saved window file has changed, the storage path of the re-saved window file (i.e., the third association relationship) is maintained in memory so that the file can be read based on the third association relationship when it is read again later.

[0442] In this embodiment, the draft paper function leverages canvas rendering capabilities to expand the canvas during user operations. When a user activates the draft paper function, they can insert an extended canvas at a specified location within the main canvas to supplement the main content. This extended content is stored as an attachment attached to the main note content. Users can dynamically adjust the size and position of the extended canvas according to their needs and can freely jump between the main note content without disrupting the topological relationship between the main note and the extended canvas. Users can slide and zoom in on the extended content and adjust the position of the canvas content and handwriting style according to their writing requirements.

[0443] It should be noted that all relevant content of each step involved in the above method embodiments can be referenced from the functional description of the corresponding functional module, and will not be repeated here.

[0444] This application also provides a computer program product that, when run on a computer, causes the computer to perform the aforementioned related steps to implement the image processing methods in the above-described method embodiments.

[0445] This application also provides a computer storage medium including computer instructions, which, when executed on an electronic device, cause the electronic device to perform the image processing method as described above.

[0446] In this application, the electronic devices, computer storage media, computer program products, or chip systems provided in the embodiments are all used to execute the corresponding methods provided above. Therefore, the beneficial effects they can achieve can be referred to the beneficial effects in the corresponding methods provided above, and will not be repeated here.

[0447] Through the above description of the embodiments, those skilled in the art can clearly understand that, for the sake of convenience and brevity, only the division of the above functional modules is used as an example. In actual applications, the above functions can be assigned to different functional modules as needed, that is, the internal structure of the device can be divided into different functional modules to complete all or part of the functions described above.

[0448] In the several embodiments provided in this application, it should be understood that the disclosed apparatus and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative. For instance, the division of modules or units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another device, or some features may be ignored or not executed. Furthermore, the mutual coupling or direct coupling or communication connection shown or discussed may be through some interfaces; the indirect coupling or communication connection between devices or units may be electrical, mechanical, or other forms.

[0449] The unit described as a separate component may or may not be physically separate. The component shown as a unit can be one physical unit or multiple physical units, that is, it can be located in one place or distributed in multiple different places. Some or all of the units can be selected to achieve the purpose of the solution in this embodiment according to actual needs.

[0450] Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.

[0451] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a readable storage medium. Based on this understanding, the technical solutions of the embodiments of this application, essentially or in other words, the parts that contribute to the prior art, or all or part of the technical solutions, can be embodied in the form of a software product. This software product is stored in a storage medium and includes several instructions to cause a device (which may be a microcontroller, chip, etc.) or processor to execute all or part of the steps of the methods of the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0452] The above are merely specific embodiments of this application, but the scope of protection of this application is not limited thereto. Any changes or substitutions within the technical scope disclosed in this application should be covered within the scope of protection of this application.

Claims

1. A data processing method applied to electronic devices, characterized in that, The method includes: Display the first page; In response to a first operation, a first window is displayed on the first page, wherein the first window is used to receive an input operation and the first window is also used to display first data obtained based on the input operation; In response to the second operation, the first page is switched to the second page, wherein the first window is displayed on the second page; When the first window is displayed on the second page, in response to a save operation on the first window, the first window icon of the first window is displayed on the second page; In response to a third operation on the first window icon, the first window is displayed on the second page; In response to the fourth operation, the second page is switched to the third page, wherein the first window is displayed on the third page; When the first window is displayed on the third page, in response to a save operation on the first window, the icon of the first window is displayed on the second page.

2. The data processing method as described in claim 1, characterized in that, After displaying the first window on the second page in response to a third operation on the first window icon, the method further includes: The input operation is received through the first window; In response to receiving the input operation in the first window, the first data obtained based on the input operation is displayed in the first window.

3. The data processing method as described in claim 1 or 2, characterized in that, The first window includes a first writing area, which is used to receive the input operation and also to display first data obtained based on the input operation. The method further includes: When the first window is displayed, in response to a fifth operation on the first window, first data that slides along a first direction is displayed through the first writing area; If the first data that slides along the first direction cannot be displayed in the first writing area, in response to the sixth operation on the first window, the magnified first data is displayed through the first writing area; After displaying the magnified first data through the first writing area, in response to the fifth operation on the first window, the magnified first data that has been slid along the first direction is displayed through the first writing area.

4. The data processing method as described in claim 1 or 2, characterized in that, The first window includes a first writing area, which is used to receive the input operation and also to display first data obtained based on the input operation. The method further includes: When the first window is displayed, in response to a fifth operation on the first window, first data that slides along a first direction is displayed through the first writing area; If the first data that slides along the first direction cannot be displayed in the first writing area, a seventh operation on the first window is received; In response to the seventh operation, the display size of the first writing area is reduced; After reducing the display size of the first writing area, in response to the fifth operation on the first window, the first data that slides along the first direction is displayed through the first writing area.

5. The data processing method as described in claim 1 or 2, characterized in that, The step of displaying the first window on the first page in response to the first operation includes: In response to the first operation, a first window is displayed floating in a preset area of ​​the screen, wherein the first window is located on the first page; The response to the second operation, switching the first page to the second page, includes: In response to the second operation, the first page is switched to the second page, and the first window is displayed floating in the preset area, with the first window located on the second page.

6. The data processing method as described in claim 1 or 2, characterized in that, The method further includes: When the electronic device is in the first state, the first window is displayed in full-screen mode or non-full-screen mode; When the electronic device is in the second state, the first window is displayed in a drawer-style manner.

7. The data processing method as described in claim 6, characterized in that, The response to the save operation on the first window further includes: In response to a save operation on the first window, a window file for the first window is saved, wherein the window file includes a point file of the first data and a first image, the first image including an image obtained based on the displayed first data.

8. The data processing method as described in claim 7, characterized in that, The first window includes a first writing area, which is used to receive the input operation and also to display first data obtained based on the input operation. The method further includes: When the first window is displayed in full-screen or non-full-screen mode, in response to the sixth operation on the first window, the first data is magnified according to the point file; When the first window is displayed in a drawer-style manner, in response to the sixth operation on the first window, the first image is enlarged and the enlarged first image is displayed through the first writing area.

9. The data processing method according to any one of claims 1, 2, 7, and 8, characterized in that, The first window includes a first writing area, which is used to receive the input operation and also to display the first data obtained based on the input operation. The electronic device includes a first canvas engine, a second canvas engine, and a page data management module. The first window display also includes: The first canvas engine renders the draft canvas of the first window, and the rendered draft canvas is displayed in the first window. The display of the first page includes: The first page is rendered using the second canvas engine, and the rendered first page is displayed. The response to the save operation on the first window further includes: In response to the save operation of the first window, the window file of the first window is saved, wherein the window file includes a point file of the first data and a first image, the first image including an image obtained by displaying the first data based on the first writing area; The page data management module stores the unique identifier of the first window and the first association relationship between the window file; The response to the fourth operation, switching the second page to the third page, includes: In response to the fourth operation, the second page is switched to the third page, and the page data of the second page is saved; The page data management module stores the unique identifier of the first window and the second association relationship between the second page and the second window.

10. The data processing method as described in claim 2, characterized in that, The electronic device includes a page data management module, and the step of responding to the input operation received in the first window further includes: In response to the first window receiving the input operation, a new window file is obtained based on the input operation; When the first window is displayed on the third page, in response to a save operation on the first window, the method further includes: Save the new window file; The page data management module stores the unique identifier of the first window and the third association between the new window file and the page data management module.

11. The data processing method as described in claim 3, characterized in that, The first window includes a draft canvas and a canvas data layer, and the fifth operation in response to the first window includes: In response to the fifth operation on the first window, the draft paper canvas is slid along the first direction according to the relationship between the first writing area and the draft paper canvas; In response to a fifth operation on the first window, if the draft canvas cannot be slid along the first direction, the canvas data layer is slid along the first direction according to the relationship between the draft canvas and the canvas data layer.

12. The data processing method as described in claim 3, characterized in that, The first window includes a draft canvas and a canvas data layer, and the sixth operation in response to the first window includes: The scaling center is determined according to the sixth operation; Adjust the relationship between the draft paper canvas and the canvas data layer according to the scaling center.

13. An electronic device, characterized in that, The electronic device includes a memory, a processor, and a display screen. The display screen is used to display an interface, the memory is used to store instructions, and the processor is used to execute the instructions stored in the memory, causing the electronic device to perform the data processing method as described in any one of claims 1 to 12.

14. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores instructions that, when executed on a computer, cause the computer to perform the data processing method as described in any one of claims 1 to 12.

Images