Cursor display method, electronic equipment and storage medium

Abstract

The invention discloses a cursor display method, electronic equipment and a storage medium, and the method comprises the steps: monitoring a click event in a first content element set rendered by a content editor, and determining viewport coordinate information of the click event in the first content element set; converting the viewport coordinate information into relative coordinate information in the content editor; determining a target content element hit by the click event in the first content element set according to the relative coordinate information, the size information of each content element in the first content element set and the coordinate information of each content element in the content editor; associating the target content element with a cursor object, and reading first coordinate information of the target content element in the content editor based on the cursor object; and displaying the rendered cursor object in the content editor based on the first coordinate information. And the accuracy of determining the cursor position is improved.

Description

Technical Field

[0001] The present application relates to the field of text editing technology, and in particular to a cursor display method, electronic device, and storage medium. Background Art

[0002] The rich text editor is suitable for WYSIWYG text editing, but when elements change frequently, it uses the browser's rendering tool to perform global rendering on the browser, which consumes a lot of resources.

[0003] Canvas can avoid global rendering, but the cursor position needs to be recalculated each time an element is updated. When a large number of elements need to be updated, the coordinate conversion operation to determine the cursor position must be repeatedly performed, resulting in loss of computing performance and errors in coordinate conversion. Summary of the Invention

[0004] Embodiments of the present application provide a cursor display method, an electronic device, and a storage medium to improve the accuracy of determining the cursor position.

[0005] In a first aspect, an embodiment of the present application provides a cursor display method, the method comprising:

[0006] Listening for a click event in a first set of content elements rendered by a content editor, and determining viewport coordinate information of the click event in the first set of content elements;

[0007] Converting the viewport coordinate information into relative coordinate information in the content editor;

[0008] Determining, in the first set of content elements, a target content element hit by the click event based on the relative coordinate information, size information of each content element in the first set of content elements, and coordinate information of each content element in the content editor;

[0009] Associating the target content element with a cursor object, and reading first coordinate information of the target content element in the content editor based on the cursor object;

[0010] The cursor object is displayed rendered in the content editor based on the first coordinate information.

[0011] In a second aspect, an embodiment of the present application provides an electronic device, comprising: a processor and a memory; wherein the memory stores a computer program, and the computer program is suitable for being loaded by the processor and executing the steps of the above method.

[0012] In a third aspect, an embodiment of the present application provides a computer storage medium, wherein the computer storage medium stores a plurality of instructions, wherein the instructions are suitable for being loaded by a processor and executing the steps of the above method.

[0013] In an embodiment of the present application, after determining the target content element that the cursor object hits in the content editor, the cursor object is associated with the target content element, and the rendered cursor object is displayed in the content editor based on the first coordinate information of the target content element. By associating and rendering the cursor object with the determined target content element, when the position of the target content element changes, the position of the cursor object can be determined by determining the position of the target content element in the content editor. This avoids the need to re-convert the viewport coordinate information and relative coordinate information of the cursor object to determine the position of the cursor object every time a content element changes in the content editor, thereby reducing energy loss when determining the position information of the cursor object. It also avoids errors that exist during coordinate conversion, thereby improving the accuracy of determining the position of the cursor object. BRIEF DESCRIPTION OF THE DRAWINGS

[0014] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are only some embodiments of the present application. For those skilled in the art, other drawings can be obtained based on these drawings without paying any creative work.

[0015] Figure 1 A schematic diagram of a scenario of a cursor display method provided in an embodiment of the present application;

[0016] Figure 2 A flowchart of a cursor display method provided in an embodiment of the present application;

[0017] Figure 3 A flowchart of a cursor display method provided in an embodiment of the present application;

[0018] Figure 4 A flowchart of a cursor display method provided in an embodiment of the present application;

[0019] Figure 5 A flowchart of a cursor display method provided in an embodiment of the present application;

[0020] Figure 6 A flowchart of a cursor display method provided in an embodiment of the present application;

[0021] Figure 7 A schematic diagram of a scenario of a cursor display method provided in an embodiment of the present application;

[0022] Figure 8 A schematic diagram of a scenario of a cursor display method provided in an embodiment of the present application;

[0023] Figure 9 A schematic diagram of a scenario of a cursor display method provided in an embodiment of the present application;

[0024] Figure 10 A schematic diagram of the structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

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

[0026] In the description of this application, it should be understood that the terms "first", "second", etc. are used for descriptive purposes only and should not be understood to indicate or imply relative importance. In the description of this application, it should be noted that, unless otherwise expressly specified and limited, "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions. For example, a process, method, system, product or device that includes a series of steps or units is not limited to the listed steps or units, but may optionally include steps or units that are not listed, or may optionally include other steps or units inherent to these processes, methods, products or devices. For those of ordinary skill in the art, the specific meanings of the above terms in this application can be understood according to the specific circumstances. In addition, in the description of this application, unless otherwise specified, "multiple" refers to two or more. "and / or" describes the association relationship of associated objects, indicating that three relationships can exist. For example, A and / or B can represent: A exists alone, A and B exist at the same time, and B exists alone. The character " / " generally indicates that the associated objects before and after are in an "or" relationship.

