WO2025199770A1 - 显示输入内容的方法及电子设备 - Google Patents

显示输入内容的方法及电子设备

Info

Publication number
WO2025199770A1
WO2025199770A1 PCT/CN2024/083929 CN2024083929W WO2025199770A1 WO 2025199770 A1 WO2025199770 A1 WO 2025199770A1 CN 2024083929 W CN2024083929 W CN 2024083929W WO 2025199770 A1 WO2025199770 A1 WO 2025199770A1
Authority
WO
WIPO (PCT)
Prior art keywords
handwriting
area
interface
text
input
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
PCT/CN2024/083929
Other languages
English (en)
French (fr)
Other versions
WO2025199770A9 (zh
Inventor
杨裕伟
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Honor Device Co Ltd
Original Assignee
Honor Device Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Honor Device Co Ltd filed Critical Honor Device Co Ltd
Priority to CN202480004050.9A priority Critical patent/CN121175650A/zh
Priority to PCT/CN2024/083929 priority patent/WO2025199770A1/zh
Publication of WO2025199770A1 publication Critical patent/WO2025199770A1/zh
Publication of WO2025199770A9 publication Critical patent/WO2025199770A9/zh
Pending legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures

Definitions

  • the embodiments of the present application relate to the field of terminal technology, and more particularly to a method for displaying input content and an electronic device.
  • terminal devices all support note-taking applications, which users can use to record text, pictures, audio and other information.
  • Handwriting input is convenient and fast, allowing users to enter text, graphics, and other content as needed, making it popular.
  • handwriting input in note-taking apps still has some flaws. Optimizing the handwriting interaction process in note-taking apps and improving the user experience is a challenge that needs to be addressed.
  • the embodiments of the present application provide a method and electronic device for displaying input content, which optimize the display method of handwritten input content of a note-taking application and improve the user experience of inputting content by handwriting.
  • a method for displaying input content is provided, which is applied to an electronic device, for example, a terminal device.
  • the terminal device displays a first interface; the first interface includes a first text area, the first text area including first text content; in response to a first operation on a first option in the first interface, creating a first view and displaying a second interface; the second interface includes a first handwriting area and a second text area, the second text area including the first text content, and the first view corresponding to the first handwriting area.
  • the first handwriting input content is displayed in the first handwriting area.
  • the first view is deleted and a third interface is displayed;
  • the third interface includes a first handwriting display area and a third text area, the first handwriting display area including the first handwriting input content, and the third text area including the first text content.
  • creating a second view and displaying a fourth interface the fourth interface includes the first handwriting area and the second text area, and the second view corresponds to the first handwriting area.
  • a handwriting area is added to the editing interface of the text note.
  • the user can input content by handwriting in the handwriting area.
  • the handwriting area is deleted, and the first handwriting display area on the editing interface of the text note displays the content input by the user in the handwriting area by handwriting.
  • the handwriting area is displayed on the editing interface again, and the user can continue to input content into the handwriting area by handwriting. During this period, the first text content is always displayed on the editing interface.
  • the editing interface includes a handwriting display area and a text area, the handwriting input content is displayed in the handwriting display area, and the text content is displayed in the text area; before generating the editing interface, the handwriting input content The text content will not correspond to a different layer; this avoids the problem of text content and handwriting input content being on different layers, causing display misalignment after the tablet changes shape.
  • a second image is also created, the second image corresponding to the first handwriting display area in the third interface.
  • the first handwriting display area includes the first handwriting input content.
  • the second image can be a picture.
  • the first handwritten input content is saved as an image, which is also considered rich text content and is placed on the same layer as other text content. This can avoid the display misalignment problem caused by the handwritten input content and text content being on different layers.
  • the user can start handwriting input directly on the handwriting picture (first handwriting display area).
  • the handwriting picture is deleted and a view corresponding to the handwriting area (second view) is created.
  • the fourth interface is generated based on a preset layer (i.e., a pre-drawn transition layer) and the layer containing the second view.
  • the fourth interface includes the preset layer and the layer containing the second view; the preset layer is located above the layer containing the second view.
  • the transition layer is set to visible. Second handwriting input content is generated in the preset layer and displayed in the first handwriting area of the fourth interface.
  • the transition layer is pre-drawn and not created after receiving the second handwriting input, the second handwriting input content drawn on the transition layer can be displayed before the second view is created. This allows the handwriting corresponding to the second handwriting input to be displayed on the screen through the transition layer before the view corresponding to the first handwriting area in the fourth interface is successfully created. Because the transition layer is pre-drawn, drawing the second handwriting input content on the transition layer is quick, effectively shortening the time interval between the user's handwriting input and the display of the second handwriting input content, improving the tracking of the user's handwriting input.
  • the first view is deleted; after deleting the first view, a third view is created and the fifth interface is displayed; the fifth interface includes a second handwriting area and a fourth text area, the third view corresponds to the second handwriting area, the second handwriting area includes the first handwriting input content, and the fourth text area includes the first text content.
  • a morphological change of the terminal device for example, the morphological change includes: rotation, folding or unfolding, etc.
  • an editing interface e.g., a second interface
  • a new view corresponding to the handwriting area is generated based on the screen layout after the morphological change.
  • the regenerated view (the third view) is laid out according to the layout rules after the morphological change.
  • a first image is generated based on the first view.
  • the first image can be a picture.
  • a third view can be generated based on the first image and the screen display area after the terminal device changes its form.
  • the first image records the display position and size of the first handwritten area on the screen.
  • a sixth interface when the third interface is displayed, in response to a morphological change of the terminal device, a sixth interface is displayed; the sixth interface includes a second handwriting display area and a fifth text area, the second handwriting display area includes first handwriting input content, and the fifth text area includes first text content; in the process from the morphological change of the terminal device to the display of the sixth interface, no view is deleted or created.
  • the third interface includes a first handwriting display area and a third text area.
  • the sixth interface is generated by performing an interface layout on each view in the third interface based on the screen display area.
  • the first handwriting display area corresponds to the second handwriting display area
  • the third text area corresponds to the fifth text area. No view is deleted or created.
  • the user can click on the handwriting image (first handwriting display area) to display the first handwriting area on the editing interface, so that the user can continue to input handwriting in the first handwriting area.
  • the third interface further includes a third handwriting area, the third handwriting area includes third handwriting input content, the fourth interface further includes a third handwriting display area, the third handwriting display area includes third handwriting input content, and in response to a third operation in the first handwriting display area of the third interface, a third image is created, the third image corresponding to the third handwriting display area.
  • the third image can be a picture.
  • the user is given the experience that the handwriting display area and the handwriting area are the same area, avoiding the user's experience of the handwriting area jumping.
  • the first text content includes at least one of text, pictures, audio, tables, and hyperlinks.
  • the text area may include rich text content.
  • an electronic device in a second aspect, has the functionality to implement the method described in the first aspect.
  • This functionality can be implemented in hardware or by hardware executing corresponding software.
  • the hardware or software includes one or more modules corresponding to the functionality described above.
  • an electronic device comprising: a processor, a memory, and a display screen, wherein the memory is used to store computer-executable instructions.
  • the processor executes the computer-executable instructions stored in the memory so that the electronic device executes the method described in any possible implementation of the first aspect above.
  • a computer-readable storage medium wherein instructions are stored in the computer-readable storage medium, and when the instructions are executed on a computer, the computer can execute any possible implementation of the first aspect. The method described in the embodiment.
  • a computer program product comprising instructions, which, when executed on a computer, enables the computer to execute the method described in any possible implementation of the first aspect.
  • the technical effects brought about by any possible implementation of the second to fifth aspects can refer to the technical effects brought about by different implementations of the first aspect, and will not be repeated here.
  • FIG4B is a schematic diagram of a scenario example of a method for displaying input content provided in an embodiment of the present application.
  • FIG4C is a schematic diagram of a scenario example of a method for displaying input content provided in an embodiment of the present application.
  • FIG5A is a schematic diagram of a scenario example of a method for displaying input content provided by an embodiment of the present application.
  • FIG5B is a schematic diagram of a scenario example of a method for displaying input content provided in an embodiment of the present application.
  • FIG6 is a schematic diagram of a scenario example of a method for displaying input content provided by an embodiment of the present application.
  • FIG7B is a schematic diagram of a scenario example of a method for displaying input content provided in an embodiment of the present application.
  • FIG8 is a schematic diagram of a hardware structure of a terminal device applicable to the method for displaying input content provided in an embodiment of the present application;
  • FIG9 is a schematic diagram of a software architecture of a terminal device applicable to the method for displaying input content provided in an embodiment of the present application;
  • FIG10A is a schematic diagram of a process of adding a handwriting area to a text note editing interface in a method for displaying input content provided by an embodiment of the present application;
  • FIG12 is a flow chart of a method for displaying input content provided in an embodiment of the present application.
  • FIG14 is a flow chart of a method for displaying input content provided in an embodiment of the present application.
  • references to "one embodiment” or “some embodiments” etc. described in this specification mean that the specific features, structures or characteristics described in conjunction with the embodiment are included in one or more embodiments of the present application. Therefore, the statements “in one embodiment”, “in some embodiments”, “in some other embodiments”, “in some other embodiments”, etc. appearing in different places in this specification do not necessarily refer to the same embodiment, but mean “one or more but not all embodiments", unless otherwise specifically emphasized in another way.
  • the terms “including”, “comprising”, “having” and their variations all mean “including but not limited to”, unless otherwise specifically emphasized in another way.
  • the term “connected” includes direct and indirect connections, unless otherwise stated. "First” and “second” are used for descriptive purposes only and are not to be understood as indicating or implying relative importance or implicitly indicating the number of technical features indicated.
  • the method for displaying input content provided in the embodiments of the present application can be applied to electronic devices that support handwriting input.
  • the electronic device can be a terminal device.
  • the above-mentioned terminal devices can include mobile phones, tablet computers, laptops, personal computers (PCs), ultra-mobile personal computers (UMPCs), handheld computers, netbooks, smart home devices (such as smart TVs, smart screens, large screens, smart speakers, smart air conditioners, etc.), personal digital assistants (PDAs), wearable devices (such as smart watches, smart bracelets, etc.), vehicle-mounted devices, virtual reality devices, etc., and the embodiments of the present application do not impose any restrictions on this.
  • PCs personal computers
  • UMPCs ultra-mobile personal computers
  • PDAs personal digital assistants
  • wearable devices such as smart watches, smart bracelets, etc.
  • vehicle-mounted devices virtual reality devices, etc.
  • a note-taking application is installed on a terminal device.
  • FIG1 illustrates a user interface diagram of the note-taking application on the tablet. It is understood that the note-taking application may have different names on different terminal devices, such as "Notebook” or “Notepad.”
  • tablet computer 100 displays a user interface 101 of a note-taking application, which includes an "Add” button 102.
  • a "Text Note” option 1021, a "Handwritten Note” option 1022, and the like are displayed on user interface 101.
  • the user can click on "Text Note” option 1021 to create a text note, and tablet computer 100 displays the text note editing interface.
  • the user can enter text, symbols, images, audio, hyperlinks, and the like on the text note editing interface.
  • the user can also enter content (e.g., text, graphics, and the like) by handwriting on the text note editing interface.
  • the user can click on "Handwritten Note” option 1022 to create a handwritten note.
  • the user can enter text, graphics, and the like by handwriting on the handwritten note user interface (canvas).
  • the editing interface 103 includes a handwriting option 1032. After the user clicks the handwriting option 1032, he can perform handwriting input in the handwriting area of the editing interface 103; after the tablet computer 100 receives the user's handwriting input in the handwriting area, the handwriting area will display the user's handwriting trajectory (text, numbers, symbols, graphics, etc.); the handwriting trajectory generated by the user's handwriting input will be retained in the handwriting area and will not disappear when the handwriting trajectory is drawn.
  • the handwriting option 1032 After the user clicks the handwriting option 1032, he can perform handwriting input in the handwriting area of the editing interface 103; after the tablet computer 100 receives the user's handwriting input in the handwriting area, the handwriting area will display the user's handwriting trajectory (text, numbers, symbols, graphics, etc.); the handwriting trajectory generated by the user's handwriting input will be retained in the handwriting area and will not disappear when the handwriting trajectory is drawn.
  • the editing interface 103 further includes other controls.
  • the editing interface 103 further includes a "Collapse” button 1033. In response to clicking the "Collapse” button 1033, the virtual keyboard 1031 is no longer displayed on the editing interface 103.
  • the editing interface 103 further includes a text tool 1034. The user can modify the font of the text in the text area by clicking the text tool 1034.
  • the editing interface 103 further includes an "Add" button 1035. In response to the user clicking the "Add" button 1035, options such as "Gallery,” “Table,” and “Hyperlink” are displayed on the editing interface 103.
  • the user can add an image to the text area of the editing interface 103 by clicking the "Gallery” option; the user can add a table to the text area of the editing interface 103 by clicking the "Table” option; the user can add a hyperlink to the text area of the editing interface 103 by clicking the "Hyperlink” option.
  • the editing interface 103 further includes a “recording” button 1036 , and the user can add a recording file to the text area of the editing interface 103 by clicking the “recording” button 1036 .
  • Handwriting input in text notes is convenient and fast, and there are many ways to implement it.
  • the editing interface of the text note is generated based on at least two layers, wherein layer A includes rich text content such as text, pictures, tables, hyperlinks, etc., and layer B includes handwritten input content.
  • the tablet computer 100 displays an editing interface 201 for text notes.
  • the text area of the editing interface 201 includes text content such as words and pictures, and also includes a mark graphic for handwriting input, such as the black shadow block in (b) of FIG2 .
  • the handwritten input content and the text content are located in different layers (for example, a layer can be a View or Layer), and the handwritten input content can be superimposed on the text content.
  • a layer can be a View or Layer
  • the handwritten input content can be superimposed on the text content.
  • the terminal device undergoes a change in form, such as when a tablet computer is rotated, such as when a foldable screen mobile phone is folded or unfolded, the text content and the handwritten input content may be displayed misaligned.
  • the mark graphic is located above the text "note content”, “list”, and “style”; after the tablet computer is rotated, as shown in Figure 2 (c), the mark graphic and the text "note content", "list”, and “style” are misaligned.
  • the text content and the handwritten input content are located in different layers, and the two layers are independent.
  • the tablet computer independently layouts each layer. Under different layout methods, the text content and the handwritten input content may be misaligned.
  • the tablet computer 100 displays an editing interface 301 for a text note.
  • the editing interface 301 The tablet 100 includes an image 3021 and a text area 3022.
  • the content of image 3021 is generated by handwriting traces, and text area 3022 includes text content.
  • tablet computer 100 displays handwriting input interface 303, which includes a handwriting area 3031.
  • the user can enter handwriting in handwriting area 3031 of handwriting input interface 303.
  • handwriting area 3031 is relatively large, occupying almost the entire display area of handwriting input interface 303.
  • Handwriting input interface 303 does not include a text area.
  • the handwritten input content (handwritten trace) is displayed as an image on the editing interface.
  • the handwritten input content and the text content are placed on the same layer, avoiding the problem of text content and handwritten input content being misaligned after the tablet is rotated.
  • handwriting input requires operation in the handwriting input interface, which causes a jump between the editing interface and the handwriting input interface, resulting in a poor user experience.
  • the present application provides a method for displaying input content.
  • handwriting operations can be performed in a handwriting area of a text note editing interface.
  • the handwriting input content in the handwriting area is saved as an image and displayed in the updated editing interface. Because the handwriting input content is displayed as an image, the handwriting input content and the text content are located on the same layer, avoiding the problem of misalignment between the text content and the handwriting input content after the tablet computer changes shape; and reducing the poor user experience caused by the jump between the editing interface and the handwriting input interface.
  • a tablet computer displays a text note editing interface 1, which includes a text area 1.
  • a user can enter rich text content such as text, symbols, images, tables, hyperlinks, and audio in text area 1.
  • the tablet computer displays a text note editing interface 2, which includes a text area 2 and a handwriting area.
  • the user can enter rich text content such as text, symbols, images, tables, hyperlinks, and audio in text area 2, and the user can write handwritten input content into the handwriting area.
  • Text area 2 corresponds to text area 1, and the rich text content displayed in text area 2 is the same as that displayed in text area 1.
  • the starting positions of text area 2 and text area 1 may be different, and the areas displayed on the screen of text area 2 and text area 1 may also be different.
  • the initial size (e.g., width and height) of the handwriting area in editing interface 2 is a preset value, and the size of the handwriting area can be dynamically adjusted based on the handwriting input content.
  • the size of the handwriting area can also change in response to the user adjusting the boundaries of the handwriting area.
  • the tablet computer 100 displays an editing interface 401 for a text note.
  • the editing interface 401 includes a title bar, an editing area, a toolbar, etc.
  • the title bar includes the title of the text note, the editing time, and classification options.
  • the entire editing area is a text area, such as the text area 11.
  • the user can enter rich text content such as text, symbols, pictures, tables, hyperlinks, and audio in the text area 11.
  • the text area 11 includes the text a.
  • the bottom toolbar includes multiple controls, such as a handwriting option 4021, a text tool 4022, an "add” button 4023, and a "record” button 4024.
  • the dotted box in the editing interface 401 shown in (a) of FIG4A is only used to indicate the area range and is not displayed in actual application.
  • the editing interface 401 can be the editing interface 103 shown in FIG1 .
  • the virtual keyboard 1031 is not displayed.
  • the handwriting option 4021 can be the handwriting option 1032 in FIG1
  • the text tool 4022 can be the text tool 1034 in FIG1
  • the "add” button 4023 can be the “add” button 1035 in FIG1
  • the "record” button 4024 can be the "record” button 1036 in FIG1 .
  • the tablet computer 100 displays an editing interface 403 for text notes, and the editing interface 403 includes a title bar, an editing area, a bottom toolbar, etc.; wherein, the title bar in the editing interface 403 is the same as the title bar in the editing interface 401; the editing area includes a handwriting area 12 and a text area 11 '; the user can write handwriting input content to the handwriting area 12 by handwriting, and the user can input rich text content such as text, symbols, pictures, tables, hyperlinks, audio, etc.
  • the bottom toolbar includes a handwriting tool button, and the user can click the handwriting tool button to select the line thickness, pen shape, color, etc. used for handwriting input in the handwriting area 12.
  • the tablet computer 100 adds the View of the handwriting area 12 to the View corresponding to the editing area, thereby adding a handwriting area to the editing area of the editing interface; accordingly, the display area of the text area in the editing area becomes smaller.
  • the display area of the text area 11' in (b) of Figure 4A is smaller than the display area of the text area 11 in (a) of Figure 4A; the rich text content included in the text area 11' is the same as the rich text content included in the text area 11.
  • the View corresponding to the text area 11' is the View of the text area 11.
  • the handwriting tool button and the handwriting area of the bottom toolbar appear at the same time; that is, when the editing area of the editing interface includes a handwriting area, the bottom toolbar includes a handwriting tool button.
  • the user can input text, numbers, graphics, etc. in the handwriting area 12 by handwriting.
  • a save operation can be performed; for example, the save operation includes clicking an area outside the handwriting area in the editing interface, etc. For example, as shown in FIG4A(c), the user clicks the text area 11'.
  • the tablet computer 100 in response to the user's save operation on the handwriting area 12 (e.g., a click operation in the text area 11 '), displays an editing interface 404 for the text note, wherein the editing area of the editing interface 404 includes the image 13 and the text area 11".
  • the image 13 has the same starting display position (the upper left vertex position of the image) as the handwriting area 12, but the display area of the image 13 is different from that of the handwriting area 12; for example, the height of the image 13 is different from that of the handwriting area 12. For example, there is less handwriting input content in the handwriting area 12, and the height covered by the handwriting track in the handwriting area is less than the height of the handwriting area.
  • the height of the image 13 is determined based on the handwriting input content in the handwriting area.
  • the elements in picture 13 are generated based on the handwriting input content in handwriting area 12. Accordingly, the height of text area 11" is different from that of text area 11', and text area 11" includes character a.
  • the dotted frame in the editing interface 404 shown in FIG. 4B and FIG. 4C is only used to indicate the range of the image 13; in actual application, the dotted frame may not be displayed.
  • a tablet computer displays a first editing interface for a text note.
  • the first editing interface includes a first handwriting image and a second handwriting area.
  • the first editing interface also includes a text area.
  • the tablet computer displays a second editing interface.
  • the second editing interface includes the first handwriting area and the second image.
  • the second editing interface also includes a text area.
  • the first handwriting area corresponds to the first image
  • the second handwriting area corresponds to the second image.
  • the text content in the text area on the second editing interface is the same as the text content in the text area on the first editing interface.
  • the position and size of handwriting area one are determined based on the position and size of picture one, and the handwriting input content within handwriting area one is generated based on the user's handwriting input on handwriting picture one and the information of the handwriting trajectory of handwriting area one saved by the tablet computer; the display position and size of picture two are determined based on the position and size of handwriting area two, and the elements of picture two are generated based on the handwriting trajectory within handwriting area two.
  • the handwriting area 16 is generated based on the image 14.
  • the size (width and height) of the handwriting area 16 is the same as the size (width and height) of the image 14, and the display position of the handwriting area 16 is the same as the display position of the image 14.
  • the handwriting area 16 is generated in response to the user's handwriting input on the image 14, and the handwriting track displayed in the handwriting area 16 is generated based on two parts of the handwriting track, one part of which is generated based on the user's handwriting input on the image 14, and the other part of the handwriting track is the same as the element in the image 14.
  • the handwriting area 16 is generated in response to the user's click operation on the image 14 and is displayed in the handwriting area.
  • the handwriting trace of field 16 is the same as the handwriting trace of the element in picture 14 .
  • the terminal device when a user uses a terminal device, the terminal device may change shape, such as a tablet computer rotating, or a foldable screen mobile phone folding or unfolding.
  • the tablet computer when the tablet computer is displaying a text note editing interface, the tablet computer rotates. It is understandable that after the tablet computer rotates, the text note editing interface will be rearranged according to the change in the screen display area.
  • the display position and size of the handwriting area will change as the screen display area changes.
  • editing interface 403 when tablet computer 100 is in portrait orientation, editing interface 403 is displayed.
  • the editing area of editing interface 403 includes handwriting area 12 and text area 11′; for example, text area 11′ includes the character a; optionally, the title bar of editing interface 403 includes a "title" control, an "unclassified” control, etc.; and the bottom toolbar of editing interface 403 includes multiple handwriting tool buttons, etc.
  • the tablet computer is rotated from portrait to landscape orientation, and tablet computer 100 displays editing interface 407 in landscape orientation.
  • editing interface 407 is obtained by rearranging editing interface 403 based on the screen display area when in landscape orientation.
  • text area 11′ in editing interface 403 corresponds to text area 18 in editing interface 407
  • handwriting area 12 in editing interface 403 corresponds to handwriting area 19 in editing interface 407.
  • the text a, the "title” control, the "unclassified” control, the handwriting toolbar, etc. can be laid out using interface layout rules in conventional technologies.
  • Picture 1 is determined based on the position and size of handwriting area 12.
  • the position of Picture 1 in editing interface 403 is the same as the position of handwriting area 12 in editing interface 403, and the size of Picture 1 is the same as the size of handwriting area 12.
  • the position and size of handwriting area 12 in editing interface 403 can be saved via Picture 1.
  • the position of the upper left corner of Picture 1 is determined based on the position of the upper left corner of handwriting area 12, and the size (e.g., width and height) of Picture 1 is determined based on the size (e.g., width and height) of handwriting area 12.
  • the position and size of the handwriting area included in the text note editing interface when in landscape mode are determined based on Image 1.
  • the position of the top left corner of the handwriting area (handwriting area 19 in FIG. 7A ) included in the editing interface when in landscape mode is determined based on the top left corner of Image 1. It will be appreciated that the layout of the editing interface differs when the tablet computer 100 is in portrait and landscape mode, and the position of the handwriting area 19 in the editing interface when in landscape mode may differ from the position of Image 1 in the editing interface when in portrait mode.
  • the size of the handwriting area 19 is determined based on the size of Image 1.
  • the image 1 is used to determine the position and size of the handwriting area 19 , and the image 1 is not displayed on the screen of the tablet computer 100 ; for example, during the rotation of the tablet computer 100 , a rotation effect is displayed on the screen.
  • the editing interface 408 is generated by laying out the various views (e.g., the text area 11', the image 13, etc.) in the editing interface 404 according to the screen display area when the tablet computer 100 is in landscape orientation. During the process of rotating the tablet computer 100 to display the editing interface 408, no views are deleted or created.
  • the terminal device 100 may include: a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a sensor module 180, a button 190, a camera 191, a display screen 192, etc.
  • the sensor module 180 may include a pressure sensor, a fingerprint sensor, a temperature sensor, a touch sensor, an acceleration sensor, a gyroscope sensor, etc.
  • the structure illustrated in this embodiment does not constitute a specific limitation on the terminal device 100.
  • the terminal device 100 may include more or fewer components than shown, or may combine or separate certain components, or arrange the components differently.
  • the illustrated components may be implemented in hardware, software, or a combination of software and hardware.
  • the controller can be the nerve center and command center of the terminal device 100.
  • the controller can generate operation control signals according to instruction operation codes and timing signals to complete the control of instruction fetching and execution.
  • the wireless communication function of the terminal device 100 can be implemented through the antenna 1, the antenna 2, the mobile communication module 150, the wireless communication module 160, the modem processor and the baseband processor.
  • the terminal device 100 can realize the shooting function through the ISP, camera 191, video codec, GPU, display screen 192 and application processor.
  • the accelerometer can detect the magnitude of acceleration of the terminal device 100 in all directions (generally three axes). When the terminal device 100 is stationary, it can detect the magnitude and direction of gravity. It can also be used to identify the terminal device's posture, which is applicable to applications such as landscape and portrait screen switching and pedometers.
  • the buttons 190 include a power button, a volume button, etc.
  • the buttons 190 may be mechanical buttons or touch buttons.
  • Content provisioning services are used to store and retrieve data and make it accessible to applications.
  • data may include videos, images, audio, calls made and received, browsing history and bookmarks, phone books, etc.
  • the view system includes visual controls, such as those for displaying text and images.
  • the view system is used to build applications.
  • a display interface can be composed of one or more views.
  • a note-taking application might include a text note interface, which might include views for displaying text and images.
  • Resource management services provide various resources for applications, such as localized strings, icons, images, layout files, video files, and so on.
  • Android Runtime includes core libraries and virtual machines. Android runtime is responsible for System scheduling and management.
  • the core library consists of two parts: one is the function that needs to be called by the Java language, and the other is the Android core library.
  • the application layer and application framework layer run in a virtual machine.
  • the virtual machine executes Java files in the application layer and application framework layer as binary files.
  • the virtual machine manages object lifecycles, stack management, thread management, security and exception management, and garbage collection.
  • the system library can include multiple functional modules, such as the surface manager module, the surface flinger (SF) module, the input flinger module, the media library, the 3D graphics processing library (such as OpenGL ES), the 2D graphics engine (such as SGL), etc.
  • functional modules such as the surface manager module, the surface flinger (SF) module, the input flinger module, the media library, the 3D graphics processing library (such as OpenGL ES), the 2D graphics engine (such as SGL), etc.
  • the surface management module is used to manage the display subsystem and provide fusion of 2D and 3D layers for multiple applications.
  • the composition rendering module is responsible for compositing and rendering layers based on the interface display data (e.g., the number of layers included in the interface and the display elements of each layer). Based on the display data, the composition rendering module determines the composition instructions (e.g., OpenGL instructions, HWComposer instructions) corresponding to each display data, invokes the composition instructions to generate each layer of the application interface, and sends them for display.
  • the composition instructions e.g., OpenGL instructions, HWComposer instructions
  • the 3D graphics processing library is used to implement 3D graphics drawing, image rendering, compositing, and layer processing.
  • the kernel layer is the layer between hardware and software.
  • the kernel layer may include display drivers, sensor drivers, keyboard drivers, etc.
  • the sensor driver after receiving a user operation on the screen of the terminal device 100, the sensor driver sends an operation event corresponding to the user operation to the input synthesis module, the input synthesis module sends the operation event to the input management service, and the input management service sends the operation event to the WMS.
  • the WMS determines the application corresponding to the operation event based on the window display position of each application. For example, if the user operation acts on the user interface (editing interface) of the note application, the WMS sends the operation event to the note application.
  • the note application performs corresponding processing based on the operation event, such as updating the interface data of the editing interface.
  • the note application notifies the WMS that the interface data of the editing interface has been updated.
  • the synthesis rendering module synthesizes and renders according to the interface data of the updated editing interface according to the window management rules of the WMS to generate the layer of the updated editing interface; and calls the synthesis instruction to display the layer of the updated editing interface.
  • the editing interface 401 in FIG4A(a) takes the editing interface 401 in FIG4A(a) as an example.
  • the root node is decorView.
  • DecorView's child nodes include ViewContainer 1.
  • ViewContainer 1's child nodes include WebView 1.
  • WebView 1 is the View corresponding to text area 11.
  • child nodes, such as image files and audio files, can be added to WebView 1; this allows rich text content, such as images and audio, to be added to text area 11.
  • S1002 In response to a user clicking a handwriting button, the sensor driver sends a click event to an input synthesis module.
  • the bottom toolbar of the editing interface 401 includes a handwriting option 4021.
  • the user can click the handwriting option 4021 to create a handwriting area on the editing interface 401.
  • a sensor detects a user's click operation on the screen, and the sensor driver generates a click event based on the click operation and reports the click event to the input synthesis module; optionally, the click event includes the location of the click operation, the intensity of the click operation, etc.
  • click operations include down operations and up operations.
  • the sensor driver generates a down event based on the down operation and an up event based on the up operation; the sensor driver sending the click event to the input synthesis module includes sending a down event and an up event.
  • the input synthesis module sends a click event to the input management service, and the input management service sends the click event to the WMS.
  • the WMS determines that the foreground application is the note application based on the window currently gaining focus, and sends the click event to the note application for processing.
  • the note application generates a canvas view (HandView) corresponding to the handwriting area and adds the canvas view (HandView) to Activity 1.
  • an image file 1 is also generated, which includes information about picture 1, such as the size of picture 1, elements of picture 1, etc.
  • the size of picture 1 is the same as the display size of HandView, and the elements of picture 1 are empty (i.e., picture 1 is a blank image).
  • Image file 1 is added to WebView 1 to add a blank picture to the text area, and the size of the blank picture is the same as the display size of HandView.
  • the display position of the blank picture is also the same as the display position of HandView. In this way, it can be achieved that as the handwriting area is added to the editing area, the display position of the text in the text area is changed.
  • the display position of the text a moves downward.
  • the note application stores the updated data of Activity 1 into the Graphic Buffer of the system library and notifies WMS that Activity 1 has been updated.
  • the note-taking app also notifies WMS that Activity 1 has been updated.
  • the synthesis and rendering module obtains the configuration information of the current image frame from the WMS, synthesizes and renders based on the configuration information and the data of the updated Activity 1 saved in the Graphic Buffer, and generates the layer of the updated editing interface.
  • the synthesis rendering module sends the updated layer of the editing interface to the display driver, and the display driver displays the updated editing interface (editing interface 2) on the display screen according to the updated layer of the editing interface.
  • the second editing interface is the editing interface 403 shown in FIG4A(b).
  • the handwriting area is saved in the editing interface in the form of a picture.
  • tablet computer 100 displays editing interface 403 , which includes handwriting area 12 .
  • the touch sensor detects a click operation by the user on the display screen, which is performed on an area outside handwriting area 12 in editing interface 403 .
  • the input synthesis module sends a second click event to the input management service, and the input management service sends the second click event to the WMS.
  • the WMS sends a second click event to the note application.
  • the note application generates image file one based on the hand view in activity 1, adds image file one to activity 1, and deletes the hand view from activity 1.
  • the size of Image 1 is the same as the display size of HandView, and the elements of Image 1 are generated based on the handwriting trajectory on HandView.
  • the canvas view (HandView) is the View corresponding to handwriting area 12
  • Image 1 is Image 13
  • Image 13 is the same size as handwriting area 12.
  • the elements of Image 13 are the handwriting trajectory within handwriting area 12.
  • a binary file is generated based on the handwriting track on HandView, and the binary file stores the information of the handwriting track on HandView.
  • the handwriting track in the handwriting area can be restored according to the binary file.
  • the note application stores the updated data of Activity 1 into the Graphic Buffer of the system library and notifies WMS that Activity 1 has been updated.
  • the third editing interface is the editing interface 404 shown in FIG. 4B .
  • the user interface after the terminal device undergoes morphological changes such as rotation, folding, and unfolding, the user interface will be rearranged, and the various controls in the editing interface, such as text, pictures, handwriting areas, etc., will change their display positions according to the screen display area after the morphological change.
  • morphological changes such as rotation, folding, and unfolding
  • FIG11A shows a flow chart of a terminal device rotating in a method for displaying input content provided by an embodiment of the present application. As shown in FIG11A , the method includes:
  • the note application notifies the WMS to create Activity 1.
  • the note application registers a direction listener with the WMS.
  • the note-taking application calls the onCreate function to notify WMS to create Activity 1.
  • S1104 The sensor driver periodically reports the posture or orientation information of the terminal device to the WMS.
  • the orientation of the terminal device When the angle between the orientation of the terminal device and the positive direction of the Z-axis is less than a preset threshold, the orientation of the terminal device is upward; when the angle between the orientation of the terminal device and the negative direction of the Z-axis is less than a preset threshold, the orientation of the terminal device is downward; when the angle between the orientation of the terminal device and the positive direction of the X-axis is less than a preset threshold, the orientation of the terminal device is rightward; when the angle between the orientation of the terminal device and the negative direction of the X-axis is less than a preset threshold, the orientation of the terminal device is leftward.
  • the direction of the terminal device can be represented by a direction flag, where a direction flag of 0 represents upward, a direction flag of 1 represents rightward, a direction flag of 2 represents downward, and a direction flag of 3 represents leftward.
  • the orientation of the terminal device may be determined based on the posture of the terminal device.
  • the WMS determines, based on the posture or orientation information of the terminal device, that the orientation of the terminal device has changed, that is, determines that the terminal device has rotated.
  • the WMS receives posture information of the terminal device and determines the orientation of the terminal device according to the posture information.
  • the WMS determines that the terminal device has rotated.
  • the WMS After determining that the terminal device has rotated, the WMS sends configuration change information to the note application.
  • the window management service upon determining that the terminal device has rotated, the window management service sends a configuration change message to the note-taking application.
  • the WMS calls the onConfigureChanged() function to send the configuration change message to the note-taking application, which carries the current orientation information of the terminal device.
  • the terminal device displays the second editing interface of the text note.
  • the second editing interface is the editing interface 403, and the editing interface 403 includes the handwriting area 12.
  • Activity 1 includes a canvas view (HandView).
  • the note application generates image file one based on the hand view in activity 1, adds image file one to activity 1, and deletes the hand view from activity 1.
  • the note application stores the updated data of Activity 1 into the Graphic Buffer of the system library and notifies WMS that Activity 1 has been updated.
  • the layer of the editing interface is not displayed on the screen of the terminal device, and a rotation animation is displayed instead.
  • the rotation animation can be generated based on a screenshot of the screen display interface when the terminal device starts to rotate.
  • the layer of the rotation animation is displayed above the layer of the editing interface.
  • the note application re-layouts Activity 1 according to the interface layout rules corresponding to the current orientation of the terminal device.
  • the editing interface 403 includes a text area 11, a handwriting area 12, a title bar, a bottom toolbar, etc.; correspondingly, Activity 1 includes WebView 1, an image file 1, a ViewGroup 1 corresponding to the title bar, a ViewGroup 2 corresponding to the bottom toolbar, etc.
  • WebView 1, ViewGroup 1 corresponding to the title bar, ViewGroup 2 corresponding to the bottom toolbar, etc. can be based on the interface layout rules after the terminal device is rotated and using conventional technologies. The scheme is rearranged and will not be described in detail in the embodiments of this application.
  • image file one includes information about picture one, such as the display position and size of picture one; the display position and size of picture one are determined based on the display position and size of the handwriting area 12.
  • the note application generates canvas view 2 (HandView 2), and HandView 2 corresponds to the handwriting area after the terminal device is rotated.
  • the display position and size of HandView 2 are determined based on the display position and size of picture one.
  • the position of the upper left vertex of picture one is determined as the display position of the upper left vertex of HandView 2
  • the height of picture one is determined as the height of HandView 2.
  • a handwriting track on HandView 2 is generated based on the information of the handwriting track saved on HandView. In this way, the display position, size, and display content (handwriting track) of HandView 2 are determined.
  • HandView 2 is added to ViewContainer 1 of Activity 1.
  • the child nodes of ViewContainer 1 include WebView 1, canvas view 2 (HandView 2), etc.
  • the synthesis and rendering module obtains the configuration information of the current image frame from the WMS, synthesizes and renders based on the configuration information and the data of the updated Activity 1 saved in the Graphic Buffer, and generates the layer of the updated editing interface.
  • the synthesis rendering module sends the updated layer of the editing interface to the display driver, and the display driver displays the updated editing interface (editing interface three) on the display screen according to the updated layer of the editing interface.
  • the editing interface 407 (editing interface 3) is displayed.
  • the editing interface 407 includes a handwriting area 19 (HandView 2).
  • the handwriting area 19 is a handwriting area corresponding to the handwriting area 12.
  • a handwriting area is displayed on an editing interface in the form of an image
  • the editing interface is updated in response to a user's handwriting input in the handwriting area (in the form of an image), and the handwriting image is replaced with an editable handwriting area.
  • tablet computer 100 displays editing interface 404, where editing interface 404 includes image 13; in response to a user's handwriting input on image 13, tablet computer 100 displays editing interface 403, where editing interface 403 includes handwriting area 12.
  • tablet computer 100 displays editing interface 405, where editing interface 405 includes image 14 and handwriting area 15; in response to a user's handwriting input on image 14, tablet computer 100 displays editing interface 406, where editing interface 406 includes handwriting area 16 and image 17; wherein handwriting area 16 corresponds to image 14, and image 17 corresponds to handwriting area 15.
  • the text area of the editing interface includes Picture 1 (for example, Picture 13), which is a handwritten picture. Accordingly, ViewContainer 1 in Activity 1 includes WebView 1, WebView 1 includes image file 1, and image file 1 includes information about Picture 1.
  • the editing interface is updated. After the editing interface is updated, Picture 1 is deleted and a handwriting area is added. Accordingly, Image file 1 is deleted in WebView 1 of Activity 1, and HandView is added to ViewContainer 1. HandView is the View corresponding to the handwriting area.
  • the handwriting area has not yet been generated. That is, the HandView has not yet been added to ViewContainer 1. Therefore, the canvas view (HandView) corresponding to the handwriting area will not receive input events corresponding to handwriting input. This will cause the first handwriting input stroke to be lost, and the first handwriting stroke cannot form a handwriting track within the handwriting area.
  • the web view receives the input event on the handwriting picture, and the web view stores the received input event in the blocking queue, that is, the web view is the event production sub-thread of the blocking queue.
  • the canvas view can receive and process the input event.
  • the canvas view takes out the input event from the blocking queue.
  • the canvas view processes the input events in the chronological order of the input events and draws the handwriting according to the input events, so that the user's handwriting input on the handwriting picture (such as the first stroke of the handwriting input) can be avoided from being lost.
  • the canvas view of the handwriting area process the input event corresponding to the received handwriting input, draw the handwriting handwriting according to the input event, and generate the handwriting input content.
  • the web page view receives the input event corresponding to the handwriting input on the handwritten image, and saves the input event corresponding to the handwriting input on the handwritten image to the blocking queue.
  • the canvas view takes out the input event from the blocking queue and draws the handwriting according to the input event.
  • the tablet computer 100 displays an editing interface 405, which includes a picture 14, which is a handwritten picture; the editing interface 405 also includes a handwriting area 15.
  • the transition layer is set to be visible.
  • the note application draws handwriting on the transition layer according to the handwriting input on the picture 14, and the handwriting is displayed on the screen through the transition layer.
  • the handwriting area 16 is added to the updated editing interface (editing interface 406).
  • the note application draws handwriting on the canvas view of the handwriting area according to the handwriting input.
  • the transition layer is set to invisible, and the handwriting can be displayed on the screen through the canvas view of the handwriting area.
  • the handwriting is drawn on the transition layer.
  • the transition layer becomes invisible and the handwriting is drawn on the canvas view. Because the transition layer is pre-drawn, drawing handwriting on the transition layer takes less time, effectively shortening the time between the user's handwriting input and the display showing the handwriting, improving the tracking of the user's handwriting input.
  • FIG14 shows a flow chart of a method for displaying input content provided by an embodiment of the present application when a user starts handwriting input on a handwritten picture.
  • the method includes:
  • the terminal device When a user enters handwriting on handwritten image 1, the terminal device displays editing interface 4, which includes text area 1 and handwritten image 1. Taking the scenario shown in FIG6 as an example, tablet computer 100 displays editing interface 405, which includes image 14, which is a handwritten image. Editing interface 405 also includes handwriting area 15.
  • input events may include a down event, an up event, a move event, etc.
  • the sensor driver When the sensor detects a down operation, the sensor driver generates a down event and sends the down event to the input management service, which then sends the down event to the window management service.
  • the sensor driver When the sensor detects a up operation, the sensor driver generates an up event and sends the up event to the input management service, which then sends the up event to the window management service.
  • the sensor detects a move operation the sensor driver generates a move event and sends the move event to the input management service, which then sends the move event to the window management service.
  • the window management service sends an input event to the note application.
  • the window management service determines that the foreground application is the note application based on the currently focused window and sends the click event to the note application for processing.
  • the window management service calls the onTouchEvent function, which sends the input event to the note application through ViewRootlmpl.java.
  • Each time the note-taking application receives an input event it calls the obtainevent function to save the input event to the blocking queue.
  • the root node in the View tree structure corresponding to the Activity corresponding to the editing interface of the note application receives the input event, and distributes the input event downward step by step according to the hierarchy in the View tree structure.
  • the input event is sent to the web view (WebView) corresponding to the text area, and the web view (WebView) stores the input event in a blocking queue as an event generation sub-thread.
  • the input event corresponding to the handwriting input on the handwriting picture is stored in the blocking queue; after the handwriting area is successfully created, the canvas view (HandView) corresponding to the handwriting area can obtain the input event from the blocking queue and draw the handwriting according to the input event, thereby avoiding the loss of handwriting input on the handwriting picture (such as the first stroke of handwriting input).
  • a user's input action on the display screen may include multiple input events.
  • the process of a user inputting a piece of handwriting on the display screen by handwriting may include a down event, multiple move events, and an up event; wherein, the input of the starting point of a piece of handwriting corresponds to a down event, and the input of the end point of a piece of handwriting corresponds to an up event.
  • a user's two-finger pressing action on the display screen corresponds to two consecutive down events.
  • a user's two-finger dragging action on the display screen corresponds to a down event, a move event, a down event, a move event...
  • the note application saves each input event after receiving it, so that the user's input action can be judged based on multiple input events.
  • S1404 If a press event is received, the note application determines the location of the press event. If the location of the press event is on handwritten image 1, S1405 is executed; if the location of the press event is not on handwritten image 1, the web view processes the press event.
  • the terminal device displays an editing interface 4 of a note application, and the editing interface 4 includes a text area 1, which is implemented by a web view (WebView) 1.
  • the editing interface 4 also includes a handwritten picture 1, which is Optionally, the image file 1 is a child node of WebView 1.
  • the editing interface 4 also includes a handwriting area 2, which is implemented by a canvas view (HandView) 3.
  • HandView 3 and WebView 1 are both child nodes of ViewContainer 1.
  • S1405 If a motion event is received, the note-taking application determines the location of the motion event. If the motion event is located on handwritten image 1 and the number of motion events on handwritten image 1 is greater than a preset value, S1406-S1407, S1411-S1412, and S1421 are executed.
  • the note application determines the effective position of the motion event. For example, the note application calls the function getCurrentClickedImage to traverse the handwritten images in the text area and determines on which handwritten image the effective position of the motion event is located.
  • the number of motion events continuously received on handwritten image 1 is determined. If it is determined that the number of motion events continuously received on handwritten image 1 is greater than a preset value (e.g., the preset value is 2), steps S1406-S1407, S1411-S1412, and S1421 are executed. For example, the function onClickImageAtGraffitiMode is called to execute steps S1406-S1407, S1411-S1412, and S1421.
  • a preset value e.g., the preset value is 2
  • steps S1406-S1407, S1411-S1412, and S1421 are executed. For example, the function onClickImageAtGraffitiMode is called to execute steps S1406-S1407, S1411-S1412, and S1421.
  • the web page view processes the move event.
  • the note application creates handwriting area one based on handwriting picture one.
  • the note-taking application calls the switchHandWritingView function to create handwriting area 1.
  • the note-taking application also generates handwriting image 2 based on handwriting area 2.
  • handwriting area 16 is created based on handwriting image 14.
  • handwriting image 17 is generated based on handwriting area 15.
  • the note application calls the function saveAndExitAsync to close the canvas view corresponding to handwriting area 2 (handwriting area 15), and calls the function addHandWritingLayout to create the canvas view corresponding to handwriting area 1 (handwriting area 16) based on the handwriting picture 1 (picture 14).
  • the note application can close the canvas view corresponding to handwriting area 2 and create the canvas view corresponding to handwriting area 1 asynchronously, that is, there is no need to wait for the action of closing the canvas view corresponding to handwriting area 2 to be completed before creating the canvas view corresponding to handwriting area 1.
  • the note application also deletes the image file corresponding to picture 1 (picture 14) and generates an image file corresponding to picture 2 (picture 17) based on handwriting area 2 (handwriting area 15).
  • the canvas view corresponding to the handwriting area can receive the input event corresponding to the handwriting input and draw the handwriting track (handwriting input content) according to the user's handwriting input (input event).
  • the canvas view corresponding to the handwriting area 1 is used as a consumer of the blocking queue
  • the child thread reads the input events in the blocking queue, the note-taking application draws the handwriting on the canvas view based on the input events, and then deletes the processed input events in the blocking queue.
  • the transition layer reads input events in the blocking queue and draws handwriting tracks according to the input events.
  • a note-taking app calls the onTouchEvent function, within which the transition layer calls the drawOneTransferredEvents function to consume the input event. Specifically, the transition layer reads the input event from the blocking queue (before it is removed from the blocking queue by the canvas view) and draws the handwriting trajectory based on the input event.
  • the handwriting generated by the handwriting input is displayed on the screen through a transition layer.
  • This pre-drawn transition layer reduces the delay compared to drawing the handwriting trajectory on the canvas view, providing users with a more responsive experience.
  • the embodiment of the present application can divide the functional modules of the terminal device according to the above method example.
  • each functional module can be divided according to each function, or two or more functions can be integrated into one processing module.
  • the above integrated modules can be implemented in the form of hardware or software functional modules. It should be noted that the division of modules in the embodiment of the present application is schematic and is only a logical The division is based on editing functions, and there may be other division methods in actual implementation.
  • the terminal device 2000 includes: a processing unit 2010 , a storage unit 2020 , a display unit 2030 and a sensor unit 2040 .
  • the unit modules in the terminal device 2000 include, but are not limited to, the processing unit 2010, storage unit 2020, display unit 2030, and sensor unit 2040.
  • the terminal device 2000 may also include a communication unit, a power supply unit, an audio unit, etc.
  • the communication unit is used for the terminal device 2000 to communicate with other electronic devices; the power supply unit is used to supply power to the terminal device 2000; and the audio unit is used to play audio.
  • the processing unit 2010 may be a processor or controller, such as a central processing unit (CPU), a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field programmable gate array (FPGA), or other programmable logic devices, transistor logic devices, hardware components, or any combination thereof.
  • the storage unit 2020 may be a memory, etc.
  • the display unit 2030 may be a display screen, etc.
  • the sensor unit 2040 may include a touch sensor, a pressure sensor, an acceleration sensor, a gyroscope sensor, etc.
  • the processing unit 2010 is a processor (such as the processor 110 shown in Figure 8), the storage unit 2020 can be a memory (such as the internal memory 121 shown in Figure 8), the display unit 2030 can be a display screen (such as the display screen 192 shown in Figure 8), and the sensor unit 2040 can be a sensor module (such as the sensor module 180 shown in Figure 8).
  • the terminal device 2000 provided in the embodiment of the present application can be the terminal device 100 shown in Figure 8.
  • the above-mentioned processor, memory, display screen, sensor, etc. can be connected together, for example, via a bus.
  • the processor calls the program code stored in the memory to execute the various steps in the above method embodiment.
  • An embodiment of the present application also provides a chip system, which includes at least one processor and at least one interface circuit.
  • the processor and the interface circuit can be interconnected through lines.
  • the interface circuit can be used to receive signals from other devices (such as the memory of an electronic device).
  • the interface circuit can be used to send signals to other devices (such as a processor).
  • the interface circuit can read instructions stored in the memory and send the instructions to the processor.
  • the terminal device can execute the various steps in the above embodiments.
  • the chip system can also include other discrete devices, which is not specifically limited in the embodiment of the present application.
  • An embodiment of the present application also provides a computer-readable storage medium, which includes computer instructions.
  • the computer instructions When the computer instructions are executed on the above-mentioned electronic device, the electronic device executes the various functions or steps executed by the terminal device in the above-mentioned method embodiment.
  • the units described as separate components may or may not be physically separate, and the components shown as units may be one physical unit or multiple physical units, that is, they may be located in one place or distributed in multiple places. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.
  • the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a readable storage medium.
  • the technical solution of the embodiment of the present application, or the part that contributes to the prior art, or all or part of the technical solution can be embodied in the form of a software product, which is stored in a storage medium and includes several instructions for enabling a device (which can be a single-chip microcomputer, chip, etc.) or a processor to execute all or part of the steps of the method described in each embodiment of the present application.
  • the aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM), random access memory (RAM), magnetic disk or optical disk, and other media that can store program code.

