Page display method and electronic device

Abstract

Disclosed in the present application are a page display method and an electronic device, which are used for fixing the layout positions of texts and doodles in display interfaces, such that the layout positions of the texts and the doodles do not change along with the rotation of electronic devices or along with changes of display windows. The method comprises: when a display interface of an application comprises both text and doodles, an electronic device may display the text and doodles on a layer where the text is located. Specifically, the electronic device displays the display interface of the application, the display interface comprising a first layer and a brush tool, the first layer comprising a first text; then, in response to a first operation on the brush tool, the electronic device creates a second layer, and displays a drawn first doodle on the second layer; and finally, in response to a drawing completion operation, the electronic device hides the second layer, and displays on the first layer the first doodle drawn on the second layer, the first doodle being located below the first text.

Description

A page display method and an electronic device

[0001] This application claims priority to Chinese Patent Application No. 202410927439.2, filed on July 10, 2024, entitled "A Page Display Method and Electronic Device", the entire contents of which are incorporated herein by reference. Technical Field

[0002] This application relates to the field of page display, and more particularly to a page display method and an electronic device. Background Technology

[0003] A memo app is an application on an electronic device that can be used to record memos and other notes. These notes can be at least one of text or doodles. When a memo in a memo app includes both text and doodles, if the electronic device is rotated 90 degrees, or if the width of the electronic device's display window changes, the layout of the text and doodles on the memo's display interface will change, resulting in a change in the overall layout of the memo's display. Summary of the Invention

[0004] This application provides a page display method and an electronic device for fixing the layout position of text and doodles in the display interface, so that the layout position of text and doodles does not change with the rotation of the electronic device or the change of the display window.

[0005] To achieve the above objectives, this application adopts the following technical solution:

[0006] Firstly, a page display method is provided for use on an electronic device. This method includes: when an application's display interface simultaneously includes text and doodles, the electronic device can display the text and doodles on a layer containing the text. Specifically, the electronic device displays the application's display interface, which includes a first layer and a drawing tool; the first layer includes first text; then, in response to a first operation on the drawing tool, the electronic device creates a second layer and displays the first doodle drawn on the second layer; finally, in response to a drawing completion operation, the electronic device hides the second layer and displays the first doodle drawn on the second layer on the first layer, with the first doodle located below the first text.

[0007] In this solution, when the application's display interface includes both text and doodles, the electronic device displays both text and doodles on the same layer as the text, and displays them separately, such as placing the first doodle below the first text. This way, the layout positions of text and doodles on the same layer are fixed, so when the electronic device rotates 90 degrees or the width of the display window used to display the application changes, the layout positions of the text and doodles on the display interface will not change.

[0008] In one possible implementation of the first aspect, the electronic device, in response to the drawing completion operation, hides the second layer and displays the first doodle drawn on the second layer on the first layer. This may include: the electronic device, in response to the drawing completion operation, taking a screenshot of the first doodle to generate a first handwritten image, pasting the first handwritten image into the first handwritten area of ​​the first layer, and hiding the second layer. The first handwritten area is the projection area of ​​the first handwritten image onto the first layer.

[0009] In another possible implementation of the first aspect, the electronic device, in response to a first operation on the brush tool, creates a second layer and displays the first drawing on the second layer. This may include: first, the electronic device, in response to a click on the brush tool, creates a second layer and a brush toolbar. The brush toolbar includes multiple brushes. Then, in response to a drawing operation on the second layer using any of the brushes, the electronic device displays the first drawing on the second layer.

[0010] In another possible implementation of the first aspect, the projection area of ​​the second layer onto the first layer is located below the first text. This way, when drawing on the second layer, the content on the first layer (such as the first text) will not be obscured.

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

[0012] In another possible implementation of the first aspect, the above method may further include: in response to a modification operation on the content of the first handwritten image, the electronic device generates a first replacement image corresponding to the first handwritten image, and replaces the first handwritten image with the first replacement image on the first layer.

[0013] In another possible implementation of the first aspect, the electronic device, in response to a modification operation on the content of the first handwritten image, generates a first replacement image corresponding to the first handwritten image. This may include: First, in response to a click operation on a drawing tool, the electronic device displays a drawing toolbar and loads a second layer corresponding to the first handwritten image above it. The second layer displays a first doodle, meaning the content on the second layer is identical to the content of the first handwritten image. Next, in response to a drawing operation on the second layer using any brush in the drawing toolbar, the electronic device also displays a second doodle on the first handwritten layer. Finally, in response to a drawing completion operation, the electronic device takes screenshots of the first and second doodles on the second layer to generate the first replacement image; that is, the content of the first replacement image includes the first doodle and the newly drawn second doodle.

[0014] In another possible implementation of the first aspect, the electronic device, in response to a modification operation on the content of the first handwritten image, generates a first replacement image corresponding to the first handwritten image. This may include: the electronic device, in response to a click operation on a drawing tool, displaying a drawing toolbar, loading a second layer corresponding to the first handwritten image above it, and creating a blank third layer. The size of the third layer is the same as the size of the first layer, and the first doodle is displayed on the second layer. Next, with the third layer already displayed and the second layer not yet loaded, the electronic device, in response to a drawing operation on the third layer using any brush in the drawing toolbar, displays a third doodle on the third layer. Then, when the second layer is successfully loaded, the electronic device pastes the third doodle onto the second layer and deletes the third doodle from the third layer; the position of the third doodle on the second layer is the same as its position on the third layer. Finally, in response to a drawing completion operation, the electronic device takes a screenshot of the first and third doodles to generate the first replacement image; that is, the content of the first replacement image includes the first doodle and the newly drawn third doodle.

[0015] In another possible implementation of the first aspect, the electronic device replacing the first handwritten image with a first replacement image on the first layer may include: the electronic device pasting the first replacement image into a second handwritten area of ​​the first layer and deleting the first handwritten image. The second handwritten area is the projection area of ​​the first replacement image onto the first layer.

[0016] In another possible implementation of the first aspect, the first layer further includes a second handwritten image. In this case, the method may further include: in response to a click on a drawing tool, the electronic device loads a fourth layer corresponding to the second handwritten image above it. The doodles on the fourth layer are identical to those on the second handwritten image.

[0017] In this solution, when the electronic device receives a click on the drawing tool, it loads both the drawing tool's toolbar and the corresponding handwritten layers for each handwritten image. Once all the handwritten layers for each image are loaded, when the electronic device receives a drawing operation using any brush from the drawing toolbar on any handwritten layer, the drawn doodles can be displayed on the corresponding handwritten layer. In other words, it allows for alternating drawing on different handwritten layers.

[0018] In another possible implementation of the first aspect, the method may further include: in response to a click operation on the first handwritten image, the electronic device displays the boundary line of the second layer corresponding to the first handwritten image; when the electronic device receives a movement operation on the boundary line of the second layer, it can adjust the size of the second layer and the size of the first handwritten image. The adjustment direction and distance of the second layer and the first handwritten image are consistent with the movement direction and distance of the movement operation.