[0027] A rich text editor is a text editor embedded in a browser, providing a WYSIWYG experience. Because a rich text editor uses the browser's rendering engine to layout, render, and process text when updating text, it requires the entire document to be typeset and rendered correctly to display and respond to user input. This can consume significant time and computing resources in scenarios where frequent radial transformations of elements are required.

[0028] Canvas is a drawing application programming interface (API) provided by HTML5. In Canvas, drawing is performed directly on the canvas. Therefore, using Canvas can avoid a large number of reflow and redraw operations, reducing the loss of computing resources. In order to make Canvas closer to a rich text editor during use, a flashing cursor is usually drawn using component animations provided by the framework above the canvas. Every time the text on the canvas changes, the cursor position needs to be recalculated, and then the component is notified to move the cursor position. This calculation scheme needs to recalculate the cursor position every time the text changes. When there is a lot of text, it will also consume computing performance for large-scale complex calculations. When calculating the cursor position, the canvas coordinate system and the browser coordinate system need to be aligned, which has accuracy issues and causes deviations in the cursor display position.

[0029] After determining the target content element that the cursor object has hit in the content editor, the cursor object is associated with the target content element, and the rendered cursor object is displayed in the content editor based on the first coordinate information of the target content element. By associating and rendering the cursor object with the determined target content element, when the position of the target content element changes, the position of the cursor object can be determined by determining the position of the target content element in the content editor. This avoids the need to re-convert the cursor object's viewport coordinate information and relative coordinate information to determine the cursor object's position each time a content element changes in the content editor, reducing energy consumption when determining the cursor object's position information. It also avoids errors in coordinate conversion and improves the accuracy of determining the cursor object's position.

[0030] Reference Figure 1 , Figure 1 A schematic diagram of a scenario of the cursor display method of this application.

[0031] In a content editor, a first content element set consisting of the content elements "ABCDEFG" is configured. When a click event is monitored within the content element set, the viewport coordinate information of the click event within the first content element is determined, the viewport coordinate information is converted into relative coordinate information within the content editor, and the target content element within the first content element set hit by the click event is determined based on the relative coordinate information, the size information of each element within the first content element set, and the coordinate information of each content element within the content editor. A cursor object is then associated with the determined target content element, and the first coordinate information of the target element within the content editor is read based on the cursor object.

[0032] Optionally, in this embodiment, it may be determined that the target content element hit by the click event in the first content element set is C. The target content element C is then associated with a cursor object, and the first coordinate information of the target content element C is read through the cursor object. Based on the first coordinate information, the cursor object is rendered at a corresponding position in the content editor and displayed in the content editor.

[0033] Optionally, when rendering the cursor object, it can be rendered based on the target content element's font size, color, and other style information, or based on the target content element's predecessor's style information. In this embodiment, when rendering the cursor object, the cursor object is rendered using the font size of the predecessor content element B. That is, the cursor object is rendered according to the length value of the predecessor content element B, rendering the cursor object's length to be consistent with the length value of the predecessor content element.

[0034] Optionally, in this embodiment, the cursor object can be rendered based on the font color of the preceding content element. For example, if the font color of the preceding content element B is yellow, the cursor object is rendered yellow at the position corresponding to the first coordinate information in the content editor. It is understood that the cursor object can also be rendered based on other style information, which will not be enumerated here.

[0035] In this embodiment, after determining the target content element hit by the cursor object in the content editor, the cursor object is associated with the target content element, and the rendered cursor object is displayed in the content editor based on the first coordinate information of the target content element. By associating the cursor object with the determined target content element and rendering it, when the position of the target content element changes, the position of the cursor object can be determined by determining the position of the target content element in the content editor. This avoids the need to re-convert the viewport coordinate information and relative coordinate information of the cursor object to determine the position of the cursor object every time a content element changes in the content editor, thereby reducing energy loss when determining the position information of the cursor object. It also avoids errors in coordinate conversion, improves the accuracy of determining the position of the cursor object, and avoids the phenomenon of the cursor object and text being separated when rendering the cursor object.

[0036] The following will be combined Figures 2 to 9 , a detailed introduction to the cursor display method provided in the embodiment of the present application is given.

[0037] Please refer to Figure 2 , provides a flow chart of a cursor display method according to an embodiment of the present application. Figure 2 As shown, the cursor display method may include the following steps S101 to S105.

[0038] S101, monitoring a click event in a first set of content elements rendered by a content editor, and determining viewport coordinate information of the click event in the first set of content elements;

[0039] The content editor is an editing tool that can be used to edit text, insert images, create tables, set font styles, and format paragraphs. It can be used in scenarios such as website construction, blog writing, and document editing.

[0040] The first content element set is a set formed by content elements in the content editor, which can be formed by combining content elements such as text, images, tables, etc. In the embodiment of the present application, the first content element is described by taking text as an example.

[0041] The click event may be triggered by clicking any area in the first content element set of the content editor with a mouse, or by clicking any area in the first content element set of the content editor displayed on a touch screen with a touch pen.

