Page display method and electronic equipment

Abstract

The invention discloses a page display method and electronic equipment, which are used for fixing the typesetting position of a text and a graffiti in a display interface, so that the typesetting position of the text and the graffiti does not change along with the rotation of the electronic equipment or the change of a display window. The method comprises the steps that when a display interface of an application comprises a text and a graffiti at the same time, the electronic equipment can display the text and the graffiti on a layer where the text is located. Specifically, the electronic device displays a display interface of an application, the display interface comprises a first layer and a paintbrush tool, and the first layer comprises a first text; then, the electronic equipment responds to a first operation on the paintbrush tool, a second graph layer is created, and the drawn first graffiti is displayed on the second graph layer; and finally, the electronic equipment responds to the drawing ending operation, the second image layer is hidden, the first graffiti drawn on the second image layer is displayed on the first image layer, and the first graffiti is located below the first text.

Description

TECHNICAL FIELD

[0001] Embodiments of the present application relate to the field of page display, and in particular, to a page display method and an electronic device. BACKGROUND

[0002] A memo application is an application program in an electronic device, which can be used to record some memo information of a user, etc. The memo information can be at least one of a text and a doodle. When a memo in the memo application includes both the text and the doodle, if the electronic device is rotated by 90 degrees, or the width of a display window of the electronic device changes, the layout positions of the text and the doodle on a display interface of the memo change, resulting in a change in the layout of the display interface of the memo. SUMMARY

[0003] The present application provides a page display method and an electronic device, which are used to fix the layout positions of a text and a doodle in a display interface, so that the layout positions of the text and the doodle do not change with rotation of the electronic device or changes in a display window.

[0004] To achieve the above object, the present application adopts the following technical solutions:

[0005] In a first aspect, a page display method is provided, which is applied to an electronic device. The method includes: when a display interface of an application includes both a text and a doodle, the electronic device displays the text and the doodle on a layer where the text is located. Specifically, the electronic device displays a display interface of the application, which includes a first layer and a brush tool, and the first layer includes a first text. Then, the electronic device creates a second layer in response to a first operation on the brush tool, and displays a first doodle drawn on the second layer. Finally, the electronic device hides the second layer in response to an end-of-drawing operation, displays the first doodle drawn on the second layer on the first layer, and the first doodle is located below the first text.

[0006] In the present solution, when the display interface of the application includes both the text and the doodle, the electronic device displays the text and the doodle on the layer where the text is located, and displays the text and the doodle in different zones, such as the first doodle being located below the first text. In this way, the layout positions of the text and the doodle on the same layer are fixed, so that when the electronic device is rotated by 90 degrees or the width of a display window used to display the application changes, the layout positions of the text and the doodle on the display interface do not change.

[0007] In a possible implementation manner of the first aspect, the electronic device, in response to the end-of-drawing operation, hides the second layer and displays the first scribble drawn on the second layer on the first layer, can include: the electronic device, in response to the end-of-drawing operation, generates a first handwriting picture from the first scribble, pastes the first handwriting picture on a first handwriting area of the first layer, and hides the second layer. The first handwriting area is a projection area of the first handwriting picture on the first layer.

[0008] In another possible implementation manner of the first aspect, the electronic device, in response to the first operation on the brush tool, creates the second layer and displays the first scribble drawn on the second layer, can include: first, the electronic device, in response to the operation of clicking the brush tool, creates the second layer and a brush toolbar. The brush toolbar includes a plurality of brushes. Then, the electronic device, in response to the drawing operation on the second layer by any brush, displays the first scribble on the second layer.

[0009] In another possible implementation manner of the first aspect, the projection area of the second layer on the first layer is located below the first text. In this way, when the scribble is drawn on the second layer, the content (such as the first text) on the first layer is not blocked.

[0010] When there is already text on the display interface, the size of the layer created by the electronic device in response to the first operation on the brush tool is smaller than the size of the existing first layer.

[0011] In another possible implementation manner of the first aspect, the method can further include: the electronic device, in response to a modification operation on the content of the first handwriting picture, generates a first replacement picture corresponding to the first handwriting picture, and replaces the first handwriting picture with the first replacement picture on the first layer.

[0012] In another possible implementation manner of the first aspect, the electronic device, in response to the modification operation on the content of the first handwriting picture, generates a first replacement picture corresponding to the first handwriting picture, can include: first, the electronic device, in response to the clicking operation on the brush tool, displays a brush toolbar and loads a second layer corresponding to the first handwriting picture above the first handwriting picture. The second layer displays the first scribble, that is, the content of the second layer is consistent with the content of the first handwriting picture. Then, the electronic device, in response to the drawing operation on the second layer by any brush in the brush toolbar, displays a second scribble on the first handwriting layer. Finally, the electronic device, in response to the end-of-drawing operation, generates a first replacement picture from the first scribble and the second scribble on the second layer, that is, the content of the first replacement picture includes the first scribble and the newly drawn second scribble.

[0013] In a possible implementation manner of the first aspect, the electronic device generates the first replacement picture corresponding to the first handwritten picture in response to a modification operation on content of the first handwritten picture, and can include that the electronic device displays a pen tool bar in response to a click operation on the pen tool, loads a second layer corresponding to the first handwritten picture above the first handwritten picture, and creates a blank third layer. The size of the third layer is consistent with the size of the first layer, and the first scribble is displayed on the second layer. Then, the electronic device displays a third scribble on the third layer in response to a drawing operation on the third layer by any pen in the pen tool bar when the third layer is displayed and the second layer is not successfully loaded. When the second layer is successfully loaded, the electronic device pastes the third scribble on the second layer and deletes the third scribble on the third layer. The position of the third scribble on the second layer is consistent with the position of the third scribble on the third layer. Finally, the electronic device generates the first replacement picture by taking a screenshot of the first scribble and the third scribble in response to an end operation, that is, the content of the first replacement picture includes the first scribble and the newly drawn third scribble.

[0014] In a possible implementation manner of the first aspect, the electronic device replaces the first handwritten picture with the first replacement picture on the first layer, and can include that the electronic device pastes the first replacement picture on a second handwritten area of the first layer and deletes the first handwritten picture. The second handwritten area is a projection area of the first replacement picture on the first layer.

[0015] In a possible implementation manner of the first aspect, the first layer further includes a second handwritten picture. At this time, the method can further include that the electronic device loads a fourth layer corresponding to the second handwritten picture above the second handwritten picture in response to a click operation on the pen tool. The scribble on the fourth layer is consistent with the scribble on the second handwritten picture.

[0016] In the scheme, when the electronic device receives a click operation on the pen tool, on one hand, the electronic device can load a pen tool bar of the pen tool, and on the other hand, load handwritten layers corresponding to each handwritten picture. When the handwritten layers corresponding to each handwritten picture are all loaded, the electronic device displays the scribble drawn on the corresponding handwritten layer when receiving a drawing operation on any handwritten layer by any pen in the pen tool bar. That is, the purpose of alternately drawing on each handwritten layer can be achieved.

[0017] In a possible implementation form of the first aspect, the method further comprises: in response to a click operation on the first handwritten picture, the electronic device displays a boundary line of a second layer corresponding to the first handwritten picture, and when the electronic device receives a movement operation on the boundary line of the second layer, the electronic device adjusts the size of the second layer and the size of the first handwritten picture. The adjustment direction and adjustment distance of the second layer and the first handwritten picture are consistent with the movement direction and movement distance of the movement operation.

[0018] In a possible implementation form of the first aspect, the boundary line comprises at least one of an upper boundary line, a lower boundary line, a left boundary line, and a right boundary line.

[0019] In a second aspect, the present application provides an electronic device, comprising: one or more processors, and a memory and a display screen connected to each processor. The display screen is configured to display a display interface of an application. The memory is configured to store computer instructions, and when the one or more processors execute the computer instructions, the electronic device performs the method of any one of the first aspect.

[0020] In a third aspect, the present application provides a chip system applied to an electronic device, comprising one or more processors configured to invoke computer instructions to make the electronic device perform the method of any one of the first aspect.

[0021] In a fourth aspect, the present application provides a computer storage medium comprising computer instructions, and when the computer instructions are run on an electronic device, the electronic device performs the method of any one of the first aspect.

[0022] In a fifth aspect, the present application provides a computer program product, and when the computer program product is run on a computer, the computer performs the method of any one of the first aspect.

[0023] It should be understood that the technical effects of the second aspect to the fifth aspect can refer to the technical effects of the first aspect and any possible implementation form thereof, which will not be repeated here. BRIEF DESCRIPTION OF DRAWINGS

[0024] Figure 1 FIG. 1 shows a display interface of an electronic device according to an embodiment;

[0025] Figure 2 FIG. 2 shows a display interface of an electronic device according to an embodiment;

[0026] Figure 3 FIG. 3 shows a display interface of an electronic device according to an embodiment;

[0027] Figure 4 A structural diagram of a display interface of a memo application provided for an embodiment;

[0028] Figure 5 A display interface of an electronic device provided for an embodiment of the present application;

[0029] Figure 6 A hardware structure diagram of an electronic device provided for an embodiment of the present application;

[0030] Figure 7 A software architecture diagram of an electronic device provided for an embodiment of the present application;

[0031] Figure 8 A flow diagram of a page display method provided for an embodiment of the present application;