[0019] In another possible implementation of the first aspect, the aforementioned boundary line may include at least one of an upper boundary line, a lower boundary line, a left boundary line, and a right boundary line.

[0020] Secondly, this application provides an electronic device comprising at least one or more processors, and a memory and a display screen connected to each processor. The display screen is used to display an application's interface. The memory is used to store computer instructions, which, when executed by the one or more processors, cause the electronic device to perform the method described in any of the first aspects above.

[0021] Thirdly, this application provides a chip system applied to an electronic device, the chip system including one or more processors, the processors being configured to invoke computer instructions to cause the electronic device to perform any of the methods described in the first aspect above.

[0022] Fourthly, this application provides a computer storage medium including computer instructions that, when executed on an electronic device, cause the electronic device to perform the method described in any of the first aspects.

[0023] Fifthly, this application provides a computer program product that, when run on a computer, causes the computer to perform any of the methods described in the first aspect.

[0024] It should be understood that the technical effects of the second to fifth aspects mentioned above can refer to the technical effects of the first aspect and any of its possible implementations, which will not be elaborated upon here. Attached Figure Description

[0025] Figure 1 is a schematic diagram of one of the display interfaces of an electronic device according to an embodiment;

[0026] Figure 2 is a second schematic diagram of the display interface of an electronic device provided in one embodiment;

[0027] Figure 3 is a third schematic diagram of the display interface of an electronic device provided in one embodiment;

[0028] Figure 4 is a schematic diagram of the display interface of a memo application provided in one embodiment;

[0029] Figure 5 is a schematic diagram of one of the display interfaces of an electronic device provided in an embodiment of this application;

[0030] Figure 6 is a schematic diagram of the hardware structure of an electronic device provided in an embodiment of this application;

[0031] Figure 7 is a schematic diagram of the software architecture of an electronic device provided in an embodiment of this application;

[0032] Figure 8 is a flowchart illustrating one of the page display methods provided in an embodiment of this application;

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

[0034] Figure 10 is a third schematic diagram of the display interface of an electronic device provided in an embodiment of this application;

[0035] Figure 11 is one of the structural schematic diagrams of the display interface of a memo application provided in an embodiment of this application;

[0036] Figure 12 is a fourth schematic diagram of the display interface of an electronic device provided in an embodiment of this application;

[0037] Figure 13 is a fifth schematic diagram of the display interface of an electronic device provided in an embodiment of this application;

[0038] Figure 14 is a sixth schematic diagram of the display interface of an electronic device provided in an embodiment of this application;

[0039] Figure 15 is a second schematic flowchart of a page display method provided in an embodiment of this application;

[0040] Figure 16 is a seventh schematic diagram of the display interface of an electronic device provided in an embodiment of this application;

[0041] Figure 17 is a second schematic diagram of the display interface of a memo application provided in an embodiment of this application;

[0042] Figure 18 is a third schematic diagram of the display interface of a memo application provided in an embodiment of this application;

[0043] Figure 19 is a fourth schematic diagram of the display interface of a memo application provided in an embodiment of this application;

[0044] Figure 20 is an eighth schematic diagram of the display interface of an electronic device provided in an embodiment of this application;

[0045] Figure 21 is a ninth schematic diagram of the display interface of an electronic device provided in an embodiment of this application;

[0046] Figure 22 is a schematic diagram of the display interface of an electronic device provided in an embodiment of this application;

[0047] Figure 23 is an eleventh schematic diagram of the display interface of an electronic device provided in an embodiment of this application;

[0048] Figure 24 is a schematic diagram of a chip system provided in an embodiment of this application. Detailed Implementation

[0049] The terms "first" and "second" used in the embodiments of this application are only used to distinguish features of the same type and should not be construed as indicating relative importance, quantity, order, etc.

[0050] The terms "exemplary" or "for example" used in the embodiments of this application are used to indicate examples, illustrations, or descriptions. Any embodiment or design described as "exemplary" or "for example" in this application should not be construed as being more preferred or advantageous than other embodiments or designs. Specifically, the use of terms such as "exemplary" or "for example" is intended to present the relevant concepts in a specific manner.

[0051] The terms "coupling" and "connection" used in the embodiments of this application should be interpreted broadly. For example, they can refer to a physical direct connection or an indirect connection achieved through electronic devices, such as a connection achieved through resistors, inductors, capacitors or other electronic devices.

[0052] A memo app is an application on an electronic device that can be used to record memos and other notes. These memos can be at least one of the following: text entered into the memo app using a text editing tool (such as an input method keyboard), or doodles drawn in the memo app using a drawing tool. The doodles can be at least one of drawings and text. It should be noted that in other embodiments, a memo app may also be referred to as an "electronic sticky note," "notepad," "notes," or other similar names.

[0053] Figure 1 shows one of the schematic diagrams of the display interface of an electronic device provided in one embodiment.

[0054] In one embodiment, as shown in Figure 1A, the main interface 110 of the mobile phone 100 includes an application icon 111 for the Notes application. In response to a click on the Notes application icon 111, as shown in Figure 1B, the mobile phone 100 launches the Notes application and displays a list item interface 120. The list item interface 120 includes controls for user-entered notes, such as Note 1, Note 2, Note 3, Note 4, etc. Each note includes memo information.

[0055] In response to a click on control 121 of Memo 1, as shown in C in Figure 1, mobile phone 100 displays the first information display interface 130 corresponding to Memo 1. The first information display interface 130 includes overlapping text 131 and doodles 132.

[0056] Continuing with Figure 1B, the list item interface 120 also includes a new control 122. In response to a click on the new control 122, as shown in Figure 1D, the phone 100 displays the first editing interface 140 for adding a memo. The first editing interface 140 includes a text editing area 141, an input method keyboard 142, and a drawing tool 143. Text can be entered in the text editing area 141 using the input method keyboard 142, and drawings can be made in the text editing area 141 using the drawing tool 143.

[0057] In one scenario, a memo in a memo app contains both text and doodles. If the electronic device is rotated 90 degrees, or if the width of the display window used to display the memo changes, the layout of the text and doodles on the memo's display interface (such as the memo's editing interface or information display interface) will change, resulting in a change in the layout of the memo's display interface.

[0058] Specifically, rotating the electronic device by 90 degrees means either switching from portrait to landscape mode, or switching from landscape to portrait mode. A change in the width of the display window for showing the memo means either switching from full-screen to a small window display, or switching from a small window display to full-screen, or multiple electronic devices displaying the same memo, and the screen width of these multiple devices changing. The following sections, in conjunction with Figures 1 to 3, provide a detailed description of this scenario:

[0059] Figure 2 shows a second schematic diagram of the display interface of an electronic device provided in one embodiment.

[0060] In one embodiment, taking the switching of an electronic device from portrait to landscape mode as an example, referring to C in Figure 1, as shown in Figure 2, when the phone 100 is switched from portrait to landscape mode, the phone 100 displays the second information display interface 210 corresponding to the memo 1. The second information display interface 210 includes text 131 and doodles 132 that are not overlapping, and the doodles 132 are located below the text 131.