[0042] Viewport coordinates represent the coordinates of the click event on the page where the content editor is drawn. This coordinate system is constructed with the upper-left corner of the page as the origin, using pixels as the coordinate unit. The horizontal axis (X-axis) represents the horizontal distance of the click event from the left edge of the page, and the vertical axis (Y-axis) represents the vertical distance from the top edge of the page.

[0043] In an embodiment of the present application, the content editor can be drawn in the web page content of the browser. When a click event is detected, the coordinate information of the click event in the web page content area is obtained to obtain the viewport coordinate information of the click event.

[0044] S102, converting the viewport coordinate information into relative coordinate information in the content editor;

[0045] Relative coordinates are the coordinates of a click event within the content editor. This requires constructing a content editor coordinate system to determine the coordinates of the click event and the content element within the content editor. The content editor coordinate system uses the top-left corner of the content editor as its origin. Like the viewport coordinate system, it uses pixels as its unit of measurement. The horizontal axis (X-axis) represents the horizontal distance from the left edge of the content editor, while the vertical axis (Y-axis) represents the vertical distance from the top edge of the content editor.

[0046] It's understandable that the coordinate information for each content element in the first set of content elements rendered by the content editor is based on the upper-left corner of the content editor as the coordinate origin, while the coordinate information for the click event is based on the upper-left corner of the viewport where the content editor is rendered as the coordinate origin. These are two different coordinate systems. Therefore, after obtaining the viewport coordinate information for the click event, it is necessary to convert the viewport coordinate information to obtain the relative coordinate information of the click event within the content editor.

[0047] For example, referring to Figure 3 , the viewport coordinate information of the viewport coordinate system origin H is (0,0), the coordinate information of the content editor coordinate system origin I in the content editor coordinate system is (0,0), and its viewport coordinate information in the viewport coordinate system is (50,100). Therefore, after obtaining the viewport coordinates of a click event, the relative coordinates of the click event in the content editor can be calculated. For example, if the viewport coordinate information of a click event is determined to be (171,201), the coordinate information of the click event in the content editor can be calculated as (121,101).

[0048] S103: Determine, in the first set of content elements, a target content element hit by the click event based on the relative coordinate information, size information of each content element in the first set of content elements, and coordinate information of each content element in the content editor;

[0049] The size information of each content element in the first content element set is determined by the size of each content element. It is understandable that in the first content element set, the size information of each content element can be different or the same, and this application does not limit the size information of the content elements.

[0050] The coordinate information of each content element in the content editor is determined by the position information of the intersection of the left edge line and the top edge line of the content element in the content editor.

[0051] For example, continue to refer to Figure 3 , point J is the coordinate of content element A in the content editor, which is the intersection of the left edge (shown by the dotted line) and the top edge (shown by the dotted line) of content element A. Optionally, in this embodiment, the coordinate information of content element A in the content editor can be determined to be (100, 100).

[0052] Similarly, the coordinates of content element B are (110, 108), the coordinates of content element C are (120, 100), the coordinates of content element D are (130, 100), the coordinates of content element E are (140, 100), the coordinates of content element F are (150, 100), and the coordinates of content element G are (160, 100).

[0053] After determining the coordinate information of each content element in the first content element set in the content editor, the size of each content element and the relative coordinate information of the click event in the content editor, the target content element hit by the click event can be determined.

[0054] For example, referring to the above description, if the relative coordinate information of the click event in the content editor is determined to be (121, 101), the coordinates of the content element C are (120, 100), and when the size information of the content element C is a width value of 3 and a height value of 5, then the position of the click event is determined to be in the content element C, and the target content element hit by the click event is determined to be content element C.

[0055] S104, associating the target content element with a cursor object, and reading first coordinate information of the target content element in the content editor based on the cursor object;

[0056] After determining the hit target content element, the target content element is associated with the cursor object, and then the cursor object reads the first coordinate information of the target content element A in the content editor and uses the first coordinate information as the coordinate information of the cursor object in the content editor.

[0057] S105: Display the rendered cursor object in the content editor based on the first coordinate information.

[0058] After determining the first coordinate information of the cursor object in the content editor, the cursor object may be rendered at a location corresponding to the first location information. A cursor of a corresponding style, such as a vertical line or other indicator symbol, may be rendered at the location corresponding to the first coordinate information, and the rendered cursor object may be presented to the user.

[0059] Thus, the rendered cursor object can be correctly displayed in the content editor according to the first coordinate information of the target content element, so that the user can clearly see the position of the cursor.

[0060] Optionally, in this embodiment, when it is determined that the target content element has a predecessor content element, the cursor object is rendered in the position corresponding to the first coordinate information according to the first style information of the predecessor content element; when it is determined that the target content element does not have a predecessor content element, the cursor object is rendered in the position corresponding to the first coordinate position information according to the second style information of the target content element.

[0061] The preceding content element may be a previous content element that is adjacent to a certain content element in the horizontal direction.

[0062] For example, see Figure 3If content element C is determined to be the target content element, and it is determined that content element C has a preceding content element, which is content element B, then the cursor object is rendered at the position corresponding to the first coordinate position information according to the first style information of content element B. Optionally, Figure 3 The cursor object is rendered using the font length information in the first style information of the content element B.

