Method, device and storage medium for adjusting element hierarchical position

Abstract

The present application provides a method, device and storage medium for adjusting the hierarchical position of an element. In the method, by providing a hierarchical position adjustment option in a menu bar, it is convenient for users to select a suitable hierarchical position adjustment option as needed, and then adjust the target element to the desired position, thereby adjusting the hierarchical position of various elements displayed in the first interface and improving the user experience.

Description

Technical Field

[0001] The present application relates to the technical field of terminal devices, and in particular to a method, device and storage medium for adjusting the hierarchical position of an element. Background Art

[0002] As electronic devices become more and more functional, they have brought great convenience to people's daily life and work. For example, applications with note-taking functions (hereinafter referred to as note-taking applications) can facilitate users to record information elements anytime and anywhere, no longer relying on traditional paper recording methods, greatly improving the efficiency of information recording.

[0003] However, in the current note-taking applications, the hierarchical positions of various information elements recorded in the note page are fixed when they are added, and users cannot adjust the hierarchical positions of these information elements. The applicable scenarios are limited and the user experience is poor. Summary of the invention

[0004] In order to solve the above technical problems, the embodiments of the present application provide a method, device and storage medium for adjusting the hierarchical position of elements, aiming to adjust the hierarchical position of information elements in a note page to meet the needs of different scenarios and enhance the user experience.

[0005] In the first aspect, an embodiment of the present application provides a method for adjusting the hierarchical position of an element. The method is applied to an electronic device, including: applied to an electronic device, the method includes: displaying a first interface of a first application, the first interface includes a first layer and a second layer, the first layer is located above the second layer, the first layer includes a first element, and the second layer includes a second element; in response to a selection operation on the first element, displaying a menu bar, the menu bar includes a first-level position adjustment option, and the first-level position adjustment option is used to trigger moving the target element to the bottom of the second layer; in response to a user operation on the first-level position adjustment option, displaying a first element in the second layer, and the first element is located below the second element.

[0006] The first application may be any application that has information recording elements, such as a note application, a memo application, a sticky note application, or the like.

[0007] The first interface may be a page in the first application for recording information elements. For example, if the first application is a note application, the first interface may be a note page.

[0008] The first layer is, for example, the handwriting layer (HL) mentioned in the following embodiment, and the second layer is, for example, the element layer (EL or EL_down) mentioned in the following embodiment.

[0009] The first interface includes the first layer and the second layer, which can be understood as the first interface being generated based on the first layer and the second layer. That is, the first interface is drawn, rendered, and synthesized according to the elements in the first layer and the second layer.

[0010] Understandably, since the first layer is located above the second layer, the elements located on the first layer are visually located above the elements of the second layer.

[0011] The first element may be a handwritten element, and the second element may be a non-handwritten element, such as a graphic element, a picture element, a formula element, a text element, a draft paper element, etc.

[0012] The selection operation on the first element may be, for example, a selection operation performed by the user using a lasso method. Alternatively, the selection operation may be triggered by the user long pressing the first element. Alternatively, the selection operation may be triggered by the user long pressing the right button of the mouse at the location of the first element.

[0013] The menu bar, for example, is the menu bar 10b-66' mentioned in the following embodiment.

[0014] The first level position adjustment option is, for example, the “bottom” level position adjustment option shown in the menu bar 10b - 66 ′.

[0015] The target element can be understood as a selected element. In this aspect, the target element is the first element.

[0016] The elements displayed in each layer included in the first interface can be understood as the information elements displayed in each layer included in the note page in the following embodiment. That is, in the embodiment of the present application, "element" and "information element" refer to the same object.

[0017] In this way, the first element in the first layer is placed at the bottom of the second layer, so as to avoid the first element blocking other elements in the first interface.

[0018] For details on how to move the first element in the first layer to the bottom of the second layer, such as weight adjustment details, see Fig.21 After the user selects the "bottom" level position adjustment option, the weight change of the target information element in the element stack before and after the adjustment, as well as the implementation contents of this part, will not be repeated here.

[0019] According to the first aspect, the menu bar also includes a second-level position adjustment option, which is used to trigger moving the target element down one position; the method also includes: in response to user operation on the second-level position adjustment option, displaying the first element in the second layer, and the first element is located above the second element.

[0020] The second level position adjustment option is, for example, the “next level” level position adjustment option shown in the menu bar 10 b - 66 ′.

[0021] Therefore, in a scene where the first element and the second element are both located in the second layer and the second element is located above the first element, when the user triggers an operation to move the second element down one position, it is only necessary to swap the hierarchical positions of the first element and the second element in the second layer.

[0022] Regarding the interchange of the hierarchical positions of elements within a layer, you can first interchange the weights of the target element and the element below the target element, and then adjust the level of the target element according to the logic of the hierarchical transformation processing of the elements within the layer.

[0023] Among them, the weight of the element below the target element is smaller than the weight of the target element. From the visual effect, the element below the target element may be blocked by the target element (it may be partially folded or completely folded).

[0024] For details on the implementation of this aspect, please refer to Fig.21 The description section of the user's selection of the "Next Level" level position adjustment option, and Fig.24 The description of step S202 is not repeated here.

[0025] According to the first aspect, or any implementation of the first aspect above, the method also includes: in response to a selection operation on the second element, displaying a menu bar, the menu bar also including a third-level position adjustment option, the third-level position adjustment option is used to trigger moving the target element up one position; in response to a user operation on the third-level position adjustment option, displaying the second element in the second layer, the second element is located above the first element.

[0026] The third level position adjustment option is, for example, the “upper level” level position adjustment option shown in the menu bar 10 b - 66 ′.

[0027] According to the first aspect, or any implementation method of the first aspect above, in response to a user operation on a third-level position adjustment option, a second element is displayed in a second layer, including: in response to a user operation on a third-level position adjustment option, determining whether it is necessary to cross layers; when it is not necessary to cross layers, adjusting the second element to above the first element, and displaying the second element in the second layer.

[0028] For details on whether this element level position adjustment needs to cross layers, see Fig.23 ,as well as Fig.24 The description of step S201 is not repeated here.

[0029] Therefore, when determining the element level position adjustment within the element level position adjustment layer, the target element within the layer and the element above the target element may be directly swapped in level position.

[0030] For details on the implementation of this aspect, please refer to Fig.21 The description section of the user selecting the "Previous level" level position adjustment option in , and Fig.24 Step S202 and Fig.25 The description part will not be repeated here.

[0031] According to the first aspect, or any implementation of the first aspect above, the method also includes: when it is necessary to cross layers, adjusting the second element to the first layer, and displaying the second element in the first layer; wherein, when the first layer includes other elements, the second element is located at the bottom of the other elements.

[0032] In this way, it is achieved that the non-handwritten elements in the second layer can be directly adjusted to the first layer.

[0033] According to the first aspect, or any implementation of the first aspect above, the first interface also includes a third layer, the third layer is located above the first layer, the third layer has the same layer type as the second layer, and is different from the layer type of the first layer; the method also includes: in response to a selection operation on the second element, displaying a menu bar, the menu bar also including a fourth-level position adjustment option, the fourth-level position adjustment option is used to trigger moving the target element to the top of the third layer; in response to a user operation on the fourth-level position adjustment option, displaying the second element in the third layer; wherein, when the third layer includes other elements, the second element is located at the top of the other elements.

[0034] The third layer may be the top element layer (EL_up) mentioned in the following embodiments.

[0035] Thus, it is achieved that the elements in the first layer (such as the handwriting layer) are adjusted to the third layer (such as the top element layer).

[0036] According to the first aspect, or any implementation of the first aspect above, the first interface also includes a third layer, the third layer is located above the first layer, the third layer has the same layer type as the second layer, and is different from the layer type of the first layer; the method also includes: when it is necessary to cross layers, adjust the second element to the third layer, and display the second element in the third layer; wherein, when the third layer includes other elements, the second element is located at the bottom of the other elements.

[0037] For scenarios where non-handwritten elements cannot enter the handwritten layer, when the user triggers the cross-layer adjustment of the bottom non-handwritten elements, by crossing the handwritten layer and entering the top element layer above the handwritten layer, the hierarchical position of the non-handwritten elements can be visually perceived to have changed.

[0038] According to the first aspect, or any implementation of the first aspect above, the method also includes: in response to a selection operation on the second element, displaying a menu bar; in response to a user operation on a second-level position adjustment option, when it is necessary to cross layers, adjusting the second element to the second layer, and displaying the second element in the second layer; wherein the second element is located above the first element.

[0039] For scenarios where non-handwritten elements cannot enter the handwritten layer, when the user triggers the cross-layer adjustment of the top-level non-handwritten element, the non-handwritten element can be visually perceived to have changed its hierarchical position by crossing the handwritten layer and entering the bottom-level element layer below the handwritten layer.

[0040] According to the first aspect, or any implementation of the first aspect above, the method also includes: in response to a selection operation on the second element, displaying a menu bar, the menu bar also including a fourth-level position adjustment option, the fourth-level position adjustment option is used to trigger moving the target element to the top of the first layer; in response to a user operation on the fourth-level position adjustment option, displaying the second element in the first layer; wherein, when the first layer includes other elements, the second element is located at the top of the other elements.

[0041] The fourth level position adjustment option is, for example, the “top” level position adjustment option shown in the menu bar 10b - 66 ′.

[0042] For the scenario where the layer of the first interface does not include the top element layer, that is, the third layer, when the user triggers the top operation of the target element, the target element is directly adjusted to the handwriting layer, that is, the top of the first layer, thereby realizing the top processing of any element.

[0043] For details on the implementation of this aspect, please refer to Fig.21 The description of the user selecting the "Top" level position adjustment option will not be repeated here.

[0044] According to the first aspect, or any implementation of the first aspect above, the first interface also includes a third layer, the third layer is located above the first layer, the third layer has the same layer type as the second layer, and is different from the layer type of the first layer; the method also includes: in response to a selection operation on the second element, displaying a menu bar, the menu bar also including a fourth-level position adjustment option, the fourth-level position adjustment option is used to trigger moving the target element to the top of the third layer; in response to a user operation on the fourth-level position adjustment option, displaying the second element in the third layer; wherein, when the third layer includes other elements, the second element is located at the top of the other elements.

[0045] For the first interface layer including the top element layer, that is, the third layer scene, when the user triggers the top operation of the target element, the target element is directly adjusted to the top of the top element layer, thereby realizing the top processing of any element.

[0046] According to the first aspect, or any implementation of the first aspect, the first layer is a handwriting layer.

[0047] The data corresponding to the elements inputted by handwriting in the handwriting layer are point set data.

[0048] Among them, after the adjustment of the element hierarchical position is triggered, the element adjusted from the second layer or the third layer to the first layer is in picture format.

[0049] According to the first aspect, or any implementation method of the first aspect above, when the target element is an element of the first layer, the target element is adjusted to the second layer or the third layer, including: rasterizing the point set data corresponding to the target element to obtain the target element in a picture format; adding the target element in the picture format to the second layer or the third layer, and setting the target element in the first layer to be invisible.

[0050] The target element in the first layer is set to be invisible, for example, the theme attribute of the target element is configured to be transparent, that is, the target element still exists in the first layer, but the user cannot see it.

[0051] For details on the implementation of this aspect, please refer to Fig.24 Step S204, step S205, and Fig.26 and Fig. 27 The description part will not be repeated here.

[0052] In a second aspect, an embodiment of the present application provides an electronic device. The electronic device includes: a memory and a processor, the memory and the processor are coupled; the memory stores program instructions, and when the program instructions are executed by the processor, the electronic device executes instructions of the method in the first aspect or any possible implementation of the first aspect.

[0053] In a third aspect, an embodiment of the present application provides a computer-readable medium for storing a computer program, wherein the computer program includes instructions for executing the method in the first aspect or any possible implementation of the first aspect.

[0054] In a fourth aspect, an embodiment of the present application provides a computer program, which includes instructions for executing the method in the first aspect or any possible implementation of the first aspect.

[0055] In a fifth aspect, an embodiment of the present application provides a chip, the chip comprising a processing circuit and a transceiver pin, wherein the transceiver pin and the processing circuit communicate with each other through an internal connection path, and the processing circuit executes the method in the first aspect or any possible implementation of the first aspect to control the receiving pin to receive a signal and control the sending pin to send a signal. BRIEF DESCRIPTION OF THE DRAWINGS