[0061] Comparing C in Figure 1 and Figure 2, it can be seen that when an electronic device switches from portrait mode to landscape mode, the positions of the text and doodles in the Notes app's display interface will be misaligned, causing a change in the layout of the Notes app's display interface.

[0062] Figure 3 shows a third schematic diagram of the display interface of an electronic device provided in one embodiment.

[0063] In another embodiment, taking the example of a first electronic device receiving a memo sent by a second electronic device, where the width / size / screen width of the display interfaces of the first and second electronic devices are different, the layout of the memo's display interface changes when the first electronic device displays the memo received from the second electronic device. As shown in Figure 3A, the tablet computer 300 (i.e., the second electronic device) is in portrait mode. The third information display interface 310 of the tablet computer 300 displays non-overlapping text 131 and doodle 132, with doodle 132 located below text 131. Text 131 and doodle 132 are the memo information of Memo 1. When the mobile phone 100 (i.e., the first electronic device) receives Memo 1 sent by the tablet computer 300, because the screen width of the mobile phone 100 is narrower than that of the tablet computer 300 in portrait mode, as shown in Figure 3B, in portrait mode, the text 131, which would normally be displayed in one line on the tablet computer 300, needs to be displayed in two lines on the mobile phone 100, causing the fourth information display interface 320 of the mobile phone 100 to display overlapping text 131 and doodle 132.

[0064] Comparing Figure 3A and Figure 3B, we can see that when the screen width of an electronic device becomes shorter / narrower, the text and doodles in the Notes app's display interface will be misaligned, causing a change in the layout of the Notes app's display interface.

[0065] Figure 4 shows a schematic diagram of the display interface of a memo application according to one embodiment. The following analysis, in conjunction with Figure 4, explains the reasons for the aforementioned problems:

[0066] 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.

[0067] As shown in Figure 4, 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 the text 131 in the content editing layer 412 do not affect each other.

[0068] 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.

[0069] 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.

[0070] When an electronic device is in portrait mode, the length of the display interface is the shorter side of the rectangle corresponding to the device's display window. If the device switches from portrait to landscape mode, the length of the display interface becomes the longer side of the rectangle corresponding to the device's display window. Since the longer side of a rectangle is longer than its shorter side, the length of the Notes app's display interface increases when switching from portrait to landscape mode. At this time, the lengths of the individual layers that make up the display interface also increase. When the length of a layer increases, its width also changes proportionally to maintain its aspect ratio. Therefore, the widths of all layers that make up the display interface increase proportionally.

[0071] For content editing layers, the increased length of the content editing layer means that more text can be recorded in a single line, thus reducing the number of lines occupied by the same text on a longer content editing layer. For example, comparing Figure 1 (C) and Figure 2, it can be seen that as the length of the content editing layer increases, the same text "131" occupies only one line instead of two.

[0072] For the handwritten layer, as its size increases, the size of the doodles drawn on it also increases proportionally. For example, comparing C in Figure 1 and Figure 2, we can see that as the size of the handwritten layer increases, the size of doodle 132 on the handwritten layer also increases.

[0073] In other words, when an electronic device switches from portrait mode to landscape mode, the size of both the content editing layer and the handwriting layer that make up the display interface increases. Since the content editing layer and the handwriting layer are two completely independent layers, the text and doodles on the display interface change, which in turn changes the layout of the text and doodles on the display interface, thus changing the layout of the display interface.

[0074] It should be understood that the process of switching an electronic device from landscape mode to portrait mode is the opposite of the process of switching an electronic device from portrait mode to landscape mode, and this will not be elaborated upon in this article.

[0075] 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.

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

[0077] In one embodiment, as shown in Figure 5A, when the phone 100 is in portrait mode, it displays a 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 in Figure 5B, the phone 100 displays a sixth information display interface 520 of the Notes app. The sixth information display interface 520 also includes non-overlapping text 131 and doodles 132, with the doodles 132 located below the text 131.

[0078] Comparing Figure 5A and Figure 5B, we can see that 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.

[0079] The electronic device involved in this application embodiment can be a device with display function. The electronic device can be mobile or fixed. It can be deployed on land (e.g., indoors or outdoors, handheld or vehicle-mounted), on water (e.g., ships), or in the air (e.g., airplanes, balloons, and satellites). This 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, tablet computer, laptop computer, smart bracelet, smartwatch, headphones, smart speaker, virtual reality (VR) device, augmented reality (AR) device, terminal in industrial control, terminal in self-driving, terminal in remote medical care, terminal in smart grid, terminal in transportation safety, terminal in smart city, terminal in smart home, etc. The embodiments of this application do not limit the specific type and structure of the electronic device.

[0080] Figure 6 shows a schematic diagram of the hardware structure of an electronic device according to an embodiment of this application. The hardware structure of the electronic device will be described below with reference to Figure 6.

[0081] Taking a mobile phone as an example, as shown in Figure 6, the electronic device 600 may 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.

[0082] Processor 610 may include one or more processing units, such as: application processor (AP), modem processor, graphics processing unit (GPU), image signal processor (ISP), controller, memory, video codec, digital signal processor (DSP), baseband processor, and / or neural network processing unit (NPU). Different processing units may be independent devices or integrated into one or more processors. The controller may serve as the central nervous system and command center of electronic device 600. The controller can generate operation control signals based on instruction opcodes and timing signals to control instruction fetching and execution.

[0083] The memory 620 can be used to store computer executable program code, which includes instructions. The processor 610 executes various functional applications and data processing of the electronic device by running the instructions stored in the memory 620. The memory 620 may include a program storage area and a data storage area. The program storage area may store the operating system and at least one application program required for a function (such as sound playback, interface display, etc.). The data storage area may store data created during the use of the electronic device (such as notification messages). Furthermore, the memory 620 may include high-speed random access memory and may also include non-volatile memory, such as at least one disk storage device, flash memory device, universal flash storage (UFS), etc.

[0084] The power management module 640 is used to connect the battery to the processor 610. The power management module 640 receives battery and / or power input to power the processor 610, memory 620, communication module 650, display screen 660, audio module 670, and camera 680, etc. The power management module 640 can also be used to monitor parameters such as battery capacity, battery cycle count, and battery health status (leakage current, impedance). In some other embodiments, the power management module 640 may also be located within the processor 610.

[0085] The communication module 650 can provide solutions for wireless communication applications on the electronic device 600, including wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) networks), Bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), and infrared (IR). The communication module 650 can be one or more devices integrating at least one communication processing module. The communication module 650 receives electromagnetic waves via an antenna, performs frequency modulation and filtering of the electromagnetic wave signals, and sends the processed signal to the processor 610. The communication module 650 can also receive signals to be transmitted from the processor 610, perform frequency modulation and amplification, and convert them into electromagnetic waves for radiation via the antenna.