[0063] In this embodiment, the rendering mode of the cursor object is dynamically adjusted according to whether the target content element has a preceding content element, ensuring that the content editor can render different cursor objects to adapt to various complex editing scenarios.

[0064] Optionally, in this embodiment, a timer may be used to set the transparency corresponding to the current time range in different time ranges within a preset period. The preset period and the time range of the preset period may be set according to the desired effect of the cursor object.

[0065] For example, the preset period can be set to 500 milliseconds. The preset time range settings include: 0th to 100 milliseconds, 101st to 300 milliseconds, 301st to 400 milliseconds, and 401st to 500 milliseconds.

[0066] Among them, it is pre-set that within a period of 500 milliseconds, the cursor object is rendered with 100% transparency when the time range is 0 to 100 milliseconds; the cursor object is rendered with 50% transparency when the time range is 101 to 300 milliseconds; the cursor object is rendered with 50% transparency when the time range is 301 to 400 milliseconds; and the cursor object is rendered with 0% transparency when the time range is 401 to 500 milliseconds.

[0067] Therefore, the time range of the cursor object at the current moment within the preset period can be detected, and the transparency corresponding to the time range can be determined. According to the transparency, the cursor object can be controlled from fully visible to fully hidden and then to fully visible in the position corresponding to the first coordinate information, and played in a loop.

[0068] In this embodiment, the blinking effect of the cursor object is achieved by controlling the transparency of the cursor object displayed in different time ranges within a preset period.

[0069] In this embodiment, after determining the target content element hit by the cursor object in the content editor, the cursor object is associated with the target content element, and the rendered cursor object is displayed in the content editor based on the first coordinate information of the target content element. By associating the cursor object with the determined target content element and rendering it, when the position of the target content element changes, the position of the cursor object can be determined by determining the position of the target content element in the content editor. This avoids the need to re-convert the viewport coordinate information and relative coordinate information of the cursor object to determine the position of the cursor object every time a content element changes in the content editor, thereby reducing energy loss when determining the position information of the cursor object. It also avoids errors in coordinate conversion, improves the accuracy of determining the position of the cursor object, and prevents the cursor object from being separated from the text when rendering the cursor object.

[0070] Please refer to Figure 4 , provides a flow chart of a cursor display method according to an embodiment of the present application. Figure 4 As shown, before listening for a click event in the first set of content elements rendered by the content editor, the cursor display method may further include the following step S100.

[0071] S100: If a content element exists in the content editor, add invisible target characters at the end of the paragraph to which the content element belongs to obtain a first content element set, and render the first content element set.

[0072] When content elements exist in the content editor, invisible target characters are added to the end position of the paragraph to which each content element belongs, thereby generating a first content element set, and rendering the set.

[0073] By adding an invisible target character at the end of the paragraph to which the content element belongs, it helps to better manage and render the content elements, and also helps to determine the target content element hit by the cursor object.

[0074] In this embodiment, when there are content elements in the content editor, the target content element hit by the cursor object in the content editor may be determined in the following manner.

[0075] Obtain any content element in the first content element set and determine it as the first content element. Then, obtain coordinate information of the first content element in the content editor, relative coordinate information of the cursor object in the content editor, and size information of the first content element, wherein the size information of the first content element includes a width value and a height value, the coordinate information of the first content element in the content editor includes a horizontal coordinate value and a vertical coordinate value, and the relative coordinate information includes a relative horizontal coordinate value and a relative vertical coordinate value.

[0076] Thus, the sum of the horizontal coordinate value of the first content element and the width value in the size information of the first content element is determined to be the horizontal offset of the first content element; and the sum of the vertical coordinate value of the first content element and the height value in the size information of the first content element is determined to be the vertical offset of the first content element.

[0077] Then, if the relative abscissa value of the relative coordinate information is greater than or equal to the abscissa value of the first content element and less than or equal to the horizontal offset of the first content element, and the relative ordinate value is greater than or equal to the ordinate value of the first content element and less than or equal to the vertical offset of the first content element, it is determined that the target content element exists in the first content element set. Then, based on the relative abscissa value, the abscissa value of the first content element, and the width of the first content element, the target content element hit by the click event is determined in the first content element set.

[0078] It is understandable that in this embodiment, the target character is a zero-width character, which usually does not occupy the display width. In the present application scheme, in order to determine whether the cursor object hits the target character of the first content element set, the target character can be given coordinate information in the content editor. Thus, when a click event is received, it can be determined whether the click event hits the target character in the first content element based on the coordinate information of the target character in the content editor, the relative coordinate information of the cursor object in the content editor, and the size information of the first content element.

[0079] If it is determined that the relationship between the abscissa value, ordinate value, horizontal offset, vertical offset, and the relative abscissa value and relative ordinate value of the first content element does not satisfy any of the above conditions, that is, if it is determined that the relative abscissa value is less than the abscissa value, or is greater than the horizontal offset, or the relative ordinate value is less than the ordinate value, or is greater than the vertical offset, then it is determined that the click event did not hit any content element. Furthermore, the target character of the content paragraph where the relative ordinate is located in the first content element set can be determined as the target content element hit by the click event in the first content element set.