[0032] Figure 9 A display interface of an electronic device provided for an embodiment of the present application;

[0033] Figure 10 A display interface of an electronic device provided for an embodiment of the present application;

[0034] Figure 11 A structural diagram of a display interface of a memo application provided for an embodiment;

[0035] Figure 12 A display interface of an electronic device provided for an embodiment of the present application;

[0036] Figure 13 A display interface of an electronic device provided for an embodiment of the present application;

[0037] Figure 14 A display interface of an electronic device provided for an embodiment of the present application;

[0038] Figure 15 A flow diagram of a page display method provided for an embodiment of the present application;

[0039] Figure 16 A display interface of an electronic device provided for an embodiment of the present application;

[0040] Figure 17 A structural diagram of a display interface of a memo application provided for an embodiment;

[0041] Figure 18 A structural diagram of a display interface of a memo application provided for an embodiment;

[0042] Figure 19 FIG. 4 is a structural schematic diagram of a display interface of a memo application according to an embodiment of the present application;

[0043] Figure 20 FIG. 8 is a structural schematic diagram of a display interface of an electronic device according to an embodiment of the present application;

[0044] Figure 21 FIG. 9 is a structural schematic diagram of a display interface of an electronic device according to an embodiment of the present application;

[0045] Figure 22 FIG. 10 is a structural schematic diagram of a display interface of an electronic device according to an embodiment of the present application;

[0046] Figure 23 FIG. 11 is a structural schematic diagram of a display interface of an electronic device according to an embodiment of the present application;

[0047] Figure 24 FIG. 12 is a structural schematic diagram of a chip system according to an embodiment of the present application. DETAILED DESCRIPTION

[0048] The terms “first”, “second”, and the like in embodiments of the present application are only used for the purpose of distinguishing the same type of features, and should not be understood as indicating relative importance, quantity, order, and the like.

[0049] The terms “exemplary” or “for example” in embodiments of the present application are used to represent that an embodiment or design scheme is an example, illustration or description. Any embodiment or design scheme described as “exemplary” or “for example” in the present application should not be interpreted as being more preferred or more advantageous than other embodiments or design schemes. Rather, the terms “exemplary” or “for example” are used to present relevant concepts in a specific manner.

[0050] The terms “coupled” and “connected” in embodiments of the present application should be interpreted in a broad sense, for example, can refer to a direct physical connection, or an indirect connection through electronic devices, such as a connection through resistors, inductors, capacitors or other electronic devices.

[0051] The memo application is an application program in an electronic device, which can be used to record some memo information of a user, etc. The memo information can be at least one of a text input in the memo application by calling a text editing tool (such as an input method keyboard), and a scribble drawn in the memo application by calling a drawing tool. The scribble can be at least one of a picture and a text. It should be noted that the memo application can also be referred to as “electronic scratchpad”, “notebook”, “note”, or other names in other embodiments.

[0052] Figure 1Fig. 1 shows a display interface of an electronic device according to an embodiment.

[0053] In one embodiment, as shown in A of Figure 1 the main interface 110 of the mobile phone 100 includes an application icon 111 of a memo application. In response to a click operation on the application icon 111 of the memo application, as shown in B of Figure 1 the mobile phone 100 starts the memo application and displays a list item interface 120 of the memo application. The list item interface 120 includes controls of memos that have been entered by the user, such as Memo 1, Memo 2, Memo 3, Memo 4, … Each of the memos includes memo information.

[0054] In response to a click operation on the control 121 of the Memo 1, as shown in C of Figure 1 the mobile phone 100 displays a first information display interface 130 corresponding to the Memo 1. The first information display interface 130 includes a text 131 and a doodle 132 that are overlaid together.

[0055] Continuing as shown in B of Figure 1 the list item interface 120 further includes a new control 122. In response to a click operation on the new control 122, as shown in D of Figure 1 the mobile phone 100 displays a first editing interface 140 of a newly added memo. The first editing interface 140 includes a text editing area 141, an input method keyboard 142, and a brush tool 143. The text editing area 141 can be used to input text by the input method keyboard 142, and the doodle can be drawn in the text editing area 141 by the brush tool 143.

[0056] In one scenario, a memo in the memo application includes both text and doodle. If the electronic device is rotated by 90 degrees, or the width of a display window for displaying the memo changes, the layout positions of the text and the doodle on a display interface of the memo (such as an editing interface or an information display interface of the memo) change, resulting in a change in the layout of the display interface of the memo.

[0057] In one scenario, a memo in the memo application includes both text and doodle. If the electronic device is rotated by 90 degrees, or the width of a display window for displaying the memo changes, the layout positions of the text and the doodle on a display interface of the memo (such as an editing interface or an information display interface of the memo) change, resulting in a change in the layout of the display interface of the memo. Figures 1 to 3 The scenario is described in detail as follows:

[0058] Figure 2 Fig. 2B shows a schematic view of a display interface of an electronic device according to an embodiment.

[0059] In one embodiment, the electronic device is switched from a portrait state to a landscape state. In combination with Figure 1 C, as shown in Figure 2 Fig. 2C, when the mobile phone 100 is switched from the portrait state to the landscape state, the mobile phone 100 displays the second information display interface 210 corresponding to the memo 1. The second information display interface 210 includes the text 131 and the doodle 132 that are not overlapped together, and the doodle 132 is located below the text 131.

[0060] By comparing Figure 1 C and Figure 2 , it can be seen that when the electronic device is switched from the portrait state to the landscape state, the positions of the text and the doodle in the display interface of the memo application are dislocated, resulting in a change in the layout of the display interface of the memo application.

[0061] Figure 3 Fig. 2C shows a schematic view of a display interface of an electronic device according to an embodiment.

[0062] In another embodiment, the first electronic device receives a memo sent by the second electronic device, the display interfaces of the first electronic device and the second electronic device have different widths / sizes / screen widths, and when the first electronic device displays the memo received from the second electronic device, the layout of the display interface of the memo changes. As shown in Figure 3 A, the tablet computer 300 (i.e., the second electronic device) is in a portrait state, and the third information display interface 310 of the tablet computer 300 displays the text 131 and the doodle 132 that are not overlapped together, and the doodle 132 is located below the text 131. The text 131 and the doodle 132 are the memo information of the memo 1. When the mobile phone 100 (i.e., the first electronic device) receives the memo 1 sent by the tablet computer 300, because the screen width of the mobile phone 100 is narrower than the screen width of the tablet computer 300 in the portrait state, as shown in Figure 3 B, in the portrait state, the text 131 that is displayed in one line on the tablet computer 300 needs to be displayed in two lines on the mobile phone 100, so that the fourth information display interface 320 of the mobile phone 100 displays the text 131 and the doodle 132 that are overlapped together.

[0063] By comparing Figure 3 A and Figure 3 B, it can be seen that when the screen width of the electronic device becomes shorter / narrower, the positions of the text and the doodle in the display interface of the memo application are dislocated, resulting in a change in the layout of the display interface of the memo application.

[0064] Figure 4 A schematic diagram of the display interface of a memo application according to one embodiment is shown. The following is in conjunction with... Figure 4 The causes of the above problems are analyzed as follows:

[0065] In one embodiment, the display interface of the memo application (such as either an editing interface or an information display interface) includes a handwriting layer and a content editing layer (which may be referred to as the first layer). The size of both the handwriting layer and the content editing layer is the same as the size of the display interface, and the handwriting layer is located above the content editing layer.

[0066] like Figure 4 As shown, the display interface 400 of the memo application includes a handwriting layer 411 and a content editing layer 412. On the handwriting layer 411, doodles 132 can be drawn using the brush tool, and on the content editing layer 412, text 131 can be entered using the input method keyboard. The handwriting layer 411 is located above the content editing layer 412, and its transparency is 100%, meaning it is completely transparent. Therefore, the display interface 400 can simultaneously display the doodles 132 on the handwriting layer 411 and the text 131 on the content editing layer 412. The handwriting layer 411 and the content editing layer 412 are two independent layers; therefore, changes to the doodles 132 in the handwriting layer 411 and changes to the text 131 in the content editing layer 412 do not affect each other.

[0067] The size of the Notes app's display depends on the screen size of the electronic device and whether the Notes app is displayed in full-screen mode. When the Notes app is displayed in full-screen mode, the size of the Notes app's display is the same as the screen size of the electronic device. When the Notes app is displayed in a small window on the electronic device, the size of the Notes app's display is the same as the size of the small window.

[0068] Typically, the display window of an electronic device is rectangular. When the electronic device is in portrait mode, the width of the display window is the shorter side of the rectangle, and the height is the longer side. When the electronic device is in landscape mode, the width of the display window is the longer side, and the height is the shorter side. Therefore, when the electronic device is in portrait mode, the width of the display window is less than its height; when the electronic device is in landscape mode, the width of the display window is greater than its height.

[0069] When the electronic device is in the portrait state, the length of the display interface is the short side of the rectangle corresponding to the display window of the electronic device. If the electronic device switches from the portrait state to the landscape state, the length of the display interface is the long side of the rectangle corresponding to the display window of the electronic device. Since the long side of the rectangle is longer than the short side of the rectangle, when the electronic device switches from the portrait state to the landscape state, the length of the display interface of the memo application becomes longer. At this time, the length of each layer constituting the display interface becomes longer. When the length of a layer becomes longer, in order to ensure that the length-width ratio of the layer does not change, the width of the layer will also change proportionally, so the width of each layer constituting the display interface will become longer in proportion.