[0086] In some embodiments, the antenna of the electronic device 600 is coupled to the communication module 650, enabling the electronic device 600 to communicate with networks and other devices via wireless communication technologies. The wireless communication technologies may 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), BitTorrent, Global Navigation Satellite System (GNSS), WLAN, NFC, FM, and / or IR technologies. The GNSS may include Global Positioning System (GPS), BeiDou Navigation Satellite System (BDS), GLONASS, and / or Galileo.

[0087] Electronic device 600 implements display functions through a GPU, a display screen 660, and an application processor. The GPU is a microprocessor for image processing, connected to the display screen 660 and the application processor. The GPU performs mathematical and geometric calculations and is used for graphics rendering. Processor 610 may include one or more GPUs, which execute program instructions to generate or modify display information.

[0088] The display screen 660 is used to display images, videos, etc. 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 flexible light-emitting diode (FLED), a Mini-LED, a Micro-OLED, a quantum dot light-emitting diode (QLED), etc. In this embodiment, the display screen 660 can be used to display various display interfaces in a memo application, such as a list item interface, an editing interface, and an information display interface. Different display interfaces can be composed of different layers. For example, the editing interface can include a content editing layer and a handwriting layer, and the information display interface can include a content editing layer.

[0089] Electronic device 600 can achieve shooting function through ISP, camera 680, video codec, GPU, display 660 and application processor.

[0090] The audio module 670 is used to convert digital audio information into analog audio signals for output, and also to convert analog audio input into digital audio signals. The audio module 670 can also be used for encoding and decoding audio signals. In some embodiments, the audio module 670 may be located in the processor 610, or some functional modules of the audio module 670 may be located in the processor 610.

[0091] The camera 680 is used to capture still images or videos. An object passes through the lens, generating an optical image that is projected onto a photosensitive element. This photosensitive element can be a charge-coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor. The photosensitive element converts the light signal into an electrical signal, which is then passed to an ISP (Image Signal Processor) for conversion into a digital image signal. The ISP outputs the digital image signal to a DSP (Digital Signal Processor) for further processing. The DSP converts the digital image signal into standard image signals in formats such as RGB and YUV.

[0092] The sensor module 690 may include pressure sensors, gyroscope sensors, barometric pressure sensors, magnetic sensors, accelerometers, distance sensors, proximity sensors, fingerprint sensors, temperature sensors, touch sensors, ambient light sensors, and bone conduction sensors, etc.

[0093] It is understood that the structure illustrated in this embodiment does not constitute a specific limitation on the electronic device 600. In other embodiments, the electronic device 600 may include more or fewer components than illustrated, or combine some components, or split some components, or have different component arrangements. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.

[0094] Generally, the implementation of various functions in electronic devices requires not only hardware support but also software cooperation. The software system of electronic devices can adopt a layered architecture, event-driven architecture, microkernel architecture, microservice architecture, or cloud architecture. This application's embodiment uses a layered architecture Android operating system. Taking Figure 6 as an example, the software architecture of the electronic device involved in the embodiments of this application will be introduced.

[0095] Figure 7 shows a schematic diagram of the software architecture of an electronic device provided in an embodiment of this application.

[0096] As shown in Figure 7, the layered architecture divides the software into several layers, each with a clear role and function. Layers communicate with each other through software interfaces. In some embodiments, the Android operating system is used. It is divided into four layers, from top to bottom: application (APP) layer, application framework (FWK) layer, and kernel layer.

[0097] The application layer can include a series of application packages, such as Notes. Notes includes a page display program, which displays text or doodles in response to input commands within the Notes application.

[0098] The framework layer provides application programming interfaces (APIs) and system resource services to applications in the application layer. For example, the framework layer provides APIs to web page display programs.

[0099] The kernel layer, also known as the driver layer, is the layer between hardware and software. The kernel layer includes drivers for various hardware components. In some examples, the kernel layer may contain at least display drivers and touch drivers.

[0100] A display driver is a type of software or hardware used to control and manage display devices. It acts as a bridge between the operating system and the display device, providing the operating system with access to and control over the display device. For example, a display driver is used to display the application's interface on the screen.

[0101] A touch driver is software or hardware used to control and manage touch devices. It acts as a bridge between the operating system and the touch device, providing the operating system with access to and control functions for the touch device. For example, a touch driver is used to perform drawing operations on a display screen using a pen.

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

[0103] It is understood that, in order to implement the methods in the embodiments of this application, electronic devices include hardware and / or software modules that perform various functions. Based on the algorithmic steps of the examples described in conjunction with the embodiments disclosed herein, the embodiments of this application can be implemented in hardware or a combination of hardware and computer software. Whether a function is executed in a hardware-driven or software-driven manner 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.

[0104] The following section, with reference to Figures 8-22, takes the electronic device shown in Figure 6 as an example to describe the page display method provided in the embodiments of this application.

[0105] Figure 8 shows one of the flowcharts of a page display method provided in an embodiment of this application. As shown in Figure 8, the page display method provided in this embodiment may include:

[0106] S801, In response to a new operation in the Memos app, the electronic device displays the first editing interface of the Memos app.

[0107] The memo app's editing interface allows users to input memos. Memos can be at least one of text and doodles. Doodles can be at least one of drawings and text.

[0108] 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.

[0109] In one embodiment, taking the phone in portrait mode as an example, continuing as shown in Figures 1B and 1D, in response to clicking the new control 122 in the list item interface 120, the 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.

[0110] It should be understood that the editing interface shown in D in Figure 1 is only an example, and in other embodiments, the editing interface of the memo application may be of other styles.

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

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

[0113] In one embodiment, as shown in A of FIG9, 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 in the text editing area 141 via the input method keyboard 142, as shown in B of FIG9, the mobile phone 100 displays first text 910 in the first editing interface 140.

[0114] 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.

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

[0116] 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.

[0117] 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.

[0118] 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.

[0119] 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.

[0120] Figure 10 shows a third schematic diagram of the display interface of an electronic device provided in an embodiment of this application.

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

[0122] 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.

[0123] The relationship between the content editing layer and the handwriting layer involved in the embodiments of this application will be described below with reference to Figure 11:

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

[0125] For example, taking a mobile phone in portrait mode, where text is first entered on the editing interface (i.e., the editing interface has a text area), and then doodles are drawn. As shown in A of Figure 11, 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.

[0126] 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.

[0127] 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.

[0128] In one embodiment, continuing as shown in B of FIG10, the first editing interface 140 includes a first brush 1011. In response to clicking the first brush 1011, as shown in C of FIG10, 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., horizontal) adjusts the output color of the first brush 1011. Different brush tip selection controls 1040 represent brush tips of different thicknesses, and brush tips of different thicknesses output lines of different thicknesses. 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 the operation of clicking the first pen tip selection control 1041, the mobile phone 100 uses the pen tip corresponding to the first pen tip selection control 1041 as the pen tip of the first pen 1011.