[0080] For example, referring to the above embodiment, if the first content element is content element C and its coordinates are (120, 100), the horizontal coordinate value of the first content element is 120 and the vertical coordinate value is 100. If the size information shows a width value of 3 and a height value of 5, the horizontal offset of content element C is determined to be 123 and the vertical offset is 105. If the relative coordinate information of the click event in the content editor is determined to be (121, 101), the relative horizontal coordinate value is determined to be 121 and the relative vertical coordinate value is determined to be 101.

[0081] Thus, it can be determined that the relative abscissa value (121) is greater than the abscissa value (120) and less than the horizontal offset (123), and the relative ordinate value (101) is greater than the ordinate value (100) and less than the vertical offset (105). If it is determined that the target content element exists in the first content element set, the target content element hit by the click event is determined in the first content element set based on the relative abscissa value, the abscissa value of the first content element, and the width value of the first content element.

[0082] The horizontal offset and vertical offset are calculated using the relative coordinate information and the coordinate information of the first content element to determine whether the click event hits the target content element. If it is determined that the target content element does not exist in the content elements of the first content element set, the target character in the first content element set is determined to be the target content element. This effectively determines the target content element hit by the click event.

[0083] In this embodiment, when it is determined that the target content element exists in the first content element set, the method for determining the target content element hit by the click event in the first content element set may be:

[0084] First, the equal-division value of the width value of the first content element and the sum of the abscissa value of the first content element and the equal-division value are obtained. Then, if it is determined that the relative abscissa value is less than or equal to the sum of the abscissa value and the equal-division value, the first content element in the first content element set is determined to be the target content element hit by the click event. Alternatively, if it is determined that the relative abscissa value is greater than the sum of the abscissa value and the equal-division value, the content element subsequent to the first content element in the first content element set is determined to be the target content element hit by the click event.

[0085] The equal division value can be the width of each part when the width of the element is divided into two equal parts.

[0086] The subsequent content element may be the next content element that is adjacent to a certain content element in the horizontal direction.

[0087] For example, referring to the above description, the width value of content element C (the first content element) is 3, then the equal division value of the width value of content element C is determined to be 1.5, and then the relative horizontal coordinate value (121) is determined to be less than or equal to the sum of the horizontal coordinate value and the equal division value (121.5), then the content element C is determined to be the target content element hit by the click event.

[0088] In this embodiment, the target content element is determined using the equal-division value of the first content element, thereby achieving more accurate positioning of the cursor object.

[0089] Please refer to Figure 5 , provides a flow chart of a cursor display method according to an embodiment of the present application. Figure 5 As shown, before listening for a click event in the first set of content elements rendered by the content editor, the cursor display method may further include the following step S200.

[0090] S200: If no content element exists in the content editor, create invisible target characters in the content editor to obtain a first content element set, and render the first content element set.

[0091] In this embodiment, when no content element exists in the content editor, an invisible target character is added to the content editor to obtain a first content element set, and the first content element set is rendered, wherein the width of the target character is zero, and the target character can be a blank character with no width.

[0092] In this embodiment, by adding target characters in a content editor where no content elements exist, obtaining a first content element set, and rendering the first content element set, the existence of the first content element set can be ensured, thereby avoiding potential rendering errors or operational anomalies.

[0093] Furthermore, in this embodiment, if a click event is detected in a first set of content elements where no content elements exist, the target character is determined to be the target content element hit by the click event, and the target content element is then associated with the cursor object. This ensures that a user's click event on the content editor can still be captured even when no content elements exist.

[0094] Reference Figure 6 , which is a flowchart of a cursor display method according to an embodiment of the present application. The cursor display method may further include the following steps S300 to S500.

[0095] S300, when an element change event for a first content element set is monitored, performing an element change operation corresponding to the element change event in the content editor to obtain a second content element set;

[0096] S400: Acquire the target content element associated with the cursor object from the second content element set, and read second coordinate information of the target content element in the content editor based on the cursor object, where the second coordinate information is coordinate information of the target content element in the content editor after the element modification operation is performed;

[0097] S500: Display the rendered second content element set in the content editor, and display the rendered cursor object in the content editor based on the second coordinate information.

[0098] The element modification event may be an event of editing a content element of the first content element set, which may include deleting a content element, adding a content element, and the like.

[0099] The second coordinate information is the coordinate information of the target content element in the content editor after the element modification operation is performed.

[0100] In this embodiment, when an element change event is detected in the first content element set, the target content element associated with the cursor object is retrieved based on the element change event, the target content element is associated with the cursor object, and the second coordinate information of the target content element in the content editor is read based on the cursor object. The second content element set is rendered in the second content editor, and the cursor object is rendered at the position corresponding to the second coordinate information.

[0101] In an embodiment of the application, by associating the target element content with a cursor object, when an element change event occurs in a first set of content elements and the cursor position information changes due to the element change event, the cursor object's position information can be directly determined in the content editor because the cursor object is already associated with the target content element. This eliminates the need to re-acquire the cursor object's viewport coordinate information and then convert it into relevant coordinate information in the content editor to determine the target content element hit by the cursor object. When a large number of content element change events need to be performed on the content editor, the computing performance consumed in determining the target content element hit by the cursor object is reduced. Furthermore, the need for coordinate conversion is eliminated, avoiding conversion errors and improving the accuracy of cursor display.