[0070] For the content editing layer, the length of the content editing layer becomes longer, so that the text recorded on a line of the content editing layer becomes more, so that the same text occupies fewer lines on the content editing layer with a longer length. For example, by comparing C in Figure 1 and Figure 2 it can be seen that as the length of the content editing layer becomes longer, the same text 131 occupies one line on the content editing layer instead of two lines.

[0071] For the handwriting layer, the size of the handwriting layer becomes larger, so that the size of the scribble drawn on the handwriting layer will also become larger in proportion. For example, by comparing C in Figure 1 and Figure 2 it can be seen that as the size of the handwriting layer becomes larger, the size of the scribble 132 on the handwriting layer also becomes larger.

[0072] That is, when the electronic device switches from the portrait state to the landscape state, the size of the content editing layer and the handwriting layer constituting the display interface both become larger, and the content editing layer and the handwriting layer are two completely independent layers, so the text and the scribble on the display interface change respectively, thereby causing the layout position of the text and the scribble on the display interface to change, so that the layout of the display interface changes.

[0073] It should be understood that the case where the electronic device switches from the landscape state to the portrait state is opposite to the case where the electronic device switches from the portrait state to the landscape state, which will not be described herein.

[0074] To address the aforementioned issues, this application provides a page display method and an electronic device. When a memo includes both text and doodles, the electronic device can display both text and doodles on the same layer as the text, and display them separately. In this way, the layout positions of the text and doodles on the same layer are fixed. Therefore, when the electronic device rotates 90 degrees or the width of the display window used to display the memo changes, the layout positions of the text and doodles included in the memo will not change on the corresponding display interface of the display window.

[0075] Figure 5 This illustration shows one of the display interface diagrams of an electronic device provided in an embodiment of this application.

[0076] In one embodiment, such as Figure 5 As shown in Figure A, when the phone 100 is in portrait mode, it displays the fifth information display interface 510 of the Notes app. The fifth information display interface 510 includes non-overlapping text 131 and doodles 132, with the doodles 132 located below the text 131. In response to switching the phone 100 from portrait to landscape mode, as shown... Figure 5 As shown in B, the phone 100 displays the sixth information display interface 520 of the Notes app. The sixth information display interface 520 includes unoverlapping text 131 and doodles 132, with the doodles 132 located below the text 131.

[0077] contrast Figure 5 A and Figure 5 As can be seen from B in the figure: when the electronic device rotates 90 degrees or the screen size of the electronic device changes, the graffiti 132 is always located below the text 131, so the layout position of the text and graffiti in the display interface remains unchanged.

[0078] The electronic device involved in the embodiments of the present application can be a device with display function. The electronic device can be mobile or fixed. The electronic device can be deployed on land (for example, indoors or outdoors, handheld or vehicle-mounted, etc.), water surface (for example, ships, etc.), or air (for example, airplanes, balloons, satellites, etc.). The electronic device can be referred to as user equipment (UE), access terminal, terminal unit, subscriber unit, terminal station, mobile station (MS), mobile station, terminal agent or terminal device, etc. For example, the electronic device can be a mobile phone, a tablet computer, a notebook computer, a smart bracelet, a smart watch, a headset, a smart speaker, a virtual reality (VR) device, an augmented reality (AR) device, a terminal in industrial control, a terminal in self driving, a terminal in remote medical treatment, a terminal in smart grid, a terminal in transportation safety, a terminal in smart city, a terminal in smart home, etc. The embodiments of the present application do not limit the specific type and structure of the electronic device.

[0079] Figure 6 A hardware structure schematic diagram of an electronic device provided by the embodiments of the present application is shown. The specific type and structure of the electronic device are not limited in the embodiments of the present application. Figure 6 The hardware structure of the electronic device is introduced.

[0080] Taking the electronic device as a mobile phone for example. As shown in Figure 6 The electronic device 600 can include a processor 610, a memory 620, a universal serial bus (USB) interface 630, a power management module 640, an antenna, a communication module 650, a display screen 660, an audio module 670, a camera 680, a sensor module 690, etc.

[0081] The processor 610 can include one or more processing units, for example: the processor 610 can include an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, a memory, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU), etc. Among them, different processing units can be independent devices, or can be integrated in one or more processors. The controller can be the nerve center and command center of the electronic device 600. The controller can generate operation control signals according to instruction operation codes and timing signals, and complete the control of fetching instructions and executing instructions.

[0082] The memory 620 can be used to store computer-executable program codes, including instructions. The processor 610 executes various functions of the electronic device and data processing by running the instructions stored in the memory 620. The memory 620 can include a program storage area and a data storage area. Among them, the program storage area can store an operating system, at least one application program required by a function (such as a sound playing function, an interface display function, etc.). The data storage area can store data created during the use of the electronic device (such as a notification message), etc. In addition, the memory 620 can include a high-speed random access memory, and can also include a non-volatile memory, for example, at least one magnetic disk storage device, a flash memory device, a universal flash storage (UFS), etc.

[0083] The power management module 640 is used to connect the battery and the processor 610. The power management module 640 receives the battery and / or power input, and supplies power for the processor 610, the memory 620, the communication module 650, the display screen 660, the audio module 670, and the camera 680, etc. The power management module 640 can also be used to monitor the battery capacity, the battery cycle number, the battery health status (leakage, impedance), etc. In some other embodiments, the power management module 640 can also be arranged in the processor 610.

[0084] The communication module 650 can provide a solution for wireless communication including wireless local area networks (WLAN) (e.g., wireless fidelity (Wi-Fi) network), Bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), infrared (IR), etc. The communication module 650 can be one or more devices that integrate at least one communication processing module. The communication module 650 receives electromagnetic waves via an antenna, frequency-modulates and filters the electromagnetic wave signals, and transmits the processed signals to the processor 610. The communication module 650 can also receive signals to be transmitted from the processor 610, frequency-modulate them, amplify them, and radiate them as electromagnetic waves via an antenna.

[0085] In some embodiments, the antenna and the communication module 650 of the electronic device 600 are coupled such that the electronic device 600 can communicate with a network and other devices through wireless communication technology. The wireless communication technology can include global system for mobile communications (GSM), general packet radio service (GPRS), code division multiple access (CDMA), wideband code division multiple access (WCDMA), time division code division multiple access (TD-SCDMA), long term evolution (LTE), BT, global navigation satellite system (GNSS), WLAN, NFC, FM, and / or IR technology, etc. The GNSS can include global positioning system (GPS), beidou navigation satellite system (BDS), global navigation satellite system (GLONASS), and / or Galileo satellite navigation system (GALILEO).

[0086] The electronic device 600 implements a display function through a GPU, a display 660, and an application processor, etc. The GPU is a microprocessor for image processing, which is connected to the display 660 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. The processor 610 can include one or more GPUs, which execute program instructions to generate or change display information.

[0087] The display screen 660 is configured to display images, videos, and the like. The display screen 660 includes a display panel. The display panel can be a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode (AMOLED), a flex light-emitting diode (FLED), a Mini-LED, a Micro-OLED, a quantum dot light emitting diodes (QLED), or the like. In embodiments of the present application, the display screen 660 can be configured to display various display interfaces in the memo application. For example, a list item interface, an editing interface, an information display interface, and the like. Different display interfaces can be composed of different layers. For example, the editing interface can include a content editing layer, a handwriting layer, and the like, and the information display interface can include a content editing layer, and the like.

[0088] The electronic device 600 can implement a photographing function through an ISP, the camera 680, a video codec, a GPU, the display screen 660, and an application processor, and the like.

[0089] The audio module 670 is configured to convert digital audio information into an analog audio signal output, and to convert an analog audio input into a digital audio signal. The audio module 670 can also be configured to encode and decode audio signals. In some embodiments, the audio module 670 can be disposed in the processor 610, or some functional modules of the audio module 670 can be disposed in the processor 610.

[0090] The camera 680 is configured to capture still images or videos. An object generates an optical image through a lens and projects the optical image onto a photosensitive element. The photosensitive element can be a charge coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor. The photosensitive element converts the optical signal into an electrical signal, and then transmits the electrical signal to an ISP to convert it into a digital image signal. The ISP outputs the digital image signal to a DSP for processing. The DSP converts the digital image signal into a standard RGB, YUV, or the like format image signal.

[0091] The sensor module 690 can include a pressure sensor, a gyro sensor, a barometric pressure sensor, a magnetic sensor, an acceleration sensor, a distance sensor, a proximity light sensor, a fingerprint sensor, a temperature sensor, a touch sensor, an ambient light sensor, and a bone conduction sensor, etc.

[0092] It can be understood that the structure illustrated in the embodiment does not constitute a specific limitation on the electronic device 600. In other embodiments, the electronic device 600 can include more or fewer components than illustrated, or combine certain components, or split certain components, or different arrangement of components. The illustrated components can be implemented in hardware, software, or a combination of software and hardware.

[0093] Generally, the implementation of each function in the electronic device needs not only hardware support, but also software cooperation. The software system of the electronic device can adopt a layered architecture, an event-driven architecture, a microkernel architecture, a microservice architecture, or a cloud architecture. The embodiment of the present application adopts an Android For example, in combination with Figure 6 The software architecture of the electronic device related to the embodiment of the present application is introduced.