[0056] Figure 1 A user interface diagram of a note-taking application is shown as an example;

[0057] Figure 2 A schematic diagram of a scenario in which a stylus is set to a hard pen in a note-taking application is exemplified;

[0058] Figure 3 This is a schematic diagram of an exemplary scenario of setting a soft pen for a stylus in a note-taking application;

[0059] Figure 4 This is a schematic diagram showing an exemplary scenario of setting an erase function in a note application;

[0060] Figure 5 This is a schematic diagram showing an exemplary scenario of using the area erase function to erase information elements in a note page;

[0061] Figure 6 This is a schematic diagram showing an exemplary scenario of using the stroke erasing function to erase information elements in a note page;

[0062] Figure 7 This is a schematic diagram showing an exemplary scenario of using the lasso function to select information elements in a note page;

[0063] Figure 8A schematic diagram of a scenario of adding a graphic to a note page is shown as an example;

[0064] Fig. 9 This is a schematic diagram showing an exemplary scenario of adding a picture to a note page;

[0065] Fig.10 This is a schematic diagram showing an exemplary scenario of adding a text box to a note page;

[0066] Fig.11 This is a schematic diagram showing an exemplary scenario of adding a formula to a note page;

[0067] Fig.12 A schematic diagram showing an exemplary scenario of using a marker pen in a note page;

[0068] Fig.13 This is a schematic diagram showing an exemplary scenario of using a ruler in a note page;

[0069] Fig.14 This is a schematic diagram of a user interface for adding functions in a note-taking application;

[0070] Fig.15 This is a schematic diagram of a user interface for setting functions in a note-taking application;

[0071] Fig.16 A schematic diagram of a scenario using a one-stroke shaping function is shown as an example;

[0072] Fig.17 A schematic diagram of a layer of a note page is shown as an example;

[0073] Fig.18 The figure is a schematic diagram showing the hierarchical relationship of information elements in a note page;

[0074] Fig.19 is a flowchart showing an exemplary method for adjusting the hierarchical position of an element;

[0075] Fig. 20 is a schematic diagram showing an exemplary hierarchical position adjustment option;

[0076] Fig.21 This is a schematic diagram showing an exemplary adjustment of the weight of an information element in an element stack corresponding to an information element displayed in a note page after selecting different level position adjustment options;

[0077] Fig. 22 A schematic diagram of layers of another note page is shown as an example;

[0078] Fig.23The diagram is a schematic diagram showing the distribution of weights of information elements in an element stack corresponding to information elements displayed in a note page;

[0079] Fig.24 A processing logic diagram for moving a target information element to a target layer is shown as an example;

[0080] Fig.25 A schematic diagram showing an exemplary transformation of the element level in a layer;

[0081] Fig.26 A schematic diagram showing another exemplary transformation of the level of elements in a layer;

[0082] Fig. 27 is a schematic diagram showing an exemplary transformation of handwritten element levels between layers;

[0083] Fig.28 is a schematic diagram showing an exemplary transformation of non-handwritten element levels between layers;

[0084] Fig.29 is a schematic diagram of the hardware structure of an electronic device shown as an example;

[0085] Fig.30 The software structure diagram of an electronic device is shown as an example. DETAILED DESCRIPTION

[0086] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0087] The term "and / or" in this article is merely a description of the association relationship of associated objects, indicating that three relationships may exist. For example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone.

[0088] The terms "first" and "second" in the description and claims of the embodiments of the present application are used to distinguish different objects rather than to describe a specific order of objects. For example, a first target object and a second target object are used to distinguish different target objects rather than to describe a specific order of target objects.

[0089] In the description of the embodiments of the present application, words such as "exemplary", "for example", or "optionally" are used to indicate examples, illustrations, or descriptions. Any embodiment or design described as "exemplary", "for example", or "optionally" in the embodiments of the present application should not be interpreted as being more preferred or more advantageous than other embodiments or designs. Specifically, the use of words such as "exemplary", "for example", or "optionally" is intended to present related concepts in a specific way.

[0090] In the description of the embodiments of the present application, the names of various controls, areas, options, and entrances are only used for illustration and are not intended to limit the embodiments of the present application. That is, in actual use, they may also be described as other names.

[0091] In the description of the embodiments of the present application, unless otherwise specified, the meaning of "multiple" refers to two or more than two. For example, multiple processing units refer to two or more processing units; multiple systems refer to two or more systems.

[0092] In the description of the embodiments of the present application, unless otherwise specified, only one user interface can be displayed at the same time. For example, when interface 20b is displayed, interface 30b will not be displayed in the current screen. Conversely, when interface 30b is displayed, interface 20b will not be displayed in the current screen. However, the elements included in different interfaces can be the same.

[0093] In the description of the embodiments of the present application, unless otherwise specified, the dotted lines in the drawings are only for illustration, that is, they are not shown in actual use.

[0094] As the functions of electronic devices improve, more and more applications (hereinafter referred to as "apps") are supported by electronic devices. These applications not only bring convenience to people's daily lives, but also bring great convenience to people's work. For example, users can use the information recording application installed in electronic devices to record various information elements anytime and anywhere, no longer relying on traditional paper recording methods, thereby greatly improving the efficiency of information recording.

[0095] Exemplarily, in some embodiments of the present application, the information recording application may be a note application, a memo application, a sticky note application, or any other application that has information recording elements.

[0096] For example, in some embodiments of the present application, information elements may include picture elements, text elements, formula elements, image elements, handwriting elements, etc. Among them, handwriting elements can be understood as content written using a handwriting device (such as a stylus) or a finger, such as text, numbers, characters, lines, etc.

[0097] In order to better understand the information recording application, the embodiment of the present application takes the information recording application as a note-taking application and the electronic device installed with the note-taking application as a tablet computer as an example, and explains the user interface involved in the note-taking application in the electronic device in different usage scenarios in combination with the accompanying drawings.

[0098] See also Figure 1 , which illustrates an exemplary user interface diagram of a note-taking application.

[0099] For example, Figure 1 The interface 10a shown in (1) is, for example, a user interface displayed after a user clicks an icon of a note application in an electronic device. In the embodiment provided in the present application, the interface 10a can be regarded as the first interface of the note application, that is, the user interface displayed by default after the note application is started.

[0100] Continue to see Figure 1 In (1), illustratively, for an electronic device with a larger screen size, the interface 10a may include an area 10a-1 and an area 10a-2.

[0101] Among them, area 10a-1 may include multiple controls, such as control 10a-11 for creating a new note, as well as controls for viewing all notes created in the note application (such as the all notes control), controls for viewing text type notes (such as the text note control), controls for viewing handwritten notes (such as the handwritten note control), controls for viewing favorite notes (such as the favorite note control), controls for viewing managed cards (such as the card center control), controls for viewing recently deleted notes (such as the recently deleted control), as well as various categories of folders, controls for creating new folders, etc.

[0102] The area 10a-2 displays the content corresponding to the currently selected control in the area 10a-1. For example, when all note controls are selected, the area 10a-2 displays all notes created in the note application.

[0103] For example, in some embodiments of the present application, the notes displayed in area 10a-2 may be the cover corresponding to each note (hereinafter referred to as: note cover). These note covers may be set by the user or generated by default. Below each note cover, the note name of the corresponding note, such as Name 1, Name 2, etc., and the creation time (or editing time), such as October 1, October 2, etc., are also displayed.

[0104] In addition, it should be noted that in the embodiment of the present application, handwritten notes can be understood as notes that include handwritten elements in the recorded information elements, and text notes can be understood as notes that do not include handwritten elements in the recorded information elements.

[0105] In addition, it should be noted that in the embodiment of the present application, in order to distinguish between handwritten notes and text notes, a stylus icon, such as icon 10a-12, may be displayed below the note cover corresponding to the handwritten note displayed in area 10a-2. In this way, it is convenient for the user to quickly find the handwritten note from multiple notes.

[0106] Continue to see Figure 1 In (1), illustratively, in some embodiments of the present application, when a user clicks on a control 10a-11, the electronic device creates a new note in response to the user operation.

[0107] For the sake of convenience, the present application embodiment takes the newly created note as a handwritten note as an example, and the user interface of the electronic device will display Figure 1 Interface 10b shown in (2).

[0108] See also Figure 1 In (2), exemplarily, the interface 10b may include a control bar 10b-1, a back control 10b-2, a cancel back control 10b-3, a save control 10b-4, an edit bar 10b-5, a note page 10b-6, a header control 10b-7, a copy control 10b-8, a search control 10b-9, etc.