[0102] Optionally, in this embodiment, the element change event includes an element deletion event.

[0103] The element change event can be for a preceding content element of the target content element. Based on this, before deleting the preceding content element, the first size information of the preceding content element is obtained. The preceding content element is deleted from the first content element set in the content editor, and the coordinate information of the remaining content elements in the first content element set is updated based on the first size information of the preceding element, thereby obtaining a second content element set.

[0104] For example, refer to Figure 7 , Figure 7The following diagram illustrates a scenario in which the preceding content element is deleted. In this embodiment, the cursor object is initially associated with content element C. Upon receiving a user-triggered element change event, the cursor determines that the content element to be deleted is content element B, and obtains the first size information for content element B. To determine that deleting content element B will not affect the vertical coordinates of the remaining content elements, the cursor determines the width value in the first size information and updates the horizontal coordinates of the remaining content elements accordingly.

[0105] For example, referring to the above description, if the width value of content element B is determined to be 4, the coordinates of content element C are (120, 100), content element D is (130, 100), content element E is (140, 100), content element F is (150, 100), and content element G is (160, 100). After the preceding content element C is deleted based on the element change event, the coordinate information of the remaining content elements in the first content element set is updated as follows: content element C is (116, 100), content element D is (126, 100), content element E is (136, 100), content element F is (146, 100), and content element G is (156, 100).

[0106] It is understandable that whether the vertical coordinate values of other content elements need to be updated can be determined based on whether the vertical coordinate values of the content elements have changed, and this application does not limit the specific update scenarios.

[0107] By updating the coordinate information of the remaining content elements when deleting the preceding content element of the target content element, a second content element set is obtained, thereby ensuring the correctness of the position information of each content element in the second content element set.

[0108] The element change event can be the deletion of a target content element. Based on this, before deleting the preceding content element, the first size information of the preceding content element is obtained. The preceding content element is deleted from the first content element set in the content editor, and the coordinate information of the remaining content elements in the first content element set is updated based on the first size information of the preceding element, thereby obtaining a second content element set.

[0109] For example, refer to Figure 8 , Figure 8The following is a schematic diagram of a scenario in which the target content element is deleted. In this embodiment, the target content element initially associated with the cursor object is content element C. When an element change event triggered by the user is received, it is determined that the content element to be deleted is content element C, and the second size information of content element C is obtained. After determining that the deletion of content element C does not affect the vertical coordinates of the remaining content elements, the width value in the second size information is determined, and the horizontal coordinates of the remaining content elements are updated according to the width value. For example, referring to the above description, if the width value of content element C is determined to be 3, the coordinates of content element D are (130, 100), the coordinates of content element E are (140, 100), the coordinates of content element F are (150, 100), and the coordinates of content element G are (160, 100). After deleting the preceding content element C based on the element change event, the coordinate information of the remaining content elements in the first content element set is updated as follows: the coordinates of content element D are (127, 100), the coordinates of content element E are (137, 100), the coordinates of content element F are (147, 100), and the coordinates of content element G are (157, 100).

[0110] By updating the coordinate information of the remaining content elements when deleting the target content element, a second content element set is obtained, thereby ensuring the correctness of the position information of each content element in the second content element set.

[0111] Furthermore, in an embodiment of the present application, after deleting the associated target content element, it is necessary to re-determine the target content element and associate the target content element with the cursor object. Optionally, a subsequent content element of the target content element can be obtained from the first content element set, and the subsequent content element can be determined as the target content element associated with the cursor object.

[0112] For example, referring to the above description, the target content element associated with the cursor object is content element C. After determining that content element C needs to be deleted, the subsequent element of content element C, that is, content element D, is determined as the target content element, and content element D is associated with the cursor object.

[0113] In this embodiment, when it is determined that the deleted content element is the target content element, the subsequent content element of the target content element is updated as the target content element, so that the target content element can be quickly determined.

[0114] The element change event can be the addition of a second content element to the content editor. Based on this, before adding the second content element, the third size information of the second content element is obtained. The second content element is added to the first content element set in the content editor, and the coordinate information of the remaining content elements after the second content element in the first content element set is updated based on the third size information, resulting in a second content element set.

[0115] For example, refer to Figure 9 , Figure 9 This is a schematic diagram of a scenario where a third content element is added. In this embodiment, the cursor object is initially associated with content element C. Upon receiving a user-triggered element change event, the element change event is determined to be the addition of a second content element M, and the third size information for the second content element M is obtained. Since the addition of the second content element M does not affect the vertical coordinates of the remaining content elements, the width value in the third size information is determined, and the horizontal coordinates of the remaining content elements are updated accordingly.

[0116] For example, referring to the above description, if the width value of content element B is determined to be 4, the coordinates of content element C are (120, 100), content element D is (130, 100), content element E is (140, 100), content element F is (150, 100), and content element G is (160, 100). Based on the element change event, a second content element M is added before the target content element, and its width value is 4. The coordinate information of the remaining content elements after the second content element M in the first content element set is updated to: the coordinates of content element C are (124, 100), the coordinates of content element D are (134, 100), the coordinates of content element E are (144, 100), the coordinates of content element F are (154, 100), and the coordinates of content element G are (164, 100).