[0094] Figure 7 A software architecture schematic diagram of an electronic device provided by the embodiment of the present application is shown.

[0095] As Figure 7 shown, the layered architecture divides the software into several layers, each layer has a clear role and division of labor. The layers communicate with each other through software interfaces. In some embodiments, the Android is divided into four layers, from top to bottom: an application (APP) layer, an application framework (FWK) layer, and a kernel layer.

[0096] The application layer can include a series of application packages, such as a memo, etc. Among them, the memo includes a page display program, which is used to display text or scribble in response to input instructions in the memo application.

[0097] The framework layer is used to provide application program interfaces (APIs) and system resource services to the applications in the application layer. For example, the framework layer provides APIs to the page display program.

[0098] The kernel layer, also known as the driver layer, is the layer between hardware and software. The kernel layer includes drivers for various hardware. In some examples, the kernel layer can include at least display drivers and touch drivers, etc.

[0099] The display driver is a software or hardware for controlling and managing a display device. It serves as a bridge between the operating system and the display device, providing the operating system with access and control functions of the display device. For example, the display driver is used to display the display interface of an application on the display screen.

[0100] The touch driver is a software or hardware for controlling and managing a touch device. It serves as a bridge between the operating system and the touch device, providing the operating system with access and control functions of the touch device. For example, the touch driver is used to perform a drawing operation on the display screen by a pen.

[0101] It should be noted that, Figure 7 The layers in the software structure shown and the components contained in each layer do not constitute a specific limitation on the electronic device. In other embodiments, the electronic device can include more layers than shown, such as a system library (FWK LIB) layer and a kernel layer. Each layer can include more or fewer components than shown. In addition, the various functional modules described above can be combined into one functional module, and the various layers can be combined into one layer.

[0102] It can be understood that the electronic device contains hardware and / or software modules corresponding to each function in order to implement the method in the embodiments of the present application. The algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in hardware or a combination of hardware and computer software. Whether a certain function is implemented in hardware or computer software driven hardware depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application in conjunction with the embodiments.

[0103] The following describes Figures 8 to 22 The execution subject is Figure 6 The electronic device shown is taken as an example to introduce the page display method provided by the embodiments of the present application.

[0104] Figure 8 One of the flowcharts of the page display method provided by the embodiments of the present application is shown. As Figure 8 The page display method provided by the embodiments of the present application can include:

[0105] S801, in response to a new operation of a memo application, the electronic device displays a first editing interface of the memo application.

[0106] The editing interface of the memo application can be used to input memo information. The memo information can be at least one of text and scribble. The scribble can be at least one of a picture and a character.

[0107] Based on the screen orientation of the electronic device, the editing interface of the Notes app can be divided into a landscape editing interface and a portrait editing interface. When the electronic device is in portrait mode, it displays the portrait editing interface of the Notes app; when the electronic device is in landscape mode, it displays the landscape editing interface of the Notes app.

[0108] In one embodiment, taking the phone in portrait mode as an example. Continuing... Figure 1 B and Figure 1 As shown in D, in response to clicking the new control 122 in the list item interface 120, the mobile phone 100 can create a new memo and display the first editing interface 140 corresponding to the newly created memo. In this embodiment, the first editing interface 140 is a portrait editing interface.

[0109] It should be understood that Figure 1 The editing interface shown in D is only one example; in other embodiments, the editing interface of the memo application may be of other styles.

[0110] S802, In response to a first input operation on the first editing interface, the electronic device displays first text on the first editing interface.

[0111] Figure 9 This is a second schematic diagram of the display interface of an electronic device provided in an embodiment of this application.

[0112] In one embodiment, such as Figure 9 As shown in Figure A, the first editing interface 140 includes a text editing area 141 and text editing tools (such as an input method keyboard 142). In the first editing interface 140, in response to a first input operation via the input method keyboard 142 in the text editing area 141, such as... Figure 9 As shown in B, mobile phone 100 displays the first text 910 on the first editing interface 140.

[0113] In one embodiment, the user can input the first text in different ways. For example, after activating the input method keyboard, the user can input the first text by typing, or by handwriting, or by voice, and so on.

[0114] Regardless of how the user inputs the first text, the electronic device can display the first text in the editing interface after receiving it.

[0115] In one embodiment, the area containing the text on the editing interface can be referred to as the text area. For example, the area containing the first text on the editing interface can be referred to as the first text area.

[0116] In one embodiment, the editing interface includes a content editing layer, the size of which is the same as the size of the editing interface. The first input operation in the first editing interface refers to the first input operation performed on the content editing layer of the first editing interface using a text editing tool (such as an input method keyboard). In one example, the content editing layer may be referred to as the first layer.

[0117] S803, in response to the operation of clicking the brush tool in the first editing interface, the electronic device displays the brush toolbar in the first editing interface and creates the first handwriting layer.

[0118] In this context, doodles can be drawn on the handwriting layer using a pen. For clarity, the doodles drawn on the first handwriting layer will be referred to as the first doodles. In one example, the first handwriting layer can be called the second layer.

[0119] Figure 10 The third illustration shows a display interface diagram of an electronic device provided in an embodiment of this application.

[0120] In one embodiment, such as Figure 10 As shown in A, the first editing interface 140 includes a brush tool 143. In response to clicking the brush tool 143, as... Figure 10 As shown in B, the mobile phone 100 displays the brush toolbar 1010 of the brush tool 143 in the first editing interface 140. The brush toolbar 1010 includes a variety of brushes, such as the first brush 1011.

[0121] In one embodiment, the first handwriting layer is located above the content editing layer, and the projection area of ​​the first handwriting layer on the content editing layer is located below the first text area. Therefore, the projection area of ​​the first handwriting layer on the content editing layer does not overlap with the first text area on the content editing layer.

[0122] The following text combines Figure 11 The relationship between the content editing layer and the handwriting layer involved in the embodiments of this application is described as follows:

[0123] Figure 11 This illustration shows one of the structural diagrams of the display interface of a memo application provided in an embodiment of this application.

[0124] For example, let's take a scenario where the phone is in portrait mode, and you first enter text in the editing interface (i.e., the editing interface has a text area), and then draw doodles. Figure 11As shown in A, the first editing interface 140 may include a content editing layer 412 and a first handwriting layer 1110. The content editing layer 412 includes a first text area 1120. The first handwriting layer 1110 is located above the content editing layer 412, and the projection area 1130 of the first handwriting layer 1110 on the content editing layer 412 is located below the first text area 1120.

[0125] S804, In response to a drawing operation on the first handwriting layer using any one of a variety of brushes, the electronic device displays a first doodle on the first handwriting layer.

[0126] Since the handwriting layer is a layer within the memo editing interface, when the electronic device receives a doodle drawn on the handwriting layer, it displays the doodle on the editing interface. Therefore, the first doodle drawn on the first handwriting layer can be displayed on the first editing interface.

[0127] In one embodiment, continue as follows Figure 10 As shown in B, the first editing interface 140 includes a first paintbrush 1011. In response to clicking the first paintbrush 1011, as... Figure 10 As shown in C, the mobile phone 100 displays a selection toolbar 1020 for the first brush 1011. The selection toolbar 1020 for the first brush 1011 includes a color slider 1030 and multiple brush tip selection controls 1040. Sliding the slider 1031 on the color slider 1030 along a first direction (e.g., horizontally) adjusts the output color of the first brush 1011. Different brush tip selection controls 1040 represent brush tips of different thicknesses, resulting in lines of varying thickness. In response to sliding the slider 1031 in the color slider to a target position, the mobile phone 100 uses the color corresponding to the target position of the color slider 1030 as the output color of the first brush 1011. In response to clicking the first brush tip selection control 1041, the mobile phone 100 uses the brush tip corresponding to the first brush tip selection control 1041 as the brush tip of the first brush 1011.

[0128] Combination Figure 10 D and Figure 11 As shown in B, in response to a drawing operation on the first handwriting layer 1110 of the first editing interface 140 via the first pen 1011, the mobile phone displays the first doodle 1050 on the first handwriting layer 1110 of the first editing interface 140.

[0129] S805, In response to the drawing operation of exiting the brush toolbar, the electronic device takes a screenshot of the first handwriting layer to generate a first handwriting image, and pastes the first handwriting image into the first handwriting area of ​​the content editing layer of the first editing interface.

[0130] The drawing operation of exiting the pen toolbar can include clicking any position of the text region in the editing interface of the memo application, or clicking the finish control in the editing interface of the memo application, and the like.

[0131] The first handwritten region can be a projection region of the first handwritten picture on the content editing layer. Therefore, the first handwritten region is located below the first text region, and the first handwritten picture is located below the first text, i.e., the first scribble is located below the first text.

[0132] Figure 12 Fig. 4 shows a display interface of an electronic device according to an embodiment of the present application.

[0133] In one embodiment, as shown in A of Figure 12 The drawing operation of exiting the pen toolbar can include clicking any position of the text region in the editing interface of the memo application, or clicking the finish control in the editing interface of the memo application, and the like. Figure 12 In response to the operation of clicking the finish control 1210, the mobile phone 100 displays the first text 910 and the first scribble 1050 in the first editing interface 140, and no longer displays the pen toolbar and the finish control, as shown in B of