[0129] As shown in Figure 10 (D) and Figure 11 (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.

[0130] 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.

[0131] The drawing operation to exit the drawing toolbar can include: clicking anywhere in the text area in the Notes app's editing interface, or clicking the completion control in the Notes app's editing interface, etc.

[0132] One handwriting area can be the projection area of ​​the corresponding handwritten image onto the content editing layer. Therefore, the first handwriting area can be the projection area of ​​the first handwritten image onto the content editing layer. The first handwriting area is located below the first text area, therefore the first handwritten image is located below the first text, that is, the first doodle is located below the first text.

[0133] Figure 12 shows a fourth schematic diagram of the display interface of an electronic device provided in an embodiment of this application.

[0134] In one embodiment, as shown in Figure 12A, the first editing interface 140 further includes a completion control 1210. Exiting the drawing operation of the brush tool can be done by clicking the completion control 1210 in the first editing interface 140 after drawing is completed in the first editing interface 140. In response to clicking the completion control 1210, as shown in Figure 12B, the mobile phone 100 displays the first text 910 and the first doodle 1050 in the first editing interface 140, and no longer displays the brush toolbar or the completion control.

[0135] It should be noted that the completion control can also be represented by other forms such as "√" in other embodiments.

[0136] The content on the first handwritten layer is identical to the content on the first handwritten image; both are the first doodle. Therefore, the electronic device pastes the first handwritten image onto the first handwritten area of ​​the content editing layer, making the first doodle included in the first handwritten image belong to the content editing layer. Since the first text is also located on the content editing layer, and is positioned above the first handwritten image, both the first text and the first doodle belong to the same content editing layer, and their layout positions on the content editing layer are fixed.

[0137] Therefore, when the content editing layer includes both text and doodles, the layout positions of the text and doodles on the content editing layer are fixed, and thus the layout positions of the text and doodles on the editing interface of the Notes application are also fixed.

[0138] In one embodiment, as shown in C of Figure 11, the mobile phone takes a screenshot of the first handwriting layer to generate a first handwriting image 1140, and pastes the first handwriting image 1140 onto the content editing layer 412. The first handwriting 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.

[0139] 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.

[0140] 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.

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

[0142] 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).

[0143] Figure 13 shows the fifth schematic diagram of the display interface of an electronic device provided in an embodiment of this application.

[0144] In one embodiment, as shown in Figure 13A, 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, as shown in Figure 13B, the mobile phone 100 displays an input method keyboard 142 and a drawing tool 143, and displays a cursor 1310 below the first doodle 1050. In response to a second input operation at the cursor 1310 via the input method keyboard 142, as shown in Figure 13C, the mobile phone 100 displays second text 1320 in the first editing interface 140.

[0145] As described above, in this embodiment of the application, when the display interface of the memo application includes both text and doodles, the text area where the text is located and the handwriting area where the doodles are located are displayed separately. Thus, when the display interface of the memo application includes multiple texts and multiple doodles, the multiple texts and multiple doodles can be displayed alternately on the display interface of the memo application.

[0146] S807, In response to rotating the electronic device by 90 degrees, the electronic device displays a second editing interface for the memo application.

[0147] Rotating an electronic device by 90 degrees can mean either switching the device from landscape to portrait mode, or switching it from portrait to landscape mode. This article uses the example of switching from portrait to landscape mode, illustrated in Figure 13:

[0148] In one embodiment, continuing as shown in C of Figure 13, the mobile phone 100 is in portrait mode, displaying a first editing interface 140 of the Notes application. The first editing interface 140, from top to bottom, includes: first text 910, first doodle 1050, and second text 1320. In response to switching the mobile phone 100 from portrait to landscape mode, as shown in D of Figure 13, the mobile phone 100 displays a second editing interface 1330 of the Notes application. The second editing interface 1330, from top to bottom, includes: first text 910, first doodle 1050, and second text 1320.

[0149] Therefore, in this embodiment of the application, rotating the electronic device by 90 degrees will not affect the layout of the text and doodles in the editing interface of the memo application.

[0150] Figure 14 shows a sixth schematic diagram of the display interface of an electronic device provided in an embodiment of this application.

[0151] In another embodiment, taking a tablet computer 300 receiving a memo sent by a mobile phone 100 as an example, as shown in Figure 14, the mobile phone 100 displays a first editing interface 140 of the memo application. The first editing interface 140 includes, from top to bottom, a first text 910, a first doodle 1050, and a second text 1320. After receiving the memo sent by the mobile phone 100, the tablet computer 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 doodle 1050, and the second text 1320.

[0152] Therefore, in this embodiment of the application, the increased width of the display window used to display the memo application does not affect the layout and position of text and doodles in the editing interface of the memo application.

[0153] In summary, in the embodiments of this application, rotating the electronic device by 90 degrees, or changing the width of the display window used to display the memo application, will not affect the layout and position of the text and doodles in the display interface of the memo application.

[0154] It should be understood that a memo app's information display interface is derived from its corresponding editing interface. Therefore, rotating the electronic device by 90 degrees, or changing the width of the display window used to display the memo app, will not affect the layout and position of the text and doodles in the memo app's information display interface.

[0155] After the electronic device performs the steps in the above embodiments, a display interface of the memo application can include multiple texts and multiple doodles. The following description, with reference to Figure 15, uses an example of a memo application display interface including two texts and two doodles. Here, the display interface including two doodles can be understood as the display interface including two handwritten images.

[0156] Figure 15 shows a second schematic flowchart of a page display method provided in an embodiment of this application. As shown in Figure 15, the page display method provided in this embodiment may include:

[0157] S1501, Display interface for electronic device display memo application.

[0158] The memo app's display interface includes alternating displays of first text, first doodle, second text, and fourth doodle.

[0159] Figure 16 shows a seventh schematic diagram of the display interface of an electronic device provided in an embodiment of this application.

[0160] In one embodiment, as shown in Figure 16A, the mobile phone 100 displays a memo application interface 1600. The memo application interface 1600, from top to bottom, includes: first text 910, a first handwritten image 1140, second text 1320, and a second handwritten image 1610. The area containing the first text 910 is the first text area, the area containing the second text 1320 is the second text area, the area containing the first handwritten image 1140 is the first handwritten area, and the area containing the second handwritten image 1610 is the second handwritten area. The content of the first handwritten image 1140 is a first doodle 1050, and the content of the second handwritten image 1610 is a fourth doodle 1620.

[0161] In one embodiment, the background colors of the first and second handwritten images are the same as the background color of the content editing layer, and the border colors of the first and second handwritten images are also the same as the background color of the content editing layer. This allows the first and second handwritten images to blend seamlessly with the content editing layer. In Figure 16, to show that the first and second handwritten images are located on the content editing layer, the borders of the first and second handwritten images are represented by black lines.

[0162] S1502, In response to a click operation on the first target text, the electronic device displays text editing tools and drawing tools.

[0163] The first target text is any text displayed in the memo application's interface. For example, the first target text is either the first text or the second text.

[0164] When an electronic device receives a click on any text, it can display text editing tools (such as an input method keyboard) and drawing tools on the memo app's display screen, putting the corresponding text area into re-editing mode. In re-editing mode, the electronic device can modify the text in the corresponding text area.