[0117] It is understandable that in the embodiment of the present application, after the content element M is added, the position of the target content element associated with the cursor object changes, the coordinate information of the target content element is updated, and the cursor object reads the updated coordinate information.

[0118] By updating the coordinate information of the remaining content elements when adding the third content element, a second content element set is obtained, thereby ensuring the correctness of the position information of each content element in the second content element set.

[0119] The embodiment of the present application further provides a computer storage medium, which can store multiple program instructions, and the program instructions are suitable for being loaded and executed by a processor as described above. Figures 1-9 The method steps of the embodiment shown in the figure can be referred to in detail. Figures 1-9 The detailed description of the illustrated embodiment will not be repeated here.

[0120] Please refer to Figure 10 , is a schematic diagram of the structure of an electronic device provided in an embodiment of the present application. Figure 10As shown, the electronic device 1000 may include: at least one processor 1001, such as a CPU, at least one network interface 1004, a user interface 1003, a memory 1005, and at least one communication bus 1002. The communication bus 1002 is used to realize the connection and communication between these components. The network interface 1004 may optionally include a standard wired interface, a wireless interface (such as a WI-FI interface). The memory 1005 may be a high-speed RAM memory, or a non-volatile memory (non-volatile memory), such as at least one disk memory. The memory 1005 may optionally also be at least one storage device located away from the aforementioned processor 1001. As Figure 10 As shown, the memory 1005 as a computer storage medium may include an operating system, a network communication module, an input and output interface module, and a cursor display application.

[0121] exist Figure 10 In the electronic device 1000 shown, the user interface 1003 is mainly used to provide an input interface for the user and obtain data input by the user.

[0122] In one embodiment, the processor 1001 may be configured to call a cursor display program stored in the memory 1005 and specifically perform the following operations:

[0123] Listening for a click event in a first set of content elements rendered by a content editor, and determining viewport coordinate information of the click event in the first set of content elements;

[0124] Converting the viewport coordinate information into relative coordinate information in the content editor;

[0125] Determining, in the first set of content elements, a target content element hit by the click event based on the relative coordinate information, size information of each content element in the first set of content elements, and coordinate information of each content element in the content editor;

[0126] Associating the target content element with a cursor object, and reading first coordinate information of the target content element in the content editor based on the cursor object;

[0127] The cursor object is displayed rendered in the content editor based on the first coordinate information.

[0128] In an embodiment of the present application, after determining the target content element that the cursor object hits in the content editor, the cursor object is associated with the target content element, and the rendered cursor object is displayed in the content editor based on the first coordinate information of the target content element. By associating and rendering the cursor object with the determined target content element, when the position of the target content element changes, the position of the cursor object can be determined by determining the position of the target content element in the content editor. This avoids the need to re-convert the viewport coordinate information and relative coordinate information of the cursor object to determine the position of the cursor object every time a content element changes in the content editor, thereby reducing energy loss when determining the position information of the cursor object. It also avoids errors that exist during coordinate conversion, thereby improving the accuracy of determining the position of the cursor object.

[0129] Those skilled in the art will appreciate that all or part of the processes in the above-described method embodiments can be implemented by instructing related hardware through a computer program. The program can be stored in a computer-readable storage medium, and when executed, the program can include the processes in the above-described method embodiments. The storage medium can be a magnetic disk, an optical disk, a read-only memory (ROM), or a random access memory (RAM).

[0130] The above disclosure is only a preferred embodiment of the present application, and certainly cannot be used to limit the scope of rights of the present application. Therefore, equivalent changes made according to the claims of the present application are still within the scope covered by the present application.

Claims

1. A cursor display method, characterized in that: The method comprises: Listening for a click event in a first set of content elements rendered by a content editor, and determining viewport coordinate information of the click event in the first set of content elements; Converting the viewport coordinate information into relative coordinate information in the content editor; Determining, in the first set of content elements, a target content element hit by the click event based on the relative coordinate information, size information of each content element in the first set of content elements, and coordinate information of each content element in the content editor; Associating the target content element with a cursor object, and reading first coordinate information of the target content element in the content editor based on the cursor object; The cursor object is displayed rendered in the content editor based on the first coordinate information.

2. The method according to claim 1, characterized in that The step of monitoring a click event in the first set of content elements rendered by the content editor and determining viewport coordinate information of the click event in the first set of content elements further includes: If there are content elements in the content editor, invisible target characters are added at the end position of the paragraph to which the content elements belong to obtain a first content element set, and the first content element set is rendered.