[0134] It should be noted that the finish control can also be represented by other forms such as "V" in other embodiments.

[0135] The content on the first handwritten layer is consistent with the content on the first handwritten picture, and both are the first scribble. Therefore, the electronic device pastes the first handwritten picture in the first handwritten region of the content editing layer, so that the first scribble included in the first handwritten picture belongs to the content editing layer. Since the first text is also located on the content editing layer and above the first handwritten picture, the first text and the first scribble both belong to the same content editing layer, and the layout positions of the first text and the first scribble on the content editing layer are fixed.

[0136] It can be seen that, in the case where the content editing layer includes both text and scribble, the layout positions of the text and the scribble on the content editing layer are fixed, and therefore the layout positions of the text and the scribble on the editing interface of the memo application are fixed.

[0137] In one embodiment, as shown in A of Figure 11As shown in C, the phone takes a screenshot of the first handwritten layer to generate a first handwritten image 1140, and then pastes the first handwritten image 1140 onto the content editing layer 412. The first handwritten image 1140 includes a first doodle 1050. Thus, both the first text 910 and the first doodle 1050 are located on the content editing layer 412, with the first doodle 1050 located below the first text 910.

[0138] It should be understood that in this embodiment, since the first text was entered first on the content editing layer and then the first handwritten image was pasted, the first text is positioned above the first doodle in the display interface of the memo application. In other embodiments, if the first handwritten image is pasted first on the content editing layer and then the first text is entered, the first doodle will be positioned above the first text in the display interface of the memo application.

[0139] In one embodiment, after the electronic device generates a corresponding handwritten image from a screenshot of a doodle on a handwritten layer, the electronic device can hide the handwritten layer. Thus, when the Notes app's display includes doodles, the Notes app's display can show only the content editing layer. At this time, the content editing layer includes both doodles and text, so both doodles and text are displayed simultaneously on the display.

[0140] S806, In response to a second input operation on the first editing interface, the electronic device displays second text on the first editing interface.

[0141] The second input operation in the first editing interface refers to the second input operation in the content editing layer of the first editing interface using a text editing tool (such as an input method keyboard).

[0142] Figure 13 The fifth illustration shows a display interface diagram of an electronic device provided in an embodiment of this application.

[0143] In one embodiment, such as Figure 13 As shown in Figure A, the first editing interface 140 includes first text 910 and first doodle 1050. In response to a click operation in any area below the first doodle 1050 in the first editing interface 140, such as... Figure 13 As shown in B, the mobile phone 100 displays an input method keyboard 142 and a drawing tool 143, and a cursor 1310 is displayed below the first drawing 1050. In response to a second input operation via the input method keyboard 142 at the cursor 1310, as... Figure 13 As shown in C, mobile phone 100 displays second text 1320 on the first editing interface 140.

[0144] As can be seen from the above, in the embodiment of the present application, when the display interface of the memo application includes both text and scribble, the text area where the text is located and the handwriting area where the scribble is located are displayed separately. In this way, when the display interface of the memo application includes multiple texts and multiple scribbles, the multiple texts and the multiple scribbles can be alternately displayed in the display interface of the memo application.

[0145] S807, in response to rotating the electronic device by 90 degrees, the electronic device displays a second editing interface of the memo application.

[0146] In the embodiment, the rotating the electronic device by 90 degrees can be switching the electronic device from a horizontal screen state to a vertical screen state, or switching the electronic device from a vertical screen state to a horizontal screen state. In this paper, the electronic device is switched from a vertical screen state to a horizontal screen state as an example, and the following is introduced in combination with Figure 13 :

[0147] In an embodiment, as shown as C in Figure 13 , the mobile phone 100 is in a vertical screen state, and the mobile phone 100 displays a first editing interface 140 of a memo application. The first editing interface 140 includes, from top to bottom, a first text 910, a first scribble 1050, and a second text 1320. In response to switching the mobile phone 100 from a vertical screen state to a horizontal screen state, as shown as D in Figure 13 , the mobile phone 100 displays a second editing interface 1330 of the memo application. The second editing interface 1330 includes, from top to bottom, the first text 910, the first scribble 1050, and the second text 1320.

[0148] As can be seen from the above, in the embodiment of the present application, rotating the electronic device by 90 degrees does not affect the layout position of the text and the scribble in the editing interface of the memo application.

[0149] Figure 14 Fig. 6 shows a display interface of an electronic device according to an embodiment of the present application.

[0150] In another embodiment, taking the tablet 300 receiving the memo sent by the mobile phone 100 as an example. As shown in Figure 14 , the mobile phone 100 displays a first editing interface 140 of a memo application. The first editing interface 140 includes, from top to bottom, a first text 910, a first scribble 1050, and a second text 1320. After the tablet 300 receives the memo sent by the mobile phone 100, the tablet 300 displays the memo in a third editing interface 1410. The third editing interface 1410 includes, from top to bottom, the first text 910, the first scribble 1050, and the second text 1320.

[0151] Therefore, in the embodiment of the present application, the width of the display window for displaying the memo application is changed, and the layout positions of the text and the scribble in the display interface of the memo application are not affected.

[0152] In summary, in the embodiment of the present application, the electronic device is rotated by 90 degrees, or the width of the display window for displaying the memo application is changed, and the layout positions of the text and the scribble in the display interface of the memo application are not affected.

[0153] It should be understood that one information display interface of the memo application is obtained from the corresponding editing interface, and therefore the electronic device is rotated by 90 degrees, or the width of the display window for displaying the memo application is changed, and the layout positions of the text and the scribble in the information display interface of the memo application are not affected. Therefore, the electronic device is rotated by 90 degrees, or the width of the display window of the electronic device is changed, and the layout positions of the text and the scribble in the display interface of the memo application are not affected.

[0154] After the electronic device performs the steps in the above embodiment, one display interface of the memo application can include a plurality of texts and a plurality of scribbles. Hereinafter, the display interface of the memo application is described by taking an example of the display interface including two texts and two scribbles. Figure 15 The display interface including two scribbles can be understood as the display interface including two handwriting pictures.

[0155] Figure 15 A flowchart of a page display method provided by an embodiment of the present application is shown. As shown in the figure, Figure 15 the page display method provided by the embodiment of the present application can include:

[0156] S1501, the electronic device displays a display interface of a memo application.

[0157] The display interface of the memo application includes alternately displayed first text, first scribble, second text and fourth scribble.

[0158] Figure 16 A display interface of an electronic device provided by an embodiment of the present application is shown.

[0159] In one embodiment, as Figure 16As shown in A of FIG. 16, the mobile phone 100 displays the display interface 1600 of the memo application. The display interface 1600 of the memo application includes, in sequence from top to bottom, the first text 910, the first handwritten picture 1140, the second text 1320, and the second handwritten picture 1610. The region where the first text 910 is located is a first text region, the region where the second text 1320 is located is a second text region, the region where the first handwritten picture 1140 is located is a first handwritten region, and the region where the second handwritten picture 1610 is located is a second handwritten region. The content of the first handwritten picture 1140 is the first scribble 1050, and the content of the second handwritten picture 1610 is the fourth scribble 1620.

[0160] In an embodiment, the background color of the first handwritten picture and the second handwritten picture is consistent with the background color of the content editing layer, and the border color of the first handwritten picture and the border color of the second handwritten picture are consistent with the background color of the content editing layer. In this way, the first handwritten picture and the second handwritten picture can be integrated with the content editing layer. Figure 16 In order to show that the first handwritten picture and the second handwritten picture are located on the content editing layer, the border of the first handwritten picture and the border of the second handwritten picture are represented by black lines in FIG. 16.

[0161] S1502, in response to the click operation on the first target text, the electronic device displays a text editing tool and a brush tool.

[0162] The first target text is any text in the display interface of the memo application. For example, the first target text is the first text or the second text.

[0163] When the electronic device receives the click operation on any text, the electronic device can display the text editing tool (such as an input method keyboard) and the brush tool in the display interface of the memo application, so that the corresponding text region enters the re-editing state. In the re-editing state, the electronic device can modify the text in the corresponding text region.

[0164] In an embodiment, as shown in B of FIG. 16, the first text region corresponding to the first text 910 enters the re-editing state, and the mobile phone 100 displays the input method keyboard 142, the brush tool 143, and the completion control 1210 in the display interface 1600 of the memo application, and displays the cursor 1310 in the first text region. Figure 16 As shown in A of FIG. 16, the mobile phone 100 displays the display interface 1600 including the first text 910. In response to the operation of clicking the first text 910, as shown in B of FIG. 16, the first text region corresponding to the first text 910 enters the re-editing state, and the mobile phone 100 displays the input method keyboard 142, the brush tool 143, and the completion control 1210 in the display interface 1600 of the memo application, and displays the cursor 1310 in the first text region. Figure 16

[0165] S1503, in response to the modification operation on the first target text by the text editing tool, the electronic device displays the modified second target text. ​

[0166] In one embodiment, in response to a modification operation on the first text via the input method keyboard, such as Figure 16 As shown in C, the mobile phone 100 displays the third text 1630, which is a modification of the first text 910, in the display interface 1600 of the memo application.

