Element display method, device, and storage medium
By using adaptive adjustment technology, graphic elements automatically surround handwriting elements in the electronic whiteboard, solving the problem of users manually adjusting the size and improving convenience and efficiency.
Patent Information
- Application Number
- CN202510023243.5
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-01-07
- Publication Date
- 2026-07-07
AI Technical Summary
In electronic whiteboards, when graphic elements are combined with handwriting elements, users need to manually adjust the size to match the visual effect, resulting in insufficient convenience.
Through adaptive adjustment technology, the graphic element completely surrounds the associated handwriting element in the element interface, and the size of the graphic element is automatically adjusted to match the size of the handwriting element.
It achieves automatic size matching between graphic elements and handwriting elements, eliminating the need for manual adjustment by the user and improving convenience and efficiency.
Smart Images
Figure CN122346282A_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of visual element processing, and more particularly to element display methods, devices, and storage media. Background Technology
[0002] An electronic whiteboard, also known as an interactive whiteboard, typically consists of an electronic sensor whiteboard and a software whiteboard operating system. It has multiple functions such as writing, multimedia, and interactive features, and is widely used in education and meetings.
[0003] In interactive whiteboards, handwriting and graphics are two commonly used visual elements. Users can write on the whiteboard's display, creating handwriting elements; they can also add graphics to create graphic elements. Handwriting and graphic elements are two independent visual elements. When combining them to achieve a specific purpose, users need to manually adjust the size of either element to visually match, which is cumbersome and inconvenient. Summary of the Invention
[0004] This application provides a method, apparatus, and storage medium for displaying elements in a display device, which aims to adaptively adjust graphic elements so that the size of the graphic elements matches the handwriting elements associated with the graphic elements.
[0005] Firstly, a method for displaying elements is provided, applied to a touch display device, the method comprising:
[0006] The element interface displays graphic elements;
[0007] The system receives a first user operation, which is a user operation to add a handwriting element to a first graphic element in the element interface. The first graphic element is any graphic element in the element interface. The handwriting element is an element generated based on a touch writing operation performed on the touch display device. The handwriting element is used to represent the handwriting corresponding to the touch writing operation.
[0008] In the element interface, the first graphic element is adaptively adjusted and displayed. The first graphic element obtained by the adaptive adjustment completely surrounds the associated handwriting elements of the first graphic element in the element interface. The associated handwriting elements are handwriting elements that have a relationship with the first graphic element, and the associated handwriting elements include handwriting elements added to the first graphic element.
[0009] In this technical solution, after displaying the element interface, graphic elements are displayed in the element interface. The user operation of adding handwriting elements to a first graphic element is received in the element interface. The first graphic element is adaptively adjusted in the element interface so that the adaptively adjusted first graphic element completely surrounds the associated handwriting elements of the first graphic element in the element interface. The associated handwriting elements of the first graphic element are handwriting elements that have a relationship with the first graphic element. The first graphic element includes the handwriting elements added to it, thus realizing the associated display of graphic elements and handwriting elements. Because the adaptively adjusted first graphic element completely surrounds the associated handwriting elements of the first graphic element in the element interface, the size of the graphic element is automatically adjusted, matching the size of the graphic element with its associated handwriting elements, eliminating the need for manual size adjustment by the user and improving convenience.
[0010] In conjunction with the first aspect, in one possible implementation, the element interface further displays handwriting elements; the receiving of the first user operation includes: receiving a selection operation on a handwriting cluster in the element interface, the handwriting cluster including at least one handwriting element located outside the first graphic element in the element interface; receiving a first movement operation on the handwriting cluster, the first movement operation being an operation to move the handwriting cluster into the first graphic element.
[0011] When a user selects a stroke of ink outside a graphic element in the element interface and moves the stroke into the graphic element, the graphic element is automatically adjusted and displayed, which improves convenience.
[0012] In conjunction with the first aspect, in one possible implementation, the element interface also displays a handwriting element; receiving the first user operation includes: receiving a selection operation on the first graphic element and the first handwriting element, wherein the first handwriting element and the first graphic element are not associated, and the first handwriting element and the first graphic element partially overlap in the element interface; displaying a handwriting adaptation control in the element interface; and receiving a trigger operation on the handwriting adaptation control.
[0013] When a user selects an element in the interface that is unrelated and partially overlaps with other graphic and handwriting elements, the selected graphic element will be automatically adjusted to improve convenience.
[0014] In conjunction with the first aspect, in one possible implementation, receiving the first user operation includes: receiving a first writing operation, displaying a second handwriting element corresponding to the first writing operation in the element interface, wherein the writing trajectory of the first writing operation overlaps with the first graphic element.
[0015] When a writing operation is received where the writing trajectory overlaps with a graphic element, the graphic element is adaptively adjusted and displayed, which can automatically adjust the graphic element and improve convenience.
[0016] In conjunction with the first aspect, in one possible implementation, after receiving the first writing operation, the method further includes: displaying the association between the second handwriting element and the first graphic element.
[0017] In conjunction with the first aspect, in one possible implementation, after adaptively adjusting the display of the first graphic element in the element interface, the method further includes: receiving a selection operation on the first graphic element; receiving a first transformation operation on the first graphic element, wherein the first transformation operation is an operation to transform the display parameters of the first graphic element; and transforming the display of the first graphic element and the associated handwriting element in the element interface.
[0018] When a user selects a graphic element, the display of the graphic element and its associated handwriting elements changes according to the user's transformation operation. This enables synchronous adjustment of the graphic element and handwriting elements, eliminating the need for the user to manually adjust the handwriting elements and improving convenience.
[0019] In conjunction with the first aspect, in one possible implementation, after adaptively adjusting the display of the first graphic element in the element interface, the method further includes: receiving a selection operation on a third handwriting element within the first graphic element, wherein the third handwriting element is any handwriting element associated with the first graphic element; receiving a second transformation operation on the third handwriting element, wherein the second transformation operation is an operation to transform the display parameters of the third handwriting element; and transforming the display of the third handwriting element in the element interface.
[0020] When a user selects a handwriting element within a graphic element, the displayed handwriting element changes according to the user's transformation operation, enabling independent adjustment of the handwriting element.
[0021] In conjunction with the first aspect, in one possible implementation, the second transformation operation is an operation of removing the third handwriting element from the first graphic element; the transformation of the display of the third handwriting element in the element interface includes: moving the display of the third handwriting element in the element interface.
[0022] When a user selects a handwriting element within a graphic element and removes the handwriting element from the graphic element, the displayed handwriting element can be moved within the element interface, allowing for independent adjustment of the handwriting element.
[0023] In conjunction with the first aspect, in one possible implementation, after receiving the second transformation operation on the third handwriting element, the method further includes: releasing the association between the third handwriting element and the first graphic element.
[0024] By removing the association between the handwriting element and the graphic element, users can easily adjust the handwriting element flexibly.
[0025] In conjunction with the first aspect, in one possible implementation, the adaptive adjustment and display of the first graphic element in the element interface includes: calculating the bounding rectangle of the associated handwriting element to obtain a first bounding rectangle; and expanding the first graphic element in the element interface according to the first bounding rectangle, and displaying the expanded first graphic element.
[0026] Expanding a graphic element based on the bounding rectangle of its associated handwriting element allows the expanded graphic element to completely enclose the handwriting element.
[0027] In conjunction with the first aspect, in one possible implementation, the first graphic element is a circle; the step of expanding the first graphic element in the element interface according to the first circumscribed rectangle includes: calculating the distance between the center of the first graphic element and the four vertices of the first circumscribed rectangle to obtain four distances; determining the maximum distance among the four distances; if the radius of the first graphic element is less than the sum of the maximum distance and the preset side distance, in the element interface, keeping the center of the first graphic element, expanding the radius of the first graphic element to the sum of the maximum distance and the preset side distance to obtain the expanded first graphic element.
[0028] When the graphic element is circular, the distance between the circle of the graphic element and the four vertices of the bounding rectangle of the handwriting element is calculated. After expanding the radius of the graphic element to the maximum distance and the preset margin, it can ensure that the expanded graphic element can completely surround the handwriting element while keeping the center position of the graphic element unchanged.
[0029] In conjunction with the first aspect, in one possible implementation, the first graphic element is a polygon; the step of expanding the first graphic element in the element interface based on the first bounding rectangle includes: determining the maximum inscribed rectangle of the first graphic element; determining the bounding rectangle of the maximum inscribed rectangle and the first bounding rectangle to obtain a second bounding rectangle; expanding the first graphic element in the element interface such that the maximum inscribed rectangle of the first graphic element is the second bounding rectangle to obtain the expanded first graphic element, wherein the angles of each interior angle of the expanded first graphic element are the same as the angles of each interior angle of the first graphic element before expansion.
[0030] When the graphic element is a polygon, the maximum inscribed rectangle of the graphic element and the outer rectangle of the first outer rectangle are calculated to obtain the second outer rectangle. The graphic element is then expanded in the element interface so that the maximum inscribed rectangle of the graphic element is changed to the second outer rectangle. This ensures that the expanded graphic element can completely surround the handwriting element while maintaining the shape of the graphic element.
[0031] In conjunction with the first aspect, in one possible implementation, the method further includes: receiving a selection operation on multiple graphic elements in the element interface, the multiple graphic elements having no association relationship; displaying a graphic association control in the element interface; receiving a trigger operation on the graphic association control to associate the multiple graphic elements; receiving a third transformation operation on the multiple graphic elements, the third transformation operation being an operation to transform the display parameters of the multiple graphic elements; and displaying the multiple graphic elements in a transformed manner in the element interface.
[0032] When a user selects multiple unrelated graphic elements in the element interface, a graphic association control is displayed, and trigger operations on the graphic association control are received to associate multiple graphic elements. Then, transformation operations on multiple graphic elements are received, and multiple graphic elements are displayed in the element interface in different ways, which allows users to easily adjust multiple graphic elements at the same time.
[0033] Secondly, an element display device is provided for use in a touch display device, the device comprising:
[0034] The display module is used to display the element interface, which displays graphic elements;
[0035] An operation receiving module is used to receive a first user operation, which is a user operation to add a handwriting element to a first graphic element in the element interface. The first graphic element is any graphic element in the element interface. The handwriting element is an element generated based on a touch writing operation performed on the touch display device. The handwriting element is used to represent the handwriting corresponding to the touch writing operation.
[0036] The display module is further configured to adaptively adjust the display of the first graphic element in the element interface, wherein the adaptively adjusted first graphic element completely surrounds the associated handwriting elements of the first graphic element in the element interface, the associated handwriting elements being handwriting elements that have an association relationship with the first graphic element, and the associated handwriting elements including handwriting elements added to the first graphic element.
[0037] Thirdly, a touch display device is provided, including a memory, a processor, and a touch display screen, wherein the memory and the touch display screen are connected to the processor, the touch display screen is used to display an element interface, and the processor is used to execute one or more computer programs stored in the memory, wherein when the processor executes one or more computer programs, the touch display device enables the element display method of the first aspect described above.
[0038] Fourthly, a computer-readable storage medium is provided, which stores a computer program, the computer program including program instructions, which, when executed by a processor, cause the processor to perform the element display method of the first aspect.
[0039] This application can achieve the following technical effects: it realizes the associated display of graphic elements and handwriting elements. Since the first graphic element obtained by adaptive adjustment completely surrounds the associated handwriting element of the first graphic element in the element interface, it realizes the automatic adjustment of the size of the graphic element, so that the size of the graphic element and the associated handwriting element of the graphic element match, without the need for the user to manually adjust the size, which can improve convenience. Attached Figure Description
[0040] To more clearly illustrate the technical solutions of the embodiments of this application, the drawings used in the description of the embodiments of this application will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.
[0041] Figure 1 This is a schematic diagram of the interface provided for an embodiment of this application;
[0042] Figure 2 A flowchart illustrating an element display method provided in an embodiment of this application;
[0043] Figures 3A-3E A schematic diagram of the element interface provided in an embodiment of this application;
[0044] Figure 4 A flowchart illustrating another element display method provided in an embodiment of this application;
[0045] Figure 5 A flowchart illustrating another element display method provided in an embodiment of this application;
[0046] Figure 6 A flowchart illustrating yet another element display method provided in an embodiment of this application;
[0047] Figure 7A flowchart illustrating the extended circular element provided in an embodiment of this application;
[0048] Figure 8 A flowchart illustrating yet another element display method provided in an embodiment of this application;
[0049] Figures 9A-9C A schematic diagram of the element interface provided in an embodiment of this application;
[0050] Figure 10 A flowchart illustrating yet another element display method provided in an embodiment of this application;
[0051] Figure 11 This application provides a flowchart illustrating the process of determining the object whose display needs to be changed in an embodiment.
[0052] Figure 12 This is a schematic diagram of the structure of an element display device provided in an embodiment of this application;
[0053] Figure 13 This is a schematic diagram of the structure of a touch display device provided in an embodiment of this application. Detailed Implementation
[0054] To make the objectives, technical solutions, and advantages of this application clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this application. All other embodiments obtained by those skilled in the art based on the embodiments in this application without inventive effort are within the scope of protection of this application.
[0055] It should be noted that, unless there is a conflict, the various features in the embodiments of this application can be combined with each other, all of which are within the protection scope of this application. Furthermore, although functional modules are divided in the device schematic diagram and a logical order is shown in the flowchart, in some cases, the steps shown or described can be executed in a different order than the module division in the device or the order in the flowchart. Moreover, the terms "first," "second," and "third" used in this application do not limit the data or execution order, but only distinguish identical or similar items with essentially the same function and effect.
[0056] The technical solution of this application is applicable to scenarios where graphic elements and handwriting elements are edited and processed within the same display interface. Graphic elements refer to visual elements in the display interface used to represent graphics, and handwriting elements refer to visual elements in the display interface used to represent handwriting. Handwriting elements are generated based on touch writing operations performed on a touch display device, and the handwriting is obtained by the touch display device based on the touch writing operation. Touch writing operations can be understood as touch-based writing operations, which refer to touch operations performed on a touch display device using a stylus, finger, or other touch objects to represent writing.
[0057] Graphic elements and handwriting elements are typically two independent visual elements in a display interface. When they need to be combined to achieve a specific purpose, such as building a flowchart, users must manually adjust the size of either the graphic or handwriting element to match the graphic element's size. This process is cumbersome and inconvenient. (See reference...) Figure 1 ,for Figure 1 In the interface J1, the handwriting element e10 and the graphic element e20 are displayed. If you want the handwriting element e10 and the graphic element e20 to appear as... Figure 1 As shown in interface J2, the user needs to drag the handwriting element e10 to the position of the graphic element e20, and then adjust the size of the graphic element e20. If there are many handwriting and graphic elements to be combined, the user needs to adjust them manually one by one, which wastes a lot of time. In addition, the touch display device processes the touch operation accordingly. The touch operation can not only trigger the touch display device to generate handwriting, but also trigger the touch display device to adjust the display parameters such as the size or position of graphic elements. In the display interface where graphic elements and handwriting elements coexist, the user can perform touch operations to trigger the touch display device to generate handwriting, and can also perform touch operations to trigger the touch display device to adjust the display parameters such as the size or position of graphic elements. Thus, the user needs to repeatedly switch between writing mode (the mode where touch operations trigger the touch display device to generate handwriting) and adjustment mode (the mode where touch operations trigger the touch display device to adjust the display parameters such as the size or position of graphic elements), which is quite cumbersome.
[0058] In view of this, this application proposes an element processing scheme. When the user operation of adding handwriting elements into graphic elements is detected, the graphic elements are adaptively adjusted so that the adaptively adjusted graphic elements can completely surround the handwriting elements in the graphic elements. This eliminates the need for the user to manually adjust the size of the graphic elements, saving time and improving convenience. Since the user does not need to manually adjust the graphic elements, the user does not need to repeatedly switch between writing mode and adjustment mode, making it more convenient.
[0059] The technical solution of this application is described in detail below, and the technical solution of this application is applicable to touch display devices. Touch display devices can be, for example, electronic whiteboards, but are not limited to the examples given here.
[0060] See Figure 2 , Figure 2 This is a flowchart illustrating an element display method provided in an embodiment of this application, as shown below. Figure 2 As shown, the method includes the following steps:
[0061] S101, Display element interface.
[0062] Here, the element interface displays graphic elements; for example, the element interface can be as follows: Figure 3A As shown in P1. In addition to displaying graphic elements, the element interface can also display handwriting elements. For example, the element interface can be as follows: Figure 3A As shown on page 2. For the concepts of graphic elements and handwriting elements, please refer to the previous introduction.
[0063] S102, Receive the first user operation.
[0064] Here, the first user operation is a user operation performed on the element interface. The first user operation is a user operation that adds the handwriting element into the first graphic element in the element interface. Adding the handwriting element into the first graphic element in the element interface means placing the handwriting element in the first graphic element in the element interface.
[0065] The first graphic element is any graphic element in the element interface. There are two cases for the first graphic element: (1) The first graphic element does not contain any handwriting elements. The first graphic element can be as follows: Figure 3A As shown in e21 of P1; (2) The first graphic element contains handwriting elements that are completely contained within the first graphic element. The handwriting elements that are completely contained within the first graphic element are the associated handwriting elements of the first graphic element. The associated handwriting elements of the first graphic element refer to handwriting elements that have an association with the first graphic element. The first graphic element can be as follows: Figure 3A As shown in e22 of P2 in the diagram, the associated handwriting elements in the first graphic element can be as follows: Figure 3AAs shown in e11 of P2 in the diagram.
[0066] The handwriting element added to the first graphic element can be in the following ways:
[0067] Scenario 1: The handwriting element added to the first graphic element can be a handwriting element located outside the first graphic element. For example, a handwriting element added to the first graphic element could be... Figure 3A As shown in e12 of P3 in the diagram.
[0068] Scenario 2: The handwriting element added to the first graphic element can be a handwriting element that partially overlaps with the first graphic element but is not related to it. Examples of handwriting elements added to the first graphic element include... Figure 3A As shown in e13 of P2 in the diagram.
[0069] Scenario 3: The handwriting element added to the first graphic element can also be a newly added handwriting element in the element interface whose writing trajectory passes through the first graphic element.
[0070] The first user action will differ depending on the handwriting element added to the first graphic element. For details regarding the first user action, please refer to the following sections. Figures 4-6 The description of that will not be elaborated upon here.
[0071] S103, in the element interface, adaptively adjusts and displays the first graphic element.
[0072] Here, in the element interface, adaptively adjusting the display of the first graphic element means that the size of the first graphic element is automatically adjusted in the element interface according to the handwriting element added to the first graphic element, so that the handwriting element added to the first graphic element can be completely surrounded by the first graphic element after the size is adjusted.
[0073] The adaptively adjusted first graphic element completely surrounds the associated handwriting element in the element interface, that is, the interface area occupied by the associated handwriting element of the first graphic element is located within the interface area occupied by the first graphic element in the element interface.
[0074] The associated handwriting elements of the first graphic element include the handwriting elements added to the first graphic element in step S102. When the first graphic element does not contain any handwriting elements, the associated handwriting elements of the first graphic element are the handwriting elements added to the first graphic element in step S102; when the first graphic element contains handwriting elements completely contained within the first graphic element, the associated handwriting elements of the first graphic element include the handwriting elements originally contained in the first graphic element and the handwriting elements added to the first graphic element in step S102.
[0075] In the element interface, adaptively adjusting the display of the first graphic element may include enlarging the size of the first graphic element in the element interface. Optionally, adaptively adjusting the display of the first graphic element in the element interface may also include shrinking the size of the first graphic element in the element interface. For details on the specific implementation of adaptively adjusting the display of the first graphic element in the element interface, please refer to the following description.
[0076] For example, the first graphic element is as follows Figure 3A As shown in e22 of P2, the handwriting element added to the first graphic element is as follows: Figure 3A As shown in e13 of P2, the first graphic element will be adaptively adjusted and displayed in the element interface, as shown in... Figure 3B As shown on page 4 of the document.
[0077] It is understandable that after receiving the first user operation, the handwriting element added to the first graphic element in step S102 can be associated with the first graphic element, so that the handwriting element added to the first graphic element in step S102 becomes the associated handwriting element of the first graphic element.
[0078] In the above Figure 2 In the corresponding technical solution, after displaying the element interface, graphic elements are displayed in the element interface. The user operation of adding handwriting elements into the first graphic element is received in the element interface. In the element interface, the display of the first graphic element is adaptively adjusted so that the adaptively adjusted first graphic element completely surrounds the associated handwriting elements of the first graphic element in the element interface. The associated handwriting elements of the first graphic element are handwriting elements that have a relationship with the first graphic element. The first graphic element includes the handwriting elements added to the first graphic element, realizing the associated display of graphic elements and handwriting elements. Since the adaptively adjusted first graphic element completely surrounds the associated handwriting elements of the first graphic element in the element interface, the size of the graphic element is automatically adjusted so that the size of the graphic element matches the size of the associated handwriting elements of the graphic element, without requiring the user to manually adjust the size, which can improve convenience.
[0079] The following describes the above. Figure 2 Some possible scenarios involving the first user operation.
[0080] Scenario 1: When the handwriting element added to the first graphic element is a handwriting element located outside the first graphic element, the first user operation can be a user operation that moves the handwriting element located outside the first graphic element into the first graphic element. The first user operation may include... Figure 4 Steps S202-S203 in the document. See also... Figure 4 , Figure 4A flowchart illustrating another element display method provided in this application embodiment is shown below. Figure 4 As shown, the method includes the following steps:
[0081] S201, Display element interface.
[0082] Here, the definition of the element interface can be found in the description of step S101 above.
[0083] The element interface can also display an editing toolbar, which is provided to the user for editing elements in the element interface. The editing toolbar can contain multiple tool controls, which are controls used to perform a certain function. The tool controls in the editing toolbar may include selection controls, which are used to perform a selection operation. For example, the element interface can be as follows: Figure 3C As shown on page 5, it includes the editing toolbar L1 and the selection control L11.
[0084] S202, receives the selection operation of the handwriting cluster in the element interface.
[0085] Here, a handwriting cluster includes at least one handwriting element located outside the first graphic element in the element interface.
[0086] It can receive trigger operations on the selection controls in the editing toolbar of the element interface, and then receive selection operations on the handwriting clusters in the element interface.
[0087] For example, refer to Figure 3C In P5, if the user clicks the selection control in P5 and selects the handwriting element "handwriting pen" in P5, and the handwriting element "handwriting pen" forms a handwriting group E1, then the user receives a selection operation on the handwriting group E1 in the element interface.
[0088] S203, receive the first movement operation on the handwriting cluster.
[0089] Here, the first movement operation is the operation of moving the handwriting cluster selected in step S202 into the first graphic element.
[0090] For example, the first graphic element is as follows Figure 3C As shown in graphic element e23 in P5, the first movement operation can be represented by trajectory g1 in P5, which is the operation of moving the stroke group E1 into the first graphic element e23.
[0091] S204, in the element interface, adaptively adjust the display of the first graphic element.
[0092] For details on how to adjust the adaptive display of the first graphic element, please refer to the subsequent description of step S103.
[0093] For example, refer to Figure 3C In the element interface, the first graphic element can be adaptively adjusted for display, as shown below. Figure 3C As shown on page 6 of the document.
[0094] In the above Figure 4 In the corresponding technical solution, when a user selects a stroke of ink outside a graphic element in the element interface and moves the stroke of ink into the graphic element, the graphic element is automatically adjusted and displayed, which can improve convenience.
[0095] Scenario 2: When the handwriting element added to the first graphic element partially overlaps with the first graphic element but is not associated with it, the first user operation can be a user operation that associates the first graphic element with the handwriting element. The first user operation may include... Figure 5 Steps S302-S304 in the document. See also... Figure 5 , Figure 5 A flowchart illustrating another element display method provided in this application embodiment is shown below. Figure 5 As shown, the method includes the following steps:
[0096] S301, Display element interface.
[0097] Here, the definition of the element interface can be found in the description of step S101 above.
[0098] For example, the element interface can be as follows Figure 3D As shown on page 7 of the document.
[0099] S302, receive the selection operation of the first graphic element and the first handwriting element.
[0100] Here, the first handwriting element and the first graphic element are not related. The first handwriting element and the first graphic element partially overlap in the element interface. The first handwriting element can be understood as the first handwriting element that overlaps with the first graphic element but is not completely contained within the first graphic element.
[0101] It can receive trigger operations on the selection controls in the editing toolbar of the element interface, and then receive selection operations on the first graphic element and the first handwriting element.
[0102] For example, refer to Figure 3D The first graphic element can be shown as e22 in P7, and the first handwriting element can be shown as e13 in P7. When the user clicks the selection control in P7 and selects e22 and e13 in P7, the user receives the selection operation for the first graphic element and the first handwriting element.
[0103] S303 displays the handwriting adaptation control in the element interface.
[0104] Here, the handwriting adaptation control is a functional control provided to users to establish the relationship between graphic elements and handwriting elements, and to adaptively adjust the display of graphic elements.
[0105] For example, refer to Figure 3D In the element interface, the handwriting adaptation control can be displayed as shown on page 7, and the handwriting adaptation control is shown as L21 in page 7.
[0106] S304 receives a trigger operation on the handwriting adaptation control.
[0107] Here, triggering the handwriting adaptation control refers to triggering the handwriting adaptation control to perform operations such as creating graphic elements and handwriting elements, and adaptively adjusting the display of graphic elements.
[0108] For example, refer to Figure 3D When the user clicks the handwriting adaptation control L21 in P7, a trigger operation is received for the handwriting adaptation control.
[0109] S305, in the element interface, adaptively adjusts the display of the first graphic element.
[0110] For details on how to adjust the adaptive display of the first graphic element, please refer to the description of the aforementioned step S103.
[0111] For example, refer to Figure 3D In the element interface, the first graphic element can be adaptively adjusted for display, as shown below. Figure 3D As shown on page 8 of the document.
[0112] In the above Figure 5 In the corresponding technical solution, when the user selects graphic elements and handwriting elements that are not related and have some overlap in the element interface, the selected graphic element is automatically adjusted and displayed, which can improve convenience.
[0113] Scenario 3: When the handwriting element added to the first graphic element is a newly added element in the element interface and the writing trajectory passes through the handwriting element of the first graphic element, the first user operation can be a user operation that writes handwriting in the first graphic element. The first user operation can include... Figure 6 Step S402 in [the document / section]. See also [the document / section]. Figure 6 , Figure 6 A flowchart illustrating another element display method provided in this application embodiment is shown below. Figure 6 As shown, the method includes the following steps:
[0114] S401, Display element interface.
[0115] Here, the definition of the element interface can be found in the description of step S101 above.
[0116] For example, the element interface can be as follows Figure 3E As shown on page 9 of the document.
[0117] S402, receive the first writing operation, and display the second handwriting element corresponding to the first writing operation in the element interface.
[0118] Here, the writing trajectory of the first writing operation overlaps with the first graphic element.
[0119] In some possible cases, the first writing operation can be a writing operation whose starting position is located within the first graphic element. The starting position refers to the position in the element interface when writing begins.
[0120] For example, refer to Figure 3E The first graphic element can be e21 as shown in Figure P9. The first writing operation can be the writing operation of writing the handwriting element e14 starting from the first graphic element. The handwriting element e14 is the second handwriting element.
[0121] Optionally, after receiving the first writing operation, the association between the second handwriting element and the first graphic element can also be displayed. For example, see [reference needed]. Figure 3E The relationship between the handwriting element e14 and the first graphic element e21 can be shown by using shadows in P9.
[0122] In other possible cases, the first writing operation may also be a writing operation whose ending position is located within the first graphic, where the ending position refers to the position where writing stops in the element interface; or, the first writing operation may also be a writing operation whose intermediate position (referring to positions other than the starting and ending positions) is located within the first graphic. This application does not impose any limitations on this.
[0123] S403, in the element interface, adaptively adjusts the display of the first graphic element.
[0124] For details on how to adjust the adaptive display of the first graphic element, please refer to the description of the aforementioned step S103.
[0125] For example, in the element interface, adaptively adjusting the display of the first graphic element can be done as follows: Figure 3E As shown on page 10 of the document.
[0126] When a writing operation is received where the writing trajectory overlaps with a graphic element, the graphic element is adaptively adjusted and displayed, which can automatically adjust the graphic element and improve convenience.
[0127] It should be noted that the first user operation is not limited to the above. Figures 4-6 The operations described herein can take many more forms, and this application does not impose any restrictions on them.
[0128] The following describes the specific implementation of adaptively adjusting the display of the first graphic element. Step S103 above may include the following steps S1031-S1033:
[0129] S1031. Calculate the bounding rectangle of the associated handwriting elements of the first graphic element to obtain the first bounding rectangle.
[0130] Here, the definition of the associated handwriting elements of the first graphic and the element can be found in the description of step S103 above.
[0131] In one feasible implementation, the maximum and minimum coordinate values of the associated handwriting elements of the first graphic element in two directions within the element interface can be determined. Based on these maximum and minimum coordinate values, the coordinate values of the four vertices of the first bounding rectangle are then determined. The coordinate values of the four vertices of the first bounding rectangle can be represented as (x... min y min ), (x min y max ), (x max y min ), (x max y max ), x min and x max These represent the minimum and maximum coordinates of the associated handwriting elements of the first graphic element along the x-axis in the element interface, respectively. min and y max These represent the minimum and maximum coordinate values of the associated handwriting elements of the first graphic element along the y-axis in the element interface, respectively.
[0132] S1032. Based on the first bounding rectangle, expand the first graphic element in the element interface.
[0133] Here, expanding the first graphic element in the element interface, based on the first bounding rectangle, means increasing the size of the first graphic element so that the first bounding rectangle is completely contained within the first graphic element.
[0134] When the first graphic element is a circle, it can be achieved through... Figure 7The process steps shown expand the first graphic element in the element interface, including the following steps A1-A5:
[0135] A1. Calculate the distances between the center of the first graphic element and the four vertices of the first circumscribed rectangle to obtain four distances.
[0136] The distance formula is as follows: d represents distance, (x o y o (x) represents the coordinates of the center of the first graphic element within the element's interface. i y i ) represents the position coordinates of the i-th vertex of the first bounding rectangle in the element interface, where 1≤i≤4.
[0137] A2. Determine the maximum distance among the four distances.
[0138] A3. Determine whether the radius of the first graphic element is less than the sum of the maximum distance and the preset margin.
[0139] Here, the preset margin is the distance between the outline of the circular element and the handwriting element.
[0140] If the radius of the first graphic element is greater than or equal to the sum of the maximum distance and the preset margin, it means that the first circumscribed rectangle is completely contained within the first graphic element, and step A5 is executed; if the radius of the first graphic element is less than the sum of the maximum distance and the preset margin, step A4 is executed.
[0141] A4. In the element interface, keep the center of the first graphic element and expand the radius of the first graphic element to the sum of the maximum distance and the preset margin to obtain the expanded first graphic element.
[0142] For example, refer to Figure 3C The expanded first graphic element can be like Figure 3C As shown in e23 of P6 in the diagram.
[0143] A5. Do not expand the first graphic element.
[0144] In steps A1-A5 above, when the graphic element is a circle, the distance between the circle of the graphic element and the four vertices of the bounding rectangle of the handwriting element is calculated. After expanding the radius of the graphic element to the maximum distance and the preset margin, it is possible to ensure that the expanded graphic element can completely surround the handwriting element while keeping the center position of the graphic element unchanged.
[0145] In the case where the first user operation is the above-mentioned situation three, before executing step A1, the distance between the writing position and the center of the first graphic element can be calculated. If the distance between the writing position and the center of the first graphic element is less than the radius of the first graphic element, it indicates that the writing trajectory of the writing operation coincides with the first graphic element, and the above-mentioned step A1 is executed.
[0146] When the first graphic element is a polygon, it can be expanded in the element interface through the following steps B1-B3:
[0147] B1. Determine the largest inscribed rectangle of the first graphic element.
[0148] The maximum inscribed rectangle of the first graphic element can be determined by methods such as traversal and center diffusion.
[0149] B2. Determine the bounding rectangle of the largest inscribed rectangle and the first bounding rectangle to obtain the second bounding rectangle.
[0150] The principle for determining the second circumscribed rectangle can be referred to the principle for determining the first circumscribed rectangle in step S1031 above.
[0151] B3. Expand the first graphic element in the element interface so that the largest inscribed rectangle of the first graphic element is the second bounding rectangle, thus obtaining the expanded first graphic element.
[0152] In this case, the angles of each interior angle of the expanded first graphic element are the same as the angles of each interior angle of the unexpanded first graphic element.
[0153] For example, the expanded first graphical element can be as follows: Figure 3E As shown in e21 of P10 in the diagram.
[0154] In the case where the first user operation is the above-mentioned situation three, before executing step A1, it can be determined whether the writing position is within the first graphic element. If the writing position is not within the first graphic element, then execute the above-mentioned step B1.
[0155] S1033. In the element interface, display the expanded first graphic element.
[0156] In steps S1031-S1033 above, the graphic element is expanded according to the bounding rectangle of the associated handwriting element, so that the expanded graphic element can completely surround the handwriting element.
[0157] See Figure 8 , Figure 8 A flowchart illustrating another element display method provided in this application embodiment is shown below. Figure 8 As shown, the method includes the following steps:
[0158] S501, Display element interface.
[0159] S502 receives the first user's operation.
[0160] S503, in the element interface, adaptively adjusts and displays the first graphic element.
[0161] For details on the implementation of steps S501 to S503, please refer to the preceding text. Figures 2-7 The relevant descriptions will not be repeated here.
[0162] S504 receives the selection operation for the first graphic element.
[0163] Here, the selection operation for the first graphic element refers to the operation of selecting the first graphic element in the element interface.
[0164] For example, refer to Figure 9A The first graphic element is e22 in P8. When the user clicks e22 in P8, the user receives a selection operation for the first graphic element.
[0165] S505 receives the first transformation operation on the first graphic element.
[0166] Here, the first transformation operation is an operation that transforms the display parameters of the first graphic element. The display parameters of the first graphic element can refer to the display position of the first graphic element in the element interface, the display state of the first graphic element in the element interface, and other parameters reflecting the visual presentation of the first graphic element. The first transformation operation includes, but is not limited to, moving the first graphic element, deleting the first graphic element, rotating the first graphic element, scaling the first graphic element, and so on.
[0167] S506, in the element interface, the first graphic element and the associated handwriting element of the first graphic element are displayed in different ways.
[0168] Here, changing the display of the first graphic element and its associated handwriting elements in the element interface means adjusting the first graphic element and its associated handwriting elements in the element interface to adapt to the first transformation operation.
[0169] For example, the first transformation operation is a movement operation on the first graphic element, which can be referred to as... Figure 9A Assuming the movement trajectory of the first transformation operation is as follows: Figure 9A As shown in trajectory g2, the first graphic element and its associated handwriting elements are displayed in the element interface in a different way, such as... Figure 9A As shown on page 11 of the document.
[0170] For example, the deletion operation of the first graphic element in the first transformation operation can be referred to... Figure 9B When the user clicks the delete button, the first graphic element and its associated handwriting elements are displayed in the element interface in different ways, such as... Figure 9B As shown on page 12 of the document. The first transformation operation and the transformation display of the first graphic element and the associated handwriting of the first graphic element in the element interface are not limited to the examples shown here.
[0171] In the above Figure 8 In the technical solution, when a user selects a graphic element, the graphic element and its associated handwriting elements are displayed in different ways according to the user's transformation operation. This enables synchronous adjustment of the graphic element and handwriting elements, eliminating the need for the user to manually adjust the handwriting elements and improving convenience.
[0172] See Figure 10 , Figure 10 A flowchart illustrating another element display method provided in this application embodiment is shown below. Figure 10 As shown, the method includes the following steps:
[0173] S601, Display Element Interface.
[0174] S602 receives the first user's operation.
[0175] S603, in the element interface, adaptively adjusts the display of the first graphic element.
[0176] For details on the implementation of steps S601 to S603, please refer to the preceding text. Figures 2-7 The relevant descriptions will not be repeated here.
[0177] S604, receives a selection operation on a third handwriting element within a first graphic element.
[0178] Here, the third handwriting element is any handwriting element that is related to the first graphic element. Selecting the third handwriting element within the first graphic element refers to selecting the third handwriting element in the element interface.
[0179] For example, refer to Figure 9C Assuming the first graphic element is e23 in P6, when the user clicks the handwriting element e12, the system receives a selection operation for the third handwriting element e12 within the first graphic element.
[0180] S605 receives a second transformation operation on the third handwriting element.
[0181] Here, the second transformation operation on the third handwriting element is an operation that transforms the display parameters of the third handwriting element; the display parameters of the third handwriting element can refer to the display position of the first graphic element in the element interface, the display state of the third handwriting element in the element interface, and other parameters reflecting the visual presentation of the third handwriting element. The second transformation operation includes, but is not limited to, moving the third handwriting element, deleting the third handwriting element, rotating the third handwriting element, scaling the third handwriting element, etc.
[0182] S606, changes the display of the third handwriting element in the element interface.
[0183] Here, changing the display of the third handwriting element in the element interface means adjusting the third handwriting element in the element interface to adapt to the second transformation operation.
[0184] Specifically, when the second transformation operation involves removing the third handwriting element from the first graphic element, the third handwriting element can be moved and displayed within the element interface. (See reference...) Figure 9C Assuming the movement trajectory of the second transformation operation is as follows: Figure 9C As shown in trajectory g3, the third handwriting element is displayed in the element interface in a different way, such as... Figure 9C As shown on page 13 of the document.
[0185] After receiving the second transformation operation, the association between the third handwriting element and the first graphic element can be severed. By severing the association between the handwriting element removed from the graphic element and the graphic element, users can flexibly adjust the handwriting element.
[0186] In the above Figure 10 In the corresponding technical solution, when a user selects a handwriting element in a graphic element and removes the handwriting element from the graphic element, the handwriting element is moved and displayed in the element interface, enabling independent adjustment of the handwriting element.
[0187] Optionally, in some possible cases, the technical solution of this application may also include the following steps C1-C5:
[0188] C1: Receives selection operations for multiple graphic elements in the element interface.
[0189] Here, multiple graphic elements are not related. This involves selecting multiple graphic elements within the element interface.
[0190] C2. In the element interface, display the graphic association control.
[0191] Here, the graphic association control is a control provided to users for establishing relationships between graphic elements.
[0192] C3: Receives trigger operations on graphic-related controls and associates multiple graphic elements.
[0193] Here, triggering the graphic association control refers to triggering the graphic association control to perform the operation of establishing association relationships between graphic elements.
[0194] C4. Receives a third transformation operation on multiple graphic elements.
[0195] Here, the third transformation operation is the operation of changing the display parameters of multiple graphic elements. The display parameters of multiple graphic elements can refer to the display position of multiple graphic elements in the element interface, the display state of multiple graphic elements in the element interface, and other parameters reflecting the visual presentation of graphic elements. The third transformation operation includes, but is not limited to, moving multiple graphic elements, deleting multiple graphic elements, rotating multiple graphic elements, scaling multiple graphic elements, and so on.
[0196] C5. In the element interface, change the display of multiple graphic elements.
[0197] Here, changing the display of multiple graphic elements in the element interface refers to adjusting multiple graphic elements in the element interface to adapt to the third transformation operation.
[0198] In steps C1-C5 above, when the user selects multiple unrelated graphic elements in the element interface, a graphic association control is displayed, and the trigger operation of the graphic association control is received to associate multiple graphic elements. Then, the transformation operation of multiple graphic elements is received, and multiple graphic elements are displayed in the element interface in a transformed manner, which allows the user to easily adjust multiple graphic elements at the same time.
[0199] Among them, it can be achieved through, for example Figure 11 The process steps shown identify the objects that need to be transformed in the element interface, including the following steps D1-D5:
[0200] D1. Determine whether there exists an element that is related to the hit element.
[0201] Here, "hit element" refers to the element selected by the selection operation in the element interface.
[0202] If there is an element that is related to the hit element, proceed to step D2; if there is no element that is related to the hit element, proceed to step D4.
[0203] D2. Determine whether the hit element is a handwriting element.
[0204] If the hit element is a handwriting element, proceed to step D3; if the hit element is not a handwriting element, proceed to step D5.
[0205] D3. Determine whether there are any graphic elements that are related to the hit element.
[0206] If there is a graphic element that is related to the hit element, proceed to step D4; if there is no graphic element that is related to the hit element, proceed to step D5.
[0207] D4. Identify the object that needs to be transformed and displayed as the hit element.
[0208] D5. Determine the objects that need to be transformed and displayed as the hit element and the elements that are related to the hit element.
[0209] The method of this application has been described above; the apparatus of this application will be described below.
[0210] See Figure 12 , Figure 12 This is a schematic diagram of the structure of an element display device provided in an embodiment of this application, which is applied to a touch display device, such as... Figure 12 As shown, the element display device 70 includes:
[0211] Display module 701 is used to display an element interface, wherein the element interface displays graphic elements;
[0212] The operation receiving module 702 is used to receive a first user operation, which is a user operation to add a handwriting element to a first graphic element in the element interface. The first graphic element is any graphic element in the element interface. The handwriting element is an element generated based on the touch writing operation performed on the touch display device. The handwriting element is used to represent the handwriting corresponding to the touch writing operation.
[0213] The display module 701 is further configured to adaptively adjust the display of the first graphic element in the element interface, wherein the adaptively adjusted first graphic element completely surrounds the associated handwriting elements of the first graphic element in the element interface, the associated handwriting elements being handwriting elements that have an association relationship with the first graphic element, and the associated handwriting elements including handwriting elements added to the first graphic element.
[0214] It should be noted that the element display device 70 described above can execute the element display method provided in the embodiments of this application, and has the corresponding functional modules and beneficial effects of executing the method. Technical details not described in detail in the embodiments of the element display device 70 can be found in the element display method provided in the embodiments of this application.
[0215] See Figure 13 , Figure 13This is a schematic diagram of a touch display device according to an embodiment of this application. The touch display device 80 includes a processor 801, a memory 802, and a touch display screen 803. The memory 802 and the touch display screen 803 are connected to the processor 801, and the memory 802 is connected to the processor 801, for example, via a bus.
[0216] Processor 801 is configured to support the display device 80 in performing the corresponding functions in the methods described in the above method embodiments. Processor 801 may be a central processing unit (CPU), a network processor (NP), a hardware chip, or any combination thereof. The aforementioned hardware chip may be an application-specific integrated circuit (ASIC), a programmable logic device (PLD), or a combination thereof. The aforementioned PLD may be a complex programmable logic device (CPLD), a field-programmable gate array (FPGA), a generic array logic (GAL), or any combination thereof.
[0217] The touch display screen 803 is used to display element interfaces and to receive writing operations and other various user operations. The touch display screen 803 can be any type of touch display screen, including capacitive touch screens, resistive touch screens, and infrared touch screens.
[0218] Memory 802 is used to store program code, etc. Memory 802 may include volatile memory (VM), such as random access memory (RAM); memory 802 may also include non-volatile memory (NVM), such as read-only memory (ROM), flash memory, hard disk drive (HDD), or solid-state drive (SSD); memory 802 may also include combinations of the above types of memory.
[0219] The memory 802 is used to store non-volatile software programs, non-volatile computer-executable programs, and modules, such as the program instructions / modules corresponding to the element display method in the embodiments of this application. The processor executes various functional applications and data processing of the element display method by running the non-volatile software programs, instructions, and modules stored in the memory, thereby realizing the function of the element display method provided in the above method embodiments.
[0220] The memory 802 may include a program storage area and a data storage area, wherein the program storage area may store the operating system and applications required for at least one function. The data storage area may store data created based on the use of the element display device. In some embodiments, the memory may include memory remotely located relative to the processor, and such remote memory may be connected to the element display device via a network. Examples of such networks include, but are not limited to, the Internet, intranets, local area networks, mobile communication networks, and combinations thereof.
[0221] The one or more modules are stored in the memory. When executed by the one or more processors, they perform the element display method in any of the above method embodiments. For example, they perform the method steps described in the above method embodiments to realize the functions of the modules described in the above device embodiments.
[0222] This application also provides a computer-readable storage medium storing a computer program, the computer program including program instructions, which, when executed by a computer, cause the computer to perform the method described in the foregoing embodiments.
[0223] Those skilled in the art will understand that all or part of the processes in the above embodiments can be implemented by a computer program instructing related hardware. The program can be stored in a computer-readable storage medium, and when executed, it can include the processes of the embodiments of the above methods. The storage medium can be a magnetic disk, optical disk, read-only memory (ROM), or random access memory (RAM), etc.
[0224] The above-disclosed embodiments are merely preferred embodiments of this application and should not be construed as limiting the scope of this application. Therefore, any equivalent variations made in accordance with the claims of this application shall still fall within the scope of this application.
Claims
1. A method for displaying elements, characterized in that, Applied to a touch display device, the method includes: The element interface displays graphic elements; The system receives a first user operation, which is a user operation to add a handwriting element to a first graphic element in the element interface. The first graphic element is any graphic element in the element interface. The handwriting element is an element generated based on a touch writing operation performed on the touch display device. The handwriting element is used to represent the handwriting corresponding to the touch writing operation. In the element interface, the first graphic element is adaptively adjusted and displayed. The first graphic element obtained by the adaptive adjustment completely surrounds the associated handwriting elements of the first graphic element in the element interface. The associated handwriting elements are handwriting elements that have a relationship with the first graphic element, and the associated handwriting elements include handwriting elements added to the first graphic element.
2. The method according to claim 1, characterized in that, The element interface also displays handwriting elements; The receiving of the first user operation includes: Receive a selection operation on a handwriting cluster in the element interface, the handwriting cluster including at least one handwriting element in the element interface located outside the first graphic element; Receive a first movement operation on the handwriting blob, the first movement operation being an operation to move the handwriting blob into the first graphic element.
3. The method according to claim 1, characterized in that, The element interface also displays handwriting elements; The receiving of the first user operation includes: The selection operation of the first graphic element and the first handwriting element is received. The first handwriting element and the first graphic element are not associated with each other. The first handwriting element and the first graphic element partially overlap in the element interface. The handwriting adaptation control is displayed in the element interface; Receive a trigger operation on the handwriting adaptation control.
4. The method according to claim 1, characterized in that, The receiving of the first user operation includes: Upon receiving a first writing operation, a second handwriting element corresponding to the first writing operation is displayed in the element interface, wherein the writing trajectory of the first writing operation overlaps with the first graphic element.
5. The method according to claim 4, characterized in that, After receiving the first writing operation, the method further includes: This displays the association between the second handwriting element and the first graphic element.
6. The method according to any one of claims 1-5, characterized in that, After adaptively adjusting the display of the first graphic element in the element interface, the method further includes: Receive the selection operation for the first graphic element; Receive a first transformation operation on the first graphic element, wherein the first transformation operation is an operation that transforms the display parameters of the first graphic element; The first graphic element and the associated handwriting element are displayed alternately in the element interface.
7. The method according to any one of claims 1-5, characterized in that, After adaptively adjusting the display of the first graphic element in the element interface, the method further includes: Receive a selection operation on a third handwriting element within the first graphic element, wherein the third handwriting element is any handwriting element that is associated with the first graphic element; Receive a second transformation operation on the third handwriting element, wherein the second transformation operation is an operation to transform the display parameters of the third handwriting element; The third handwriting element is displayed in a changing manner in the element interface.
8. The method according to claim 7, characterized in that, The second transformation operation is the operation of removing the third handwriting element from the first graphic element; The process of changing the display of the third handwriting element in the element interface includes: Move the third handwriting element to be displayed in the element interface.
9. The method according to claim 8, characterized in that, After receiving the second transformation operation on the third handwriting element, the method further includes: The association between the third handwriting element and the first graphic element is terminated.
10. The method according to any one of claims 1-5, characterized in that, The adaptive adjustment and display of the first graphic element in the element interface includes: Calculate the bounding rectangle of the associated handwriting element to obtain the first bounding rectangle; Based on the first circumscribed rectangle, the first graphic element is expanded in the element interface, and the expanded first graphic element is displayed.
11. The method according to claim 10, characterized in that, The first graphic element is a circle; Expanding the first graphic element in the element interface based on the first bounding rectangle includes: Calculate the distances between the center of the first graphic element and the four vertices of the first bounding rectangle to obtain four distances; Determine the maximum distance among the four distances; If the radius of the first graphic element is less than the sum of the maximum distance and the preset margin, in the element interface, the center of the first graphic element is maintained, and the radius of the first graphic element is expanded to the sum of the maximum distance and the preset margin to obtain the expanded first graphic element.
12. The method according to claim 10, characterized in that, The first graphic element is a polygon; Expanding the first graphic element in the element interface based on the first bounding rectangle includes: Determine the largest inscribed rectangle of the first graphic element; Determine the bounding rectangle of the largest inscribed rectangle and the first bounding rectangle to obtain the second bounding rectangle; In the element interface, the first graphic element is expanded so that the largest inscribed rectangle of the first graphic element is the second bounding rectangle, resulting in the expanded first graphic element, wherein the angles of each interior angle of the expanded first graphic element are the same as the angles of each interior angle of the first graphic element before expansion.
13. The method according to any one of claims 1-5, characterized in that, The method further includes: Receive a selection operation on multiple graphic elements in the element interface, wherein the multiple graphic elements are not related. The element interface displays graphical association controls; Receive a trigger operation on the graphic association control and associate the multiple graphic elements; Receive a third transformation operation on the plurality of graphic elements, wherein the third transformation operation is an operation that transforms the display parameters of the plurality of graphic elements; The multiple graphic elements are displayed in a varied manner within the element interface.
14. A touch display device, characterized in that, The device includes a memory, a processor, and a touch display screen, the memory and the touch display screen being connected to the processor, the touch display screen being used to display an element interface, and the processor being used to execute one or more computer programs stored in the memory, wherein, when executing the one or more computer programs, the processor causes the touch display device to implement the method as described in any one of claims 1-13.
15. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program, the computer program including program instructions that, when executed by a processor, cause the processor to perform the method as described in any one of claims 1-13.