Landscapes

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

Abstract

本申请公开了一种显示输入内容的方法及电子设备，涉及终端技术领域。响应于在文本笔记的编辑界面上的第一操作，在编辑界面添加一个手写区域。用户可以在该手写区域通过手写方式输入内容。响应于用户的第二操作，手写区域被删除，编辑界面上第一手写显示区域显示手写方式输入的内容。响应于在第一手写显示区域的第三操作，手写区域又被显示于编辑界面上，用户可以继续通过手写方式向手写区域输入内容。期间，编辑界面中文本内容始终被显示。减少了界面跳转，给用户带来较流畅的使用体验。并且，生成编辑界面前，手写输入内容与文本内容不会对应不同的图层；避免了文本内容与手写输入内容位于不同图层导致平板电脑发生形态变化后显示错位的问题。

Description

显示输入内容的方法及电子设备 技术领域
本申请实施例涉及终端技术领域，尤其涉及一种显示输入内容的方法及电子设备。
背景技术
一般来说，终端设备都支持笔记应用。用户可以使用笔记应用记录文字、图片、音频等信息。
随着笔记应用功能越来越强大，笔记应用的使用体验也越来越丰富。例如，用户可以在笔记应用的文本笔记中通过键盘录入文本，通过复制粘贴录入剪贴板中内容，添加超链接，添加图片、音频等，还可以通过手写方式写入文字、图形等内容。
通过手写方式输入内容方便快捷，可以根据用户需要任意输入文字、图形等，受到用户欢迎；但是目前笔记应用中手写输入还存在一些缺陷。如何优化笔记应用的手写交互流程，提高用户使用笔记应用的体验，是需要解决的一个问题。
发明内容
本申请实施例提供一种显示输入内容的方法及电子设备，对笔记应用的手写输入内容的显示方式进行了优化，提高用户采用手写方式输入内容的使用体验。
为达到上述目的，本申请的实施例采用如下技术方案：
第一方面，提供了一种显示输入内容的方法，应用于电子设备，例如，该电子设备为终端设备。以终端设备为例，该方法包括：终端设备显示第一界面；第一界面包括第一文本区域，第一文本区域包括第一文本内容；响应于对第一界面中第一选项的第一操作，创建第一视图，显示第二界面；第二界面包括第一手写区域和第二文本区域，第二文本区域包括该第一文本内容，第一视图对应第一手写区域。响应于在第一手写区域的第一手写输入，第一手写输入内容被显示于第一手写区域。响应于在第二界面的第二操作(例如对第二界面中第一手写区域之外的区域的点击操作)，删除第一视图，显示第三界面；第三界面包括第一手写显示区域和第三文本区域，第一手写显示区域包括第一手写输入内容，第三文本区域包括第一文本内容。响应于在第三界面的第一手写显示区域的第三操作，创建第二视图，显示第四界面；第四界面包括第一手写区域和第二文本区域，第二视图对应第一手写区域。
在该方法中，响应于用户在文本笔记的编辑界面上的第一操作，在文本笔记的编辑界面添加了一个手写区域。用户可以在该手写区域通过手写方式输入内容。响应于用户的第二操作，例如对手写区域之外区域的点击操作，该手写区域被删除，文本笔记的编辑界面上第一手写显示区域显示用户在手写区域通过手写方式输入的内容。响应于用户在第一手写显示区域的第三操作，手写区域又被显示于编辑界面上，用户可以继续通过手写方式向手写区域输入内容。期间，第一文本内容始终被显示于编辑界面。给用户带来较流畅的使用体验，减少了编辑界面与手写输入界面的跳转给用户带来的较差体验。并且，编辑界面包括手写显示区域和文本区域，手写输入内容在手写显示区域进行显示，文本内容在文本区域进行显示；生成编辑界面前，手写输入内容 与文本内容不会对应不同的图层；避免了文本内容与手写输入内容位于不同图层导致平板电脑发生形态变化后显示错位的问题。
在一种可能的实施方式中，响应于在第二界面的第二操作，还创建第二图像，第二图像对应第三界面中第一手写显示区域。第一手写显示区域包括第一手写输入内容。可选的，第二图像可以是图片。
也就是说，在第二界面中，第一手写输入内容以图片形式进行保存，图片也属于富文本内容，与其他文本内容位于同一图层。这样就可以避免手写输入内容与文本内容位于不同图层带来的显示错位问题。
结合第一方面，在一种可能的实施方式中，第三操作包括第二手写输入，响应于在第三界面的第一手写显示区域的第二手写输入，第二手写输入内容被显示于第四界面的第一手写区域。
在该方法中，用户可以直接在手写图片(第一手写显示区域)上开始手写输入。响应于用户在手写图片上的手写输入，手写图片被删除，手写区域对应的视图(第二视图)被创建。
在一种可能的实施方式中，第四界面是基于预设图层(即过渡图层，该过渡图层是预先绘制的)和第二视图所在图层生成的，可选的，第四界面包括预设图层和第二视图所在图层；预设图层位于第二视图所在图层之上。响应于在第三界面的第一手写显示区域的第二手写输入，将过渡图层设置为可见。在预设图层生成第二手写输入内容，第二手写输入内容就被显示于第四界面的第一手写区域。
由于过渡图层是预先绘制的，不是在接收到第二手写输入后才创建的，被绘制于过渡图层的第二手写输入内容在创建第二视图之前就可以被显示，这样，在第四界面中第一手写区域对应的视图被成功创建前，第二手写输入对应的笔迹就可以通过过渡图层被显示在屏幕上。由于过渡图层是预先绘制好的，在过渡图层上绘制第二手写输入内容耗时较短，能够有效缩短用户进行手写输入与显示屏显示第二手写输入内容之间的时间间隔，提高了用户手写输入的跟手性。
在创建第二视图后，第二视图就可以接收到用户手写输入对应的输入事件，对输入事件进行处理，在第二视图所在图层生成第二手写输入内容。在第二视图所在图层生成第二手写输入内容后，且没有正在发生手写输入的情况下，将过渡图层设置为不可见。第二手写输入内容可以通过第二视图在屏幕上被显示出来。后续，第二视图就可以处理用户在第一手写区域内进行手写输入产生的输入事件，在第一手写区域内显示手写输入内容。
结合第一方面，在一种可能的实施方式中，在显示第二界面的情况下，响应于终端设备发生形态变化(例如形态变化包括：旋转、折叠或展开等)，删除第一视图；在删除第一视图后，创建第三视图，显示第五界面；第五界面包括第二手写区域和第四文本区域，第三视图对应第二手写区域，第二手写区域包括第一手写输入内容，第四文本区域包括第一文本内容。
在该方法中，当包括手写区域的编辑界面(例如第二界面)发生形态变化时，删除形态变化前手写区域对应的视图，根据形态变化后的屏幕布局重新生成手写区域对应的视图。重新生成的视图(第三视图)根据形态变化后的布局规则进行布局。
响应于终端设备发生形态变化，删除第一视图前，还根据第一视图生成第一图像，可选的，第一图像可以是图片；这样就可以根据第一图像和终端设备发生形态变化后的屏幕显示区域生成第三视图。通过第一图像记录了第一手写区域在屏幕中的显示位置和尺寸。
结合第一方面，在一种可能的实施方式中，在显示第三界面的情况下，响应于终端设备发生形态变化，显示第六界面；第六界面包括第二手写显示区域和第五文本区域，第二手写显示区域包括第一手写输入内容，第五文本区域包括第一文本内容；从终端设备发生形态变化到显示第六界面的过程中，没有删除视图或创建视图。
在该方法中，第三界面包括第一手写显示区域和第三文本区域，在终端设备发生形态变化后，第六界面是根据屏幕显示区域对第三界面中各个视图进行了界面布局生成的，第一手写显示区域对应第二手写显示区域，第三文本区域对应第五文本区域；没有删除视图或创建视图。
结合第一方面，在一种可能的实施方式中，第三操作包括点击操作，第四界面与第二界面相同。可选的，第四界面与第二界面相同，也可以是第四界面为第二界面。其中，状态栏不属于界面；也就是说，如果两个界面仅状态栏不同，表示两个界面相同。
在该方法中，用户可以点击手写图片(第一手写显示区域)，使得第一手写区域被显示于编辑界面，这样就可以继续在第一手写区域内进行手写输入。
结合第一方面，在一种可能的实施方式中，第三界面还包括第三手写区域，第三手写区域包括第三手写输入内容，第四界面还包括第三手写显示区域，第三手写显示区域包括第三手写输入内容，响应于在第三界面的第一手写显示区域的第三操作，还创建第三图像，第三图像对应第三手写显示区域。可选的，第三图像可以是图片。
在该方法中，编辑界面包括手写区域和手写图片(手写显示区域)，响应于用户对手写图片的第三操作，手写区域以手写图片的形式进行展示。
结合第一方面，在一种可能的实施方式中，第一手写显示区域与第一手写区域为屏幕上相同的显示区域。
在该方法中，给用户带来手写显示区域与手写区域是同一区域的体验，避免了给用户带来手写区域发生跳转的使用体验。
结合第一方面，在一种可能的实施方式中，第一文本内容包括文字、图片、音频、表格、超链接中至少一项。也就是说，文本区域可以包括富文本内容。
第二方面，提供了一种电子设备，该电子设备具有实现上述第一方面所述方法的功能。该功能可以通过硬件实现，也可以通过硬件执行相应的软件实现。该硬件或软件包括一个或多个与上述功能相对应的模块。
第三方面，提供了一种电子设备，包括：处理器、存储器、显示屏，该存储器用于存储计算机执行指令，当该电子设备运行时，该处理器执行该存储器存储的该计算机执行指令，以使该电子设备执行如上述第一方面中任意一种可能的实施方式所述的方法。
第四方面，提供了一种计算机可读存储介质，该计算机可读存储介质中存储有指令，当其在计算机上运行时，使得计算机可以执行上述第一方面中任意一种可能的实 施方式所述的方法。
第五方面，提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机可以执行上述第一方面中任意一种可能的实施方式所述的方法。
其中，第二方面至第五方面中任一种可能的实施方式所带来的技术效果可参见第一方面中不同实施方式所带来的技术效果，此处不再赘述。
附图说明
图1为平板电脑上笔记应用的一种用户界面示意图；
图2为一种笔记应用中手写交互方法的场景实例示意图；
图3为一种笔记应用中手写交互方法的场景实例示意图；
图4A为本申请实施例提供的显示输入内容的方法的一种场景实例示意图；
图4B为本申请实施例提供的显示输入内容的方法的一种场景实例示意图；
图4C为本申请实施例提供的显示输入内容的方法的一种场景实例示意图；
图5A为本申请实施例提供的显示输入内容的方法的一种场景实例示意图；
图5B为本申请实施例提供的显示输入内容的方法的一种场景实例示意图；
图6为本申请实施例提供的显示输入内容的方法的一种场景实例示意图；
图7A为本申请实施例提供的显示输入内容的方法的一种场景实例示意图；
图7B为本申请实施例提供的显示输入内容的方法的一种场景实例示意图；
图8为本申请实施例提供的显示输入内容的方法所适用的终端设备的一种硬件结构示意图；
图9为本申请实施例提供的显示输入内容的方法所适用的终端设备的一种软件架构示意图；
图10A为本申请实施例提供的显示输入内容的方法中在文本笔记的编辑界面新增一个手写区域的流程示意图；
图10B为本申请实施例提供的显示输入内容的方法中手写区域转换为手写图片的流程示意图；
图11A为本申请实施例提供的显示输入内容的方法中终端设备发生旋转的流程示意图；
图11B为本申请实施例提供的显示输入内容的方法中终端设备朝向的一种示意图；
图12为本申请实施例提供的显示输入内容的方法的一种流程示意图；
图13为本申请实施例提供的显示输入内容的方法的一种场景实例示意图；
图14为本申请实施例提供的显示输入内容的方法的一种流程示意图；
图15为本申请实施例提供的一种终端设备结构组成示意图。
具体实施方式
在本申请实施例的描述中，以下实施例中所使用的术语只是为了描述特定实施例的目的，而并非旨在作为对本申请的限制。如在本申请的说明书和所附权利要求书中所使用的那样，单数表达形式“一种”、“所述”、“上述”、“该”和“这一”旨在也包括例如“一个或多个”这种表达形式，除非其上下文中明确地有相反指示。还应当理解，在本申请以下各实施例中，“至少一个”、“一个或多个”是指一个或两个以上(包含两个)。术语“和/或”，用于描述关联对象的关联关系，表示可以存在 三种关系；例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B的情况，其中A、B可以是单数或者复数。字符“/”一般表示前后关联对象是一种“或”的关系。
在本说明书中描述的参考“一个实施例”或“一些实施例”等意味着在本申请的一个或多个实施例中包括结合该实施例描述的特定特征、结构或特点。由此，在本说明书中的不同之处出现的语句“在一个实施例中”、“在一些实施例中”、“在其他一些实施例中”、“在另外一些实施例中”等不是必然都参考相同的实施例，而是意味着“一个或多个但不是所有的实施例”，除非是以其他方式另外特别强调。术语“包括”、“包含”、“具有”及它们的变形都意味着“包括但不限于”，除非是以其他方式另外特别强调。术语“连接”包括直接连接和间接连接，除非另外说明。“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。
在本申请实施例中，“示例性的”或者“例如”等词用于表示作例子、例证或说明。本申请实施例中被描述为“示例性的”或者“例如”的任何实施例或设计方案不应被解释为比其它实施例或设计方案更优选或更具优势。确切而言，使用“示例性的”或者“例如”等词旨在以具体方式呈现相关概念。
本申请实施例提供的显示输入内容的方法可以应用于支持手写输入的电子设备。例如，电子设备可以为终端设备。上述终端设备可以包括手机、平板电脑、笔记本电脑、个人电脑(personal computer，PC)、超级移动个人计算机(ultra-mobile personal computer，UMPC)、手持计算机、上网本、智能家居设备(比如，智能电视、智慧屏、大屏、智能音箱、智能空调等)、个人数字助理(personal digital assistant，PDA)、可穿戴设备(比如，智能手表、智能手环等)、车载设备、虚拟现实设备等，本申请实施例对此不做任何限制。
在一种示例中，终端设备上安装有笔记应用。示例性的，以终端设备是平板电脑为例，图1示出了平板电脑上笔记应用的一种用户界面示意图。可以理解的，在不同的终端设备上，笔记应用可以有不同名称，例如，笔记本、记事本等。
参考图1，平板电脑100显示笔记应用的用户界面101，用户界面101包括“添加”按钮102。响应于用户对“添加”按钮102的点击操作，“文本笔记”选项1021、“手写笔记”选项1022等被显示在用户界面101上。用户可以点击“文本笔记”选项1021，创建一个文本笔记，平板电脑100显示文本笔记的编辑界面；用户可以在文本笔记的编辑界面上输入文本、符号、图片、音频、超链接等，用户还可以在文本笔记的编辑界面上通过手写输入内容(例如文字、图形等)。用户可以点击“手写笔记”选项1022，创建一个手写笔记；用户可以在手写笔记的用户界面(画布)上通过手写输入文字、图形等。
示例性的，如图1所示，响应于对“文本笔记”选项1021的点击操作，平板电脑100显示文本笔记的编辑界面103，可选地，用户通过点击“文本笔记”选项1021可以创建一个文本笔记；编辑界面103包括文本区域，用户可以在文本区域内输入文字、符号、图片、超链接、音频等富文本内容。在一种实现方式中，编辑界面103包括虚拟键盘1031，用户可以通过点击虚拟键盘1031中的虚拟按键向编辑界面103的文本 区域输入文字、数字、符号等富文本内容；在另一种实现方式中，终端设备包括输入装置，例如键盘，用户可以通过键盘向编辑界面103的文本区域输入文字、数字、符号等富文本内容。
在一种实现方式中，编辑界面103包括手写选项1032，用户点击手写选项1032后，可以在编辑界面103的手写区域进行手写输入；平板电脑100接收到用户在手写区域的手写输入后，手写区域会显示用户的手写轨迹(文字、数字、符号、图形等)；用户手写输入产生的手写轨迹会被保留在手写区域，不会在手写轨迹绘制结束时消失。
示例性的，在一些实现方式中，编辑界面103还包括其他控件，例如，编辑界面103还包括“收起”按钮1033，响应于对“收起”按钮1033的点击操作，虚拟键盘1031不再被显示于编辑界面103。例如，编辑界面103还包括文字工具1034，用户可以通过点击文字工具1034修改文本区域的文字的字体等。例如，编辑界面103还包括“添加”按钮1035，响应于用户对“添加”按钮1035的点击操作，“图库”、“表格”、“超链接”等选项会被显示在编辑界面103上，用户可以通过点击“图库”选项向编辑界面103的文本区域添加图片；用户可以通过点击“表格”选项向编辑界面103的文本区域添加表格；用户可以通过点击“超链接”选项向编辑界面103的文本区域添加超链接等。例如，编辑界面103还包括“录音”按钮1036，用户可以通过点击“录音”按钮1036向编辑界面103的文本区域添加录音文件。
文本笔记中手写输入方便快捷，在具体实现时有多种实现方式。
在一种实现方式中，参考图2的(a)，文本笔记的编辑界面是基于至少两个图层生成的，其中图层A包括文字、图片、表格、超链接等富文本内容，图层B包括手写输入内容。
示例性的，参考图2的(b)，平板电脑100显示文本笔记的编辑界面201，编辑界面201的文本区域包括文字、图片等文本内容，还包括手写输入的标记图形，例如图2的(b)中黑色阴影块。
这种实现方式中，在基于至少两个图层生成文本笔记的编辑界面之前，手写输入的内容与文本内容位于不同图层(示例性地，一个图层可以是一个View或者Layer)，手写输入内容可以叠加于文本内容之上。但是，当终端设备发生形态变化后，例如平板电脑发生旋转，例如折叠屏手机折叠或展开，文本内容与手写输入内容可能会出现显示错位。示例性的，如图2的(b)所示，标记图形位于文字“笔记内容”、“清单”、“样式”之上；在平板电脑旋转后，如图2的(c)所示，标记图形与文字“笔记内容”、“清单”、“样式”是错位的。这是因为，文本内容与手写输入内容位于不同图层，两个图层之间是独立的，平板电脑分别对各个图层进行独立布局，在不同布局方式下，文本内容与手写输入内容可能会错位。
在另一种实现方式中，平板电脑显示文本笔记的编辑界面，用户可以向编辑界面输入文字、音频等富文本内容。当用户需要采用手写输入时，平板电脑显示文本笔记的手写输入界面，手写输入界面不包括富文本内容，用户可以通过手写方式向手写输入界面输入手写输入内容；用户停止手写输入后，平板电脑不再显示手写输入界面，显示更新后的编辑界面，更新后的编辑界面包括根据手写输入内容生成的图片。
示例性的，参考图3，平板电脑100显示文本笔记的编辑界面301，编辑界面301 包括图片3021和文本区域3022。图片3021的内容是手写轨迹生成的，文本区域3022包括文本内容。在一种示例中，响应于用户对图片3021的点击操作，平板电脑100显示手写输入界面303，手写输入界面303包括手写区域3031，用户可以在手写输入界面303的手写区域3031进行手写输入。如图3所示，手写区域3031的面积较大，几乎占据了手写输入界面303的全部显示区域，该手写输入界面303不包括文本区域。
在用户结束手写输入后，例如，接收到用户对手写输入界面303中“保存”按钮3032的点击操作，平板电脑100显示更新后的编辑界面301，更新后的编辑界面301包括图片3023，图片3023为根据用户在手写区域3031中的手写输入内容生成的。需要说明的是，图3所示编辑界面301以及手写输入界面303中虚线框仅用于指示区域范围，在实际应用中，虚线框并会被显示。
这种实施方式中，手写输入内容(手写轨迹)以图片形式被显示于编辑界面，在编辑界面被生成之前，手写输入内容与文本内容位于同一图层，避免了文本内容与手写输入内容在平板电脑旋转后显示错位的问题。但是，手写输入需要在手写输入界面进行操作，会发生编辑界面与手写输入界面的跳转，使得用户体验较差。
本申请实施例提供一种显示输入内容的方法，不需要在手写输入界面进行手写输入，而是可以在文本笔记的编辑界面的手写区域内进行手写操作，结束手写输入后，手写区域内的手写输入内容以图片形式被保存和显示于更新后的编辑界面。由于手写输入内容以图片形式展示，手写输入内容与文本内容位于同一图层，避免了文本内容与手写输入内容在平板电脑发生形态变化后显示错位的问题；并且，减少了编辑界面与手写输入界面的跳转给用户带来的较差体验。
在一种示例中，平板电脑显示文本笔记的编辑界面一，编辑界面一包括文本区域一，用户可以在文本区域一内输入文字、符号、图片、表格、超链接、音频等富文本内容。响应于用户添加手写区域的操作(例如，点击手写按钮的操作)，平板电脑显示文本笔记的编辑界面二，编辑界面二包括文本区域二和手写区域；用户可以在文本区域二内输入文字、符号、图片、表格、超链接、音频等富文本内容，用户可以通过手写方式向手写区域内写入手写输入内容。其中，文本区域二与文本区域一是对应的，被显示于文本区域二与被显示于文本区域一内的富文本内容相同，文本区域二与文本区域一的起始位置可以不同，文本区域二与文本区域一在屏幕上被显示的面积大小也可以不同。可选的，编辑界面二中手写区域的初始尺寸(例如宽度和高度)是预设值，可以根据手写输入内容动态调整手写区域的尺寸；还可以响应于用户调整手写区域边界的操作改变手写区域的尺寸。在一种示例中，以水平方向为X轴，垂直于地面方向为Y轴，手写区域的宽度表示手写区域在X轴方向的长度，手写区域的高度表示手写区域在Y轴方向的长度。
示例性的，参考图4A的(a)，平板电脑100显示文本笔记的编辑界面401，编辑界面401包括标题栏、编辑区域、工具栏等；其中，标题栏包括文本笔记的标题、编辑时间、分类选项等；在编辑界面401中，整个编辑区域为文本区域，如文本区域11，用户可以在文本区域11内输入文字、符号、图片、表格、超链接、音频等富文本内容，示例性的，文本区域11包括文字a；底部工具栏包括多个控件，例如，手写选项4021、文字工具4022、“添加”按钮4023、“录音”按钮4024等。需要说明的是， 图4A的(a)所示编辑界面401中虚线框仅用于指示区域范围，在实际应用中并不进行显示。可选的，编辑界面401可以为图1所示编辑界面103，此时，响应于用户对“收起”按钮1033的点击操作，虚拟键盘1031不进行显示。其中，手写选项4021可以为图1中手写选项1032，文字工具4022可以为图1中文字工具1034，“添加”按钮4023可以为图1中“添加”按钮1035，“录音”按钮4024可以为图1中“录音”按钮1036。
在一种示例中，如图4A的(b)所示，响应于用户对手写选项4021的点击操作，平板电脑100显示文本笔记的编辑界面403，编辑界面403包括标题栏、编辑区域、底部工具栏等；其中，编辑界面403中标题栏与编辑界面401中标题栏相同；编辑区域包括手写区域12和文本区域11’；用户可以通过手写方式向手写区域12写入手写输入内容，用户可以在文本区域11’内输入文字、符号、图片、表格、超链接、音频等富文本内容；底部工具栏包括手写工具按钮，用户可以点击手写工具按钮选择在手写区域12内进行手写输入采用的线条粗细、笔形、颜色等。在一种实现方式中，在用户点击“添加”按钮4023之后，平板电脑100在编辑区域对应的View内添加手写区域12的View，实现在编辑界面的编辑区域内添加手写区域；相应的，编辑区域内文本区域的显示面积变小，示例性的，图4A的(b)中文本区域11’的显示面积小于图4A的(a)中文本区域11的显示面积；文本区域11’包括的富文本内容与文本区域11包括的富文本内容相同。在一种实现方式中，文本区域11’对应的View就是文本区域11的View。可选的，编辑界面中，底部工具栏的手写工具按钮与手写区域同时出现；也就是说，当编辑界面的编辑区域包括手写区域时，底部工具栏包括手写工具按钮。
需要说明的是，图4A的(b)所示编辑界面403中虚线框仅用于指示区域范围，在实际应用中并不进行显示。
示例性的，如图4A的(c)所示，用户可以在手写区域12内通过手写方式输入文字、数字、图形等。
用户结束在手写区域12内的手写输入后，可以执行保存操作；例如，保存操作包括点击编辑界面中手写区域以外的区域等。示例性的，如图4A的(c)所示，用户点击文本区域11’。
在一种实现方式中，如图4B所示，响应于用户对手写区域12的保存操作(例如在文本区域11’内的点击操作)，平板电脑100显示文本笔记的编辑界面404，编辑界面404的编辑区域包括图片13和文本区域11”。图片13是根据手写区域12生成的，在一种示例中，图片13与手写区域12的尺寸相同，二者在屏幕上被显示的位置也相同；文本区域11”与文本区域11’的显示面积以及显示位置都相同。图片13中元素是根据手写区域12内的手写输入内容(手写轨迹)生成的，文本区域11”包括文字a。
在另一种实现方式中，如图4C所示，响应于用户对手写区域12的保存操作(例如在文本区域11’内的点击操作)，平板电脑100显示文本笔记的编辑界面404，编辑界面404的编辑区域包括图片13和文本区域11”。图片13与手写区域12的起始显示位置(图片左上顶点位置)相同，图片13与手写区域12的显示面积不同；例如，图片13的高度与手写区域12的高度不同。示例性的，手写区域12内手写输入内容较少，手写区域内手写轨迹覆盖的高度小于手写区域高度，图片13的高度是根据手写区域内手写输入 内容所覆盖的区域的高度确定的。图片13中元素根据手写区域12内的手写输入内容生成。相应的，文本区域11”与文本区域11’的高度不同，文本区域11”包括文字a。
参考图4B和图4C，编辑界面404不包括手写区域，相应的，也不包括手写工具按钮。示例性的，如图4B和图4C所示，编辑界面404包括手写选项4051、文字工具4052、“添加”按钮4053、“录音”按钮4054等。其中，手写选项4051可以为图4A的(a)中手写选项4021，文字工具4052可以为图4A的(a)中文字工具4022，“添加”按钮4053可以为图4A的(a)中“添加”按钮4023，“录音”按钮4054可以为图4A的(a)中“录音”按钮4024。
为了方便描述，本申请实施例中将根据手写区域的手写输入内容(手写轨迹)生成的图片称为手写图片。例如，图片13为手写图片。本申请实施例中将手写图片占据的显示区域称为手写显示区域。
可选的，在一种实现方式中，响应于用户对手写区域12的保存操作，平板电脑100保存手写区域12内的手写轨迹的信息，例如，手写区域12内的手写轨迹的信息被保存在二进制文件中；平板电脑100还根据手写区域12的显示位置和尺寸确定图片13的显示位置和尺寸；平板电脑100还根据手写区域12内的手写轨迹生成图片13中的元素。
可以理解的，图4B和图4C所示编辑界面404中虚线框仅用于指示图片13的范围；在实际应用中，该虚线框可以不显示。
在该示例中，在用户进行手写输入过程中，文本笔记的编辑界面始终被显示，文本区域的富文本内容始终被显示在编辑界面上，为用户带来流畅的使用体验。并且，手写输入内容可以保存为图片13的元素；图片13和文字a位于同一图层，不会因平板电脑100旋转而产生错位。
在一些实施例中，用户可以在手写图片上进行编辑操作(例如点击手写图片)，以继续在该手写区域内进行手写输入。在一种示例中，编辑操作包括对手写图片的点击操作。示例性的，参考图5A，平板电脑100显示编辑界面404，编辑界面404包括图片13，响应于用户对图片13的点击操作，平板电脑100显示编辑界面403；编辑界面404中图片13对应编辑界面403中手写区域12。可选的，在一种实现方式中，接收到用户对图片13的点击操作后，平板电脑100根据图片13的显示位置和尺寸确定对应的手写区域(手写区域12)的位置和尺寸，还根据生成图片13时保存的手写区域的手写轨迹的信息生成对应的手写区域(手写区域12)的手写轨迹。示例性的，在手写区域12内显示手写轨迹“1”、“2”、“3”、“4”。用户还可以在手写区域12内继续进行手写输入。示例性的，响应于用户在手写区域12内的手写输入，平板电脑100显示更新后的编辑界面403，在更新后的编辑界面403上，手写轨迹“5”被显示于手写区域12内。
这样，使得用户体验为，手写区域位置不发生改变，文本区域的文本内容也始终被显示在编辑界面上，使用体验更方便、流畅。
在一些实施例中，用户不需要执行对手写图片的编辑操作，而是可以直接在手写图片上开始手写输入。平板电脑接收到用户在手写图片上的手写输入，删除手写图片，生成手写图片对应的手写区域，在手写区域内显示手写输入内容。示例性的，参考图5B，平 板电脑100显示编辑界面404，编辑界面404包括图片13；响应于用户在图片13上的手写输入，平板电脑100显示编辑界面403，编辑界面403包括手写区域12。
其中，图片13对应手写区域12。在一种示例中，手写区域12的显示位置和尺寸与图片13的显示位置和尺寸一致。在手写区域12内显示的手写输入内容(手写轨迹)包括两部分；其中一部分手写轨迹与图片13中的元素相同，例如，手写轨迹“1”、“2”、“3”、“4”，在一种实现方式中，该部分手写轨迹是根据生成图片13时保存的手写轨迹的信息生成的；另一部分手写轨迹是根据用户在图片13上的手写输入生成的。
这样，用户不需要先通过编辑操作(例如对手写图片的点击操作)触发生成手写区域，而是可以直接在图片上开始手写输入，方便用户书写。
在一些实施例中，平板电脑显示文本笔记的编辑界面一，编辑界面一包括手写图片一和手写区域二；可选的，编辑界面一还包括文本区域。响应于用户在手写图片一上的手写输入，平板电脑显示编辑界面二，编辑界面二包括手写区域一和图片二；可选的，编辑界面二还包括文本区域。其中，手写区域一对应图片一，手写区域二对应图片二；编辑界面二上文本区域内的文本内容与编辑界面一上文本区域内的文本内容相同。
在一种示例中，手写区域一的位置和尺寸根据图片一的位置和尺寸确定，手写区域一内的手写输入内容根据用户在手写图片一上的手写输入以及平板电脑保存的手写区域一的手写轨迹的信息生成；图片二的显示位置和尺寸根据手写区域二的位置和尺寸确定，图片二的元素根据手写区域二内的手写轨迹生成。
示例性的，如图6的(a)所示，平板电脑100显示文本笔记的编辑界面405，编辑界面405包括图片14和手写区域15；其中，图片14是手写图片，图片14的元素是根据手写输入内容生成的。例如，图片14为图4B中图片13；也就是说，图片14中的元素是根据手写区域12中的手写输入内容(手写轨迹“1”、“2”、“3”、“4”)生成的，图片14的元素与手写区域12中的手写轨迹相同。手写区域15包括手写轨迹b。可选的，编辑界面405还包括文本区域1a。
在一种示例中，用户在图片14上进行手写输入(或点击图片14)，平板电脑100接收到用户在图片14上的手写输入(或点击图片14的操作)。示例性的，如图6的(b)所示，响应于用户在图片14上的手写输入(或点击图片14的操作)，平板电脑100显示编辑界面406，编辑界面406包括手写区域16和图片17。
其中，图片17是根据手写区域15生成的。在一种示例中，根据手写区域15的显示位置和尺寸确定图片17的显示位置和尺寸；例如，图片17的显示位置和尺寸与手写区域15的显示位置和尺寸一致。图片17的元素与手写区域15中的手写轨迹相同。例如，图片17中的元素为手写轨迹b。
手写区域16是根据图片14生成的。在一种示例中，手写区域16的尺寸(宽度和高度)与图片14的尺寸(宽度和高度)相同，手写区域16的显示位置与图片14的显示位置相同。可选的，手写区域16是响应于用户在图片14上的手写输入生成的，被显示于手写区域16的手写轨迹是基于两部分手写轨迹生成的，其中一部分手写轨迹是根据用户在图片14上的手写输入生成的，另一部分手写轨迹是与图片14中的元素相同的手写轨迹。可选的，手写区域16是响应于用户在图片14上的点击操作生成的，被显示于手写区 域16的手写轨迹是与图片14中的元素相同的手写轨迹。
在一些实施例中，用户使用终端设备时，终端设备可能发生形态变化，例如平板电脑旋转，例如折叠屏手机折叠或展开。
在一种示例中，当平板电脑显示文本笔记的编辑界面时，平板电脑发生旋转。可以理解的，在平板电脑发生旋转后，文本笔记的编辑界面会根据屏幕显示区域的变化而重新布局。
如果编辑界面包括手写区域，手写区域的显示位置和尺寸会随着屏幕显示区域的变化而改变。
示例性的，参考图7A，平板电脑100竖屏时显示编辑界面403，编辑界面403的编辑区域包括手写区域12和文本区域11’；例如，文本区域11’包括文字a；可选的，编辑界面403的标题栏包括“标题”控件、“未分类”控件等；编辑界面403的底部工具栏包括多个手写工具按钮等。平板电脑发生旋转，由竖屏旋转为横屏，平板电脑100横屏显示编辑界面407。在一种实现方式中，编辑界面407是根据横屏时屏幕显示区域，对编辑界面403进行重新布局得到的。示例性的，如图7A所示，编辑界面403中文本区域11’对应编辑界面407中文本区域18，编辑界面403中手写区域12对应编辑界面407中手写区域19。
可选的，在响应于平板电脑发生旋转，重新布局编辑界面时，文字a、“标题”控件、“未分类”控件、手写工具栏等可以采用常规技术中界面布局的规则进行布局。
对于手写区域12，在一种实现方式中，检测到平板电脑100开始旋转，根据手写区域12的位置和尺寸确定图片一；可选的，图片一在编辑界面403中的位置与手写区域12在编辑界面403中的位置相同，图片一的尺寸与手写区域12的尺寸相同；这样就可以实现通过图片一保存手写区域12在编辑界面403的位置和尺寸。示例性的，根据手写区域12左上角顶点位置确定图片一的左上角顶点位置，根据手写区域12的尺寸(例如宽度和高度)确定图片一的尺寸(例如宽度和高度)。
检测到平板电脑100旋转完成后，根据图片一确定横屏时文本笔记的编辑界面包括的手写区域的位置和尺寸。在一种实现方式中，横屏时编辑界面包括的手写区域(图7A中手写区域19)的左上角顶点位置根据图片一的左上角顶点位置确定；可以理解的，平板电脑100竖屏与横屏时编辑界面的布局不同，手写区域19在横屏时编辑界面中的位置与图片一在竖屏时编辑界面中的位置可以不相同。在一种实现方式中，手写区域19的尺寸根据图片一的尺寸确定。在一种示例中，手写区域19的高度与图片一的高度相同，手写区域19的宽度为平板电脑100横屏时屏幕显示区域的宽度。这样，通过图片一保存了手写区域的位置和尺寸，能够结合平板电脑旋转前手写区域的位置、尺寸以及平板电脑屏幕显示区域的变化，确定平板电脑旋转后手写区域的位置和尺寸，避免了平板电脑旋转后手写输入内容显示错位的问题。
在一种示例中，图片一用于确定手写区域19的位置和尺寸，平板电脑100屏幕上并不显示该图片一；例如，平板电脑100旋转过程中，屏幕上显示旋转动效。
本申请实施例提供的显示输入内容的方法中，可以在文本笔记的编辑界面中添加手写区域，手写区域可以用于接收手写输入内容；在用户结束手写输入后，编辑界面被更新，更新后的编辑界面中不再包括手写区域，而是显示根据手写区域手写输入内容生成的手写 图片；这样的话，如果终端设备发生旋转、折叠、展开等形态变化，手写图片与富文本内容(例如文字、音频、超链接等)一起参与用户界面的重新布局，避免了手写输入内容与富文本内容错位的问题。用户再次在手写图片上进行手写输入时，编辑界面再次被更新，再次更新后的编辑界面包括根据手写图片生成的手写区域。手写图片与手写区域在同一个位置进行切换，富文本内容始终被显示于编辑界面，给用户带来流畅的书写体验。
如果编辑界面包括手写图片，手写图片的显示位置和尺寸会随着屏幕显示区域的变化而改变。
示例性的，如图7B所示，平板电脑100竖屏时显示文本笔记的编辑界面404，编辑界面404的编辑区域包括图片13和文本区域11”，文本区域11”包括文字a。
平板电脑100发生旋转，由竖屏旋转为横屏，平板电脑100横屏显示编辑界面408。在一种实现方式中，编辑界面408是根据横屏时屏幕显示区域，对编辑界面404进行重新布局得到的。示例性的，如图7B所示，编辑界面404中文本区域11’对应编辑界面408中文本区域20，编辑界面404中图片13对应编辑界面408中图片21。
编辑界面408是根据平板电脑100横屏时屏幕显示区域对编辑界面404中各个视图(例如文本区域11’、图片13等)进行了界面布局生成的。在平板电脑100发生旋转到显示编辑界面408的过程中，没有删除视图或创建视图。
下面结合附图，详细介绍本申请实施例提供的显示输入内容的方法的具体实现方式。
本申请实施例提供的显示输入内容的方法可以应用于支持手写输入的终端设备。图8所示为终端设备的一种结构示意图。其中，终端设备100可以包括：处理器110，外部存储器接口120，内部存储器121，通用串行总线(universal serial bus，USB)接口130，充电管理模块140，电源管理模块141，电池142，天线1，天线2，移动通信模块150，无线通信模块160，音频模块170，传感器模块180，按键190，摄像头191，显示屏192等。其中传感器模块180可以包括压力传感器，指纹传感器，温度传感器，触摸传感器，加速度传感器，陀螺仪传感器等。
可以理解的是，本实施例示意的结构并不构成对终端设备100的具体限定。在另一些实施例中，终端设备100可以包括比图示更多或更少的部件，或者组合某些部件，或者拆分某些部件，或者不同的部件布置。图示的部件可以以硬件，软件或软件和硬件的组合实现。
处理器110可以包括一个或多个处理单元，例如：处理器110可以包括应用处理器(application processor，AP)，调制解调处理器，图形处理器(graphics processing unit，GPU)，图像信号处理器(image signal processor，ISP)，控制器，存储器，视频编解码器，数字信号处理器(digital signal processor，DSP)，基带处理器，和/或神经网络处理器(neural-network processing unit，NPU)等。其中，不同的处理单元可以是独立的器件，也可以集成在一个或多个处理器中。
控制器可以是终端设备100的神经中枢和指挥中心。控制器可以根据指令操作码和时序信号，产生操作控制信号，完成取指令和执行指令的控制。
处理器110中还可以设置存储器，用于存储指令和数据。在一些实施例中，处理器110中的存储器为高速缓冲存储器。该存储器可以保存处理器110刚用过或循环使用的指令或数据。如果处理器110需要再次使用该指令或数据，可从所述存储器中直 接调用。避免了重复存取，减少了处理器110的等待时间，因而提高了系统的效率。
在一些实施例中，处理器110可以包括一个或多个接口。接口可以包括集成电路(inter-integrated circuit，I2C)接口，集成电路内置音频(inter-integrated circuit sound，I2S)接口，脉冲编码调制(pulse code modulation，PCM)接口，通用异步收发传输器(universal asynchronous receiver/transmitter，UART)接口，移动产业处理器接口(mobile industry processor interface，MIPI)，通用输入输出(general-purpose input/output，GPIO)接口，用户标识模块(subscriber identity module，SIM)接口，和/或通用串行总线(universal serial bus，USB)接口等。
可以理解的是，本实施例示意的各模块间的接口连接关系，只是示意性说明，并不构成对终端设备的结构限定。在另一些实施例中，终端设备也可以采用上述实施例中不同的接口连接方式，或多种接口连接方式的组合。
充电管理模块140用于从充电器接收充电输入。其中，充电器可以是无线充电器，也可以是有线充电器。在一些有线充电的实施例中，充电管理模块140可以通过USB接口130接收有线充电器的充电输入。在一些无线充电的实施例中，充电管理模块140可以通过终端设备的无线充电线圈接收无线充电输入。充电管理模块140为电池142充电的同时，还可以通过电源管理模块141为终端设备供电。
电源管理模块141用于连接电池142，充电管理模块140与处理器110。电源管理模块141接收电池142和/或充电管理模块140的输入，为处理器110，内部存储器121，外部存储器，显示屏192，摄像头191，和无线通信模块160等供电。
终端设备100的无线通信功能可以通过天线1，天线2，移动通信模块150，无线通信模块160，调制解调处理器以及基带处理器等实现。
终端设备100通过GPU，显示屏192，以及应用处理器等实现显示功能。GPU为图像处理的微处理器，连接显示屏192和应用处理器。GPU用于执行数学和几何计算，用于图形渲染。处理器110可包括一个或多个GPU，其执行程序指令以生成或改变显示信息。
显示屏192用于显示图像，视频等。该显示屏192包括显示面板。显示面板可以采用液晶显示屏(liquid crystal display，LCD)，有机发光二极管(organic light-emitting diode，OLED)，有源矩阵有机发光二极体或主动矩阵有机发光二极体(active-matrix organic light emitting diode，AMOLED)，柔性发光二极管(flex light-emitting diode，FLED)，Mini-LED，Micro-OLED，Micro-OLED，量子点发光二极管(quantum dot light emitting diodes，QLED)等。
本申请实施例中，显示屏192可以用于显示用户界面，例如桌面界面、笔记应用的界面等。
终端设备100可以通过ISP，摄像头191，视频编解码器，GPU，显示屏192以及应用处理器等实现拍摄功能。
摄像头191用于捕获静态图像或视频。在一些实施例中，终端设备可以包括1个或N个摄像头191，N为大于1的正整数。
音频模块170用于将数字音频信息转换成模拟音频信号输出，也用于将模拟音频输入转换为数字音频信号。音频模块170还可以用于对音频信号编码和解码。在一些 实施例中，音频模块170可以设置于处理器110中，或将音频模块170的部分功能模块设置于处理器110中。
外部存储器接口120可以用于连接外部存储卡，例如Micro SD卡，实现扩展终端设备的存储能力。外部存储卡通过外部存储器接口120与处理器110通信，实现数据存储功能。例如将音频，视频等文件保存在外部存储卡中。
内部存储器121可以用于存储计算机可执行程序代码，所述可执行程序代码包括指令。处理器110通过运行存储在内部存储器121的指令，从而执行终端设备的各种功能应用以及数据处理。例如，在本申请实施例中，处理器110可以通过执行存储在内部存储器121中的指令，内部存储器121可以包括存储程序区和存储数据区。其中，存储程序区可存储操作系统，至少一个功能所需的应用程序。存储数据区可存储终端设备使用过程中所创建的数据等。此外，内部存储器121可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件，闪存器件，通用闪存存储器(universal flash storage，UFS)等。
压力传感器用于感受压力信号，可以将压力信号转换成电信号。在一些实施例中，压力传感器可以设置于显示屏192。压力传感器的种类很多，如电阻式压力传感器，电感式压力传感器，电容式压力传感器等。电容式压力传感器可以是包括至少两个具有导电材料的平行板。当有力作用于压力传感器，电极之间的电容改变。终端设备100根据电容的变化确定压力的强度。当有触摸操作作用于显示屏192，终端设备100根据压力传感器检测所述触摸操作强度。终端设备100也可以根据压力传感器的检测信号计算触摸的位置。
触摸传感器，也称“触控面板”。触摸传感器可以设置于显示屏192，由触摸传感器与显示屏192组成触摸屏，也称“触控屏”。触摸传感器用于检测作用于其上或附近的触摸操作。触摸传感器可以将检测到的触摸操作传递给应用处理器，以确定触摸事件类型。可以通过显示屏192提供与触摸操作相关的视觉输出。
在一些实施例中，可以通过压力传感器或触摸传感器等传感器检测用户作用于屏幕的触摸操作，根据触摸操作生成文字、图形等。
加速度传感器可检测终端设备100在各个方向上(一般为三轴)加速度的大小。当终端设备100静止时可检测出重力的大小及方向。还可以用于识别终端设备姿态，应用于横竖屏切换，计步器等应用。
陀螺仪传感器可以用于确定终端设备100的运动姿态。在一些实施例中，可以通过陀螺仪传感器确定终端设备100围绕三个轴(即，x，y和z轴)的角速度。
按键190包括电源键，音量键等。按键190可以是机械按键。也可以是触摸式按键。
在本申请实施例中，上述终端设备是可以运行操作系统，安装应用程序的终端设备。可选地，终端设备运行的操作系统可以是系统，系统，系统等。
终端设备100的软件系统可以采用分层架构，事件驱动架构，微核架构，微服务架构，或云架构。本发明实施例以分层架构的系统为例，示例性说明终端设备100的软件结构。
图9是本发明实施例的终端设备100的软件结构框图。
分层架构将软件分成若干个层，每一层都有清晰的角色和分工。层与层之间通过软件接口通信。在一些实施例中，将系统分为四层，从上至下分别为应用程序层，应用程序框架层，安卓运行时(Android runtime)和系统库，以及内核层。
应用程序层可以包括一系列应用程序包。例如，相机，图库，日历，通话，地图，导航等应用程序。示例性的，应用程序层可以包括笔记应用。
应用程序框架层为应用程序层的应用程序提供应用编程接口(application programming interface，API)和编程框架。应用程序框架层包括一些预先定义的函数。
如图9所示，应用程序框架层可以包括窗口管理服务(window manager service，WMS)，输入管理服务，内容提供服务，视图系统，资源管理服务等。
窗口管理服务用于管理窗口程序。比如，新增窗口、删除窗口、修改窗口等。窗口管理服务可以获取显示屏大小，判断是否有状态栏，锁定屏幕，截取屏幕等。
输入管理服务用于管理输入事件，例如进行输入事件的分发等。
内容提供服务用来存放和获取数据，并使这些数据可以被应用程序访问。所述数据可以包括视频，图像，音频，拨打和接听的电话，浏览历史和书签，电话簿等。
视图(View)系统包括可视控件，例如显示文字的控件，显示图片的控件等。视图系统可用于构建应用程序。显示界面可以由一个或多个视图组成的。例如，笔记应用包括文本笔记界面，可以包括显示文字的视图以及显示图片的视图等。
资源管理服务为应用程序提供各种资源，比如本地化字符串，图标，图片，布局文件，视频文件等等。
Android Runtime包括核心库和虚拟机。Android runtime负责系统的调度和管理。
核心库包含两部分：一部分是java语言需要调用的功能函数，另一部分是安卓的核心库。
应用程序层和应用程序框架层运行在虚拟机中。虚拟机将应用程序层和应用程序框架层的java文件执行为二进制文件。虚拟机用于执行对象生命周期的管理，堆栈管理，线程管理，安全和异常的管理，以及垃圾回收等功能。
系统库可以包括多个功能模块。例如：表面管理模块(surface manager)，合成渲染(surface flinger，SF)模块，输入合成(input flinger)模块，媒体库(Media Libraries)，三维图形处理库(例如：OpenGL ES)，2D图形引擎(例如：SGL)等。
表面管理模块用于对显示子系统进行管理，并且为多个应用程序提供了2D和3D图层的融合。
合成渲染模块用于根据界面显示数据(比如，界面包括的图层个数，每个图层的显示元素)合成和渲染图层。合成渲染模块根据显示数据确定每个显示数据对应的合成指令(比如，OPENGL指令，HWComposer指令)，调用合成指令生成应用界面的各个图层并送显。
输入合成模块用于根据输入装置产生的信号生成对应的输入事件，进行事件合成等。
传感器模块用于根据传感器采集的信号生成对应的传感器数据，并对传感器数据 进行处理。
媒体库支持多种常用的音频，视频格式回放和录制，以及静态图像文件等。媒体库可以支持多种音视频编码格式，例如:MPEG4，H.264，MP3，AAC，AMR，JPG，PNG等。
三维图形处理库用于实现三维图形绘图，图像渲染，合成，和图层处理等。
2D图形引擎是2D绘图的绘图引擎。
内核层是硬件和软件之间的层。内核层可以包含显示驱动，传感器驱动，键盘驱动等。
在一种示例中，接收到在终端设备100屏幕上的用户操作后，传感器驱动将用户操作对应的操作事件发送给输入合成模块，输入合成模块向输入管理服务发送该操作事件，输入管理服务向WMS发送该操作事件。WMS根据各个应用的窗口显示位置确定该操作事件对应的应用，例如，该用户操作作用于笔记应用的用户界面(编辑界面)，则WMS将该操作事件发送给笔记应用。笔记应用根据该操作事件进行相应的处理，例如更新编辑界面的界面数据。笔记应用通知WMS编辑界面的界面数据已更新。合成渲染模块依据WMS的窗口管理规则，根据更新后的编辑界面的界面数据进行合成和渲染，生成更新后的编辑界面的图层；调用合成指令将更新后的编辑界面的图层送显。
下面结合图9所示功能模块，详细介绍本申请实施例提供的显示输入内容的方法。
在一些实施例中，可以在文本笔记的编辑界面中新增一个手写区域。
示例性的，以图4A所示场景实例为例，图10A示出了在编辑界面新增一个手写区域的流程示意图。如图10A所示，该方法包括：
S1001、笔记应用启动后，平板电脑显示文本笔记的编辑界面一；笔记应用启动时创建了活动1(Activity 1)。
在一种示例中，笔记应用启动时创建了活动1(Activity 1)。笔记应用启动后，平板电脑显示笔记应用的用户界面，例如文本笔记的编辑界面一，示例性的，编辑界面一为图4A的(a)所示编辑界面401。
可以理解的，笔记应用的用户界面中元素都是基于View和ViewGroup创建出来的。View和ViewGroup通过树形结构组合在一起，构成笔记应用的用户界面(例如文本笔记的编辑界面)。
示例性的，以图4A的(a)中编辑界面401为例。Activity 1对应的View树状结构中根节点为decorView，decorView的子节点包括视图容器(ViewContainer)1，ViewContainer 1的子节点包括网页视图(WebView)1，WebView 1为文本区域11对应的View。进一步的，可以向WebView 1添加子节点，例如图像文件、音频文件等；这样就可以实现在文本区域11中添加图片、音频等富文本内容。
可选的，ViewContainer 1的子节点还包括标题栏对应的ViewGroup 1、底部工具栏对应的ViewGroup 2等。示例性的，参考图4A的(a)，底部工具栏包括手写选项4021、文字工具4022、“添加”按钮4023、“录音”按钮4024等。相应的，ViewGroup2的子节点包括手写选项4021对应的View，文字工具4022对应的View，“添加”按钮4023对应的View，“录音”按钮4024对应的View等。
S1002、响应于用户对手写按钮的点击操作，传感器驱动向输入合成模块发送点击事件。
编辑界面401的底部工具栏包括手写选项4021。用户可以点击手写选项4021，在编辑界面401上创建一个手写区域。
在一种示例中，传感器(例如触摸传感器，或触摸面板)检测到用户在屏幕上的点击操作，传感器驱动根据该点击操作生成点击事件，向输入合成模块上报点击事件；可选的，点击事件包括该点击操作的作用位置、点击操作的作用强度等。可以理解的，点击操作包括down操作和up操作。在一种实现方式中，传感器驱动根据down操作生成down事件，根据up操作生成up事件；传感器驱动向输入合成模块发送点击事件包括发送down事件以及up事件。
S1003、输入合成模块向输入管理服务发送点击事件，输入管理服务向WMS发送点击事件。
S1004、WMS向笔记应用发送该点击事件。
在一种实现方式中，WMS根据当前获取焦点的窗口确定前台应用为笔记应用，将点击事件发送给笔记应用进行处理。
S1005、笔记应用生成手写区域对应的画布视图(HandView)，将画布视图(HandView)添加至活动1(Activity 1)。
在一种实现方式中，笔记应用接收到点击事件，根据点击事件获取该点击操作的作用位置、点击操作的作用强度等。示例性的，该点击事件沿着View树被层层分发至手写选项4021对应的View。手写选项4021对应的View完成对该点击事件的消费。
在一种示例中，对该点击事件的消费包括：生成一个画布视图(HandView)，将该画布视图(HandView)加入ViewContainer 1。这样，ViewContainer 1的子节点包括WebView 1、画布视图(HandView)等。WebView 1对应文本区域11，画布视图(HandView)对应手写区域12。可选的，HandView的显示位置根据显示屏上光标所在位置确定，HandView的尺寸为预设值。可以理解的，View包括HandView、WebView等，也就是说，HandView是一种View。
可选的，在一种实现方式中，与生成HandView相应的，还生成图像文件1，该图像文件1中包括图片1的信息，例如，图片1的尺寸、图片1的元素等。示例性的，图片1的尺寸与HandView的显示尺寸相同，图片1的元素为空(即图片1为空白图像)。将图像文件1添加到WebView 1，实现在文本区域添加一幅空白图片，该空白图片的尺寸与HandView的显示尺寸相同。该空白图片的显示位置与HandView的显示位置也相同。这样的话，就可以实现，随着手写区域被添加在编辑区域内，文本区域内的文字的显示位置被改变。示例性的，如图4A的(b)所示，编辑区域内添加了手写区域12后，文字a的显示位置向下移动。
S1006、笔记应用将更新后的活动1(Activity 1)的数据存入系统库的图形缓存(Graphic Buffer)，通知WMS活动1(Activity 1)已更新。
在一种实现方式中，笔记应用通过ViewRootlmpl.java向系统库的Graphic Buffer传输更新后的Activity 1的数据，即将更新后的Activity 1的数据存入系统库的Graphic Buffer。
笔记应用还通知WMS，Activity 1已更新。
S1007、在下一个同步信号(Vsync)到达时，合成渲染模块从WMS获取当前图像帧的配置信息，基于配置信息、根据图形缓存(Graphic Buffer)中保存的更新后的活动1(Activity 1)的数据进行合成和渲染，生成更新后编辑界面的图层。
S1008、合成渲染模块向显示驱动发送更新后编辑界面的图层，显示驱动根据更新后编辑界面的图层在显示屏显示更新后的编辑界面(编辑界面二)。
示例性的，编辑界面二为图4A的(b)所示编辑界面403。
在一些实施例中，用户结束在手写区域的手写输入后，手写区域以图片形式保存在编辑界面中。
示例性的，如图10B所示，该方法还包括：
S1009、响应于用户在编辑界面二的手写区域之外的点击操作，传感器驱动向输入合成模块上报第二点击事件。
示例性的，参考图4B，平板电脑100显示编辑界面403，编辑界面403包括手写区域12。触摸传感器检测到用户在显示屏上的点击操作，该点击操作作用于编辑界面403内手写区域12之外的区域。
传感器驱动根据该点击操作生成第二点击事件，向输入合成模块上报第二点击事件。可选的，第二点击事件包括该点击操作的作用位置、点击操作的作用强度等。可以理解的，点击操作包括down操作和up操作。在一种实现方式中，传感器驱动根据down操作生成down事件，根据up操作生成up事件；传感器驱动向输入合成模块发送第二点击事件包括发送down事件以及up事件。
S1010、输入合成模块向输入管理服务发送第二点击事件，输入管理服务向WMS发送第二点击事件。
S1011、WMS向笔记应用发送第二点击事件。
S1012、笔记应用根据活动1(Activity 1)中画布视图(HandView)生成图像文件一，将图像文件一添加至活动1(Activity 1)，从活动1(Activity 1)中删除画布视图(HandView)。
笔记应用根据活动1(Activity 1)中画布视图(HandView)生成图像文件一，图像文件一包括图片一的信息，例如，图片一的尺寸、图片一的元素等。示例性的，图像文件为JPG格式。
在一种示例中，图片一的尺寸与HandView的显示尺寸相同，图片一的元素根据HandView上的手写轨迹生成。示例性的，参考图4B，画布视图(HandView)是手写区域12对应的View，图片一为图片13，图片13与手写区域12的尺寸相同，图片13的元素为手写区域12内的手写轨迹。
将图像文件一添加到WebView 1，实现在文本区域添加图片一，图片一的尺寸与HandView的显示尺寸相同，图片一的显示位置与HandView的显示位置也相同。可选的，删除WebView 1中空白图片。进一步的，将HandView从ViewContainer 1中删除。这样就实现了编辑界面中手写区域被图片一替换。
在一种实现方式中，删除HandView之前，根据HandView上的手写轨迹生成二进制文件，二进制文件中保存了HandView上的手写轨迹的信息。这样，后续在编辑 界面中恢复手写区域时，可以根据二进制文件恢复手写区域中的手写轨迹。
S1013、笔记应用将更新后的活动1(Activity 1)的数据存入系统库的图形缓存(Graphic Buffer)，通知WMS活动1(Activity 1)已更新。
S1014、在下一个同步信号(Vsync)到达时，合成渲染模块从WMS获取当前图像帧的配置信息，基于配置信息、根据图形缓存(Graphic Buffer)中保存的更新后的活动1(Activity 1)的数据进行合成和渲染，生成更新后编辑界面的图层。
S1015、合成渲染模块向显示驱动发送更新后编辑界面的图层，显示驱动根据更新后编辑界面的图层在显示屏显示更新后的编辑界面(编辑界面三)。
示例性的，编辑界面三为图4B所示编辑界面404。
在一些实施例中，终端设备发生旋转、折叠、展开等形态变化后，用户界面会被重新布局，编辑界面中各个控件，例如文本、图片、手写区域等，会根据形态变化后的屏幕显示区域改变显示位置。
示例性的，图11A示出了本申请实施例提供的显示输入内容的方法中终端设备发生旋转的流程示意图。如图11A所示，该方法包括：
S1101、启动笔记应用。
在一种示例中，响应于用户对应用图标的点击操作，笔记应用被启动。
S1102、笔记应用通知WMS开启活动(startActivity)1。
在一种实现方式中，笔记应用调用函数startActivity向WMS发出通知，启动活动1(Activity 1)。
S1103、笔记应用通知WMS创建活动1，在创建活动(onCreate)1的函数中，笔记应用向WMS注册朝向监听者。
在一种示例中，笔记应用调用函数onCreate，通知WMS创建活动1(Activity 1)。
在一种实现方式中，在onCreate中，笔记应用向WMS注册朝向监听者(onOrientationChangeListener)。注册朝向监听者后，WMS会在终端设备朝向发生改变后，向笔记应用发送通知信息。
可选的，在另一些实施例中，笔记应用向WMS注册姿态监听者；WMS会在终端设备的姿态发生改变后，向笔记应用发送通知信息。
S1104、传感器驱动周期性地向WMS上报终端设备的姿态或朝向信息。
在一种实现方式中，终端设备的朝向包括上、下、左、右。以终端设备头部(设置有摄像头的部分)的朝向作为终端设备朝向。示例性的，参考图11B，以大地坐标系的X轴、Y轴和Z轴为参考，其中X轴的正方向指向正东，Y轴的正方向指向正北，Z轴的正方向、X轴的正方向与Y轴的正方向满足右手系规则。当终端设备朝向与Z轴正方向之间的夹角小于预设阈值时，终端设备朝向为向上；当终端设备朝向与Z轴负方向之间的夹角小于预设阈值时，终端设备朝向为向下；当终端设备朝向与X轴正方向之间的夹角小于预设阈值时，终端设备朝向为向右；当终端设备朝向与X轴负方向之间的夹角小于预设阈值时，终端设备朝向为向左。
示例性的，终端设备朝向可以通过朝向标志来表示，朝向标志为0表示向上、朝向标志为1表示向右、朝向标志为2表示向下、朝向标志为3表示向左。
可选的，终端设备的朝向可以根据终端设备的姿态确定。
在一种实现方式中，传感器驱动周期性地向窗口管理服务(WMS)上报终端设备的姿态信息。
在一种实现方式中，传感器驱动根据终端设备的姿态确定终端设备的朝向，传感器驱动周期性地向窗口管理服务(WMS)上报终端设备的朝向(Orientation)信息。
S1105、WMS根据终端设备的姿态或朝向信息判断终端设备朝向发生改变，即确定终端设备发生旋转。
在一种实现方式中，WMS接收到终端设备的姿态信息，根据姿态信息确定终端设备的朝向。
在一种实现方式中，如果确定本次接收到的朝向信息与上一次接收到的朝向信息不同，WMS确定终端设备发生旋转。
S1106、确定终端设备发生旋转后，WMS向笔记应用发送配置改变信息。
由于笔记应用已经向窗口管理服务注册了朝向监听者，确定终端设备发生旋转后，窗口管理服务向笔记应用发送配置改变信息。在一种示例中，WMS调用函数onConfigureChanged()，向笔记应用发送配置改变信息，其中携带终端设备当前的朝向信息。
此时，终端设备显示文本笔记的编辑界面二，示例性的，参考图7A，编辑界面二为编辑界面403，编辑界面403包括手写区域12。此时，Activity 1包括画布视图(HandView)。
S1107、笔记应用根据活动1(Activity 1)中画布视图(HandView)生成图像文件一，将图像文件一添加至活动1(Activity 1)，从活动1(Activity 1)中删除画布视图(HandView)。
笔记应用的具体实现可以参考S1012中相关描述，此处不再赘述。
S1108、笔记应用将更新后的活动1(Activity 1)的数据存入系统库的图形缓存(Graphic Buffer)，通知WMS活动1(Activity 1)已更新。
S1109、在下一个同步信号(Vsync)到达时，合成渲染模块从WMS获取当前图像帧的配置信息，基于配置信息、根据图形缓存(Graphic Buffer)中保存的更新后的活动1(Activity 1)的数据进行合成和渲染，生成更新后编辑界面的图层。
可选的，在终端设备旋转过程中，终端设备的屏幕上不显示编辑界面的图层，显示旋转动效，比如，旋转动效可以是根据终端设备开始旋转时对屏幕显示界面的截图生成的动效。在一种示例中，旋转动效的图层被显示于编辑界面的图层之上。
S1110、笔记应用根据活动1(Activity 1)中图像文件一生成画布视图2(HandView 2)，将画布视图2添加至活动1(Activity 1)，从活动1(Activity 1)中删除图像文件一。
可以理解的，终端设备发生旋转后，终端设备朝向以及屏幕显示区域随之发生变化。笔记应用根据终端设备当前朝向对应的界面布局规则重新布局Activity 1。示例性的，编辑界面403包括文本区域11、手写区域12、标题栏、底部工具栏等；相应的，Activity 1包括WebView 1、图像文件一、标题栏对应的ViewGroup 1、底部工具栏对应的ViewGroup 2等。其中，WebView 1、标题栏对应的ViewGroup 1、底部工具栏对应的ViewGroup 2等，可以根据终端设备旋转后的界面布局规则、采用常规技术中的 方案进行重新布局，本申请实施例中不再赘述。
对于图像文件一，图像文件一包括图片一的信息，例如图片一的显示位置、尺寸等；图片一的显示位置和尺寸是根据手写区域12的显示位置和尺寸确定的。在一种实现方式中，笔记应用生成画布视图2(HandView 2)，HandView 2对应终端设备旋转后的手写区域。在一种示例中，HandView 2的显示位置和尺寸根据图片一的显示位置和尺寸确定。例如，图片一左上顶点的位置确定为HandView 2左上顶点的显示位置，图片一的高度确定为HandView 2的高度。在一种示例中，根据保存的HandView上的手写轨迹的信息生成HandView 2上的手写轨迹。这样就确定了HandView 2的显示位置、尺寸、显示内容(手写轨迹)。
进一步的，将HandView 2加入Activity 1的ViewContainer 1。这样，ViewContainer 1的子节点包括WebView 1、画布视图2(HandView 2)等。
可选的，删除图像文件一，删除保存的HandView上的手写轨迹的信息。
S1111、笔记应用将更新后的活动1(Activity 1)的数据存入系统库的图形缓存(Graphic Buffer)，通知WMS活动1(Activity 1)已更新。
S1112、在下一个同步信号(Vsync)到达时，合成渲染模块从WMS获取当前图像帧的配置信息，基于配置信息、根据图形缓存(Graphic Buffer)中保存的更新后的活动1(Activity 1)的数据进行合成和渲染，生成更新后编辑界面的图层。
S1113、合成渲染模块向显示驱动发送更新后编辑界面的图层，显示驱动根据更新后编辑界面的图层在显示屏显示更新后的编辑界面(编辑界面三)。
示例性的，参考图7A，平板电脑100旋转结束后，显示编辑界面407(编辑界面三)，编辑界面407包括手写区域19(HandView 2)。手写区域19为与手写区域12对应的手写区域。
在一些实施例中，当手写区域以图片形式被显示于编辑界面上时，响应于用户在手写区域(图片形式)的手写输入更新编辑界面，手写图片被替换为可编辑的手写区域。示例性的，参考图5B，平板电脑100显示编辑界面404，编辑界面404包括图片13；响应于用户在图片13上的手写输入，平板电脑100显示编辑界面403，编辑界面403包括手写区域12。示例性的，参考图6，平板电脑100显示编辑界面405，编辑界面405包括图片14，还包括手写区域15；响应于用户在图片14上的手写输入，平板电脑100显示编辑界面406，编辑界面406包括手写区域16和图片17；其中，手写区域16对应图片14，图片17对应手写区域15。
当编辑界面中手写区域以图片形式显示时，用户可以直接在图片形式的手写区域(手写图片)上开始手写输入。响应于用户在图片形式的手写区域的手写输入，终端设备更新编辑界面，更新后的编辑界面包括与手写图片对应的手写区域。
在一种示例中，编辑界面更新前，编辑界面的文本区域包括图片一(例如图片13)，图片一为手写图片。相应的，Activity 1中ViewContainer 1包括WebView 1，WebView 1包括图像文件一，图像文件一包括图片一的信息。响应于用户在图片一的手写输入，编辑界面被更新，编辑界面更新后，图片一被删除，手写区域被添加。相应的，Activity 1的WebView 1中图像文件一被删除，ViewContainer 1中增加HandView。HandView为手写区域对应的View。
在编辑界面更新完毕之前，手写区域还未生成，即ViewContainer 1中还未添加HandView，手写区域对应的画布视图(HandView)不会接收到手写输入对应的输入事件。这样就会导致手写输入的第一笔丢失，手写输入的第一笔不能在手写区域内形成手写轨迹。
本申请实施例提供的显示输入内容的方法，参考图12，编辑界面未完成更新前，即手写区域对应的HandView未生成前，由网页视图(WebView)接收手写图片上的输入事件，网页视图将接收到的输入事件存入阻塞队列，也就是说，网页视图是阻塞队列的事件生产子线程。手写区域对应的HandView被生成后，画布视图(HandView)可以接收并处理输入事件。画布视图(HandView)作为阻塞队列的事件消费子线程取出阻塞队列中的输入事件。画布视图按照输入事件的时间顺序进行处理，根据输入事件绘制手写笔迹，这样就可以避免用户在手写图片上的手写输入(例如手写输入的第一笔)丢失。
在用户直接在手写图片上进行手写输入的场景中，在手写区域的画布视图被绘制完成后，手写区域的画布视图才能对接收到的手写输入对应的输入事件进行处理，根据输入事件绘制手写笔迹，生成手写输入内容。例如，参考图12，网页视图接收到手写图片上的手写输入对应的输入事件，将手写图片上的手写输入对应的输入事件保存至阻塞队列。在手写区域的画布视图绘制完成后，画布视图作为事件消费子线程取出阻塞队列中的输入事件，根据输入事件进行手写笔迹的绘制。由于绘制手写区域的画布视图需要耗费一定时间，导致从接收到用户在手写图片上的手写输入(例如手写输入的第一笔)到生成手写输入的第一笔的笔迹会相隔一定时长，这样就会导致用户手写输入的第一笔的跟手性差的问题，使得用户体验为第一笔书写完成一段时间后才显示出第一笔书写笔迹。
本申请实施例提供的显示输入内容的方法，笔记应用预先绘制一个过渡图层，该过渡图层位于笔记应用的编辑界面的最上层。在手写区域被添加至编辑界面前(手写区域对应的HandView成功创建前)，过渡图层是可见的。根据手写图片上的手写输入在过渡图层上绘制手写笔迹，这样，在手写区域被成功创建前，手写图片上的手写输入对应的笔迹可以通过过渡图层被显示在屏幕上。在手写区域被成功创建后，手写区域的画布视图能够对手写输入对应的输入事件进行处理，根据手写输入的输入事件在画布视图上绘制手写笔迹，过渡图层被设置为不可见，在画布视图上绘制的手写笔迹被显示于屏幕上。
示例性的，参考图13，平板电脑100显示编辑界面405，编辑界面405包括图片14，图片14是手写图片；编辑界面405还包括手写区域15。响应于接收到用户在图片14上的手写输入，过渡图层被设置为可见。笔记应用根据图片14上的手写输入在过渡图层上绘制手写笔迹，手写笔迹通过过渡图层在屏幕上被显示出来。响应于接收到用户在图片14上的手写输入，手写区域16被添加至更新后的编辑界面(编辑界面406)。在手写区域16对应的画布视图创建好之后，笔记应用在手写区域的画布视图上根据手写输入进行手写笔迹绘制。过渡图层被设置为不可见，手写笔迹可以通过手写区域的画布视图在屏幕上被显示出来。
这样，在手写区域被成功创建之前，手写笔迹被绘制在过渡图层；在手写区域被成功创创建之后，过渡图层不可见，手写笔迹被绘制在画布视图上。由于过渡图层是预先绘制好的，在过渡图层上绘制手写笔迹耗时较短，能够有效缩短用户进行手写输入与显示屏显示手写笔迹之间的时间间隔，提高用户手写输入的跟手性。
示例性的，以图6所示场景为例，图14示出了用户在手写图片上开始手写输入时，本申请实施例提供的显示输入内容的方法的一种流程示意图。如图14所示，该方法包括：
S1401、响应于用户在手写图片一上的手写输入，输入管理服务向窗口管理服务发送输入事件。
用户在手写图片一上进行手写输入时，终端设备显示编辑界面四，编辑界面四包括文本区域一和手写图片一。以图6所示场景为例，平板电脑100显示编辑界面405，编辑界面405包括图片14，图片14是手写图片。编辑界面405还包括手写区域15。
示例性的，输入事件可以包括按下(down)事件、松开(up)事件、移动(move)事件等。传感器检测到按下操作，传感器驱动生成down事件，将down事件发送给输入管理服务，输入管理服务向窗口管理服务发送down事件；传感器检测到松开操作，传感器驱动生成up事件，将up事件发送给输入管理服务，输入管理服务向窗口管理服务发送up事件；传感器检测到移动操作，传感器驱动生成move事件，将move事件发送给输入管理服务，输入管理服务向窗口管理服务发送move事件。
S1402、窗口管理服务向笔记应用发送输入事件。
在一种实现方式中，窗口管理服务根据当前获取焦点的窗口确定前台应用为笔记应用，将点击事件发送给笔记应用进行处理。在一种示例中，窗口管理服务调用函数onTouchEvent，在函数onTouchEvent中通过ViewRootlmpl.java向笔记应用发送输入事件。
S1403、笔记应用保存接收到的输入事件。
笔记应用每次接收到一个输入事件，调用函数obtainevent将该输入事件保存至阻塞队列。
在一种实现方式中，笔记应用的编辑界面对应的Activity对应的View树状结构中根节点接收到输入事件，将输入事件按照View树状结构中的层级逐级向下分发输入事件。在一种示例中，输入事件被发送至文本区域对应的网页视图(WebView)，网页视图(WebView)作为事件生成子线程将输入事件存入阻塞队列。这样，在手写区域被成功创建前，将手写图片上的手写输入对应的输入事件存入阻塞队列；等到手写区域被成功创建后，手写区域对应的画布视图(HandView)就可以从阻塞队列中获取输入事件，根据输入事件绘制手写笔迹；避免手写图片上的手写输入(例如手写输入的第一笔)丢失。
另一方面，用户在显示屏上的一次输入动作可以包括多个输入事件。例如，用户在显示屏上通过手写方式输入一段笔迹的过程可以包括down事件、多个move事件以及一个up事件；其中，输入一段笔迹的起点对应down事件，输入一段笔迹的终点对应up事件。例如，用户在显示屏上的双指按下动作对应两个连续的down事件。例如，用户在显示屏上的双指拖动动作对应down事件、move事件、down事件、move事件……。笔记应用在每次接收到输入事件后对其进行保存，这样就可以根据多个输入事件判断用户的输入动作。
S1404、如果接收到按下事件，笔记应用判断该按下事件的作用位置。如果按下事件的作用位置在手写图片一上，执行S1405；如果按下事件的作用位置未在手写图片一上，网页视图对该按下事件进行处理。
在一种示例中，终端设备显示笔记应用的编辑界面四，编辑界面四包括文本区域一，文本区域一通过网页视图(WebView)1实现。编辑界面四还包括手写图片一，手写图片 一通过图像文件一实现；可选的，该图像文件一是WebView 1的子节点。编辑界面四还包括手写区域二，手写区域二通过画布视图(HandView)3实现。在一种示例中，HandView 3和WebView 1都是ViewContainer 1的子节点。
接收到按下事件后，笔记应用调用函数getCurrentClickedImage遍历文本区域中的手写图片，判断该按下事件的作用位置在哪个手写图片上。
如果确定按下事件的作用位置在手写图片上，继续等待移动事件，执行S1405；如果确定按下事件的作用位置不在手写图片上，由网页视图对按下事进行处理。
S1405、如果接收到移动事件，笔记应用判断该移动事件的作用位置。如果移动事件的作用位置在手写图片一上，且在手写图片一上的移动事件的个数大于预设数值，执行S1406-S1407、S1411-S1412以及S1421。
笔记应用判断该移动事件的作用位置，例如，笔记应用调用函数getCurrentClickedImage遍历文本区域中的手写图片，判断该移动事件的作用位置在哪个手写图片上。
如果确定移动事件的作用位置在手写图片一上，判断在该手写图片一上连续接收到的移动事件的个数，如果确定该手写图片一上连续接收到的移动事件的个数大于预设数值(例如预设数值为2)，执行S1406-S1407、S1411-S1412以及S1421。示例性的，调用函数onClickImageAtGraffitiMode执行S1406-S1407、S1411-S1412以及S1421。
如果确定移动事件的作用位置不在手写图片一上，由网页视图对该移动事件进行处理。
S1406、笔记应用将过渡图层设置为可见。
笔记应用预先绘制了过渡图层。在一种实现方式中，过渡图层的尺寸为编辑界面内编辑区域的尺寸。过渡图层位于编辑界面各个图层之上。
过渡图层默认设置为不可见。在接收到作用于手写图片一上的一个按下事件和预设个数的移动事件后，表示用户在手写图片一上进行手写输入，笔记应用将过渡图层设置为可见(setSwitchSmoothHandWritingViewVisible)，这样在过渡图层上绘制的手写笔迹就可以在屏幕上进行显示。
S1407、笔记应用根据手写图片一创建手写区域一。
在一种示例中，笔记应用调用函数switchHandWritingView创建手写区域一。可选的，笔记应用还根据手写区域二生成手写图片二。示例性的，在图6所示场景，根据手写图片14创建手写区域16。相应的，根据手写区域15生成手写图片17。
在一种实现方式中，笔记应用调用函数saveAndExitAsync关闭手写区域二(手写区域15)对应的画布视图，调用函数addHandWritingLayout根据手写图片一(图片14)创建手写区域一(手写区域16)对应的画布视图。在一种示例中，笔记应用关闭手写区域二对应的画布视图与创建手写区域一对应的画布视图可以异步执行，即不需要等待关闭手写区域二对应的画布视图的动作执行完毕，就可以执行创建手写区域一对应的画布视图。可选的，笔记应用还删除图片一(图片14)对应的图像文件，根据手写区域二(手写区域15)生成图片二(图片17)对应的图像文件。
手写区域一创建成功后，手写区域一对应的画布视图就可以接收到手写输入对应的输入事件，根据用户的手写输入(输入事件)绘制手写轨迹(手写输入内容)。
S1411、手写区域一被创建成功后，手写区域一对应的画布视图作为阻塞队列的消费 子线程读取阻塞队列中输入事件，笔记应用根据输入事件在画布视图上绘制手写笔迹，然后删除阻塞队列中已处理的输入事件。
在一种示例中，手写区域一被创建成功后，即生成手写区域一对应的HandView后，笔记应用调用函数transferTouchEventsToHandWritingView，在函数transferTouchEventsToHandWritingView中，手写区域一对应的HandView作为阻塞队列的消费子线程读取阻塞队列(mTouchEventQueue)中输入事件。HandView调用函数drawTransferredEvents消费输入事件。示例性的，HandView根据输入事件绘制手写笔迹。之后，笔记应用删除阻塞队列中已消费的输入事件。
S1412、如果阻塞队列中最后一个输入事件为松开事件，且阻塞队列中输入事件都已经处理完成，笔记应用将过渡图层设置为不可见。
接收到松开(up)事件，表示第一笔绘制完成。如果阻塞队列中输入事件都处理完成，即mTouchEventQueue为空，表示手写图片上的手写输入都已完成手写轨迹绘制，即表示当前没有正在发生手写输入。在阻塞队列最后一个输入事件为松开事件，且阻塞队列中输入事件都处理完成之后，手写区域一已被成功创建，手写区域一对应的画布视图可以对输入事件进行处理，根据输入事件绘制手写笔迹，不会丢失用户的手写输入。笔记应用将过渡图层设置为不可见(setSwitchSmoothHandWritingViewInVisible)，在手写区域一对应的画布视图上绘制的手写笔迹可以被显示在屏幕上。
S1421、过渡图层读取阻塞队列中输入事件，根据输入事件进行手写轨迹绘制。
在一种示例中，笔记应用调用函数onTouchEvent，在该函数中，过渡图层调用函数drawOneTransferredEvents消费输入事件。示例性的，过渡图层读取阻塞队列中输入事件(此时输入事件还未被画布视图从阻塞队列中删除)，根据输入事件进行手写轨迹绘制。
可以理解的，由于创建手写区域一对应的画布视图需要耗费较长时间，对于阻塞队列中同一个输入事件，画布视图消费的时间晚于过渡图层消费的时间。因此，过渡图层早于画布视图消费输入事件，过渡图层读取阻塞队列中输入事件时，输入事件还未被画布视图从阻塞队列中。
另外，在手写区域一创建完成前，手写输入生成的手写笔迹通过过渡图层显示在屏幕上。过渡图层是预先绘制好的，相比在画布视图上绘制手写轨迹，在过渡图层绘制手写笔迹带来的延时较小，给用户带来跟手性较好的体验。
可以理解的是，本申请实施例提供的终端设备为了实现上述功能，其包含了执行各个功能相应的硬件结构和/或软件模块。本领域技术人员应该很容易意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，本申请实施例能够以硬件或硬件和计算机软件的结合形式来实现。某个功能究竟以硬件还是计算机软件驱动硬件的方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请实施例的范围。
本申请实施例可以根据上述方法示例对上述终端设备进行功能模块的划分，例如，可以对应各个功能划分各个功能模块，也可以将两个或两个以上的功能集成在一个处理模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。需要说明的是，本申请实施例中对模块的划分是示意性的，仅仅为一种逻 辑功能划分，实际实现时可以有另外的划分方式。
在一种示例中，请参考图15，其示出了上述实施例中所涉及的终端设备的一种可能的结构示意图。该终端设备2000包括：处理单元2010、存储单元2020、显示单元2030和传感器单元2040。
其中，处理单元2010，用于对终端设备2000的动作进行控制管理。存储单元2020用于保存终端设备2000的程序代码和数据，处理单元2010调用存储单元2020存储的程序代码，以执行以上方法实施例中的各个步骤。显示单元2030用于显示终端设备2000的用户界面；例如笔记应用的应用界面等。传感器单元2040用于检测用户输入，例如检测用户的手写输入；还用于检测终端设备的形态变化，例如检测终端设备发生旋转、折叠、展开等。
当然，上述终端设备2000中的单元模块包括但不限于上述处理单元2010、存储单元2020、显示单元2030和传感器单元2040。例如，终端设备2000中还可以包括通信单元、电源单元、音频单元等。通信单元用于终端设备2000与其他电子设备进行通信；电源单元用于对终端设备2000供电；音频单元用于播放音频。
其中，处理单元2010可以是处理器或控制器，例如可以是中央处理器(central processing unit，CPU)，数字信号处理器(digital signal processor，DSP)，专用集成电路(application-specific integrated circuit，ASIC)，现场可编程门阵列(field programmable gate array，FPGA)或者其他可编程逻辑器件、晶体管逻辑器件、硬件部件或者其任意组合。存储单元2020可以是存储器等。显示单元2030可以是显示屏等。传感器单元2040可以包括触摸传感器、压力传感器、加速度传感器、陀螺仪传感器等。
例如，处理单元2010为处理器(如图8所示的处理器110)，存储单元2020可以为存储器(如图8所示的内部存储器121)，显示单元2030可以为显示屏(如图8所示的显示屏192)，传感器单元2040可以为传感器模块(如图8所示的传感器模块180)。本申请实施例所提供的终端设备2000可以为图8所示的终端设备100。其中，上述处理器、存储器、显示屏、传感器等可以连接在一起，例如通过总线连接。处理器调用存储器存储的程序代码，以执行以上方法实施例中的各个步骤。
本申请实施例还提供一种芯片系统，该芯片系统包括至少一个处理器和至少一个接口电路。处理器和接口电路可通过线路互联。例如，接口电路可用于从其它装置(例如电子设备的存储器)接收信号。又例如，接口电路可用于向其它装置(例如处理器)发送信号。示例性的，接口电路可读取存储器中存储的指令，并将该指令发送给处理器。当所述指令被处理器执行时，可使得终端设备执行上述实施例中的各个步骤。当然，该芯片系统还可以包含其他分立器件，本申请实施例对此不作具体限定。
本申请实施例还提供一种计算机可读存储介质，该计算机可读存储介质包括计算机指令，当所述计算机指令在上述电子设备上运行时，使得该电子设备执行上述方法实施例中终端设备执行的各个功能或者步骤。
本申请实施例还提供一种计算机程序产品，当所述计算机程序产品在计算机上运行时，使得所述计算机执行上述方法实施例中终端设备执行的各个功能或者步骤。
通过以上实施方式的描述，所属领域的技术人员可以清楚地了解到，为描述的方 便和简洁，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将装置的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。
在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述模块或单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个装置，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是一个物理单元或多个物理单元，即可以位于一个地方，或者也可以分布到多个不同地方。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个可读取存储介质中。基于这样的理解，本申请实施例的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该软件产品存储在一个存储介质中，包括若干指令用以使得一个设备(可以是单片机，芯片等)或处理器(processor)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(read only memory，ROM)、随机存取存储器(random access memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
以上内容，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何在本申请揭露的技术范围内的变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以所述权利要求的保护范围为准。

Claims (18)

  1. 一种显示输入内容的方法，应用于电子设备，其特征在于，所述方法包括：
    显示第一界面；所述第一界面包括第一文本区域，所述第一文本区域包括第一文本内容；
    响应于对所述第一界面中第一选项的第一操作，创建第一视图，显示第二界面；所述第二界面包括第一手写区域和第二文本区域，所述第二文本区域包括所述第一文本内容，所述第一视图对应所述第一手写区域；
    响应于在所述第一手写区域的第一手写输入，第一手写输入内容被显示于所述第一手写区域；
    响应于在所述第二界面的第二操作，删除所述第一视图，显示第三界面；所述第三界面包括第一手写显示区域和第三文本区域，所述第一手写显示区域包括所述第一手写输入内容，所述第三文本区域包括所述第一文本内容；
    响应于在所述第三界面的所述第一手写显示区域的第三操作，创建第二视图，显示第四界面；所述第四界面包括所述第一手写区域和所述第二文本区域，所述第二视图对应所述第一手写区域。
  2. 根据权利要求1所述的方法，其特征在于，所述第三操作包括第二手写输入，所述方法还包括：
    响应于在所述第三界面的所述第一手写显示区域的第二手写输入，第二手写输入内容被显示于所述第四界面的第一手写区域。
  3. 根据权利要求2所述的方法，其特征在于，所述方法还包括：
    响应于在所述第三界面的所述第一手写显示区域的第二手写输入，将预设图层设置为可见；
    在创建所述第二视图后，将所述预设图层设置为不可见；在所述预设图层可见的情况下，所述第四界面是基于所述预设图层生成的。
  4. 根据权利要求3所述的方法，其特征在于预设图层，所述方法还包括：
    响应于在所述第三界面的所述第一手写显示区域的第二手写输入，在所述预设图层生成所述第二手写输入内容，所述预设图层位于所述第二视图所在图层之上。
  5. 根据权利要求4所述的方法，其特征在于，所述将所述预设图层设置为不可见包括：
    在所述第二视图所在图层生成所述第二手写输入内容后，且没有正在发生手写输入的情况下，将所述预设图层设置为不可见。
  6. 根据权利要求1-5任意一项所述的方法，其特征在于，所述方法还包括：
    在显示所述第二界面的情况下，响应于所述电子设备发生形态变化，删除所述第一视图；
    在删除所述第一视图后，创建第三视图，显示第五界面；所述第五界面包括第二手写区域和第四文本区域，所述第三视图对应所述第二手写区域，所述第二手写区域包括所述第一手写输入内容，所述第四文本区域包括所述第一文本内容。
  7. 根据权利要求6所述的方法，其特征在于，
    所述响应于所述电子设备发生形态变化，删除所述第一视图前，所述方法还包括：
    根据所述第一视图生成第一图像；
    所述创建第三视图包括：
    根据所述第一图像和所述电子设备发生形态变化后的屏幕显示区域生成所述第三视图。
  8. 根据权利要求1-7任意一项所述的方法，其特征在于，所述方法还包括：
    在显示所述第三界面的情况下，响应于所述电子设备发生形态变化，显示第六界面；所述第六界面包括第二手写显示区域和第五文本区域，所述第二手写显示区域包括所述第一手写输入内容，所述第五文本区域包括所述第一文本内容；从所述电子设备发生形态变化到显示所述第六界面的过程中，没有删除视图或创建视图。
  9. 根据权利要求1所述的方法，其特征在于，所述第三操作包括点击操作，所述第四界面与所述第二界面相同。
  10. 根据权利要求1-9任意一项所述的方法，其特征在于，所述方法还包括：
    响应于在所述第二界面的第二操作，创建第二图像；所述第二图像对应所述第三界面中所述第一手写显示区域。
  11. 根据权利要求1-10任意一项所述的方法，其特征在于，所述第三界面还包括第三手写区域，所述第三手写区域包括第三手写输入内容，所述第四界面还包括第三手写显示区域，所述第三手写显示区域包括所述第三手写输入内容，所述方法还包括：
    响应于在所述第三界面的所述第一手写显示区域的第三操作，创建第三图像，所述第三图像对应所述第三手写显示区域。
  12. 根据权利要求1-11任意一项所述的方法，其特征在于，所述第一手写显示区域与所述第一手写区域为屏幕上相同的显示区域。
  13. 根据权利要求1-12任意一项所述的方法，其特征在于，所述第一文本内容包括文字、图片、音频、表格、超链接中至少一项。
  14. 根据权利要求1-13任意一项所述的方法，其特征在于，所述在所述第二界面的第二操作包括：对所述第二界面中所述第一手写区域之外的区域的点击操作。
  15. 根据权利要求7所述的方法，其特征在于，所述形态变化包括：旋转、折叠或展开。
  16. 一种电子设备，其特征在于，包括：
    一个或多个处理器；
    显示屏；
    存储器；
    其中，所述存储器中存储有一个或多个计算机程序，所述一个或多个计算机程序包括指令，当所述指令被所述处理器执行时，使得所述电子设备执行如权利要求1-15任意一项所述的方法。
  17. 一种计算机可读存储介质，其上存储有计算机程序/指令，其特征在于，该计算机程序/指令被处理器执行时实现权利要求1-15任意一项所述的方法。
  18. 一种计算机程序产品，包括计算机程序/指令，其特征在于，该计算机程序/指令被处理器执行时实现权利要求1-15任意一项所述的方法。
PCT/CN2024/083929 2024-03-26 2024-03-26 显示输入内容的方法及电子设备 Pending WO2025199770A1 (zh)

Priority Applications (2)

Application Number Priority Date Filing Date Title
CN202480004050.9A CN121175650A (zh) 2024-03-26 2024-03-26 显示输入内容的方法及电子设备
PCT/CN2024/083929 WO2025199770A1 (zh) 2024-03-26 2024-03-26 显示输入内容的方法及电子设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
PCT/CN2024/083929 WO2025199770A1 (zh) 2024-03-26 2024-03-26 显示输入内容的方法及电子设备

Publications (2)

Publication Number Publication Date
WO2025199770A1 true WO2025199770A1 (zh) 2025-10-02
WO2025199770A9 WO2025199770A9 (zh) 2025-11-27

Family

ID=97219468

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2024/083929 Pending WO2025199770A1 (zh) 2024-03-26 2024-03-26 显示输入内容的方法及电子设备

Country Status (2)

Country Link
CN (1) CN121175650A (zh)
WO (1) WO2025199770A1 (zh)

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20100063545A (ko) * 2008-12-03 2010-06-11 엘지전자 주식회사 이동단말기 및 그의 수기 메모 방법
CN111338558A (zh) * 2020-03-24 2020-06-26 掌阅科技股份有限公司 电子书手写笔记显示方法、设备及计算机存储介质
CN114077825A (zh) * 2020-08-05 2022-02-22 华为技术有限公司 添加批注的方法、电子设备及相关装置
CN116185273A (zh) * 2017-06-02 2023-05-30 苹果公司 用于注释内容的设备、方法和图形用户界面
CN116661635A (zh) * 2022-11-22 2023-08-29 荣耀终端有限公司 手势处理方法和电子设备

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20100063545A (ko) * 2008-12-03 2010-06-11 엘지전자 주식회사 이동단말기 및 그의 수기 메모 방법
CN116185273A (zh) * 2017-06-02 2023-05-30 苹果公司 用于注释内容的设备、方法和图形用户界面
CN111338558A (zh) * 2020-03-24 2020-06-26 掌阅科技股份有限公司 电子书手写笔记显示方法、设备及计算机存储介质
CN114077825A (zh) * 2020-08-05 2022-02-22 华为技术有限公司 添加批注的方法、电子设备及相关装置
CN116661635A (zh) * 2022-11-22 2023-08-29 荣耀终端有限公司 手势处理方法和电子设备

Also Published As

Publication number Publication date
WO2025199770A9 (zh) 2025-11-27
CN121175650A (zh) 2025-12-19

Similar Documents

Publication Publication Date Title
US12524145B2 (en) Devices, methods, and systems for manipulating user interfaces
US12050857B2 (en) Device, method, and graphical user interface for editing screenshot images
CN111651116B (zh) 分屏交互方法、电子设备及计算机存储介质
EP2360569B1 (en) Method and apparatus for providing informations of multiple applications
CN115033333B (zh) 一种悬浮窗显示方法、电子设备和存储介质
WO2017113551A1 (en) System and method for operating system of mobile device
CN116700554B (zh) 信息的显示方法、电子设备及可读存储介质
CN114461312B (zh) 显示的方法、电子设备及存储介质
CN116719459A (zh) 批注框的显示方法、电子设备及可读存储介质
CN116700586A (zh) 一种事件处理方法和装置
US20130298068A1 (en) Contents display method and mobile terminal implementing the same
KR20140096780A (ko) 콘텐츠 표시 방법 및 이를 구현하는 휴대 단말
CN118093067B (zh) 显示卡片的方法、电子设备及可读存储介质
CN116048317B (zh) 一种显示方法及装置
CN116048373B (zh) 悬浮球控件的显示方法、电子设备以及存储介质
WO2025199770A9 (zh) 显示输入内容的方法及电子设备
US12517650B2 (en) Display control method, electronic device, and readable storage medium
US20250348334A1 (en) Information display method, electronic device, and storage medium
CN121387113A (zh) 数据处理方法、电子设备以及存储介质
WO2024125301A1 (zh) 显示方法和电子设备
WO2026031712A1 (zh) 一种显示方法、电子设备、介质、程序产品和芯片
CN121387163A (zh) 内容显示方法、电子设备、存储介质及芯片
WO2024222054A1 (zh) 手写输入方法及电子设备
WO2025039717A1 (zh) 显示方法、电子设备及可读存储介质
CN120335701A (zh) 一种文本编辑方法及相关设备

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 24931556

Country of ref document: EP

Kind code of ref document: A1

WWE Wipo information: entry into national phase

Ref document number: 2024931556

Country of ref document: EP