[0167] It should be noted that when the display interface includes multiple texts, all texts on the display interface can enter edit mode when the electronic device displays a text editing tool. In this case, when the electronic device receives a modification operation on any text, it can display the corresponding modified text.

[0168] S1504. In response to a click on the brush tool, the electronic device loads the corresponding handwritten layer above each handwritten image and displays the brush toolbar.

[0169] As described in step S805 above, the handwritten image is generated by the electronic device from a screenshot of the doodles on the corresponding handwritten layer. Furthermore, after generating the handwritten image, the electronic device hides the corresponding handwritten layer. Since the handwritten layer is used for drawing doodles, when modifications are needed to the content of a handwritten image, the electronic device loads the corresponding handwritten layer, thus displaying it to allow further drawing. Because the handwritten image is located on the content editing layer, and the handwritten layer is located above the content editing layer, the loaded handwritten layer will be displayed above the corresponding handwritten image. In this way, each handwritten layer will cover its corresponding handwritten image. At this point, the doodles in each handwritten layer are identical to the doodles in the corresponding handwritten image.

[0170] In one embodiment, such as Figure 16 B or Figure 16 As shown in C, in response to a click operation on the brush tool 143, as Figure 16 As shown in D, the mobile phone 100 displays the drawing toolbar 1010 in the display interface 1400.

[0171] Figure 17 This is a second schematic diagram showing the structure of the display interface of a memo application provided in an embodiment of this application.

[0172] From a layer perspective, in response to a click on brush tool 143, such as Figure 17As shown in FIG. 11B, the phone 100 displays the first handwriting layer 1110 above the first handwriting picture 1140, and the first doodle 1050 is displayed in the first handwriting layer 1110. The phone 100 also displays the second handwriting layer 1710 above the second handwriting picture 1610, and the fourth doodle 1620 is displayed in the second handwriting layer 1710. At this time, the doodle in the first handwriting layer 1110 is consistent with the doodle in the first handwriting picture 1140, and the doodle in the second handwriting layer 1710 is consistent with the doodle in the second handwriting picture 1610. In an example, the second handwriting layer can be referred to as the fourth layer.

[0173] At this time, the handwriting layer corresponding to each handwriting picture is displayed above the handwriting picture respectively, and thus the drawing operation can be alternately performed on each handwriting layer by using the brush tool, and free drawing can be performed.

[0174] S1505, in response to the drawing operation on the first target handwriting layer by using any brush in the brush toolbar, the electronic device further displays a target doodle on the first target handwriting layer.

[0175] This step can refer to the related description of S804, and details are not described herein.

[0176] When the first target handwriting layer is the first handwriting layer, the electronic device displays the first target doodle on the first handwriting layer in response to the drawing operation on the first handwriting layer. When the first target handwriting layer is the second handwriting layer, the electronic device displays the second target doodle on the second handwriting layer in response to the drawing operation on the second handwriting layer.

[0177] In an example, the first target doodle displayed on the first handwriting layer can be referred to as the second doodle.

[0178] In an embodiment, when the electronic device loads the handwriting layer corresponding to each handwriting picture, the electronic device further creates a third handwriting layer. The third handwriting layer is located above all the layers, the third handwriting layer is a completely transparent layer, and the size of the third handwriting layer is consistent with the size of the content editing layer. In an example, the third handwriting layer can be referred to as the third layer.

[0179] Based on this, since the size of the content editing layer is consistent with the size of the display interface of the memo application, the drawing operation on any area of the display interface of the memo application can be performed through the third handwriting layer, and the third handwriting layer does not block the content of other layers.

[0180] Compared with the time length required for loading a handwriting layer including the scribble, the time length required for the electronic device to create a blank handwriting layer is shorter. Therefore, when the electronic device receives the click operation on the brush tool, the third handwriting layer is displayed preferentially, and then the first target handwriting layer is displayed.

[0181] Figure 18 Fig. 3 shows a structure diagram of a display interface of a memo application according to an embodiment of the present application.

[0182] For example, in response to the click operation on the brush tool, the third handwriting layer 1800 is displayed preferentially above the content editing layer 412, then the first handwriting layer 1110 is displayed between the third handwriting layer 1800 and the first handwriting picture 1140, and the second handwriting layer 1710 is displayed between the third handwriting layer 1800 and the second handwriting picture 1610. Figure 18

[0183] In one example, it is assumed that the electronic device has displayed the third handwriting layer but not displayed the first target handwriting layer. When the electronic device receives the drawing operation, the electronic device can display the drawn third scribble on the third handwriting layer. After the electronic device successfully loads the first target handwriting layer, the electronic device can paste the third scribble on the third handwriting layer onto the first target handwriting layer, and delete the third scribble on the third handwriting layer. At this time, if the electronic device receives the drawing operation again, the electronic device can directly draw the scribble on the first target handwriting layer. That is, in this case, the target scribble on the first target handwriting layer can include the third scribble copied from the third handwriting layer, and a fourth scribble directly drawn on the first target handwriting layer.

[0184] In another example, it is assumed that the electronic device has displayed the third handwriting layer and has displayed the first target handwriting layer. When the electronic device receives the drawing operation, the electronic device can directly draw the target scribble on the first target handwriting layer.

[0185] In one embodiment, after the electronic device pastes the scribble in the third handwriting layer to the first target handwriting layer, the electronic device can hide the third handwriting layer. For example, the electronic device sets the state identifier of the third handwriting layer to the second value. Alternatively, since the third handwriting layer is a transparent layer and does not affect other layers, after the electronic device pastes the scribble in the third handwriting layer to the first target handwriting layer, the electronic device can continue to display the third handwriting layer.

[0186] ​In an embodiment, when the electronic device pastes the third scribble on the third handwriting layer on the first target handwriting layer, the electronic device first proportionally adjusts the third scribble to obtain a fifth scribble based on a proportional relationship between a size of the third handwriting layer and a size of the first target handwriting layer. Then, the electronic device pastes the fifth scribble on the first target handwriting layer. The position of the third scribble on the third handwriting layer corresponds to the position of the fifth scribble on the first target handwriting layer. For example, if the third scribble is located at the upper right corner of the third handwriting layer, the fifth scribble is also located at the upper right corner of the first target handwriting layer.

[0187] Since the size of the third handwriting layer is consistent with the size of the content editing layer, and the size of the first target handwriting layer is smaller than the size of the content editing layer, the size of the third handwriting layer is greater than the first target handwriting layer. Therefore, the size of the fifth scribble is smaller than the size of the third scribble.

[0188] S1506, in response to the drawing operation of exiting the brush toolbar, the electronic device generates a second target handwriting picture for the scribble on the first target handwriting layer, pastes the second target handwriting picture on the target handwriting area of the content editing layer of the display interface, and deletes the first target handwriting picture.

[0189] The drawing operation of exiting the brush toolbar can refer to the related description in S805 described above, which will not be repeated here.

[0190] The target handwriting area can be a projection area of the second target handwriting picture on the content editing layer.

[0191] The scribble on the second target handwriting picture can include the newly drawn target scribble and the original scribble on the first target handwriting picture. The electronic device pastes the second target handwriting picture on the target handwriting area and deletes the first target handwriting picture, which can be understood as that the electronic device replaces the first target handwriting picture with the second target handwriting picture in the target handwriting area.

[0192] Based on this, when the first target handwriting picture is the first handwriting picture, the electronic device can replace the first handwriting picture with the third handwriting picture in the first replacement area, which is the projection area of the third handwriting picture on the content editing layer; when the first target handwriting picture is the second handwriting picture, the electronic device can replace the second handwriting picture with the fourth handwriting picture in the second replacement area, which is the projection area of the fourth handwriting picture on the content editing layer.

[0193] In an example, the third handwriting picture can also be referred to as a first replacement picture, and the fourth handwriting picture can also be referred to as a second replacement picture.

[0194] Figure 19Fig. 4 shows a structure diagram of a display interface of a memo application according to an embodiment of the present application.

[0195] For example, as shown in A of Fig. 4, the mobile phone 100 displays the first handwritten picture 1140 including the first scribble 1050 in the content editing layer 412 of the display interface. Figure 19 For example, as shown in B of Fig. 4, in response to the modification operation on the content in the first handwritten picture 1140, the mobile phone 100 replaces the first handwritten picture 1140 with the third handwritten picture 1910, and the third handwritten picture 1910 includes the first scribble 1050 and a newly drawn second scribble 1920. Figure 19 For example, as shown in B of Fig. 4, in response to the modification operation on the content in the first handwritten picture 1140, the mobile phone 100 replaces the first handwritten picture 1140 with the third handwritten picture 1910, and the third handwritten picture 1910 includes the first scribble 1050 and a newly drawn second scribble 1920.

[0196] In an embodiment, when the electronic device receives a click operation on a first target handwritten picture, the electronic device displays a boundary line of a first target handwritten layer corresponding to the first target handwritten picture. When the electronic device receives a movement operation on the boundary line of the first target handwritten layer, the electronic device adjusts the size of the first target handwritten layer and the first target handwritten picture corresponding to the first target handwritten layer. The adjustment direction of the first target handwritten layer is consistent with the movement direction of the movement operation, and the adjustment distance of the first target handwritten layer is consistent with the movement distance of the movement operation. Similarly, the adjustment direction of the corresponding first target handwritten picture is consistent with the movement direction of the movement operation, and the adjustment distance of the corresponding first target handwritten picture is consistent with the movement distance of the movement operation.