3. The method according to claim 2, characterized in that The relative coordinate information includes a relative abscissa value and a relative ordinate value, and the coordinate information includes an abscissa value and a ordinate value; The determining, in the first set of content elements, a target content element hit by the click event based on the relative coordinate information, the size information of each content element in the first set of content elements, and the coordinate information of each content element in the content editor, includes: For each content element in the first content element set, obtaining a sum of a horizontal coordinate value of the first content element and a width value in the size information of the first content element, and determining the sum of the horizontal coordinate value and the width value as a horizontal offset, where the first content element is any content element in the first content element set; Obtaining a sum of a vertical coordinate value of the first content element and a height value in the size information of the first content element, and determining the sum of the vertical coordinate value and the height value as a vertical offset; If the relative abscissa value is greater than or equal to the abscissa value and less than or equal to the horizontal offset, and the relative ordinate value is greater than or equal to the ordinate value and less than or equal to the vertical offset, determine, in the first set of content elements, a target content element hit by the click event based on the relative abscissa value, the abscissa value of the first content element, and the width of the first content element; If the relative horizontal coordinate value is smaller than the horizontal coordinate value, or greater than the horizontal offset, or the relative vertical coordinate value is smaller than the vertical coordinate value, or greater than the vertical offset, then the target character of the content paragraph where the relative vertical coordinate is located in the first content element set is determined as the target content element hit by the click event in the first content element set.

4. The method according to claim 3, characterized in that The determining, in the first content element set, a target content element hit by the click event according to the relative horizontal coordinate value, the horizontal coordinate value of the first content element, and the width value of the first content element includes: Obtaining equally divided values of the width value, and obtaining the sum of the abscissa value of the first content element and the equally divided values; After determining that the relative horizontal coordinate value is less than or equal to the sum of the horizontal coordinate value and the equal division value, determining that the first content element in the first content element set is the target content element hit by the click event; When it is determined that the relative horizontal coordinate value is greater than the sum of the horizontal coordinate value and the equal division value, a subsequent content element of the first content element in the first content element set is determined as the target content element hit by the click event.

5. The method according to claim 1, wherein The step of monitoring a click event in the first set of content elements rendered by the content editor and determining viewport coordinate information of the click event in the first set of content elements further includes: If no content elements exist in the content editor, invisible target characters are created in the content editor to obtain a first content element set, and the first content element set is rendered.

6. The method according to claim 5, characterized in that The determining, in the first set of content elements, a target content element hit by the click event based on the relative coordinate information, the size information of each content element in the first set of content elements, and the coordinate information of each content element in the content editor, includes: If the content element does not exist in the content element set, the target character is determined in the first content element set as the target content element hit by the click event.

7. The method according to claim 1, characterized in that The displaying and rendering the cursor object in the content editor based on the first coordinate information includes: When it is determined that the target content element has a preceding content element, rendering the cursor object at a position corresponding to the first coordinate information according to the first style information of the preceding content element; When it is determined that the target content element does not have the preceding content element, the cursor object is rendered at the position corresponding to the first coordinate information according to the second style information of the target content element.

8. The method according to claim 1, characterized in that The displaying and rendering the cursor object in the content editor based on the first coordinate information includes: In different time ranges within a preset period, the cursor object is rendered in the position corresponding to the first coordinate information using a transparency corresponding to the time range at the current moment.

9. The method according to claim 1, characterized in that The method further comprises: When an element change event for the first content element set is monitored, performing an element change operation corresponding to the element change event in the content editor to obtain a second content element set; Acquire the target content element associated with the cursor object from the second content element set, and read second coordinate information of the target content element in the content editor based on the cursor object, where the second coordinate information is coordinate information of the target content element in the content editor after the element modification operation is performed; The rendered second content element set is displayed in the content editor, and the rendered cursor object is displayed in the content editor based on the second coordinate information.

10. The method according to claim 9, characterized in that The step of monitoring an element change event for the first set of content elements and executing an element change operation corresponding to the element change event in the content editor to obtain a second set of content elements includes: When the element change event is deleting a preceding content element of the target content element, obtaining first size information of the preceding content element; The preceding content element is deleted from the first content element set of the content editor, and the coordinate information of the remaining content elements in the first content element set is updated based on the first size information to obtain a second content element set.

11. The method according to claim 9, characterized in that The step of monitoring an element change event for the first set of content elements and executing an element change operation corresponding to the element change event in the content editor to obtain a second set of content elements includes: When the element change event is deletion of the target content element, obtaining second size information of the target content element; The target content element is deleted from the first content element set in the content editor, and the coordinate information of the remaining content elements in the first content element set is updated based on the second size information to obtain a second content element set.

12. The method according to claim 11, characterized in that The acquiring the target content element associated with the cursor object in the second content element set includes: A subsequent content element of the target content element is obtained from the first content element set, and the subsequent content element is determined as the target content element associated with the cursor object.

13. The method according to claim 9, characterized in that The step of monitoring an element change event for the first set of content elements and executing an element change operation corresponding to the element change event in the content editor to obtain a second set of content elements includes: When the element change event is a newly added second content element, obtaining third size information of the second content element; The third content element is added to the first content element set of the content editor, and the coordinate information of the remaining content elements after the second content element in the first content element set is updated based on the third size information to obtain a second content element set.

14. An electronic device, characterized in that: include: A processor and a memory; wherein the memory stores a computer program, and the computer program is suitable for being loaded by the processor and executing the steps of the method according to any one of claims 1 to 13.

15. A computer storage medium, characterized in that The computer storage medium stores a plurality of instructions, and the instructions are suitable for being loaded by a processor and executing the steps of the method according to any one of claims 1 to 13.

Images