[0165] In one embodiment, as shown in Figure 16A, the display interface 1600 of the mobile phone 100 includes first text 910. In response to clicking the first text 910, as shown in Figure 16B, the first text area corresponding to the first text 910 enters a re-editing state. The mobile phone 100 displays the input method keyboard 142, the drawing 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 area.

[0166] S1503, In response to the modification operation of the first target text by a text editing tool, the electronic device displays the modified second target text.

[0167] In one embodiment, in response to a modification operation on the first text via the input method keyboard, as shown in C of FIG16, the mobile phone 100 displays the third text 1630 modified from the first text 910 in the display interface 1600 of the memo application.

[0168] 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.

[0169] 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.

[0170] 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.

[0171] In one embodiment, as shown in B or C of FIG16, in response to a click operation on the brush tool 143, as shown in D of FIG16, the mobile phone 100 displays the brush toolbar 1010 in the display interface 1400.

[0172] Figure 17 shows a second schematic diagram of the display interface of a memo application provided in an embodiment of this application.

[0173] From a layer perspective, in response to a click on the brush tool 143, as shown in Figure 17, the phone 100 displays a first handwritten layer 1110 above the first handwritten image 1140, and the first doodle 1050 is displayed in the first handwritten layer 1110. The phone 100 also displays a second handwritten layer 1710 above the second handwritten image 1610, and the fourth doodle 1620 is displayed in the second handwritten layer 1710. At this time, the doodle in the first handwritten layer 1110 is consistent with the doodle in the first handwritten image 1140, and the doodle in the second handwritten layer 1710 is consistent with the doodle in the second handwritten image 1610. In one example, the second handwritten layer can be referred to as the fourth layer.

[0174] At this point, the corresponding handwritten layer is displayed above each handwritten image, so you can draw freely on each handwritten layer by alternating between them using the brush tool.

[0175] S1505, In response to a drawing operation on the first target handwriting layer using any pen in the pen toolbar, the electronic device also displays the target doodle on the first target handwriting layer.

[0176] This step can be referred to in the relevant introduction of S804 above, and will not be repeated in this article.

[0177] When the first target handwriting layer is the first handwriting layer, upon receiving a drawing operation on the first handwriting layer, the electronic device will also display the first target doodle on the first handwriting layer; when the first target handwriting layer is the second handwriting layer, upon receiving a drawing operation on the second handwriting layer, the electronic device will also display the second target doodle on the second handwriting layer.

[0178] In one example, the first target doodle displayed on the first handwritten layer can be referred to as the second doodle.

[0179] In one embodiment, when loading the handwriting layers corresponding to each handwritten image, the electronic device also creates a third handwriting layer. This third handwriting layer is located above all other layers, is completely transparent, and has the same size as the content editing layers. In one example, this third handwriting layer may be referred to as the third layer.

[0180] Therefore, since the size of the content editing layer is the same as the size of the display interface of the memo application, drawing operations can be performed in any area of ​​the display interface of the memo application through the third handwriting layer, and the third handwriting layer will not obscure the content of other layers.

[0181] Compared to the time required to load a handwritten layer that includes doodles, an electronic device takes less time to create a blank handwritten layer. Therefore, when an electronic device receives a click on the brush tool, it will prioritize displaying the third handwritten layer before displaying the first target handwritten layer.

[0182] Figure 18 shows a third schematic diagram of the display interface of a memo application provided in an embodiment of this application.

[0183] For example, in response to a click operation of the brush tool, as shown in Figure 18, the third handwriting layer 1800 is displayed first above the content editing layer 412, then the first handwriting layer 1110 is displayed between the third handwriting layer 1800 and the first handwriting image 1140, and the second handwriting layer 1710 is displayed between the third handwriting layer 1800 and the second handwriting image 1610.

[0184] In one example, consider an electronic device that has already displayed a third handwriting layer but not a first target handwriting layer. When the electronic device receives a drawing operation, it can display a third drawing on the third handwriting layer. After successfully loading the first target handwriting layer, the electronic device can paste the third drawing from the third handwriting layer onto the first target handwriting layer and delete the third drawing from the third handwriting layer. At this point, if the electronic device receives another drawing operation, it can directly draw on the first target handwriting layer. That is, in this case, the target drawing on the first target handwriting layer can include: a third drawing copied from the third handwriting layer, and a fourth drawing directly drawn on the first target handwriting layer.

[0185] In another example, assuming the electronic device has already displayed a third handwriting layer and a first target handwriting layer, when the electronic device receives a drawing operation, it can directly draw the target doodle on the first target handwriting layer.

[0186] In one embodiment, after the electronic device pastes the doodles from the third handwriting layer onto the first target handwriting layer, the electronic device can hide the third handwriting layer. For example, the electronic device sets the status flag of the third handwriting layer to a second value. Alternatively, since the third handwriting layer is a transparent layer and does not affect other layers, the electronic device can continue to display the third handwriting layer after pasting the doodles from the third handwriting layer onto the first target handwriting layer.

[0187] In one embodiment, when the electronic device pastes a third doodle from a third handwriting layer onto a first target handwriting layer: First, the electronic device proportionally adjusts the third doodle to obtain a fifth doodle based on the proportional relationship between the size of the third handwriting layer and the size of the first target handwriting layer. Then, the electronic device pastes the fifth doodle onto the first target handwriting layer. The position of the third doodle on the third handwriting layer corresponds to the position of the fifth doodle on the first target handwriting layer. For example, assuming the third doodle is located in the upper right corner of the third handwriting layer, then the fifth doodle is also located in the upper right corner of the first target handwriting layer.

[0188] Since the size of the third handwriting layer is the same as 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 larger than the size of the first target handwriting layer. Therefore, the size of the fifth doodle is smaller than the size of the third doodle.

[0189] S1506. In response to the drawing operation of exiting the drawing toolbar, the electronic device generates a second target handwritten image from the doodle screenshot on the first target handwritten layer, pastes the second target handwritten image into the target handwritten area of ​​the content editing layer of the display interface, and deletes the first target handwritten image.

[0190] The drawing operation of exiting the brush toolbar can be found in the relevant introduction in S805 above, and will not be repeated here.

[0191] The target handwritten area can be the projection area of ​​the second target handwritten image onto the content editing layer.

[0192] The doodles on the second target handwritten image can include the newly drawn target doodles and the original doodles on the first target handwritten image. The electronic device pastes the second target handwritten image onto the target handwritten area and deletes the first target handwritten image; this can be understood as the electronic device replacing the first target handwritten image with the second target handwritten image in the target handwritten area.

[0193] Based on this, when the first target handwritten image is the first handwritten image, the electronic device can replace the first handwritten image with a third handwritten image in the first replacement area, where the first replacement area is the projection area of ​​the third handwritten image on the content editing layer; when the first target handwritten image is the second handwritten image, the electronic device can replace the second handwritten image with a fourth handwritten image in the second replacement area, where the second replacement area is the projection area of ​​the fourth handwritten image on the content editing layer.