[0197] For example, the first target handwritten picture can be the first handwritten picture or the second handwritten picture. When the first target handwritten picture is the first handwritten picture, the first target handwritten layer is the first handwritten layer; when the first target handwritten picture is the second handwritten picture, the first target handwritten layer is the second handwritten layer.

[0198] In an embodiment, the boundary line of the first target handwritten layer can include at least one of an upper boundary line, a lower boundary line, a left boundary line and a right boundary line of the first target layer.

[0199] For example, as shown in Fig. 4, the mobile phone 100 displays the first handwritten picture 1140 including the first scribble 1050 in the content editing layer 412 of the display interface. Figures 20 to 23 For example, as shown in Fig. 4, the mobile phone 100 displays the first handwritten picture 1140 including the first scribble 1050 in the content editing layer 412 of the display interface.

[0200] Figure 20 Fig. 8 shows a display interface of an electronic device according to an embodiment of the present application.

[0201] For example, as shown in Fig. 4, the mobile phone 100 displays the first handwritten picture 1140 including the first scribble 1050 in the content editing layer 412 of the display interface. Figure 20As shown in A of FIG. 11B, the mobile phone 100 displays the first text 910 and the first handwritten picture 1140 on the display interface 1600, and the first text 910 is located above the first handwritten picture 1140. In response to a click operation on the first handwritten picture 1140, as shown in B of FIG. 11B, the mobile phone 100 displays the upper boundary line 2010 of the first handwritten layer corresponding to the first handwritten picture. In response to moving the upper boundary line 2010 of the first handwritten layer upward by a first distance D1 on the display interface 1600, as shown in C of FIG. 11B, the upper boundary line 2010 of the first handwritten layer can be extended upward by the first distance D1 on the display interface 1600. At this time, the upper boundary line of the first handwritten picture is also extended upward by the first distance D1. Since the first text 910 and the first handwritten picture 1140 are located in the same layer, and the first text 910 is located above the first handwritten picture 1140, when the upper boundary line 2010 of the first handwritten layer is moved upward by the first distance D1, the upper boundary line 2010 of the first handwritten picture 1140 is also moved upward by the first distance D1, the first text 910 is also moved upward by the first distance D1. When the distance between the first distance D1 and the top end of the text editing area of the display interface is less than the first distance D1, the first text 910 is hidden, as shown in C of FIG. 11B. In response to a downward sliding operation in the text editing area, as shown in D of FIG. 11B, the first text 910 is displayed again in the display interface 1600. Figure 20 Figure 20 Figure 20 Figure 20

[0202] Figure 21 FIG. 12 shows a display interface of an electronic device according to an embodiment of the present application.

[0203] In another example, as shown in A of FIG. 12, the mobile phone 100 displays the first handwritten picture 1140, the second text 1320 and the second handwritten picture 1610 on the display interface 1600, and the second text 1320 and the second handwritten picture 1610 are sequentially located below the first handwritten picture 1140. In response to a click operation on the first handwritten picture 1140, as shown in B of FIG. 12, the mobile phone 100 displays the lower boundary line 2110 of the first handwritten layer corresponding to the first handwritten picture. In response to moving the lower boundary line 2110 of the first handwritten layer downward by a second distance D2 on the display interface 1600, as shown in C of FIG. 12, the lower boundary line 2110 of the first handwritten layer can be extended downward by the second distance D2 on the display interface 1600. At this time, the lower boundary line of the first handwritten picture is also extended downward by the second distance D2. Since the first text 910 and the first handwritten picture 1140 are located in the same layer, and the first text 910 is located above the first handwritten picture 1140, when the lower boundary line 2110 of the first handwritten layer is moved downward by the second distance D2, the lower boundary line 2110 of the first handwritten picture 1140 is also moved downward by the second distance D2, the first text 910 is also moved downward by the second distance D2. When the distance between the second distance D2 and the bottom end of the text editing area of the display interface is less than the second distance D2, the first text 910 is hidden, as shown in C of FIG. 12. In response to an upward sliding operation in the text editing area, as shown in D of FIG. 12, the first text 910 is displayed again in the display interface 1600. Figure 21 Figure 21 Figure 21 ​​​​​​As shown in C, the lower boundary line 2110 of the first handwritten layer can extend downwards by a second distance D2 on the display interface 1600. At this time, the lower boundary line of the first handwritten image will also extend downwards by a second distance D2. Since the first handwritten image 1140, the second text 1320, and the second handwritten image 1610 are located on the same layer, and the second text 1320 and the second handwritten image 1610 are located below the first handwritten image 1140, when the lower boundary line 2110 of the first handwritten layer moves downwards by a second distance D2, causing the lower boundary line 2110 of the first handwritten image 1140 to also move downwards by a second distance D2, the second text 1320 and the second handwritten image 1610 will also move downwards by a second distance D2.

[0204] It should be understood that when the upper boundary of a handwritten layer is moved upward by a first distance D1 and the lower boundary of the same handwritten layer is moved downward by a second distance D2, the upper boundary of the corresponding handwritten image on the display screen will extend upward by a first distance D1, and the lower boundary of the corresponding handwritten image will extend downward by a second distance D2. Therefore, text and other handwritten images above the handwritten image on the display screen will move upward by a first distance D1, and text and other handwritten images below the handwritten image on the display screen will move downward by a second distance D2.

[0205] Figure 22 The tenth illustration shows a display interface diagram of an electronic device provided in an embodiment of this application.

[0206] In another example, such as Figure 22 As shown in A, mobile phone 100 displays the first handwritten image 1140 on display interface 1600. In response to a click operation on the first handwritten image 1140, as... Figure 22 As shown in B, the mobile phone 100 displays the left boundary line 2210 of the first handwritten layer corresponding to the first handwritten image. In response to moving the left boundary line 2210 of the first handwritten layer to the left a third distance D3 on the display interface 1600, as shown... Figure 22 As shown in C, the left boundary line 2210 of the first handwritten layer can be extended to the left by a third distance D3 on the display interface 1600. At this time, the left boundary line of the first handwritten image will also be extended to the left by a third distance D3.

[0207] Figure 23 This is shown as eleventh of a schematic diagram of the display interface of an electronic device provided in an embodiment of this application.

[0208] In another example, such as Figure 23As shown in A of FIG. 11B, the mobile phone 100 displays the first handwritten picture 1140 on the display interface 1600. In response to a click operation on the first handwritten picture 1140, as shown in B of FIG. 11B, the mobile phone 100 displays the right boundary line 2310 of the first handwritten layer corresponding to the first handwritten picture. In response to moving the right boundary line 2310 of the first handwritten layer to the right by a fourth distance D4 on the display interface 1600, as shown in C of FIG. 11B, the right boundary line 2310 of the first handwritten layer can be extended to the right by the fourth distance D4 on the display interface 1600. At this time, the right boundary line of the first handwritten picture is also extended to the right by the fourth distance D4. Figure 23 As shown in B of FIG. 11B, the mobile phone 100 displays the right boundary line 2310 of the first handwritten layer corresponding to the first handwritten picture. In response to moving the right boundary line 2310 of the first handwritten layer to the right by a fourth distance D4 on the display interface 1600, as shown in C of FIG. 11B, the right boundary line 2310 of the first handwritten layer can be extended to the right by the fourth distance D4 on the display interface 1600. At this time, the right boundary line of the first handwritten picture is also extended to the right by the fourth distance D4. Figure 23 As shown in B of FIG. 11B, the mobile phone 100 displays the right boundary line 2310 of the first handwritten layer corresponding to the first handwritten picture. In response to moving the right boundary line 2310 of the first handwritten layer to the right by a fourth distance D4 on the display interface 1600, as shown in C of FIG. 11B, the right boundary line 2310 of the first handwritten layer can be extended to the right by the fourth distance D4 on the display interface 1600. At this time, the right boundary line of the first handwritten picture is also extended to the right by the fourth distance D4.

[0209] In summary, in the embodiments of the present application, when the electronic device receives a re-editing operation on the handwritten content in the handwritten picture already stored in the memo, the electronic device first displays the handwritten layer corresponding to the handwritten picture, so as to facilitate re-drawing on the handwritten layer. When the electronic device receives a drawing operation on the handwritten layer and ends the drawing operation, the electronic device generates a new handwritten picture by taking a screenshot of the handwritten layer after re-drawing, and replaces the original handwritten picture with the new handwritten picture. Based on this, the handwritten content and the text content always belong to the content editing layer, and the layout positions of the handwritten content and the text content in the content editing layer do not change. In this way, no matter how the size of the content editing layer changes, the layout positions of the handwritten content and the text content in the content editing layer are fixed. Therefore, when the electronic device is rotated by 90 degrees, or the screen width of the electronic device changes, the layout positions of the text content and the handwritten content displayed in the memo application do not change.

[0210] As can be seen from the above embodiments, when the electronic device receives an operation of exiting the brush tool, the electronic device generates a handwritten picture by taking a screenshot of the handwritten layer, and hides the handwritten layer. When one display interface of the memo application of the electronic device includes a plurality of texts and a plurality of handwritten pictures displayed alternately, the electronic device includes a plurality of hidden handwritten layers. When there are many handwritten layers, they will occupy a large amount of cache space of the electronic device, thereby affecting the performance of the electronic device. Therefore, the electronic device can appropriately destroy some handwritten layers to release the cache space of the electronic device, thereby improving the performance of the electronic device.