[0109] The control bar 10b-1 is used to provide control functions for the interface 10b, such as controlling the interface 10b to be displayed in full screen form ( Figure 1 The floating window may be displayed as shown in (2) above, or displayed in split screen form, or displayed in a floating window form, or the floating window may be minimized, or the floating window may be closed, etc.

[0110] For example, in some embodiments of the present application, after the user clicks the control bar 10b-1, the area where the control bar 10b-1 is located can display the controls corresponding to the above-mentioned various control functions. In this way, the user can control the interface 10b to display in different forms by clicking the controls corresponding to different control functions.

[0111] The back control 10b-2 is used to cancel the information element added in the note page 10b-6. Specifically, when there are information elements in the note page 10b-6, each time the user clicks the back control 10b-2, one information element is canceled.

[0112] Exemplarily, in some embodiments of the present application, the rule followed when canceling information elements is, for example, that the last added is canceled first. For example, when the note page 10b-6 includes a first information element added at time T1 and a second information element added at time T2 (time T1 is earlier than time T2), when the user clicks the back control 10b-2 for the first time, the second information element added at time T2 is canceled first, and when the user clicks the back control 10b-2 again, the first information element added at time T1 is canceled.

[0113] Among them, the cancel rollback control 10b-3 is used to restore quilt Canceled information element. Specifically, after operating the rollback control 10b-2 to cancel the information element in the note page 10b-6, the user restores a canceled information element each time he clicks the cancel rollback control 10b-3.

[0114] For example, in some embodiments of the present application, the rule followed when restoring the canceled information elements is, for example, that the last canceled information element is restored first. For example, when the second information element is canceled by clicking the back control 10b-2 for the first time, and the first information element is canceled by clicking the back control 10b-2 for the second time, the first information element is restored after the user clicks the cancel back control 10b-3 for the first time, and the second information element is restored after clicking the cancel back control 10b-3 for the second time.

[0115] Furthermore, it should be noted that, in some embodiments of the present application, when there are no cancelable information elements in the note page 10b - 6 , the back control 10b - 2 may be set to an unavailable state.

[0116] Accordingly, in the case where there is no information element that can be restored in the note page 10 b - 6 , the cancel rollback control 10 b - 3 may be set to a disabled state.

[0117] Understandably, the unavailable state is, for example, graying out the control and setting it to a state where it does not respond after being clicked.

[0118] The save control is used to save the information elements currently existing in the note page 10b-6.

[0119] Among them, the editing bar 10b-5 can include a hard pen setting control 10b-51, a soft pen setting control 10b-52, an erase function setting control 10b-53, a lasso control 10b-54, a graphic setting control 10b-55, a picture setting control 10b-56, a text box adding control 10b-57, a formula adding control 10b-58, a marker pen setting control 10b-59, a ruler adding control 10b-510, a more function adding control 10b-511, a setting control 10b-512, etc.

[0120] For details about the usage scenarios of each control in the edit bar 10b-5, see Figures 2 to 16 The description of the illustrated embodiment will not be repeated here.

[0121] Among them, the note page 10b-6 is used to record the information elements recorded by the user through various input methods.

[0122] The page header control 10b-7 is used to display the total number of pages of the current note and the page number of the current note. Figure 1 The “1 / 1” shown in (2) indicates that the note with the note name “Name 7” has a total of 1 note page, and the current note page is page 1.

[0123] Among them, the copy control 10b-8 is used to copy all the contents of the current note page and automatically generate a note page that is the same as the current note page.

[0124] Among them, the search control 10b-9 is used to search for user-specified note pages, or information elements, etc.

[0125] It should be understood that Figure 1 The interface 10b shown in (2) is an example for better understanding the technical solution of this embodiment, and is not the only limitation to this embodiment. In actual applications, the interface 10b may include more or fewer controls than shown in the figure, and the style of the controls is not limited to the illustrated style.

[0126] The following are the relevant contents of the usage scenarios of each control in the edit bar 10b-5:

[0127] 1. Setting scene of stylus

[0128] It should be noted that the setting of the stylus pen mentioned in the embodiment of the present application can be understood as the setting of the handwriting color, thickness, texture, etc. of the information element written by the stylus pen or fingers.

[0129] For example, in some embodiments of the present application, the user can use the hard pen setting control 10b-51 to set the stylus. For example, after the user clicks the hard pen setting control 10b-51 in the edit bar 10b-5, the user interface may change to Figure 2 Interface 20b shown in (1).

[0130] See also Figure 2 In (1), illustratively, the interface 20b includes all elements in the interface 10b, and a hard pen setting window 10b-61 located on the interface 10b.

[0131] Among them, the hard pen setting window 10b-61 includes hard pens for users to choose, such as ballpoint pens 10b-611, fountain pens 10b-612, pencils 10b-613, etc.

[0132] It should be noted that, in some embodiments of the present application, the selected hard pen in a newly created handwritten note may be set to a ballpoint pen by default.

[0133] Continue to see Figure 2 In (1), illustratively, when the stylus pen is set to a ballpoint pen, the area for displaying the name of the selected hard pen in the hard pen setting window 10b-61, such as the dotted box 10b-614, may display "ballpoint pen".

[0134] Continue to see Figure 2 In (1), illustratively, the hard pen setting window 10b-61 may also include information identifying the handwriting thickness of the currently selected hard pen (such as the content shown in the dotted box 10b-615), and a control 10b-616 for adjusting the handwriting thickness of the hard pen.

[0135] Continue to see Figure 2 In (1), illustratively, the hard pen setting window 10b-61 may also include handwriting colors selectable by the user, such as the multiple colors shown in the dotted box 10b-617, and a control 10b-618 for identifying the currently selected color.

[0136] It should be noted that the selected color identified by the control 10b-618 is one of the multiple colors shown in the dotted box 10b-617.

[0137] In addition, it should be noted that, in order to facilitate distinction, in some implementations, the style of the color selected in the dotted box 10b-617 can be set to the first style, such as the style corresponding to the black color in the dotted box 10b-617, and other colors can be set to the second style.

[0138] Continue to see Figure 2 In (1), for example, after the user clicks the fountain pen 10b-612, the electronic device responds to the user operation, and the pen setting window 10b-61 in the interface 20b may change to Figure 2 The hard pen setting window 10b-61' is shown in (2).

[0139] See also Figure 2In (2), exemplarily, when the stylus is set to a fountain pen (the style of the fountain pen changes from fountain pen 10b-612 to fountain pen 10b-612', the style of the ballpoint pen changes from ballpoint pen 10b-611 to ballpoint pen 10b-611', and the style of the pencil remains pencil 10b-613), the area in the hard pen setting window 10b-61' for displaying the name of the selected hard pen, such as the dotted box 10b-614', may display "fountain pen".

[0140] Continue to see Figure 2 In (2), for example, after the user clicks the pencil 10b-613, the electronic device responds to the user operation, and the hard pen setting window 10b-61' in the interface 20b may change to Figure 2 The hard pen setting window 10b-61'' is shown in (3).

[0141] See also Figure 2 In (3), exemplarily, when the stylus is set to a pencil (the style of the pencil changes from pencil 10b-613 to pencil 10b-613', the style of the ballpoint pen remains ballpoint pen 10b-611', and the style of the fountain pen changes from fountain pen 10b-612' to fountain pen 10b-612), the area in the hard pen setting window 10b-61'' for displaying the name of the selected hard pen, such as the dotted box 10b-614'', may display "Pencil".

[0142] Therefore, the user operates the hard pen setting control 10b-51 to make the user interface of the electronic device display the hard pen setting window 10b-61 (or 10b-61', or 10b-61''), and the hard pen settings of the stylus can be realized by operating the controls provided in the hard pen setting window.

[0143] In addition, it should be noted that after the stylus is set to a hard pen, such as after any hard pen is selected, the interface 20b can also display a hard pen quick setting bar 10b-10. The hard pen quick setting bar 10b-10 can include a plurality of controls for setting the thickness of the handwriting of the hard pen, such as controls 10b-101, controls 10b-102, controls 10b-103, etc., and a plurality of controls for setting the handwriting color of the hard pen, such as controls 10b-104, controls 10b-105, controls 10b-106, etc. In this way, when the user records information elements in a handwriting manner, there is no need to operate the hard pen setting control 10b-51 to make the electronic device display the hard pen setting window, and then by operating the control 10b-616 provided in the hard pen setting window and selecting the color in the dotted line box 10b-617, the handwriting thickness and handwriting color of the hard pen can be changed directly through the hard pen quick setting bar 10b-10.

[0144] For example, in some other embodiments of the present application, the user can use the soft pen setting control 10b-52 to set the stylus. For example, after the user clicks the soft pen setting control 10b-52 in the editing bar 10b-5, the user interface may change to Figure 3 Interface 30b shown in (1).

[0145] See also Figure 3 In (1), illustratively, the interface 30b includes all elements in the interface 10b, and a soft pen setting window 10b-62 located on the interface 10b.

[0146] Among them, the soft pen setting window 10b-62 includes soft pens for users to choose from, such as marker pens 10b-621, fluorescent pens 10b-622, etc.

[0147] It should be noted that, in some embodiments of the present application, the selected soft pen in the newly created handwritten note may be the marker pen 10b-621 by default.

[0148] Continue to see Figure 3 In (1), illustratively, when the stylus is set as a marker pen, the area for displaying the name of the selected soft pen in the soft pen setting window 10b-62, such as the dotted box 10b-623, may display "marker pen".

[0149] Continue to see Figure 3 In (1), illustratively, the soft pen setting window 10b-62 may also include information identifying the handwriting thickness of the currently selected soft pen (such as the content shown in the dotted box 10b-624), a control 10b-625 for adjusting the handwriting thickness of the soft pen, handwriting colors for users to select, such as the multiple colors shown in the dotted box 10b-626, and a control 10b-627 for identifying the currently selected color.

[0150] Continue to see Figure 3 In (1), for example, after the user clicks the highlighter 10b-622, the electronic device responds to the user operation, and the soft pen setting window 10b-62 in the interface 20b may change to Figure 3 The soft pen setting window 10b-62' is shown in (2).

[0151] See also Figure 3 In (2), illustratively, when the stylus is set to a highlighter (the style of the highlighter is changed from highlighter 10b-622 to highlighter 10b-622', and the style of the marker is changed from marker 10b-621 to marker 10b-621'), the area in the soft pen setting window 10b-62' for displaying the name of the selected soft pen, such as the dotted box 10b-623', may display "Highlighter".

[0152] Thus, the user operates the soft pen setting control 10b-52 to make the user interface of the electronic device display the soft pen setting window 10b-62 (or 10b-62'), and can implement the soft pen setting of the stylus by operating the control provided in the soft pen setting window.

[0153] In addition, it should be noted that after the stylus performs soft pen settings, such as after selecting any soft pen, the interface 30b can also display a soft pen quick setting bar 10b-11. The soft pen quick setting bar 10b-11 can include multiple controls for setting the thickness of the soft pen's handwriting, such as control 10b-111, control 10b-112, control 10b-113, etc., and multiple controls for setting the handwriting color of the soft pen, such as control 10b-114, control 10b-115, control 10b-116, etc. In this way, when the user records information elements in a handwriting manner, there is no need to operate the soft pen setting control 10b-52 to make the electronic device display the soft pen setting window, and then by operating the control 10b-625 provided in the soft pen setting window and selecting the color in the dotted box 10b-626, the soft pen's handwriting thickness and handwriting color can be changed directly through the soft pen quick setting bar 10b-11.

[0154] 2. Setting scenario of the erase function

[0155] Illustratively, in some embodiments of the present application, the user can set different erasing modes through the erase function setting control 10b-53.

[0156] Specifically, in the embodiment of the present application, after the user clicks the erase function setting control 10b-53 in the edit bar 10b-5, the user interface may change to Figure 4 Interface 40b shown in (1).

[0157] See also Figure 2 In (1), illustratively, the interface 40b includes all elements in the interface 10b and an erase function setting window 10b-63 located on the interface 10b.

[0158] Among them, the erasing function setting window 10b-63 includes controls corresponding to different erasing methods, such as a control 10b-631 corresponding to the area erasing method and a control 10b-632 corresponding to the stroke erasing method.

[0159] It should be noted that in some embodiments of the present application, the erasing mode selected in a newly created handwritten note may be set to the area erasing mode by default.

[0160] Continue to see Figure 4In (1), illustratively, when the erasing mode is the area erasing mode, the area in the erasing function setting window 10b-63 for displaying the name of the selected erasing mode, such as the dotted box 10b-633, may display "area erasing".

[0161] Continue to see Figure 4 In (1), illustratively, the erase function setting window 10b-63 may also include information identifying the size of the area that can be erased by the area erase mode (such as the content shown in the dotted box 10b-634), and a control 10b-635 for adjusting the size of the erase area.

[0162] In addition, it should be noted that after selecting the area erasing mode, the erasing area quick setting bar 10b-12 can also be displayed in the interface 40b. Among them, the erasing area quick setting bar 10b-12 can include multiple controls for setting the size of the erasing area, such as control 10b-121, control 10b-122, control 10b-123, etc. In this way, when the user uses the area erasing mode to erase handwritten elements, there is no need to operate the erase function setting control 10b-53 to make the electronic device display the erase function setting window 10b-63, and then by operating the control 10b-635 provided in the erase function setting window 10b-63, the size of the erasing area can be changed directly through the erase area quick setting bar 10b-12.

[0163] Continue to see Figure 4 In (1), for example, after the user clicks the control 10b-632 corresponding to the stroke erasing mode, the electronic device responds to the user operation and the interface 40b may change to Figure 2 The interface 40b' shown in (2) in FIG. 10b-63 is changed from the erase function setting window 10b-63' to the erase function setting window 10b-63'.

[0164] See also Figure 4 In (2), exemplarily, when the erasing mode is set to stroke erasing (the control corresponding to the stroke erasing mode changes from control 10b-632 to control 10b-632', and the control corresponding to the area erasing mode changes from control 10b-631 to control 10b-631'), the area in the erasing function setting window 10b-63' for displaying the name of the selected erasing mode, such as the dotted box 10b-633', can display "Stroke Erasing".

[0165] In addition, it should be noted that the erase function setting window 10b-63 and the erase function setting window 10b-63' may also include a switch for turning on the function of erasing only the highlighter. When the user turns on this function, no matter whether the area erasing method or the stroke erasing method is used, only the handwritten elements written with the highlighter in the note page 10b-6 will be erased.

[0166] In addition, it should be noted that the erase function setting window 10b-63 and the erase function setting window 10b-63' may also include an option for clearing all handwritten contents with one click, such as a "clear handwritten contents" option. In this way, the user only needs to click the "clear handwritten contents" option once to clear all handwritten contents in the note page 10b-6.

[0167] Thus, the user operates the erase function setting control 10b-53 to make the user interface of the electronic device display an erase function setting window 10b-63 (or 10b-63'), and the erase function can be set by operating the control provided in the erase function setting window.

[0168] In addition, it should be noted that in the embodiment of the present application, when the area erasing method is used to erase handwritten elements, all handwritten elements in the erasing area within a layer will be erased. Figure 5 As shown in (1), in the note page 10b-6 of the interface 50b, lines 1 and 2 are drawn using handwriting. In the scenario where the user uses the area erase method to erase the handwriting elements, when the user clicks the erase area 10b-64, the parts of lines 1 and 2 that are blocked by the erase area 10b-64 will be erased. That is, after the user clicks the erase area 10b-64, the interface 50b will become Figure 5 Interface 50b' is shown in (2).

[0169] In addition, it should be noted that in the embodiment of the present application, when a handwritten element is erased using the stroke erasing method, only one handwritten element written in one stroke is erased in one operation. Figure 6 As shown in (1), in the note page 10b-6 of the interface 60b, lines 1 and 2 are drawn using handwriting. In the scenario where the user uses the stroke erase method to erase the handwritten elements, when the user clicks on the line 1 drawn in one stroke, the entire line 1 will be erased. That is, after the user clicks on the line 1 drawn in one stroke, the interface 60b will change to Figure 6 Interface 60b' is shown in (2).

[0170] Therefore, based on the different erasing modes set, erasing of handwritten elements is achieved.

[0171] 3. Information element selection scene

[0172] Exemplarily, in some embodiments of the present application, the user can select different information elements in the note page 10b - 6 through the lasso control 10b - 54 .

[0173] Illustratively, in some other embodiments of the present application, the user may select the target information element by long pressing the target information element.

[0174] Illustratively, in some other embodiments of the present application, the user may select the target information element by clicking an external input device, such as the right button of a mouse, at the target information element.

[0175] It should be understood that the above description is merely an example listed for a better understanding of the technical solution of this embodiment, and is not intended to be the sole limitation to this embodiment.

[0176] For ease of explanation, the embodiment of the present application takes the selection of different information elements in the note page 10b-6 through the lasso control 10b-54 as an example to specifically explain the selection scenario of the information elements.

[0177] See also Figure 7 In (1), a schematic diagram of a scenario in which a user clicks on a lasso control 10b-54 and uses a finger to circle a portion of a line 1 displayed in a note page 10b-6 in an interface 70 is shown. When the user draws a circle 10b-65 on the line 1 with a finger, the electronic device automatically selects the entire line 1 in response to the user operation, that is, the circle 10b-65 can automatically become Figure 7 The selection box 10b-65' shown in (2) can completely select the line 1.

[0178] In addition, it should be noted that after the user selects the information element, he usually performs some operations on the information element. Figure 7 The menu bar 10b-66 shown in (2) above. The menu bar 10b-66 may include one or more controls, such as a cut control, a copy control, a color adjustment control, a delete control, a share control, etc. In this way, the user can operate the selected information element through the controls provided by the menu bar 10b-66.

[0179] 4. Adding scenes of graphic elements

[0180] For example, in some embodiments of the present application, the user can use the graphic setting control 10b-55 to set different graphics. For example, after the user clicks the graphic setting control 10b-55 in the edit bar 10b-5, the user interface may change to Figure 8 Interface 80b shown in (1).

[0181] See also Figure 8In (1), illustratively, the interface 80b includes all elements in the interface 10b, and the graphic setting window 10b-67 located on the interface 10b.

[0182] Among them, the graphic setting window 10b-67 includes various graphic shapes for users to choose from, such as a straight line without an arrow, a straight line with a single arrow, a straight line with a double arrow, an L shape, an arc, a circle, a triangle, a rectangle, a pentagon, a five-pointed star, etc.

[0183] In addition, it should be noted that after the user selects any graphic shape in the graphic setting window 10b-67, the name and style of the selected graphic can also be displayed in the interface 80. For example, when the selected graphic shape is a circle, the area where the dotted frame 10b-13 is located will display "circle" and "○".

[0184] Still taking the case where the graphic shape selected by the user is a circle, when the user clicks the note page 10b-6 in the interface 80, the graphic setting window 10b-67 will disappear. In this way, the user presses the stylus or finger (or the left mouse button) in the note page 10b-6 and moves the stylus or finger (or the mouse) to draw a circle in the note page 10b-6. At this time, the user interface can be changed to Figure 8 Interface 80b' is shown in (2).

[0185] Thereby, the addition of graphic elements is achieved.

[0186] 5. Adding scenes for picture elements

[0187] For example, in some embodiments of the present application, the user can add picture elements from different sources through the picture setting control 10b-56. For example, after the user clicks the picture setting control 10b-56 in the editing bar 10b-5, the user interface may change to Fig. 9 Interface 90b is shown.

[0188] See also Fig. 9 Exemplarily, the interface 90b includes all elements in the interface 10b and the picture source selection window 10b-68 located on the interface 10b.

[0189] Among them, the picture source selection window 10b-68 includes a "take photo" option and a "select from gallery" option.

[0190] Exemplarily, when the user clicks the "take photo" option, the electronic device can start the camera application, use the camera application to take a picture of the image element to be added, and then add the photographed picture element to the note page 10b-6.

[0191] Exemplarily, when the user clicks the “Select from Gallery” option, the electronic device may start the gallery application, display the image elements managed in the gallery, and then add the image elements selected by the user to the note page 10b - 6 .

[0192] This enables the addition of picture elements from different sources.

[0193] 6. Adding scenes for text elements

[0194] For example, in some embodiments of the present application, the user can add a text element through the text box add control 10b-57. For example, after the user clicks the text box add control 10b-57 in the edit bar 10b-5, the user interface may become Fig.10 Interface 100b is shown.

[0195] See also Fig.10 , illustratively, interface 100b includes all elements in interface 10b, as well as a text input box 10b-69 that appears in note page 10b-6.

[0196] In this way, the user can add text elements by using the virtual keyboard corresponding to the input method application in the electronic device, or an external keyboard.

[0197] 7. Adding scenarios for formula elements

[0198] For example, in some embodiments of the present application, the user can add formula elements through the formula adding control 10b-58. For example, after the user clicks the formula adding control 10b-58 in the editing bar 10b-5, the user interface may change to Fig.11 Interface 101b is shown.

[0199] See also Fig.11 , exemplarily, the interface 101b includes all elements in the interface 10b, and a formula input box 10b-610 that appears in the note page 10b-6. The formula input box 10b-610 includes area 1 and area 2. Area 1 is used for the user to write the formula in handwriting, and area 2 is used to automatically convert the content in area 1 into text format.

[0200] Thus, the addition of formula elements is achieved.

[0201] In addition, it should be noted that through Fig.11In the scenario of adding formula elements shown in the figure, the formula elements added to the note page 10b-6, even if the formula is written in area 2 of the formula input box 10b-610 by handwriting, are in text format. That is, it can be regarded as a text element, not a handwriting element. If the user directly writes the formula in the note page 10b-6 by handwriting, the formula finally added to the note page 10b-6 is a handwriting element.

[0202] 8. Use scenarios of marker pens

[0203] For example, in some embodiments of the present application, the user can use the marker pen setting control 10b-59 to mark the information element in the note page 10b-6. For example, after the user clicks the marker pen setting control 10b-59 in the edit bar 10b-5, the user can circle a certain information element on the note page 10b-6, such as the text element "Hello", with a stylus or finger (or the left mouse button). The user interface can be changed to Fig.12 Interface 102b shown in FIG.

[0204] See also Fig.12 , illustratively, interface 102b includes all elements in interface 10b, as well as mark 10b-611 appearing in note page 10b-6.

[0205] Thus, the information elements in the note page 10b-6 can be marked using a marking pen.

[0206] In addition, it should be noted that the mark 10b-611 will automatically disappear after the set display time, that is, the mark 10b-611 does not exist in the final saved note.

[0207] 9. Usage scenarios of rulers

[0208] For example, in some embodiments of the present application, the user can add a ruler control 10b-510 to display a ruler on the current interface. For example, after the user clicks the ruler add control 10b-510 in the edit bar 10b-5, the user interface may become Fig.13 Interface 103b shown in FIG.

[0209] See also Fig.13 Exemplarily, the interface 103b includes all elements in the interface 10b and the scales 10b-14 appearing on the interface 10b.

[0210] Thus, the ruler 10b-14 can be used to draw a straight line on the note page 10b-6, or to measure the length of an information element in the note page 10b-6.

[0211] In addition, it should be noted that the rulers 10b-14 are only displayed during the use process and do not exist in the final saved notes.

[0212] 10. More usage scenarios for added functions

[0213] For example, in some embodiments of the present application, the user can use the more function add control 10b-511 to implement the use of different functions. For example, after the user clicks the more function add control 10b-511 in the edit bar 10b-5, the user interface may change to Fig.14 Interface 104b is shown.

[0214] See also Fig.14 Exemplarily, the interface 104b includes all elements in the interface 10b and a more function selection window 10b-612 located on the interface 10b.

[0215] Among them, the more function selection window 10b-612 may include one or more function options not provided in the editing bar 10b-5, such as an "add page" option, an "add draft paper" option, an "import picture" option, an "import document" option, etc.

[0216] For example, when the user clicks the "Add Page" option, a note page can be automatically added to the current note.

[0217] Understandably, after adding a page of note interface, the current interface will display the most recently added note page.

[0218] For example, when the user clicks the "Add Draft Paper" option, the draft paper can be displayed in the current note page. In this way, the user can perform calculations directly on the draft paper displayed in the note page without the need for traditional paper.

[0219] For example, when the user clicks the "Import Pictures" option, in one implementation, a picture source selection window similar to the picture source selection window 10b-68 may be displayed. In another implementation, a camera application may be started by default. In another implementation, a gallery application may be started by default.

[0220] In addition, it should be noted that, through the "Import Picture" option, the imported picture is not a picture element added to the note page, but is used as the background of the note page. That is, after a picture is imported through the "Import Picture" option, the background of the note page 10b-6 will become the picture, and the information elements previously recorded in the note page 10b-6 will be displayed on the background picture.

[0221] Exemplarily, when the user clicks the "Import Document" option, the user interface may be changed to display an interface for the user to select a document. In this way, the user can import the selected document into the note page 10b-6 by selecting any document in the interface.

[0222] 11. Setting the usage scenarios of the function

[0223] For example, in some embodiments of the present application, the user can use the setting control 10b-512 to implement the use of different setting functions. For example, after the user clicks the setting control 10b-512 in the edit bar 10b-5, the user interface may change to Fig.15 Interface 105b is shown.

[0224] See also Fig.15 Exemplarily, the interface 105b includes all elements in the interface 10b and a setting window 10b-613 located on the interface 10b.

[0225] Among them, the setting window 10b-613 may include one or more setting options for functions not provided in the editing bar 10b-5, such as a "page setting" option, a "page turning setting" option, a "one-stroke forming" switch, a "only allow pen use" switch, etc.

[0226] Exemplarily, when the user clicks the "page setup" option, in one implementation, a page setup window may pop up on the current interface. In other implementations, the user interface may be changed to a page setup interface.

[0227] Among them, the page setting window or page setting interface can provide one or action setting options such as note cover setting options, paper orientation setting options, paper specification setting options, eye protection mode setting options, etc.

[0228] In this way, the user can set the note page through the setting options provided in the page setting window or the page setting interface.

[0229] Exemplarily, when the user clicks on the "page turning setting" option, in one implementation, a page turning setting window may pop up on the current interface.

[0230] Among them, the page turning setting window can provide options corresponding to page turning methods such as "vertical page turning" and "horizontal page turning".

[0231] In addition, in some implementations, a "continuous page turning" switch may be provided in the page turning setting window. Thus, after the "continuous page turning" function is turned on, if the user triggers the page turning operation and there are multiple note pages, the selected page turning method can be used to continuously turn pages according to the set time, such as continuous vertical page turning or continuous horizontal page turning.

[0232] For example, when the user clicks the "one stroke forming" switch to turn on the one stroke forming function, the graphics drawn by the user in the note page 10b-6 will be automatically standardized. Fig.16 As shown in (1), when the user draws a five-pointed star 10b-620 (a handwritten element) in the note page 10b-6, the note application will standardize the five-pointed star 10b-620 and convert it into a standard five-pointed star (an image formed by connecting the five vertices of a regular pentagon).

[0233] It should be noted that, in the embodiment of the present application, during the process of standardizing the five-pointed star 10b-620, the note interface 10b-6 can simultaneously display the five-pointed star 10b-620 and the standard five-pointed star 10b-621 with blurred edges or lighter colors. Fig.16 As shown in (2).

[0234] After the standardization of the five-pointed star 10b-620 is completed, the note interface 10b-6 can only display the clear standard five-pointed star 10b-621' without displaying the five-pointed star 10b-620. Fig.16 As shown in (3).

[0235] In addition, it should be noted that in some implementations, the standard five-pointed star 10b-621' may be a handwritten element. In other implementations, the standard five-pointed star 10b-621' may be a graphic element. The present embodiment takes the element type before the information element obtained by the standardization process is saved as an example.

[0236] It should be understood that the above description is merely an example listed for a better understanding of the technical solution of this embodiment, and is not intended to be the sole limitation to this embodiment.

[0237] For example, when the user clicks the "Only allow pen use" switch and turns on the "Only allow pen use" function, the above controls can only be operated with a stylus, and handwritten elements can be added to the note page. In this way, it is possible to effectively avoid the impact of finger accidental touches on the information elements recorded in the note page, such as accidental deletion or insertion of information elements.

[0238] This enables the use of various setting functions.

[0239] It should be understood that Figures 2 to 16 The interfaces shown are examples listed for better understanding of the technical solution of this embodiment and are not intended to be the sole limitation of this embodiment. In practical applications, these interfaces may include more or fewer controls than those shown in the diagram, and the styles of the controls are not limited to the illustrated styles.

[0240] In addition, it should be noted that, for the current note application, the note page 10b-6 may include a handwriting layer (HL), an element layer (EL) and a background layer (BL) from top to bottom, such as Fig.17 shown.

[0241] Among them, the handwriting layer is used to display handwriting elements added by the user through handwriting, such as text, numbers, characters written by using a stylus or fingers, as well as lines and marks drawn.

[0242] Among them, the element layer is used to display information elements added by users through text input, information import (pictures, formulas, documents, etc.), graphic drawing, etc., such as information elements added through graphic setting controls 10b-55, picture setting controls 10b-56, text box adding controls 10b-57, formula adding controls 10b-58, etc.

[0243] Among them, the background layer is located at the bottom of the entire note page and is used to add background images or set background colors.

[0244] In addition, it should be noted that the hierarchical positions of the various information elements recorded in the note page are fixed when they are added. For example, handwriting elements can only be added to the handwriting layer, and other information elements except handwriting elements can only be added to the element layer. Moreover, the information elements in the same layer follow the principle that the first added is at the bottom layer and the last added is at the top layer. For example, the first picture element added first is located in the element layer, the second picture element added after the first picture element is located above the first picture element in the element layer, the first handwriting element added after the second picture element is located in the handwriting layer, and the first graphic element added after the first handwriting element is located above the second picture element in the element layer. No matter how the user moves these information elements, the visual effect always keeps the first picture element at the bottom, the second picture element above the first picture element, the first graphic element above the second picture element, and the first handwriting element above the first graphic element. Fig.18 As shown in (1) and (2).

[0245] In other words, users cannot adjust the hierarchical position of these information elements. This results in the note-taking application being applicable to too few scenarios, unable to meet the diverse usage needs of users, and resulting in a poor user experience.

[0246] In view of this, an embodiment of the present application provides a method for adjusting the hierarchical position of an element, aiming to adjust the hierarchical position of information elements in a note page to meet the needs of different scenarios and enhance the user experience.

[0247] Specifically in the embodiment of the present application, the implementation process of the method for adjusting the element level position can be as follows: Fig.19 shown.

[0248] See also Fig.19 The method for adjusting the element hierarchical position provided in the embodiment of the present application may include:

[0249] S101, in response to a selection operation on any information element in a note page, marking the selected target information element and displaying a hierarchical position adjustment option.

[0250] Optionally, the selection operation of any information element in the note page may be performed by lassoing. Figure 7 The selection method is shown.

[0251] Optionally, the selection operation for any information element in the note page can be performed by long pressing the target information element.

[0252] Optionally, the operation of selecting any information element in the note page can be achieved by clicking an external device, such as a right mouse button, at the target information element to select the target information element.

[0253] Understandably, the selected target information element may be one or more information elements selected from handwritten elements, graphic elements, picture elements, text elements, and formula elements. For ease of explanation, this embodiment takes one selected target information element as an example. For a scenario where there are multiple target information elements, the multiple information elements in the target information element maintain the original hierarchical position relationship, and the multiple information elements are adjusted as a whole according to the element hierarchical position adjustment strategy of this embodiment.

[0254] In addition, it can also be understood that in this embodiment, marking the selected target information element can be understood as using a selection box to circle the target information element. Figure 7 In the example, the line 1 is circled using the circle box 10b-65', so that the line 1 can be identified as the selected target information element.

[0255] In addition, it is also understandable that the level position adjustment options displayed in the current interface may be displayed in the menu bar corresponding to the target information element. Fig. 20 , exemplarily showing a menu bar 10b-66' corresponding to a target information element (such as line 1). In addition to the options in the menu bar 10b-66 in the above embodiment, the menu bar 10b-66' also includes hierarchical position adjustment options such as "top", "bottom", "previous layer", and "next layer".

[0256] It should be noted that, in the embodiment of the present application, pinning can be understood as moving the target information element to the very top, that is, adjusting the target information element to the very top of all information elements.

[0257] Putting to the bottom can be understood as moving the target information element to the very bottom, that is, adjusting the target information element to the bottom of all information elements.

[0258] The previous layer can be understood as moving the target information element up one position, which usually requires finding the previous element of the target element and exchanging its position.

[0259] The next layer can be understood as moving the target information element down one position, which usually requires finding the element after the target element and exchanging its position.

[0260] S102: In response to a selection operation of any level position adjustment option, adjust the weight of the target information element.

[0261] The selection operation of any level position adjustment option is, for example, the user clicking on any level position adjustment option displayed in the menu bar corresponding to the target information element.

[0262] In addition, it should be noted that in the embodiment of the present application, the hierarchical position of each information element in the note page is determined by the weight assigned to each information element.

[0263] Illustratively, in some implementations (implementation 1), the hierarchical position of each information element may be set in such a way that an information element with a higher weight is located above an information element with a lower weight.

[0264] Illustratively, in some other implementations (implementation 2), the hierarchical position of each information element may also be set in such a way that the information element with a lower weight is located above the information element with a higher weight.

[0265] For ease of explanation, the embodiment of the present application takes the method of setting the hierarchical position of each information element given in implementation method 1 as an example.

[0266] In addition, it should be noted that since the corresponding adjustment methods for top, bottom, previous layer, and next layer are different, after receiving the user's selection operation for any level position adjustment option, it can be determined that the user has selected the target level position adjustment option, and then the weight of the target information element is adjusted according to the adjustment method corresponding to the target level position adjustment option.

[0267] See also Fig.21 , exemplarily showing a schematic diagram of adjusting the weight of a target information element in response to a selection operation of any level position adjustment option.

[0268] Exemplarily, when the hierarchical position adjustment option selected by the user is the "top" hierarchical position adjustment option, the size information of the element stack that manages each information element can be obtained, and then the weight of the target information element can be set according to the size information of the element stack. For example, through the Get task size() function, the size information (taskSize) of the element stack is obtained, and then the size information of the element stack is assigned to the weight (weigh) of the target information element. That is, the weight of the target information element = taskSize.

[0269] In addition, when the hierarchical position adjustment option selected by the user is the "top" hierarchical position adjustment option, the user also wants to reduce the weight of the information element before the target information element by one, that is, reduce the weight of each information element before the target information element by one.

[0270] For example Fig.21 As shown in (1), when the weight of the target information element before adjustment is 2, when the hierarchical position adjustment option selected by the user is the "top" hierarchical position adjustment option, the Get task size() function is used to obtain the size information (taskSize) of the element stack, and it is determined that taskSize = 5. Then, the weight of the target information element is adjusted from 2 to 5, and the weight of each information element before the target information element is subtracted by 1. That is, the weight of the information element with an original weight of 5 is changed to 4, the weight of the information element with an original weight of 4 is changed to 3, and the weight of the information element with an original weight of 3 is changed to 2. After adjusting the weight of the target information element, the distribution of each information element in the element stack is as follows: Fig.21 As shown in (2).

[0271] It should be noted that Fig.21 In the example, the same colored blocks in the element stack represent the same information element. That is, the adjustment of the weight only changes the position of the information element in the element stack, but does not change the information element itself.

[0272] In addition, it should be noted that in some embodiments of the present application, in the scenario where the hierarchical position adjustment option selected by the user is the "top" hierarchical position adjustment option, when adjusting the weight of the target information element, the target information element in the element stack and all information elements before the target information element can be taken out, such as Fig.21 The target information element with a weight of 2 shown in (2), as well as the information elements with a weight of 3, 4, and 5 are all taken out, and then the weights of these information elements are reset according to the above-mentioned weight setting method. Finally, the corresponding information elements are added back to the element stack in order from low to high weights, and then the result is Fig.21 The stack of elements shown in (2).

[0273] Thus, when the hierarchical position adjustment option selected by the user is the "top" hierarchical position adjustment option, the weight adjustment operation of the target information element is completed.

[0274] Exemplarily, when the hierarchical position adjustment option selected by the user is the "bottom" hierarchical position adjustment option, the weight of the target information element may be adjusted to 0, and the weight of each information element after the target information element may be increased by 1.

[0275] For example Fig.21 As shown in (3), when the weight of the target information element before adjustment is 2, when the hierarchical position adjustment option selected by the user is the "bottom" hierarchical position adjustment option, the weight of the target information element is adjusted from 2 to 0, and the weight of each information element after the target information element is added by 1. That is, the weight of the information element with a weight of 0 is changed to 1, and the weight of the information element with a weight of 1 is changed to 2. After adjusting the weight of the target information element, the distribution of each information element in the element stack is as follows Fig.21 As shown in (4).

[0276] In addition, it should be noted that in some embodiments of the present application, in the scenario where the hierarchical position adjustment option selected by the user is the "bottom" hierarchical position adjustment option, when adjusting the weight of the target information element, all information elements in the element stack can be taken out, and then the weights of these information elements can be reset according to the above-mentioned weight setting method, and finally, the corresponding information elements can be added back to the element stack in order from low to high weights, so that the weight of the target information element can be adjusted. Fig.21 The element stack shown in (4).

[0277] Thus, the weight adjustment operation of the target information element is completed when the hierarchical position adjustment option selected by the user is the "bottom" hierarchical position adjustment option.

[0278] Exemplarily, when the hierarchical position adjustment option selected by the user is the "previous level" hierarchical position adjustment option, the weight of the target information element can be swapped with the weight of the information element before the target information element. In this scenario, the weights of the two information elements can be swapped by determining the identification information of the information element before the target information element, such as the element ID, and then obtaining the weight of the information element according to the element ID.

[0279] For example, after determining the element ID of the information element before the target information element, call the information element weight acquisition function, such as getelementbyweight(), and pass the determined element ID into the function, so that the weight of the information element can be obtained. Then, assign the weight of the target information element before adjustment (such as Ele1W) to a temporary parameter (such as Temp), assign the weight of the information element before the target information element (such as Ele2W) to Ele1W, and assign Temp to Ele2W. That is, execute the processing of Temp = Ele1W, Ele1W = Ele2W, Ele2W = Temp.

[0280] For example Fig.21 As shown in (5), when the weight of the target information element before adjustment is 2, when the hierarchical position adjustment option selected by the user is the "upper level" hierarchical position adjustment option, the weight of the target information element is interacted with the weight of the information element before the target information element, that is, the weight of the information element above the target information element in the element stack, so that the weight of the target information element can be adjusted. After adjusting the weight of the target information element, the distribution of each information element in the element stack is as follows Fig.21 As shown in (6).

[0281] In addition, it should be noted that in some embodiments of the present application, in the scenario where the hierarchical position adjustment option selected by the user is the "previous layer" hierarchical position adjustment option, when adjusting the weight of the target information element, the target information element in the element stack and all information elements before the target information element can be taken out, such as Fig.21 The target information element with a weight of 2 shown in (5), as well as the information elements with a weight of 3, 4, and 5 are all taken out, and then the weights of these information elements are reset according to the above-mentioned weight setting method. Finally, the corresponding information elements are added back to the element stack in order from low to high weights, and then the result is Fig.21 The stack of elements shown in (6).

[0282] Thus, when the hierarchical position adjustment option selected by the user is the "upper level" hierarchical position adjustment option, the weight adjustment operation of the target information element is completed.

[0283] Exemplarily, when the hierarchical position adjustment option selected by the user is the "next layer" hierarchical position adjustment option, the weight of the target information element can be interchanged with the weight of the information element after the target information element. In this scenario, the weights of the two information elements can be exchanged by determining the identification information of the information element before the target information element, such as the element ID, and then obtaining the weight of the information element according to the element ID. The logic of this scenario is the same as the logic of adjusting the target information element to the previous layer, and will not be repeated here.

[0284] For example Fig.21 As shown in (7), when the weight of the target information element before adjustment is 2, when the hierarchical position adjustment option selected by the user is the "next layer" hierarchical position adjustment option, the weight of the target information element is interacted with the weight of the information element after the target information element, that is, the weight of the information element below the target information element in the element stack, so that the weight of the target information element can be adjusted. After adjusting the weight of the target information element, the distribution of each information element in the element stack is as follows Fig.21 As shown in (8).

[0285] In addition, it should be noted that in some embodiments of the present application, in the scenario where the hierarchical position adjustment option selected by the user is the "next layer" hierarchical position adjustment option, when adjusting the weight of the target information element, the information element after the target information element (the next one) in the element stack and all the information elements before the information element can be taken out, such as Fig.21 The information element with weight 1, the target information element with weight 2, and the information elements with weight 3, weight 4, and weight 5 shown in (7) are all taken out, and then the weights of these information elements are reset according to the above-mentioned weight setting method. Finally, the corresponding information elements are added back to the element stack in order from low to high weights, and then the information element with weight 1, weight 2, and weight 3, weight 4, and weight 5 are all taken out. Then, the weights of these information elements are reset according to the above-mentioned weight setting method, and finally, the corresponding information elements are added back to the element stack in order from low to high weights, and then the information element with weight 3, weight 4, and weight 5 are all taken out. Fig.21 The stack of elements shown in (8).

[0286] Thus, when the hierarchical position adjustment option selected by the user is the "next level" hierarchical position adjustment option, the weight adjustment operation of the target information element is completed.

[0287] It should be noted that the above-mentioned processing logic for adjusting the weight of the target information element is based on the layers used to display information elements on the note page, including Fig.18 That is, based on the processing logic of adjusting the weight of the target information element, the hierarchical position of the information element between the handwriting layer and the element layer can be adjusted, as well as the hierarchical position of the information element in the same layer. For the adjustment of the hierarchical position of the information element between layers and the adjustment of the hierarchical position of the information element in a layer, please refer to the following for Figure 25 to Figure 28 The embodiment part will not be described here.

[0288] In other implementations, the layer structure of the note page can be as follows: Fig. 22 That is, the layers of the note page 10b-6 may include, from top to bottom, a top element layer (EL_up), a handwriting layer (HL), a bottom element layer (EL_down), and a background layer (BL).

[0289] For example, Fig. 22 In the note page with the layer structure shown, in some implementations, before the hierarchical position adjustment operation of the information element is triggered, the handwritten elements added by the user are located at HL by default, the non-handwritten elements (such as picture elements, graphic elements, text elements, formula elements, etc.) added before the handwritten elements can be located at EL_down, and the non-handwritten elements added after the handwritten elements can be located at EL_up.

[0290] For example, Fig. 22 In other implementations of the note page with the layer structure shown, before the hierarchical position adjustment operation of the information element is triggered, the handwritten elements added by the user are located at HL by default, and all non-handwritten elements can be located at EL_down.

[0291] For example, Fig. 22 In some implementations of the note page with the layer structure shown, when the hierarchical position adjustment operation of the information element is triggered, the weight of the target information element can be adjusted according to the processing logic of adjusting the weight of the target information element as described above. That is, the information elements in the three layers EL_up, HL and EL_down can be interchangeable.

[0292] For example, information elements in EL_down can be adjusted to EL_up by using the "Sticky to Top" level position adjustment option. Information elements in EL_down can be adjusted within the layer by using the "Previous Level" level position adjustment option, or they can be adjusted to HL. Information elements in EL_up can be adjusted to EL_down by using the "Sticky to Bottom" level position adjustment option. Information elements in EL_up can be adjusted within the layer by using the "Next Level" level position adjustment option, or they can be adjusted to HL. Information elements in HL can be adjusted to EL_down by using the "Sticky to Bottom" level position adjustment option. Information elements in HL can be adjusted to EL_up by using the "Sticky to Top" level position adjustment option. Information elements in HL can be adjusted within the layer by using the "Previous Level" level position adjustment option, or they can be adjusted to EL_up. Information elements in HL can be adjusted within the layer by using the "Next Level" level position adjustment option, or they can be adjusted to EL_down.

[0293] It should be understood that the above description is merely an example listed for a better understanding of the technical solution of this embodiment, and is not intended to be the sole limitation to this embodiment.

[0294] For example, Fig. 22For the note page with the layer structure shown, in other implementations, it can be stipulated that when the hierarchical position adjustment operation of the information element is triggered, the information elements in each of the three layers EL_up, HL and EL_down can be adjusted in level within the layer, and the handwritten elements in HL can be adjusted to EL_up or EL_down, but EL_up and EL_down can only be adjusted to each other and cannot enter HL.

[0295] In order to comply with this regulation and adjust the weight of the target information element, the element stack can be Fig. 22 The layer structure shown is divided into an area corresponding to information elements in EL_up, an area corresponding to information elements in HL, and an area corresponding to information elements in EL_down.

[0296] like Fig.23 As shown in (1) and (2), the information elements corresponding to EL_down may be pre-assigned with weights between [w1, w2) for use by the information elements in EL_down, the information elements corresponding to HL may be pre-assigned with weights between [w2, w3) for use by the information elements in HL, and the information elements corresponding to EL_up may be pre-assigned with weights between [w3, w4] for use by the information elements in EL_up.

[0297] Among them, w1 <w2<w3<w4。

[0298] Exemplarily, in some implementations, the value of w1 may be 0, the value of w2 may be 10000, the value of w3 may be 15000, and the value of w4 may be 20000.

[0299] It should be understood that the above description is merely an example listed for a better understanding of the technical solution of this embodiment, and is not intended to be the sole limitation to this embodiment.

[0300] for Fig.23 In the element stack shown in (1), when the weight of the target information element is w2-1, when the hierarchical position adjustment option selected by the user is the "upper level" hierarchical position adjustment option, since the weight of the information element before the target information element is w2, and w2 is the weight of the information element in HL, the target information element is processed in the upper level, which is actually to adjust the target information element to EL_up. That is, the weight of the target information element needs to be adjusted from w2 to w3.

[0301] In addition, it should be noted that, in this case, if there is an information element with a weight of w3 in EL_up, the weight of the information element with a weight of w3 and each information element before the information element needs to be increased by 1.

[0302] for Fig.23In the element stack shown in (2), when the weight of the target information element is w3, when the hierarchical position adjustment option selected by the user is the "next layer" hierarchical position adjustment option, since the weight of the information element after the target information element is w2, and w2 is the weight of the information element in HL, the target information element is processed in the next layer at this time, which is actually to adjust the target information element to EL_down. That is, the weight of the target information element needs to be adjusted from w3 to the top of the information element in EL_down. That is, adjusted to the top of the information element corresponding to the weight w1+1, such as adjusting the weight from w3 to w1+2.

[0303] For the adjustment logic of the target information element in the layer during the adjustment process, as well as the adjustment logic of the information element in the HL layer being placed at the top or bottom, please refer to Fig.21 The processing logic for adjusting the weight of the target information element is not repeated here.

[0304] It should be understood that the above description is merely an example listed for a better understanding of the technical solution of this embodiment, and is not intended to be the sole limitation to this embodiment.

[0305] In addition, it should be noted that for management Fig.18 The element stack of information elements in the note page of the layer structure shown, such as Fig.21 The element stack shown may also be pre-divided into a region corresponding to the information elements in the EL and a region corresponding to the information elements in the HL, and different weight intervals are assigned to the two regions.

[0306] In this way, in step S103, when determining the target layer to which the target information element is to be adjusted based on the adjusted weight of the target information element, the target layer to which the target information element is to be adjusted can be determined by judging which layer's corresponding weight interval the adjusted weight of the target information element falls within.

[0307] In addition, it is also necessary to explain that, regardless of the layer structure of the note page, and regardless of the processing logic for adjusting the weight of the target information element, the weight corresponding to the background layer can be a fixed, unchangeable value. For example, in some implementations, the weight corresponding to the background layer can be set to -1. In this way, the content of the background layer, such as the background image, can always be located at the bottom layer, so as not to block the information elements added in the first layer and element layer, or the handwriting layer, the top element layer, and the lower element layer.

[0308] S103, determining the target layer to which the target information element is to be adjusted according to the adjusted weight of the target information element.

[0309] Take the example that the element stack includes an area corresponding to information elements in EL_up, an area corresponding to information elements in HL, and an area corresponding to information elements in EL_down, and the weight interval of EL_down is [w1, w2), the weight interval corresponding to HL is [w2, w3), and the weight interval corresponding to EL_up is [w3, w4].

[0310] Exemplarily, when the adjusted weight of the target phenomenon element falls between [w1, w2), it is determined that the target layer to which the target information element is to be adjusted is EL_down.

[0311] Exemplarily, when the adjusted weight of the target phenomenon element falls between [w2, w3), it is determined that the target layer to which the target information element is to be adjusted is HL.

[0312] Exemplarily, when the adjusted weight of the target phenomenon element falls between [w3, w4], it is determined that the target layer to which the target information element is to be adjusted is EL_up.

[0313] S104, adjusting the target information element to the target layer.

[0314] It should be noted that the target information element may be a handwritten element or a non-handwritten element. For each handwritten element, the specific element type cannot be determined, and the content input by handwriting is represented by a set of point set data. For non-handwritten elements, their data types can be determined according to their corresponding element types. For example, in this embodiment, the element type corresponding to the picture element can be a picture, the element type corresponding to the graphic element can be a picture graphic, the element type corresponding to the text element can be a text box, and the element type corresponding to the formula element can be a picture formula. For the picture type, its data is in picture format, such as JPEG format, or other picture formats. For the text box type, its data is in text format. That is, the data types of handwritten elements and non-handwritten elements are different. Therefore, when adjusting the target information element to the target layer, it is necessary to determine whether the target layer to which the target information element is to be adjusted is different from the layer it is currently in, whether the target information element is a handwritten element, etc., and then select different hierarchical transformation processing logics based on the judgment results to adjust the target information element to the target layer. The specific judgment logic can be as follows Fig.24 shown.

[0315] S201, whether to cross layers.

[0316] For example, it is determined whether the label of the layer where the target information element is currently located is the same as the label of the target layer, such as whether both are labels corresponding to HL, or both are labels corresponding to EL_up, or both are labels corresponding to EL_down.

[0317] Accordingly, when it is determined that the label of the layer where the target information element is currently located is the same as the label of the target layer, it is determined that the hierarchical position adjustment of the target information element is not a cross-layer adjustment. This situation can be regarded as a hierarchical transformation of elements within a layer. Therefore, it is necessary to perform a hierarchical adjustment on the target information element according to the hierarchical transformation processing logic of elements within a layer, that is, to execute step 202.

[0318] On the contrary, when it is determined that the label of the layer where the target information element is currently located is different from the label of the target layer, it is determined that the hierarchical position adjustment of the target information element is a cross-layer adjustment. This situation can be regarded as an inter-layer element hierarchical transformation.

[0319] As can be seen from the above description, a handwritten element is a set of point data, so handwritten elements and non-handwritten elements need to be transformed in different ways. Therefore, in the scene of layer-to-layer element transformation, it is necessary to further determine whether the target information element is a handwritten element, that is, to execute step S203.

[0320] S202, adjusting the level of the target information element according to the level transformation processing logic of the elements in the layer.

[0321] In order to explain the logic of layer element level transformation processing, the following is combined Fig.25 Provide specific instructions.

[0322] See also Fig.25 In (1) and (2), illustratively, the EL_up, or HL, or EL_down of the note page includes four information elements, namely, a first information element, a second information element, a third information element, and a fourth information element.

[0323] Before the user triggers the hierarchical position adjustment of the target information element, such as the first information element, the hierarchical position relationship of the first information element, the second information element, the third information element and the fourth information element is as follows: Fig.25 As shown in (1) in the figure, the weights of these four information elements are 0, 1, 2, and 3 respectively, and their position relationship in the element stack is shown in Stack_c.

[0324] When the user triggers the hierarchical position adjustment of the target information element, such as moving the target information element up one level (selecting the "upper level" hierarchical position adjustment option), according to the weight adjustment logic described in the above embodiment, the first information element and the second information element will exchange weights. Fig.25As shown in (2), in the element stack (such as Stack_n), the weight of the first information element becomes 2, and the weight of the second information element becomes 0. Therefore, according to the adjusted weights in the element stack (such as Stack_n), the hierarchical position relationship of the first information element, the second information element, the third information element and the fourth information element shown in EL_up, HL or EL_down changes from Fig.25 The style shown in (1) becomes Fig.25 The style shown in (2).

[0325] That is to say, for the adjustment of the hierarchical position of the information elements in the same layer, the layer can be refreshed according to the adjusted weights, and the information elements included in the layer can be displayed according to the adjusted weight order.

[0326] Thereby, the hierarchical position of information elements within the layer is adjusted.

[0327] S203: Whether it is a handwritten element.

[0328] Exemplarily, in some implementations, type (Type) values ​​corresponding to various element types may be predefined.

[0329] For example, it can be agreed that the Type value corresponding to the element type of text box (EDIT_TEXT) is 1, the Type value corresponding to the element type of picture (IMAGE_VIEW) is 2, the Type value corresponding to the element type of picture formula (MATH) is 3, the Type value corresponding to the element type of draft paper (DRAFT) is 4, and the Type value corresponding to the element type of picture graphic (GRAPHIC) is 5.

[0330] For another example, after defining a Type value for each non-handwritten element according to the above convention, a Type value may also be defined for the handwritten element, for example, setting the Type of the handwritten element to 0.

[0331] It should be understood that the above description is merely an example listed for a better understanding of the technical solution of this embodiment, and is not intended to be the sole limitation to this embodiment.

[0332] In this way, according to the Type value corresponding to the target information element, it can be determined whether the target information element is a handwritten element or a non-handwritten element, and which specific type of non-handwritten element it is.

[0333] Specifically, when it is determined that the target information element is a handwritten element, the target information element can be adjusted in level according to the handwritten element level transformation processing logic between layers, that is, step S204 and step S205 are executed. Conversely, when it is determined that the target information element is not a handwritten element, the target information element can be adjusted in level according to the non-handwritten element level transformation processing logic between layers, that is, step S211 is executed.

[0334] S204, performing rasterization processing on the target information element.

[0335] It should be noted that the rasterization processing of the target information element in this embodiment can be understood as describing each point data in the point set data corresponding to the handwritten element by a pixel grid, thereby obtaining image data in a picture format.

[0336] S205: insert the target information element after rasterization into the element layer, and hide the target information element in the handwriting layer.

[0337] In order to explain the logic of handwriting element level transformation between layers, the following is combined Fig.26 Provide specific instructions.

[0338] For example, the layer structure of the note page and the hierarchical position relationship of the information elements in each layer are as follows: Fig.26 As shown in the note page 106 in , when the target information element, such as the handwritten element Hel_0 in HL, needs to be moved down one layer to EL_down, the point set data of Hel_0 needs to be rasterized before Hel_0 can be added to EL_down. That is, each point data in the point set data corresponding to Hel_0 is first described by a pixel grid to obtain the image data of Hel_0 in a picture format, and then the image data of Hel_0 in a picture format is added to EL_down.

[0339] In addition, it should be noted that since Hel_0 added to EL_down is in picture format, in order to ensure that Hel_0 of the point set data in HL can be restored, in some implementations, Hel_0 in HL can be set to be invisible, but Hel_0 still exists in HL. For example, the theme attribute of Hel_0 in HL is configured to be transparent.

[0340] In addition, it should be noted that since the user triggers only the adjustment of the hierarchical position (adjustment in the Z-axis direction), the position of the target information element in the plane of the note page (adjustment in the X-axis and Y-axis directions) is not moved. Therefore, in some implementations, the position relationship of Hel_0 in the image format added to EL_down and Hel_0 (invisible) in HL on the X-axis and Y-axis is corresponding, such as Fig. 27 As shown in (1) and (2).

[0341] Thus, through the operations of step S204 and step S205, the Hel_0 in HL is moved to EL_down. The adjusted layer structure of the note page and the hierarchical position relationship of the information elements in each layer can be seen in Fig.26 That is, the adjustment of the hierarchical position of the handwritten elements between the layers is achieved.

[0342] S206: The user selects a target information element in the element layer.

[0343] Among them, the element layer can be EL_up or EL_down.

[0344] The user may select the target information element in the element layer by lassoing, long pressing, or clicking the right button of the mouse.

[0345] S207, hiding the target information element in the element layer, and displaying the target information element in the handwriting layer.

[0346] That is, the target information element in the image format in the element layer is set to be invisible, and the target information element in the handwriting layer is set to be visible again. Fig. 27 The attribute of Hel_0 in the EL_down picture format shown in (1) is set to invisible, such as Fig. 27 As shown in (2); Fig. 27 The attribute of Hel_0 in HL shown in (1) is set to visible, as shown in Fig. 27 As shown in (2). In this way, for the user, the note page always displays Hel_0 visually.

[0347] S208, moving / scaling / color processing the target information element.

[0348] It should be noted that when the user selects a target information element, a menu bar corresponding to the target information element will be displayed on the current interface, such as Fig. 20 The menu bar 10b-66' is shown in FIG.

[0349] When the user selects the color adjustment option in the menu bar 10b-66', in one implementation, selectable color options may pop up on the current interface for the user to select.

[0350] When the user drags the target information element, the target information element can be adjusted in the X-axis and / or Y-axis direction.

[0351] When the user drags the edge of the target element or the specified area, the target information element can be scaled.

[0352] It should be understood that the above description is merely an example listed for a better understanding of the technical solution of this embodiment, and is not intended to be the sole limitation to this embodiment.

[0353] S209, rasterizing the target information element after the moving / scaling / color processing.

[0354] S210: inserting the target information element after rasterization processing into the element layer, and hiding the target information element in the handwriting layer.

[0355] After completing the adjustment operation in step S208, the target information element needs to be re-adjusted according to the handwriting element level transformation processing logic between layers, so as to ensure that the style of the handwriting element in the element layer can be consistent with that of the handwriting layer.

[0356] S211, adjusting the level of the target information element according to the non-handwritten element level transformation processing logic between layers.

[0357] Specifically, for non-handwritten elements, after adjusting the weights according to the above weight adjustment method, directly refreshing the target layer can add the non-handwritten elements to the target layer, and the information elements included in the target layer will be displayed according to the adjusted weight order. Fig.28 As shown in FIG. 1 , after the operation of placing E1_0 in EL_down on top is triggered, E1_0 in EL_down will be directly moved to the top of the information elements included in EL_up. At this time, E1_0 no longer exists in EL_down.

[0358] Thereby, the hierarchical position of non-handwritten elements between layers can be adjusted.

[0359] From the description of the above embodiments, it can be seen that the element hierarchical position adjustment method provided in this application can realize the adjustment of the hierarchical position of any information element in the note page, thereby meeting the user's usage needs for different scenarios and bringing a better user experience.

[0360] In addition, it is understandable that an electronic device that is installed with an information recording application, such as a note-taking application, may include hardware and / or software modules that perform the corresponding functions in order to implement the above functions. In combination with the algorithm steps of each example described in the embodiments disclosed herein, the present application can be implemented in the form of hardware or a combination of hardware and computer software. Whether a function is executed in the form of hardware or computer software driving hardware depends on the specific application and design constraints of the technical solution. Those skilled in the art may use different methods to implement the described functions for each specific application in combination with the embodiments, but such implementation should not be considered to be beyond the scope of this application.

[0361] Specifically in the embodiments of the present application, a hardware structure of an electronic device is exemplified, such as Fig.29 The electronic device may be a mobile phone, a tablet computer, a laptop computer, etc., which are not listed here one by one, and the present application does not impose any restrictions on the specific type of the electronic device.

[0362] See also Fig.29 The electronic device 100 may include: a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a sensor module 180, a button 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc.

[0363] The audio module 170 may include a speaker 170A, a receiver 170B, a microphone 170C, an earphone jack 170D, and the like.

[0364] Among them, the sensor module 180 may include a pressure sensor, a gyroscope sensor, an air pressure sensor, a magnetic sensor, an acceleration sensor, a distance sensor, a proximity light sensor, a fingerprint sensor, a temperature sensor, a touch sensor, an ambient light sensor, a bone conduction sensor, etc., which are not listed here one by one, and the present application does not limit this. Specifically in the embodiment of the present application, the control, element, etc. selected by the user can be determined through the data collected by the sensor modules such as the pressure sensor and the touch sensor.

[0365] Among them, the processor 110 may include one or more processing units, for example: the processor 110 may include an application processor (application processor, AP), a modem processor (Modem), a graphics processor (graphics processing unit, GPU), an image signal processor (image signal processor, ISP), a controller, a video codec, a digital signal processor (digital signal processor, DSP), a baseband processor, a neural network processor (neural-network processing unit, NPU), etc., which are not listed one by one here, and this application does not limit this.

[0366] Among them, different processing units can be independent devices or integrated into one or more processors.

[0367] Among them, the controller can generate an operation control signal according to the instruction operation code and the timing signal to complete the control of instruction fetching and execution.

[0368] The processor 110 may also be provided with a memory for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. The memory may store instructions or data that the processor 110 has just used or cyclically used. If the processor 110 needs to use the instruction or data again, it may be directly called from the memory. This avoids repeated access, reduces the waiting time of the processor 110, and thus improves the efficiency of the system.

[0369] Among them, the processor 110 may also include one or more interfaces. Exemplarily, the interface may include an inter-integrated circuit (I2C) interface, an inter-integrated circuit sound (I2S) interface, a pulse code modulation (PCM) interface, a universal asynchronous receiver / transmitter (UART) interface, a mobile industry processor interface (MIPI), a general-purpose input / output (GPIO) interface, a subscriber identity module (SIM) interface, and / or a universal serial bus (USB) interface, etc., which are not listed here one by one, and the present application does not limit this. Specifically in the embodiment of the present application, the electronic device 100 can be connected to an external input device, such as a mouse, through a USB interface.

[0370] Among them, the wireless communication function of the electronic device 100 can be realized through the antenna 1, the antenna 2, the mobile communication module 150, the wireless communication module 160, the modem processor and the baseband processor.

[0371] Among them, antenna 1 and antenna 2 are used to transmit and receive electromagnetic wave signals. Each antenna in the electronic device 100 can be used to cover a single or multiple communication frequency bands. Different antennas can also be reused to improve the utilization rate of the antennas. For example, antenna 1 can be reused as a diversity antenna for a wireless local area network. In some other embodiments, the antenna can be used in combination with a tuning switch.

[0372] The modem processor may include a modulator and a demodulator.

[0373] The mobile communication module 150 may provide wireless communication solutions for the electronic device 100 including the second generation wireless telephone technology (2G), the third generation mobile communication technology (3G), the fourth generation mobile communication technology (4G), and the fifth generation mobile communication technology (5G).

[0374] Among them, the wireless communication module 160 can provide wireless communication solutions applied to the electronic device 100, 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 technology (NFC), infrared technology (IR), etc.

[0375] In some embodiments, the antenna 1 of the electronic device 100 is coupled to the mobile communication module 150, and the antenna 2 is coupled to the wireless communication module 160, so that the electronic device 100 can communicate with the network and other devices through wireless communication technology. For example, the electronic device 100 can communicate with an external input device, such as a wireless mouse, through wireless communication technology.

[0376] Among them, the camera 193 is used to capture static images or videos. The electronic device 100 can realize the photo-taking function through an ISP, a camera 193, a video codec, a GPU, a display screen 194, and an application processor. Specifically, the object generates an optical image through the lens and projects it onto the photosensitive element. The photosensitive element can be a charge coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor. The photosensitive element converts the optical signal into an electrical signal, and then transmits the electrical signal to the ISP for conversion into a digital image signal. The ISP outputs the digital image signal to the DSP for processing. The DSP converts the digital image signal into an image signal in a standard RGB, YUV, or other format. In some implementations, the electronic device 100 may include 1 or N cameras 193, where N is a positive integer greater than 1. Specifically in the embodiment of the present application, the picture element added to the note can be a photo taken directly by calling the camera.

[0377] Among them, the display screen 194 is used to display images, videos, etc. The display screen 194 includes a display panel. In some embodiments, the electronic device 100 may include 1 or N display screens 194, where N is a positive integer greater than 1. The electronic device 100 can implement the display function through a GPU, a display screen 194, and an application processor. The GPU is a microprocessor for image processing, which connects the display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. The processor 110 may include one or more GPUs that execute program instructions to generate or change display information. Specifically in the embodiment of the present application, the display screen 194 can be used to display various interfaces corresponding to the note application.

[0378] Among them, the external memory interface 120 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 100. The external memory card communicates with the processor 110 through the external memory interface 120 to implement a data storage function. For example, files such as pictures, documents, and notes are saved in an external memory card. Specifically in the embodiment of the present application, the documents, pictures, etc. added to the notes can be obtained from the storage path of the external memory.

[0379] Among them, the internal memory 121 can be used to store computer executable program codes, and the executable program codes include instructions. The processor 110 executes various functional applications and data processing of the electronic device 100 by running the instructions stored in the internal memory 121. The internal memory 121 may include a program storage area and a data storage area. Among them, the program storage area can store an operating system, an application required for at least one function, etc. The data storage area can store data created during the use of the electronic device 100 (such as note data). In addition, the internal memory 121 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, a universal flash storage (UFS), etc.

[0380] It should be noted that Fig.29 The electronic device 100 shown is only an example of an electronic device, and its hardware structure does not constitute a specific limitation on the electronic device. In other embodiments of the present application, the electronic device may include more or fewer components than shown in the figure, or combine some components, or split some components, or arrange the components differently. The components shown in the figure may be implemented in hardware, or software, or a combination of software and hardware.

[0381] In addition, it should be noted that the interface connection relationship between the modules illustrated in the embodiments of the present application is only an illustrative description and does not constitute a structural limitation on the electronic device. In other embodiments of the present application, the electronic device may also adopt different interface connection methods in the above embodiments, or a combination of multiple interface connection methods.

[0382] In addition, it should be noted that operating systems are running on the above components, such as the iOS operating system developed by Apple, the Android open source operating system developed by Google, and the Windows operating system developed by Microsoft. These operating systems can adopt a layered architecture, an event-driven architecture, a micro-kernel architecture, a micro-service architecture, or a cloud architecture.

[0383] For ease of explanation, the embodiment of the present application takes the Android system with a layered architecture as an example to illustrate the software structure of the electronic device.

[0384] It should be noted that although the embodiments of the present application are described using the Android system as an example, its basic principles are also applicable to electronic devices based on operating systems such as iOS or Windows.

[0385] See also Fig.30 , which exemplarily shows a software structure diagram of an electronic device.

[0386] like Fig.30 As shown, the layered architecture of the electronic device divides the software into several layers, each layer has a clear role and division of labor. The layers communicate with each other through software interfaces. In some embodiments of the present application, the Android system is divided into four layers, namely, from top to bottom, the application layer, the application framework layer, the Android runtime (Android runtime) and the system library, and the kernel layer.

[0387] The application layer may include a series of application packages. Fig.30 As shown, the application package may include applications such as photo notes, memo, notepad, sticky notes, settings, etc.

[0388] Specifically in the embodiments of the present application, when there is a problem of fixed hierarchical positions of recorded information elements in applications such as notes, memos, notepads, and sticky notes, the method for adjusting the hierarchical positions of elements provided in the embodiments of the present application can be used to adjust the hierarchical positions of each element.

[0389] The application framework layer provides application programming interfaces (APIs) and programming frameworks for applications in the application layer. In some implementations, these programming interfaces and programming frameworks can be described as functions. Fig.30 As shown, the application framework layer may include functions such as content provider, resource manager, window manager, etc., which are not listed here one by one and are not limited in this application.

[0390] The content provider is used to store and obtain data and make the data accessible to the application. The data may include video, images, audio, calls made and received, browsing history and bookmarks, phone book, etc., which are not listed here and are not limited by this application.

[0391] The resource manager provides various resources for the application, such as localized strings, icons, images, layout files, video files, etc., which are not listed here one by one and are not limited in this application.

[0392] The window manager is used to manage window programs. The window manager can obtain the display screen size, determine whether there is a status bar, lock the screen, capture the screen, etc.

[0393] Among them, Android Runtime includes core libraries and virtual machines. Android Runtime is responsible for the scheduling and management of the Android system.

[0394] The core library consists of two parts: one part is the function that needs to be called by the Java language, and the other part is the Android core library.

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

[0396] The system library can include multiple functional modules, such as surface manager, media library, 3D graphics processing library (such as OpenGL ES), 2D graphics engine (such as SGL), etc.

[0397] The surface manager is used to manage the display subsystem and provide the fusion of 2D and 3D layers for multiple applications.

[0398] The media library supports the playback and recording of a variety of commonly used audio and video formats, as well as static image files, etc. The media library can support a variety of audio and video encoding formats, such as: MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, etc.

[0399] The 3D graphics processing library is used to implement 3D graphics drawing, image rendering, compositing, and layer processing.

[0400] It can be understood that the 2D graphics engine mentioned above is a drawing engine for 2D drawing.

[0401] The kernel layer is the layer between hardware and software, including various hardware drivers and hardware management. Fig.30 As shown, the kernel layer may include display driver, audio driver, sensor driver, etc.

[0402] This is the end of the introduction to the software structure of electronic devices. It can be understood that: Fig.30 The layers in the software structure shown and the components contained in each layer do not constitute a specific limitation on the electronic device. In other embodiments of the present application, the electronic device may include more or fewer layers than shown in the figure, and each layer may include more or fewer components, which is not limited in the present application.

[0403] In addition, it should be noted that in actual application scenarios, the element hierarchical position adjustment method provided by the above embodiments implemented by the electronic device can also be performed by a chip system included in the electronic device. Among them, the chip system may include a processor. The chip system can be coupled to a memory so that when the chip system is running, it calls a computer program stored in the memory to implement the steps performed by the above electronic device. Among them, the processor in the chip system can be an application processor or a processor other than an application processor.

[0404] In addition, an embodiment of the present application further provides a computer-readable storage medium, in which computer instructions are stored. When the computer instructions are executed on an electronic device, the electronic device executes the above-mentioned related method steps to implement the method in the above-mentioned embodiment.

[0405] In addition, an embodiment of the present application further provides a computer program product. When the computer program product is run on an electronic device, the electronic device executes the above-mentioned related steps to implement the method in the above-mentioned embodiment.

[0406] In addition, an embodiment of the present application further provides a device. The device may be a chip, a component or a module. The device may include a connected processor and a memory; wherein the memory is used to store computer-executable instructions, and when the device is running, the processor may execute the computer-executable instructions stored in the memory, so that the chip executes the methods in the above-mentioned method embodiments.

[0407] In addition, it can be seen from the above description that the electronic device, computer-readable storage medium, computer program product or chip provided in the embodiments of the present application are all used to execute the corresponding methods provided above. Therefore, the beneficial effects that can be achieved can refer to the beneficial effects in the corresponding methods provided above, and will not be repeated here.

[0408] In addition, through the description of the above embodiments, those skilled in the art can understand that for the convenience and simplicity of description, only the division of the above functional modules is used as an example. In practical applications, the above functions can be assigned to different functional modules as needed. That is, the internal structure of the device is divided into different functional modules to complete all or part of the functions described above.

[0409] In addition, it is understandable that in several embodiments provided in the present application, the disclosed devices and methods can be implemented in other ways. For example, the device embodiments described above are only schematic. For example, the division of modules or units is only a logical function division. There may be other division methods in actual implementation. For example, multiple units or components can be combined or integrated into another device, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

[0410] As described above, the above embodiments are only used to illustrate the technical solutions of the present application, rather than to limit them. Although the present application has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. However, these modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of the present application.

Claims

1. A method for adjusting the hierarchical position of an element, characterized in that: Applied to electronic equipment, the method comprises: Displaying a first interface of a first application, the first interface includes a first layer and a second layer, the first layer is located above the second layer, the first layer includes a first element, the second layer includes a second element, the first layer is a handwriting layer, the second layer and the first layer are of different layer types, the data corresponding to the first element is point set data, and the second element is in picture format; In response to a selection operation on the first element, displaying a menu bar, the menu bar including a first-level position adjustment option, the first-level position adjustment option being used to trigger moving the target element to the bottom of the second layer; In response to a user operation on the first-level position adjustment option, displaying the first element in the second layer, the first element being located below the second element; In response to a user operation on the first-level position adjustment option, displaying the first element in the second layer includes: In response to a user operation on the first level position adjustment option, rasterizing the point set data corresponding to the first element to obtain a first element in a picture format; A first element in a picture format is added below the second element in the second layer, and the first element in the first layer is set to be invisible.

2. The method according to claim 1, characterized in that The menu bar further includes a second level position adjustment option, wherein the second level position adjustment option is used to trigger moving the target element downward by one position; The method further comprises: In response to a user operation on the second-level position adjustment option, the first element is displayed in the second layer, and the first element is located above the second element.

3. The method according to claim 2, characterized in that The method further comprises: In response to a selection operation on the second element, displaying the menu bar, wherein the menu bar further includes a third-level position adjustment option, wherein the third-level position adjustment option is used to trigger moving the target element upward by one position; In response to a user operation on the third-level position adjustment option, the second element is displayed in the second layer, and the second element is located above the first element.

4. The method according to claim 3, characterized in that The step of displaying the second element in the second layer in response to a user operation on the third-level position adjustment option includes: In response to a user operation on the third-level position adjustment option, determining whether a cross-layer adjustment is required; When there is no need to cross layers, the second element is adjusted to be above the first element, and the second element is displayed in the second layer.

5. The method according to claim 4, characterized in that The method further comprises: When it is necessary to cross layers, adjust the second element to the first layer, and display the second element in the first layer; Wherein, when the first layer includes other elements, the second element is located at the bottom of the other elements.

6. The method according to claim 5, characterized in that The first interface further includes a third layer, the third layer is located above the first layer, the third layer is of the same layer type as the second layer, and is different from the first layer; The method further comprises: In response to a selection operation on the second element, displaying the menu bar, wherein the menu bar further includes a fourth-level position adjustment option, wherein the fourth-level position adjustment option is used to trigger moving the target element to the top of the third layer; In response to a user operation on the fourth-level position adjustment option, displaying the second element in the third layer; Wherein, when the third layer includes other elements, the second element is located on the top of the other elements.

7. The method according to claim 4, characterized in that The first interface further includes a third layer, the third layer is located above the first layer, the third layer is of the same layer type as the second layer, and is different from the first layer; The method further comprises: When it is necessary to cross layers, adjust the second element to the third layer, and display the second element in the third layer; Wherein, when the third layer includes other elements, the second element is located at the bottom of the other elements.

8. The method according to claim 7, characterized in that The method further comprises: In response to a selection operation on the second element, displaying the menu bar; In response to a user operation on the second-level position adjustment option, when it is necessary to cross layers, the second element is adjusted to the second layer, and the second element is displayed in the second layer; The second element is located above the first element.

9. The method according to claim 2, characterized in that: The method further comprises: In response to a selection operation on the second element, displaying the menu bar, wherein the menu bar further includes a fourth-level position adjustment option, wherein the fourth-level position adjustment option is used to trigger moving the target element to the top of the first layer; In response to a user operation on the fourth-level position adjustment option, displaying the second element in the first layer; Wherein, when the first layer includes other elements, the second element is located on the top of the other elements.

10. The method according to claim 2, characterized in that The first interface further includes a third layer, the third layer is located above the first layer, the third layer is of the same layer type as the second layer, and is different from the first layer; The method further comprises: In response to a selection operation on the second element, displaying the menu bar, wherein the menu bar further includes a fourth-level position adjustment option, wherein the fourth-level position adjustment option is used to trigger moving the target element to the top of the third layer; In response to a user operation on the fourth-level position adjustment option, displaying the second element in the third layer; Wherein, when the third layer includes other elements, the second element is located on the top of the other elements.

11. The method according to any one of claims 1 to 10, characterized in that: When the target element is an element of the first layer, adjusting the target element to the second layer or the third layer includes: Rasterizing the point set data corresponding to the target element to obtain the target element in a picture format; Add a target element in a picture format to the second layer or the third layer, and set the target element in the first layer to be invisible.

12. An electronic device, characterized in that: The electronic device includes: a memory and a processor, the memory and the processor are coupled; the memory stores program instructions, and when the program instructions are executed by the processor, the electronic device executes the element level position adjustment method as described in any one of claims 1 to 11.

13. A computer-readable storage medium, characterized in that: It comprises a computer program, which, when executed on an electronic device, enables the electronic device to execute the method for adjusting the hierarchical position of an element as claimed in any one of claims 1 to 11.

Images