[0194] In one example, the third handwritten image can also be called the first replacement image, and the fourth handwritten image can also be called the second replacement image.

[0195] Figure 19 shows a fourth schematic diagram of the display interface of a memo application provided in an embodiment of this application.

[0196] For example, as shown in Figure 19A, the content editing layer 412 of the display interface of the mobile phone 100 includes a first handwritten image 1140, which includes a first doodle 1050. In response to a modification operation on the content in the first handwritten image 1140, as shown in Figure 19B, the mobile phone 100 replaces the first handwritten image 1140 with a third handwritten image 1910, which includes the first doodle 1050 and a newly drawn second doodle 1920.

[0197] In one embodiment, when the electronic device receives a click operation on the first target handwritten image, the electronic device displays the boundary line of the first target handwritten layer. 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 corresponding first target handwritten image. 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 image is consistent with the movement direction of the movement operation, and the adjustment distance of the corresponding first target handwritten image is consistent with the movement distance of the movement operation.

[0198] The first target handwritten image can be any handwritten image displayed on the interface. For example, the first target handwritten image can be either a first handwritten image or a second handwritten image. When the first target handwritten image is a first handwritten image, the first target handwritten layer is the first handwritten layer; when the first target handwritten image is a second handwritten image, the first target handwritten layer is the second handwritten layer.

[0199] In one embodiment, the boundary line of the first target handwritten layer may include at least one of the following: the upper boundary line, the lower boundary line, the left boundary line, and the right boundary line of the first target layer.

[0200] The following section, using Figures 20-23 as examples, details the changes in the first handwritten layer and the first handwritten image when the boundary line of the first target handwritten layer is moved.

[0201] Figure 20 shows an eighth schematic diagram of the display interface of an electronic device provided in an embodiment of this application.

[0202] In one example, as shown in Figure 20A, mobile phone 100 displays first text 910 and a first handwritten image 1140 on display interface 1600, with the first text 910 positioned above the first handwritten image 1140. In response to a click on the first handwritten image 1140, as shown in Figure 20B, mobile phone 100 displays the upper boundary line 2010 of the first handwritten layer corresponding to the first handwritten image. In response to moving the upper boundary line 2010 of the first handwritten layer upwards by a first distance D1 on display interface 1600, as shown in Figure 20C, the upper boundary line 2010 of the first handwritten layer can extend upwards by a first distance D1 on display interface 1600. At this time, the upper boundary line of the first handwritten image also extends upwards by a first distance D1. Since the first text 910 and the first handwritten image 1140 are located on the same layer, and the first text 910 is located above the first handwritten image 1140, when the upper boundary line 2010 of the first handwritten layer moves upward by a first distance D1, causing the upper boundary line 2010 of the first handwritten image 1140 to also move upward by a first distance D1, the first text 910 will also move upward by a first distance D1. When the distance between the first distance D1 and the top of the text editing area of ​​the display interface is less than the first distance D1, the first text 910 will be hidden, as shown in C of Figure 20. In response to the operation of sliding down in the text editing area, as shown in D of Figure 20, the first text 910 will reappear in the display interface 1600.

[0203] Figure 21 shows a schematic diagram of the display interface of an electronic device provided in an embodiment of this application.

[0204] In another example, as shown in Figure 21A, the mobile phone 100 displays a first handwritten image 1140, a second text 1320, and a second handwritten image 1610 on the display interface 1600, with the second text 1320 and the second handwritten image 1610 positioned below the first handwritten image 1140. In response to a click on the first handwritten image 1140, as shown in Figure 21B, the mobile phone 100 displays the lower boundary line 2110 of the first handwritten layer corresponding to the first handwritten image. In response to moving the lower boundary line 2110 of the first handwritten layer downwards by a second distance D2 on the display interface 1600, as shown in Figure 21C, 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 also extends 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 down by a second distance D2, causing the lower boundary line 2110 of the first handwritten image 1140 to also move down by a second distance D2, the second text 1320 and the second handwritten image 1610 will also move down by a second distance D2.

[0205] 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.

[0206] Figure 22 shows a schematic diagram of the display interface of an electronic device provided in an embodiment of this application.

[0207] In another example, as shown in Figure 22A, mobile phone 100 displays a first handwritten image 1140 on display interface 1600. In response to a click on the first handwritten image 1140, as shown in Figure 22B, 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 display interface 1600, as shown in Figure 22C, the left boundary line 2210 of the first handwritten layer can extend to the left a third distance D3 on display interface 1600. At this time, the left boundary line of the first handwritten image also extends to the left a third distance D3.

[0208] Figure 23 shows an eleventh schematic diagram of the display interface of an electronic device provided in an embodiment of this application.

[0209] In another example, as shown in Figure 23A, mobile phone 100 displays a first handwritten image 1140 on display interface 1600. In response to a click on the first handwritten image 1140, as shown in Figure 23B, mobile phone 100 displays the right boundary line 2310 of the first handwritten layer corresponding to the first handwritten image. In response to moving the right boundary line 2310 of the first handwritten layer to the right a fourth distance D4 on display interface 1600, as shown in Figure 23C, the right boundary line 2310 of the first handwritten layer can extend to the right a fourth distance D4 on display interface 1600. At this time, the right boundary line of the first handwritten image also extends to the right a fourth distance D4.

[0210] In summary, in this embodiment, when the electronic device receives a re-editing operation on the handwritten content in an existing handwritten image in the memo app, the electronic device first displays the handwritten layer corresponding to the handwritten image to facilitate redrawing on the handwritten layer. When the electronic device receives the drawing operation on the handwritten layer and finishes the drawing operation, the electronic device takes a screenshot of the redrawn handwritten layer to generate a new handwritten image, and replaces the original handwritten image with the new handwritten image. Based on this, the handwritten content and text content always belong to the same content editing layer, and the layout position of the handwritten content and text content in the content editing layer does not change. Thus, regardless of how the size of the content editing layer changes, the layout position of the handwritten content and text content in the content editing layer is fixed. Therefore, when the electronic device rotates 90 degrees, or when the screen width of the electronic device changes, the layout position of the text content and handwritten content displayed in the memo app will not change.

[0211] As described in the above embodiments, when the electronic device receives an operation to exit the drawing tool, it will capture a screenshot of the handwriting layer to generate a handwritten image and then hide the handwriting layer. When a display interface of the electronic device's notes application includes multiple alternating texts and multiple handwritten images, the electronic device includes multiple hidden handwriting layers. A large number of handwriting layers will consume a significant amount of cache space on the electronic device, thus affecting its performance. Therefore, the electronic device can appropriately destroy some handwriting layers to free up cache space and improve its performance.

[0212] In one embodiment, when the electronic device loads the handwriting layers corresponding to each handwritten image, the electronic device can destroy (or delete) the handwriting layers corresponding to the handwriting images that have rolled off the screen of the electronic device, or destroy handwriting layers that are not in a drawing state. It should be understood that at this time, the electronic device only destroys the corresponding handwriting layers, but does not destroy the original doodles on the handwriting layers.