[0211] In an embodiment, when the electronic device loads the handwritten layer corresponding to each handwritten picture, the electronic device can destroy (or delete) the handwritten layer corresponding to the handwritten picture that has rolled out of the screen of the electronic device, or destroy the handwritten layer that is not in a drawing state. It should be understood that at this time, the electronic device only destroys the corresponding handwritten layer, but does not destroy the original scribble on the handwritten layer.

[0212] In this embodiment, when the electronic device receives a re-editing operation on the content of the handwritten picture corresponding to the destroyed handwritten layer, the electronic device can re-create a blank handwritten layer, load the original doodle on the handwritten picture on the newly created handwritten layer, and display the newly drawn doodle.

[0213] As Figure 24 shown, the embodiment of the present application further provides a chip system. The chip system 2400 includes at least one processor 2401 and at least one interface circuit 2402. The at least one processor 2401 and the at least one interface circuit 2402 can be interconnected by a line. The processor 2401 is configured to support the electronic device to implement each step in the above method embodiments, and the at least one interface circuit 2402 can be configured to receive a signal from another device (for example, a memory) or send a signal to another device (for example, a communication interface). The chip system can include a chip, and can also include other discrete devices.

[0214] The embodiment of the present application further provides a computer storage medium including instructions, when the instructions run on the above electronic device, the electronic device executes each step in the above method embodiments.

[0215] The embodiment of the present application further provides a computer program product including instructions, when the instructions run on the above electronic device, the electronic device executes each step in the above method embodiments.

[0216] The technical effects of the chip system, the computer storage medium, and the computer program product are referred to the technical effects of the above method embodiments.

[0217] It should be understood that, in various embodiments of the present application, the size of the sequence number of each process described above does not mean the order of execution, and the execution order of each process should be determined according to its function and inherent logic, and should not constitute any limitation on the implementation process of the embodiments of the present application.

[0218] Those of ordinary skill in the art can realize that the modules and algorithm steps of each example described in connection with the embodiments disclosed herein can be realized by electronic hardware or a combination of computer software and electronic hardware. Whether the functions are realized in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of the present application.

[0219] Those skilled in the art can clearly understand that, for the convenience and brevity of the description, the specific working processes of the above-described system, device and module can refer to the corresponding processes in the above method embodiments, which will not be described here.

[0220] In several embodiments provided in the present application, it should be understood that the disclosed system, device and method can be implemented in other manners. For example, the embodiments of the device described above are merely schematic. For example, the division of the modules is only a logical function division. There can be another division manner for the actual implementation. For example, a plurality of modules or components can be combined or integrated into another device, or some features can be ignored or not executed. In addition, the displayed or discussed mutual couplings or direct couplings or communication connections between different modules can be indirect couplings or communication connections through some interfaces, devices or modules.

[0221] The modules illustrated as separate components can or can not be physically separate, and the components illustrated as modules can or can not be physical modules, i.e., can be located in one device or distributed on a plurality of devices. Part or all of the modules can be selected according to actual needs to achieve the purpose of the embodiments.

[0222] In addition, each functional module in the embodiments of the present application can be integrated in one device, or each module can be physically present alone, or two or more modules can be integrated in one device.

[0223] In the above embodiments, all or part of the embodiments can be implemented by software, hardware, firmware or any combination thereof. When implemented by software, all or part of the embodiments can be implemented in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, all or part of the processes or functions described in the embodiments are generated. The computer can be a general-purpose computer, a special-purpose computer, a computer network or other programmable devices. The computer instructions can be stored in a computer storage medium or transmitted from one computer storage medium to another computer storage medium, for example, the computer instructions can be transmitted from one website site, computer, server or data center to another website site, computer, server or data center through wired (such as coaxial cable, optical fiber, digital subscriber line (DSL)) or wireless (such as infrared, wireless, microwave, etc.) mode. The computer storage medium can be any available medium that can be accessed by a computer or include one or more data storage devices such as servers, data centers, etc. integrated with the medium. The available medium can be a magnetic medium (such as a floppy disk, a hard disk, a magnetic tape), an optical medium (such as a DVD), or a semiconductor medium (such as a solid state disk (SSD)) and the like.

[0224] The above merely provides the specific implementation of the present application, but the protection scope of the present application is not limited to this. Any person skilled in the art can easily think of the changes or replacements within the technical range disclosed by the present application, which should be covered in the protection scope of the present application. Therefore, the protection scope of the present application should be subject to the protection scope of the claims.

Claims

1. A page display method characterized by comprising: The method is applied to an electronic device, and the method comprises: displaying a display interface of an application; the display interface comprises a first layer and a brush tool, and the first layer comprises first text; in response to a first operation on the brush tool, creating a second layer and displaying first scribbles drawn on the second layer; in response to an end-of-drawing operation, hiding the second layer and displaying the first scribbles drawn on the second layer on the first layer; the first scribbles are located below the first text.

2. The method of claim 1, wherein, The operation of hiding the second layer and displaying the first scribbles drawn on the second layer on the first layer in response to the end-of-drawing operation comprises: in response to the end-of-drawing operation, generating a first handwritten picture by taking a screenshot of the first scribbles, pasting the first handwritten picture in a first handwritten area of the first layer, and hiding the second layer; the first handwritten area is a projection area of the first handwritten picture on the first layer.

3. The method according to claim 1 or 2, characterized in that, The operation of creating a second layer and displaying first scribbles drawn on the second layer in response to a first operation on the brush tool comprises: in response to an operation of clicking the brush tool, creating the second layer and displaying a brush toolbar; the brush toolbar comprises a plurality of brushes; in response to a drawing operation on the second layer by any brush, displaying the first scribbles on the second layer.

4. The method according to any one of claims 1-3, characterized in that, A projection area of the second layer on the first layer is located below the first text.

5. The method according to any one of claims 2-4, characterized in that, The method further comprises: in response to a modification operation on the content of the first handwritten picture, generating a first replacement picture corresponding to the first handwritten picture; replacing the first handwritten picture with the first replacement picture on the first layer.

6. The method of claim 5, wherein, The operation of generating a first replacement picture corresponding to the first handwritten picture in response to a modification operation on the content of the first handwritten picture comprises: in response to a click operation on the brush tool, displaying a brush toolbar and loading a second layer corresponding to the first handwritten picture above the first handwritten picture; the second layer displays the first scribbles; in response to a drawing operation on the second layer by any brush in the brush toolbar, the electronic device also displays second scribbles on the first handwritten layer; in response to an end-of-drawing operation, generating the first replacement picture by taking a screenshot of the first scribbles and the second scribbles on the second layer.

7. The method of claim 5, wherein, The operation of generating a first replacement picture corresponding to the first handwritten picture in response to a modification operation on the content of the first handwritten picture comprises: in response to a click operation on the brush tool, displaying a brush toolbar, loading a second layer corresponding to the first handwritten picture above the first handwritten picture, and creating a blank third layer; the third layer has the same size as the first layer, and the second layer displays the first scribbles; in a case where the third layer has been displayed and the second layer has not been successfully loaded, in response to a drawing operation on the third layer by any brush in the brush toolbar, displaying third scribbles on the third layer; When the second layer is loaded successfully, the second target graffiti is pasted on the second layer, and a third graffiti on the third layer is deleted; the third graffiti on the second layer is consistent with the position on the third layer; In response to the end of drawing operation, the first replacement picture is generated based on the first graffiti and the third graffiti.

8. The method according to any one of claims 5-7, characterized in that, Replacing the first handwritten picture with the first replacement picture on the first layer comprises: The first replacement picture is pasted on a first replacement area of the first layer, and the first handwritten picture is deleted; the first replacement area is a projection area of the first replacement picture on the first layer.

9. The method according to any one of claims 2-8, characterized in that, The method further comprises: In response to a click operation on the first handwritten picture, a boundary line of a second layer corresponding to the first handwritten picture is displayed; In response to a moving operation on the boundary line, the size of the second layer and the size of the first handwritten picture are adjusted; the adjustment direction and the adjustment distance of the second layer and the first handwritten picture are consistent with the moving direction and the moving distance of the moving operation.

10. The method of claim 9, wherein, The boundary line comprises at least one of an upper boundary line, a lower boundary line, a left boundary line and a right boundary line.

11. The method according to any one of claims 2-10, characterized in that, The first layer further comprises a second handwritten picture; the method further comprises: In response to a click operation on the brush tool, a fourth layer corresponding to the second handwritten picture is loaded above the second handwritten picture; the graffiti on the fourth layer is consistent with the graffiti on the second handwritten picture.

12. An electronic device, comprising: An electronic device comprising a processor, a memory and a display screen connected to the processor, the display screen being configured to display a display interface of an application, and the memory storing instructions that, when executed by the processor, cause the electronic device to perform the method of any one of claims 1-11.

13. A computer-readable storage medium, characterized in that, An instruction, when executed on an electronic device, causes the electronic device to perform the method of any one of claims 1-11.

14. A computer computer program product, characterized by, An instruction, when executed on an electronic device, causes the electronic device to perform the method of any one of claims 1-11.

Images