[0213] In this embodiment, when the electronic device receives a re-editing operation on the content of the handwritten image corresponding to the destroyed handwritten layer, the electronic device can recreate a blank handwritten layer, load the original doodles on the handwritten image onto the newly created handwritten layer, and display the newly drawn doodles.

[0214] As shown in Figure 24, this application embodiment also 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 are interconnected via lines. The processor 2401 is used to support an electronic device in implementing the various steps in the above method embodiments, and the at least one interface circuit 2402 can be used to receive signals from other devices (e.g., memory) or to send signals to other devices (e.g., a communication interface). The chip system may include a chip and may also include other discrete devices.

[0215] This application also provides a computer storage medium including instructions that, when executed on the electronic device, cause the electronic device to perform the steps in the above method embodiments.

[0216] This application also provides a computer program product including instructions that, when executed on the aforementioned electronic device, cause the electronic device to perform the steps in the above method embodiments.

[0217] The technical effects of the chip system, computer storage medium, and computer program product are described in the preceding method embodiments.

[0218] It should be understood that in the various embodiments of this application, the order of the above-mentioned processes does not imply the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of this application.

[0219] Those skilled in the art will recognize that the modules and algorithm steps of the various examples described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are implemented 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 this application.

[0220] Those skilled in the art will understand that, for the sake of convenience and brevity, the specific working processes of the systems, devices, and modules described above can be referred to the corresponding processes in the foregoing method embodiments, and will not be repeated here.

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

[0222] The modules described as separate components may or may not be physically separate. The components shown as modules may or may not be physical modules; that is, they may be located on one device or distributed across multiple devices. Some or all of the modules can be selected to achieve the purpose of this embodiment according to actual needs.

[0223] In addition, the functional modules in the various embodiments of this application can be integrated into one device, or each module can exist physically separately, or two or more modules can be integrated into one device.

[0224] In the above embodiments, implementation can be achieved entirely or partially through software, hardware, firmware, or any combination thereof. When implemented using software programs, implementation can be entirely or partially in the form of a computer program product. This 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 of this application are generated. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer storage medium or transmitted from one computer storage medium to another. For example, the computer instructions can be transmitted from one website, computer, server, or data center to another website, computer, server, or data center via wired (e.g., coaxial cable, fiber optic, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) means. The computer storage medium can be any available medium accessible to a computer or a data storage device including one or more servers, data centers, etc., that can be integrated with the medium. The available medium can be a magnetic medium (e.g., floppy disk, hard disk, magnetic tape), an optical medium (e.g., DVD), or a semiconductor medium (e.g., solid-state disk (SSD)).

[0225] The above description is merely a specific embodiment of this application, but the scope of protection of this application is not limited thereto. Any variations or substitutions that can be easily conceived by those skilled in the art within the scope of the technology disclosed in this application should be included within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of the claims.

Claims

1. A page display method, characterized in that, Applied to electronic devices, the method includes: The display interface of the application is shown; the display interface includes a first layer and a drawing tool, and the first layer includes first text; In response to a first operation on the brush tool, a second layer is created, and the first doodle drawn is displayed on the second layer; In response to the end-of-drawing operation, the second layer is hidden, and the first doodle drawn on the second layer is displayed on the first layer; the first doodle is located below the first text.

2. The method according to claim 1, characterized in that, The step of hiding the second layer and displaying the first doodle drawn on the second layer on the first layer in response to the drawing end operation includes: In response to the drawing completion operation, a first handwritten image is generated from the first doodle screenshot, the first handwritten image is pasted into the first handwritten area of ​​the first layer, and the second layer is hidden; the first handwritten area is the projection area of ​​the first handwritten image on the first layer.

3. The method according to claim 1 or 2, characterized in that, The step of creating a second layer in response to a first operation on the brush tool, and displaying the first doodle drawn on the second layer, includes: In response to a click on the brush tool, a second layer is created and a brush toolbar is displayed; the brush toolbar includes multiple brushes. In response to a drawing operation on the second layer using any brush, the first doodle is displayed on the second layer.

4. The method according to any one of claims 1-3, characterized in that, The projection area of ​​the second layer onto 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 includes: In response to a modification operation on the content of the first handwritten image, a first replacement image corresponding to the first handwritten image is generated; Replace the first handwritten image with the first replacement image on the first layer.

6. The method according to claim 5, characterized in that, In response to a modification operation on the content of the first handwritten image, a first replacement image corresponding to the first handwritten image is generated, including: In response to a click on the drawing tool, the drawing toolbar is displayed, and a second layer corresponding to the first handwritten image is loaded above the first handwritten image; the first doodle is displayed on the second layer; In response to a drawing operation on the second layer using any of the brushes in the brush toolbar, the electronic device also displays a second doodle on the first handwriting layer; In response to the end-of-draw operation, the first replacement image is generated from the first doodle and the second doodle screenshot on the second layer.

7. The method according to claim 5, characterized in that, In response to a modification operation on the content of the first handwritten image, a first replacement image corresponding to the first handwritten image is generated, including: In response to a click on the brush tool, the brush toolbar is displayed, a second layer corresponding to the first handwritten image is loaded above the first handwritten image, and a blank third layer is created; the size of the third layer is the same as the size of the first layer, and the first doodle is displayed on the second layer; If the third layer is already displayed and the second layer has not been successfully loaded, in response to a drawing operation on the third layer using any brush in the brush toolbar, a third doodle is displayed on the third layer. Once the second layer is successfully loaded, the second target graffiti is pasted onto the second layer, and the third graffiti on the third layer is deleted; the position of the third graffiti on the second layer is the same as its position on the third layer. In response to the end-of-drawing operation, the first replacement image is generated from screenshots of the first doodle and the third doodle.

8. The method according to any one of claims 5-7, characterized in that, Replacing the first handwritten image with the first replacement image on the first layer includes: Paste the first replacement image into the first replacement area of ​​the first layer, and delete the first handwritten image; the first replacement area is the projection area of ​​the first replacement image on the first layer.

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

10. The method according to claim 9, characterized in that, The boundary line includes at least one of the upper boundary line, lower boundary line, left boundary line, and right boundary line.

11. The method according to any one of claims 2-10, characterized in that, The first layer also includes a second handwritten image; the method further includes: In response to a click on the drawing tool, a fourth layer corresponding to the second handwritten image is loaded above the second handwritten image; the doodles on the fourth layer are consistent with the doodles on the second handwritten image.

12. An electronic device, characterized in that, The device includes a processor, a memory and a display screen connected to the processor, the display screen being used to display the application's interface, and the memory storing instructions, wherein when the processor executes the instructions, the method as described in any one of claims 1 to 11 is performed.

13. A computer-readable storage medium, characterized in that, Includes instructions that, when executed on an electronic device, cause the electronic device to perform the method as described in any one of claims 1 to 11.

14. A computer program product, characterized in that, Includes instructions that, when executed on an electronic device, cause the electronic device to perform the method as described in any one of claims 1 to 11.

Images