Display method, electronic equipment and storage medium

Abstract

The invention provides a display method, electronic equipment and a storage medium, and the method comprises the steps: responding to the electronic equipment to receive an instruction of entering a target interface from a screen-off interface, and obtaining a plurality of strokes corresponding to characters of the screen-off interface; the electronic equipment enters the target interface from a screen-off interface, and part of the strokes are displayed in a window of the electronic equipment in a distributed mode. According to the method and the device, the process of moving the strokes of one or more characters is dynamically displayed on the window of the electronic equipment, so that the interaction experience between a user and the electronic equipment is improved.

Description

Technical Field

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

[0002] Text wallpaper is a wallpaper designed with text as the main element. It can be used as background images on various devices such as desktops and mobile phone screens. Text wallpapers usually contain motivational sentences, poems, lyrics, personal mottos or other text content, and create visual effects through beautiful layout and design. Existing text wallpaper display solutions usually only display text and text layout effects, and have poor interactivity with users. Summary of the invention

[0003] In a first aspect, an embodiment of the present application provides a display method, comprising: in response to an electronic device receiving an instruction to enter a target interface from a screen off interface, obtaining multiple strokes corresponding to text on the screen off interface; and the electronic device entering the target interface from the screen off interface, and some of the multiple strokes being distributed and displayed in a window of the electronic device.

[0004] In a second aspect, an embodiment of the present application provides an electronic device, including a memory, a processor, and a computer program stored in the memory, wherein the processor implements any of the methods described above when executing the computer program.

[0005] In a third aspect, an embodiment of the present application provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, any of the methods described above is implemented.

[0006] The above description is only an overview of the technical solution of the present application. In order to more clearly understand the technical means of the present application, it can be implemented in accordance with the contents of the specification. In order to make the above and other purposes, features and advantages of the present application more obvious and easy to understand, the specific implementation methods of the present application are listed below. BRIEF DESCRIPTION OF THE DRAWINGS

[0007] In the accompanying drawings, unless otherwise specified, the same reference numerals throughout the multiple drawings represent the same or similar parts or elements. These drawings are not necessarily drawn to scale. It should be understood that these drawings only depict some embodiments according to the present application and should not be regarded as limiting the scope of the present application.

[0008] Figure 1 A flow chart of a display method provided in an embodiment of the present application is shown;

[0009] Figure 2 A schematic diagram of a layer provided in an embodiment of the present application is shown;

[0010] Figure 3 A schematic diagram of a vector relationship for calculating an offset from a stroke center to the upper left corner of a text canvas provided in an embodiment of the present application is shown;

[0011] Figure 4 A schematic diagram showing a possible division of regions within and outside a window of an electronic device provided in an embodiment of the present application is shown;

[0012] Figure 5 A schematic diagram of a method for confirming a central trajectory point path provided in an embodiment of the present application is shown;

[0013] Figure 6 A schematic diagram of a stroke head and tail leakage effect provided in an embodiment of the present application is shown;

[0014] Figure 7 A schematic diagram of the normal effect of the beginning and end of a stroke provided in an embodiment of the present application is shown;

[0015] Figure 8 A schematic diagram of a copying effect provided in an embodiment of the present application is shown;

[0016] Fig. 9 A schematic diagram of a screen-off interface effect provided in an embodiment of the present application is shown;

[0017] Fig.10 A schematic diagram of a lock screen interface effect provided in an embodiment of the present application is shown;

[0018] Fig.11 A schematic diagram of a desktop interface effect provided in an embodiment of the present application is shown;

[0019] Fig.12 A schematic diagram showing the implementation steps of a display method provided in an embodiment of the present application is shown;

[0020] Fig.13 A block diagram of an electronic device used to implement an embodiment of the present application is shown. DETAILED DESCRIPTION

[0021] In the following, only some exemplary embodiments are briefly described. As those skilled in the art will appreciate, the described embodiments may be modified in various ways without departing from the concept or scope of the present application. Therefore, the drawings and descriptions are considered to be exemplary in nature and not restrictive.

[0022] To facilitate understanding of the technical solutions of the embodiments of the present application, the following describes the related technologies of the embodiments of the present application. The following related technologies can be combined with the technical solutions of the embodiments of the present application as optional solutions, and they all belong to the protection scope of the embodiments of the present application.

[0023] The present application provides a display method, an electronic device and a storage medium. The method can display different stroke animation effects in the window of the electronic device according to the current state and the target state to be switched when the electronic device switches states. These animation effects can optimize the interaction between the electronic device and the user and enhance the user's interactive experience.

[0024] The technical solution of the present application and how the technical solution of the present application solves the above-mentioned technical problems are described in detail below with specific embodiments. The several specific embodiments listed can be combined with each other, and the same or similar concepts or processes may not be repeated in some embodiments. The embodiments of the present application will be described in detail below with reference to the accompanying drawings.

[0025] The present application embodiment provides a display method. Figure 1 The flowchart of a display method according to an embodiment of the present application is shown, and the method may include:

[0026] Step 101, in response to the electronic device receiving an instruction to enter a target interface from a screen off interface, obtaining multiple strokes corresponding to the text on the screen off interface; and the electronic device enters the target interface from the screen off interface, and some of the multiple strokes are distributed and displayed in the window of the electronic device.

[0027] It can be understood that electronic devices are usually equipped with windows, which are areas of electronic devices that can provide visual display effects, and can also be regarded as windows or active windows (AA) that can provide various visual display effects for users. The window of an electronic device usually corresponds to the display screen of the electronic device and is slightly smaller than the glass cover plate above the display screen. This is because the circumferential edges of the glass cover plate and the display screen are affixed with ink (the so-called "black edges"). The types of electronic devices include but are not limited to: mobile phones, tablets, laptops, desktop computer monitors, televisions, game consoles, media players, smart watches, smart glasses, navigation devices, vehicle-mounted terminals, and e-book readers. The screen-off interface, also known as the all-weather display AOD (Always On Display), is an interface displayed in the window of the electronic device when the electronic device is in the screen-off state. The target interface can be a different display interface of the electronic device, and can be an interface displayed in the window of the electronic device when the electronic device is in a non-screen-off state, such as a lock screen interface or a desktop interface.

[0028] See also Fig. 9A schematic diagram of a screen-off interface effect is shown. In the screen-off interface, a window of an electronic device, such as a display screen of a mobile phone, can display one or more Chinese characters, such as "Love knows no bounds", in a working area on the display screen, and other areas on the display screen are non-working areas where nothing is displayed. The above-mentioned working area can refer to an area composed of light-emitting diodes (such as organic light-emitting diodes) to which a driving voltage is applied in the screen-off state, and the above-mentioned non-working area can refer to an area composed of light-emitting diodes that are not applied with a driving voltage in the screen-off state. Continue to refer to the attached Fig. 9 As shown, another working area of the display screen can also display, for example, switching buttons for the screen-off interface, the lock screen interface, and the desktop interface. The above-mentioned switching buttons can be displayed after the electronic device receives, for example, an instruction, and can turn off the display of another working area after no switching instruction is received within a preset time.

[0029] It should be noted that the method described in this application is not limited to the Chinese characters used in the exemplary description. Those skilled in the art can apply the method described in this application to other wallpapers with stroke-based characters to achieve the technical effects described in this application without any creative effort.

[0030] In response to the electronic device receiving an instruction to enter a target interface from the screen-off interface, obtain multiple strokes corresponding to the text of the screen-off interface. For example, when the text is a Chinese character, the strokes can be obtained based on an open-source Chinese character stroke decomposition library. The strokes can include stroke SVG (Scalable Vector Graphics), vector graphic data (strokes), central trajectory point data (medians) of the strokes, and / or the numbers of radicals (radStrokes). For example, hanzi-writer-date is an open-source Chinese character stroke decomposition library, and the json data of Chinese character strokes is stored in the data directory. The following is a part of the json data of the character "热": {"strokes": ["M 388 581Q 401 587 418 591Q 449 601 454 606Q 461 615 456 622Q449632"], "medians": [[[195, 561], [236, 560], [400, 611], [446, 615]], [[338, 795], [373, 767]]], "radStrokes": [6, 7, 8, 9]}. (Only for exemplary illustration and does not represent the entire json data of the character "热").

[0031] The following is an explanation of a part of the json data of the character "热":

[0032] strokes: stroke svg vector data, it is a string array, each string in the array represents a stroke (such as: horizontal, vertical, dot, left-falling stroke, right-falling stroke, horizontal hook, vertical hook, horizontal fold hook, etc.), it is in svg vector format. This data is used to draw strokes, M means moving the stroke to the point, for example, moving to (388, 581), Q includes a format of four coordinates to draw a second-order Bezier curve through a control point, and Q includes a format of two coordinates to draw a line segment. medians: stroke center trajectory point data, it is a 3D array, medians[i][j][k] represents the x (or y) coordinate of the jth trajectory point in the ith stroke, k can only be 0 or 1, 0 represents the x coordinate, and 1 represents the y coordinate. This data can be used to copy strokes. radStrokes: The number of radicals. The coordinates of the upper left corner of the text are (0, 0), and the coordinates of the lower right corner are (wordSize, wordHeight). The width and height of the canvas of each word in hanzi-writer-date are 1024*1024.

[0033] The electronic device enters the target interface from the screen-off interface, that is, the window of the electronic device will display the change process from the screen-off interface to the target interface. During the change process, some of the multiple strokes are distributed and displayed in the window of the electronic device, thereby showing the process of splitting the text into strokes, and the partial strokes of the text being split are displayed separately in the window of the electronic device. Among them, the stroke distribution display refers to the state in which there is no intersection or overlap between the strokes of the text, and they can be independently displayed in the form of strokes in the window of the electronic device. Among them, the window of an electronic device refers to the area on the electronic device that displays the content of a graphical user interface. The window can be a rectangular area for displaying the content of an application and allowing the user to interact with the application. The window system is a core component of a modern operating system, providing the basis for multi-tasking and a user-friendly interface.

[0034] It should be noted that, in the screen-off interface, when the translation parameters of each stroke in a character are (0, 0), the strokes will just form a character. When the electronic device is in the target interface state of the non-screen-off interface, the translation parameters of each stroke in a character have a certain offset based on (0, 0). Generally speaking, the center of each stroke in a character is not the center of the character, and there is generally some offset. In an embodiment of the present application, a stroke layer is created for each stroke. When there are multiple strokes, the number of stroke layers is the same as the number of strokes, and the stroke is drawn in the stroke layer corresponding to the stroke. For example, the json data of the word "hot" mentioned above in this article is used to draw the strokes.

[0035] In response to the electronic device receiving an instruction to enter a target interface from a screen-off interface, the process of adjusting the strokes of the text is displayed in the window of the electronic device, and the position of the strokes is moved, thereby obtaining a dynamic display effect of the strokes. The process of displaying the strokes of the text adjustment on the wallpaper of the electronic device can be achieved by adjusting multiple stroke layers. For example, each time the electronic device requests rendering, multiple stroke layers at the current position are synthesized in the drawing surface synthesizer and pushed into the frame buffer. When the next hardware refresh signal arrives, the synthesized frame at the front of the queue in the frame buffer is pushed to the screen for display, thereby displaying the process of multiple strokes moving on the electronic device.

[0036] In one embodiment, each time a new stroke is drawn, only the layer where the new stroke is located needs to be updated, and other layers remain unchanged. This can greatly improve rendering efficiency, avoid the need to re-render the entire canvas, and reduce performance issues and freezes.

[0037] According to an embodiment of the present application, in response to an electronic device receiving an instruction to enter a target interface from a screen off interface, multiple strokes corresponding to the text on the screen off interface are obtained; and the electronic device enters the target interface from the screen off interface, and some of the multiple strokes are distributed and displayed in the window of the electronic device, thereby dynamically displaying the process of moving one or more strokes of text on the window of the electronic device, thereby enhancing the interactive experience between the user and the electronic device.

[0038] In a possible implementation, distributing and displaying part of the multiple strokes in the window of the electronic device can be performed according to the following steps: dividing the window into multiple first areas and multiple second areas, the multiple second areas are between the multiple first areas, the multiple first areas are closer to the top or bottom of the window, and the size of the second area is smaller than the size of the first area; part of the multiple strokes are randomly distributed in the multiple first areas and the multiple second areas, and each first area and each second area displays a stroke.

[0039] In this possible implementation, the shapes of the first area and the second area can be set according to actual needs, for example, including but not limited to: square, rectangle and / or circle. Figure 4A possible schematic diagram of the division of regions inside and outside the window of an electronic device is shown, exemplarily dividing the window 40 of the electronic device into a plurality of first regions 401 and a plurality of second regions 402. For example, a plurality of first regions 401 may be arranged closer to the top or bottom of the window 40, and a plurality of second regions 402 may be arranged in the middle of the window 40, that is, a plurality of second regions 402 are arranged between the plurality of first regions 401. The size of the second region 402 is smaller than the size of the first region 401, and some of the plurality of strokes are randomly distributed in the plurality of first regions 401 and the plurality of second regions 402, and each first region 401 and each second region 402 displays a stroke. In this possible implementation, by setting the first region 401, the second region 402, and the size, i.e., the relative position relationship between the two, and the number of strokes displayed in the two, the arrangement of the stroke display positions can be realized, and the display position and effect of the strokes in the window of the electronic device can be optimized.

[0040] In a possible implementation, the stroke is displayed at the center position of the first area and the second area after being offset.

[0041] In this possible implementation, the strokes are displayed at the center of the first area 401 and the second area 402 after being offset, which can enhance the dispersion effect of the strokes and avoid the strokes being displayed too neatly, thereby simulating the explosion process more realistically.

[0042] In a possible implementation, the target interface is a lock screen interface, and the method may further execute the following steps: in response to the electronic device receiving an instruction to enter an off-screen interface from the lock screen interface, the electronic device enters the off-screen interface from the lock screen interface, and the multiple strokes resynthesize the text and display it on the off-screen interface.

[0043] In this possible implementation, the lock screen interface is an interface displayed in a window of the electronic device when the electronic device is in the lock screen state. In response to the electronic device receiving an instruction to enter the lock screen interface from the screen-off interface, the electronic device enters the lock screen interface from the screen-off interface. In this process, it includes obtaining the stroke screen-off position and the stroke lock screen position, wherein the stroke screen-off position represents the position of the stroke on the wallpaper of the electronic device in the screen-off state, and the stroke lock screen position represents the position of the stroke on the wallpaper of the electronic device and / or outside the electronic device in the lock screen state, and the stroke moves from the screen-off position to the stroke lock screen position. In addition, the multiple strokes are enlarged during the movement. While moving the multiple strokes from the stroke screen-off position to the stroke lock screen position, the multiple strokes are enlarged, so that in the process of changing from the screen-off to the lock screen, the process of the stroke changing from small to large is displayed, imitating the explosion effect.

[0044] See also Fig.10Schematic diagram of a lock screen interface effect. In the locked screen state, the window of the electronic device, such as the display screen of a mobile phone, dispersedly displays multiple strokes. The off-screen position of the stroke is the position of the stroke on the wallpaper of the electronic device in the off-screen state before the stroke moves, that is, the position under the combined text. For example Fig. 9 as shown, each Chinese character includes multiple strokes, and each stroke has Fig. 9 a specific position in the off-screen state as shown. The locked screen position of the stroke is the position of the stroke on the wallpaper of the electronic device and / or outside the electronic device after the stroke moves. It can be understood that outside the electronic device refers to the area beyond the display screen of the electronic device. For example, a surface larger than the size of the display screen area can be set for the wallpaper. The middle area of this surface has the same size as the wallpaper and the display screen and has a cache area corresponding to the display screen. The content of the surrounding area of this surface will not be displayed on the display screen. For example Fig.10 as shown, after the strokes of the Chinese characters "Love knows no bounds" are scattered, some strokes still remain displayed on the wallpaper in the locked screen state. These displayed strokes indicate some locked screen positions of the strokes, and the other part moves beyond the wallpaper range and thus is not displayed on the wallpaper in the locked screen state. These non-displayed strokes indicate other locked screen positions of the strokes. From the perspective of the display of the electronic device, the other part of the strokes moves from the edge of the wallpaper to the periphery and gradually fades out during the state transition. Or, another example can also preset the number of strokes that can be displayed on the wallpaper in the locked screen state. When the scattered strokes of the Chinese characters exceed this preset number, one or more strokes are selected from each Chinese character to meet the quantity requirement.

[0045] In another example, for example, a surface equal to the size of the display screen area can be set for the wallpaper, and all the strokes of the scattered Chinese characters can still remain displayed on the wallpaper in the locked screen state. It can be understood that when all the strokes need to be retained on the wallpaper for display, the size of the strokes can be smaller compared to the case where only some strokes are retained on the wallpaper for display.

[0046] In the embodiment of the present application, when the screen is off, the positions of all the strokes of the same text are the same, that is, the coordinates of (mPosX, mPosY) are the same, where (mPosX, mPosY) are the coordinates of the center of the stroke (for example Figure 3 taking the upper left corner of the center of the text canvas shown as the coordinate origin, with the right direction as the positive X-axis direction and the downward direction as the positive Y-axis direction). To obtain the off-screen position of the stroke, it can be achieved based on the following steps:

[0047] In order to calculate the position of the stroke when the screen is off, a floating point array pos can be created and initialized with the first two elements of the mIdleCenter array. mIdleCenter is an array containing two elements, namely the x coordinate and the y coordinate, which represents the center position of a row of words in the screen off state, such as "Love without boundaries". First, the position of the first word is calculated: mIdleCenter[0] is the x coordinate of the center, and mIdleWordWidth is the width of the word when the screen is off. By calculating mIdleWordWidth*(wordNum-1)*0.5f, the offset of the first word relative to the center position can be determined. wordNum represents the total number of words, and f represents the x position of the first word. Then, the position of the first word can be determined based on mIdleCenter[0] and the offset of the first word relative to the center position. Then, the position of the current word is calculated based on the word sequence number wordSeq (starting from 0). According to the x position of the first word, add wordSeq multiplied by the width of the word mIdleWordWidth to get the x coordinate of the current word, and assign it to the first element of the pos array. Returns the calculated floating point array pos, which contains the position coordinates of the current text.

[0048] It should be noted that wordNum is the number of characters; wordSeq is the sorting number of the characters in which the strokes are located (numbering starts from 0); mIdleCenter is the coordinate of the center of a row of characters when the screen is off, and the value in the embodiment of the present application is (mScreenWidth*0.5, mScreenHeight*0.15); mIdleWordWidth is the width of the text when the screen is off, which is calculated by mWordWidth*mScale (ie 1024*0.17).

[0049] Considering that there may be multiple usage scenarios for electronic devices, after the electronic device switches from the screen-off interface to the lock screen interface, it may also switch from the lock screen interface to the screen-off interface. Therefore, afterwards, in response to the electronic device receiving an instruction to enter the screen-off interface from the lock screen interface, the electronic device enters the screen-off interface from the lock screen interface, and the multiple strokes are resynthesized to the text and displayed on the screen-off interface. Based on the stroke lock screen position and the stroke screen-off position stored when the electronic device switches from the screen-off interface to the lock screen interface, the multiple strokes can be moved. For example, during the movement of the multiple strokes, the current positions of the multiple strokes are obtained by linear interpolation between the stroke lock screen position and the stroke screen-off position. The multiple strokes are reduced during the movement. Thus, the screen display of the electronic device shows a dynamic change effect of the explosion restoration process from the scattered display state of the strokes in the lock screen state to the state of the composed text in the screen-off state.

[0050] In a possible implementation, the target interface is the lock screen interface, and the method may further perform the following steps: in response to the electronic device receiving an instruction to enter the desktop interface from the lock screen interface, the electronic device enters the desktop interface from the lock screen interface, and displays a traced handwriting on the plurality of strokes, wherein the traced handwriting is gradually displayed from the stroke start point of the plurality of strokes until reaching the stroke end point of the plurality of strokes.

[0051] In this possible implementation, in response to the electronic device receiving an instruction to enter the lock screen interface from the screen-off interface, after the electronic device enters the lock screen interface, in response to the electronic device receiving an instruction to enter the desktop interface from the lock screen interface, the electronic device enters the desktop interface from the lock screen interface, and displays a traced handwriting on the plurality of strokes, so that during the process of switching the electronic device from the locked state to the desktop state, the traced effect of the plurality of strokes is dynamically displayed. Among them, the desktop interface is the interface displayed in the window of the electronic device in the desktop state. The traced handwriting is gradually displayed from the stroke start point of the plurality of strokes until reaching the stroke end point of the plurality of strokes. It should be noted that the traced effect is displayed according to the path of the central trajectory points of the strokes. For example, for the stroke "一", the tracing process is displayed according to the writing order of the stroke from left to right. Figure 8 A schematic diagram of a traced effect is shown. The tracing process will trace the strokes, and the color used to trace the strokes is different from the color used to draw the strokes, so as to display a dynamic traced effect. See Fig.11 A schematic diagram of an effect in the desktop state as shown. In the desktop state, the window of the electronic device, such as the display screen of a mobile phone, randomly displays the traced results of the plurality of completed strokes.

[0052] It can be understood that the desktop interface can also be referred to as the main interface, which is usually configured to display various application program icons or smart cards or quick bars and other contents.

[0053] Considering that when using the strokes and medians fields in the hanzi-writer-date character library to draw strokes, in order to facilitate the use of Canvas to draw strokes, it is necessary to convert the jason data into path data, and then call the drawPath method of Canvas to draw the path. In response to the electronic device switching from the lock screen state to the desktop state, according to the switching time from the lock screen state to the desktop state and the center track point path, the copying data of the multiple strokes are generated, wherein the copying data is configured to indicate that the electronic device is displayed on the multiple strokes during the process of switching from the lock screen state to the desktop state. In this possible implementation, the stroke parameters may include stroke SVG (Scalable Vector Graphics) vector data (strokes) and stroke center track point data. Therefore, converting the stroke parameters into a stroke path includes converting the stroke SVG vector data (strokes) and the stroke center track point data (medians) into a stroke path respectively. Then the stroke path corresponding to the stroke center track point data after conversion into the stroke path is used as the center track point path. Among them, the method of converting each string in strokes into a path is as follows:

[0054] To create a stroke path, define a method called createStrokePath, which is public and returns a Path object. It accepts a String parameter pathStr. Call the createPathFromPathData static method of the PathParser class, pass pathStr as a parameter, and return the generated Path object. The PathParser.createPathFromPathData method is used to parse the SVG path data string (pathStr) into a Path object.

[0055] In a possible implementation, the method may further execute the following steps: in response to the electronic device receiving an instruction to enter a lock screen interface from a desktop interface, the electronic device enters the lock screen interface from the desktop interface, and displays the copied handwriting on the multiple strokes, wherein the copied handwriting is gradually displayed from the starting points of the multiple strokes until it reaches the end points of the multiple strokes.

[0056] In this possible implementation, the current electronic device is in the desktop state, and its window displays the desktop interface. On this basis, in response to the instruction received by the electronic device to enter the lock screen interface from the desktop interface, the electronic device enters the lock screen interface from the desktop interface, and displays the traced handwriting on the multiple strokes. Thus, when the electronic device switches from the desktop state to the lock screen state, the traced effect of the multiple strokes is dynamically displayed. This traced effect is displayed according to the path of the central trajectory point. For example, for the stroke "一", the tracing process is displayed in the stroke writing order from left to right, which is consistent with the stroke tracing direction in the process of the electronic device switching from the lock screen state to the desktop state. In the embodiments of the present application, there is a stroke tracing special effect during the process from the lock screen to the desktop, and there is also a stroke tracing special effect during the process from the desktop to the lock screen, and the two are not simply inverse relationships (for example, one traces from the pen tip to the pen tail, and the other traces from the pen tail to the pen tip), but both are forward tracings (that is, both trace from the pen tip to the pen tail), that is, the traced handwriting gradually appears from the stroke starting point of the multiple strokes until it reaches the stroke ending point of the multiple strokes.

[0057] The following introduces a possible implementation method for stroke tracing. The principle is: intercept the central trajectory path segment through the getSegment method of PathMeasure, set the width of the trajectory (the strokeWidth of the Path) wide enough (set to 100 in the embodiments of the present application) so that it can cover the stroke in terms of width, and then use the SRC_IN mode to draw the trajectory segment on the stroke (in this mode, only the pixels in the intersecting area of the trajectory segment and the stroke are drawn). When the trajectory segment gradually becomes longer, the stroke tracing effect will be achieved.

[0058] For example, create a public method drawMedian that accepts a Canvas object as a parameter for drawing on the canvas; then, measure the path length and calculate the position of the starting point to determine from which position on the path to start drawing; calculate the position of the ending point to determine the ending position of the path drawing; set the blending mode of the brush mMedianPaint to SRC_IN, which means that only the part where the source color (i.e., the brush color) intersects with the target color (i.e., the background color) has a color that is the result of multiplying the Alpha channel values of the source color and the target color, and the transparent part of the source color will be transparently displayed as the target color (i.e., the background color); reset the temporary path mTempPath so that it can be reused; obtain a segment of the path from mMedianMeasures according to the starting and ending positions and draw it into mTempPath. The true parameter indicates whether the path needs to be optimized; draw the mTempPath on the Canvas using the mMedianPaint brush; reset the blending mode of the brush to the default value to cancel the previously set SRC_IN mode.

[0059] It should be noted that Canvas is the Canvas in the above stroke layer, mMedianMeasure is an object of the PathMeasure class, medianMeasures = new PathMeasure (mMedianPath, false), mMedianPath is the stroke center trajectory path created by the createMedianPath method in the method of converting each stroke in the above medians to Path; mStartProgress and mEndProgress are the copying progress of the beginning and end of the stroke respectively. In the process from the lock screen state (or the screen off state) to the desktop state, mStartProgress remains at 0, and mEndProgress changes from 0 to 1. In the process from the desktop state to the lock screen state (or the screen off state), mStartProgress changes from 0 to 1, and mEndProgress remains at 1; SRC_IN mode means that only the area where the path fragment intersects the stroke is drawn, and it is filled with the copied color; when xfermode is set to null (that is, transparency or blending effects are not considered), the effect is shown in the attached figure. Figure 8 , Figure 8 A schematic diagram of the copying effect is shown, in which thicker gray lines are used to copy the strokes.

[0060] In a possible implementation, the target interface is a desktop interface, and the method may further perform the following steps: displaying the copied handwriting on the multiple strokes, wherein the copied handwriting is gradually displayed from the stroke starting points of the multiple strokes until it reaches the stroke ending points of the multiple strokes; in response to the electronic device receiving an instruction to enter the screen-off interface from the desktop interface, the electronic device enters the screen-off interface from the desktop interface, the multiple strokes are resynthesized into the text and displayed on the screen-off interface, and the copied handwriting is displayed on the multiple strokes, wherein the copied handwriting is gradually displayed from the stroke starting points of the multiple strokes until it reaches the stroke ending points of the multiple strokes.

[0061] In this possible implementation, the process of adjusting the multiple strokes of the one or more characters that have been drawn can be displayed in the window of the electronic device, specifically including: the electronic device directly switches from the screen-off state to the desktop state, so it is necessary to adjust the multiple stroke layers that have been drawn, so that the electronic device can display the explosion effect and the copying effect. Among them, the explosion effect includes the change process from the stroke composition text state to the stroke dispersion display state. The copying effect includes the dynamic change process of depicting the strokes in the writing order of the strokes. The step of displaying the explosion effect can refer to the aforementioned process of the electronic device from the screen-off state to the locked screen state, and the step of displaying the copying effect can refer to the aforementioned process of the electronic device from the locked screen state to the desktop state. The display effect can refer to the aforementioned copying display effect, and the specific implementation method will not be repeated here.

[0062] It should be noted that in the embodiment of the present application, although the screen is switched from the off-screen interface to the desktop interface, the strokes all start to move from the off-screen position until they move to the target position, and when switching to the off-screen or lock-screen state, the target position can be the same, that is, the lock-screen position of the strokes is the same as the desktop position of the strokes. Therefore, the aforementioned method for calculating the off-screen position of the strokes and the lock-screen position of the strokes when switching from the off-screen interface to the lock-screen interface can be applied to the embodiment of the present application, and the specific calculation process is referred to the aforementioned content, which will not be repeated here.

[0063] In this possible implementation, the electronic device switches from the desktop state to the screen-off state, so it is necessary to adjust the multiple stroke layers that have been drawn so that the electronic device simultaneously displays the explosion restoration effect and the copying effect. Among them, the explosion restoration effect includes the change process from the scattered stroke display state to the re-formed text state. The copying effect includes the dynamic change process of drawing the strokes in the writing order of the strokes. The step of displaying the explosion restoration effect can refer to the process of the aforementioned electronic device from the locked screen state to the screen-off state, the step of displaying the copying effect can refer to the process of the aforementioned electronic device from the desktop state to the locked screen state, and the display effect of the copying data can refer to the display effect of the aforementioned copying data. In the embodiment of the present application, there are stroke copying special effects in the process from or screen-off to the desktop, and there are also stroke copying special effects in the process from the desktop to the screen-off, and the two are not simply inverse relationships (i.e., one is copied from the beginning of the pen to the end of the pen, and the other is copied from the end of the pen to the beginning of the pen), but are both positive copying (i.e., both are copied from the beginning of the pen to the end of the pen). The specific implementation method of copying can refer to the aforementioned copying implementation steps, which will not be repeated here.

[0064] Considering that the trajectory from the beginning to the end of the center trajectory point data is shorter than the trajectory from the beginning to the end of the stroke data, the problem of incomplete filling of the beginning and end of the stroke will occur during copying. Figure 6The schematic diagram of the effect of the beginning and end of a stroke leaking out is shown in the figure. The starting position of the vertical hook of the stroke shows the blank point that was not filled in during copying. In order to improve the leakage of the end of the stroke and make it present a complete copying effect, it is necessary to extend the beginning and end outwards a little bit respectively. The effect after adjustment can be seen in Figure 7 A schematic diagram of the normal effect of the beginning and end of a stroke is shown.

[0065] In a possible implementation, determining the center trajectory point path based on the stroke path can be performed according to the following steps: based on the stroke path, determining the initial starting point position and the initial end point position of the center trajectory point path, and determining the extension direction of the starting point and the extension direction of the end point; using the position corresponding to the starting point position after extending the specified length in the extension direction of the starting point as the updated starting point position of the path, and using the position corresponding to the end point position after extending the specified length in the extension direction of the end point as the updated end point position of the path; determining the center trajectory point path based on the updated starting point position, the updated end point position and the stroke path.

[0066] Figure 5 The area filled with orange in the middle represents the display effect of the stroke after drawing, the circle on the left represents the initial starting point position of the center track point path, the circle below represents the initial end point position of the center track point path, the direction of the arrow is the writing direction of the stroke (copying direction), the opposite direction of the arrow on the left represents the extension direction of the starting point, the direction of the arrow below represents the extension direction of the end point, the starting point of the left arrow is the updated starting point position of the path, and the end point of the arrow below is the updated end point position of the path. The center track point path is determined based on the updated starting point position, the updated end point position and the stroke path, thereby optimizing the copying effect of the stroke and avoiding the situation where there are unfilled blank points during copying.

[0067] In a possible implementation, after the electronic device switches from the screen-off interface or the lock screen interface to the desktop interface, the following steps can also be performed: enlarging and shrinking multiple strokes according to a given cycle, and controlling the multiple strokes to approach and move away from the center of the screen used to display the wallpaper according to the cycle.

[0068] In the process from the off screen to the lock screen state, each stroke is enlarged and translated to the target position, where the target position can be the center of the screen for displaying the wallpaper. In this possible implementation, after entering the desktop state, the strokes are periodically scaled and translated. When the translation parameters of each stroke are (0, 0), the strokes will just form a word. The following is the stroke translation and scaling method.

[0069] Define a method called transform, which is private and has a result return type of void (i.e., empty type). It accepts a Canvas object canvas as a parameter. Then call the getStrokeOffset method to calculate the offset of the stroke center relative to the upper left corner of the canvas and store the result in the offset array. Translate the origin of the canvas canvas to a new position by a distance of mPosX-offset[0] and mPosY-offset[1]. mPosX and mPosY are the coordinates of the stroke center, with the upper left corner of the center of the text canvas as the origin, while offset[0] and offset[1] are the offsets of the stroke center. The position of the stroke can be adjusted by subtracting the value in the offset array. Then you need to move the stroke to the canvas where the stroke exists (for example Figure 3 The rectangle on the text canvas where the stroke is shown is scaled, sx is the horizontal scaling ratio, sy is the vertical scaling ratio, sx is determined by multiplying the stroke scaling factor mScale by a desktop periodic scaling factor mAutoScale, and sx is determined by multiplying the stroke scaling factor mScale by a desktop periodic scaling factor to take the negative.

[0070] It should be noted that, among them, the getStrokeOffset method is used to calculate the offset from the stroke center to the upper left corner of the text canvas; (mPosX, mPosY) is the coordinate of the stroke center (with the upper left corner of the text canvas center as the coordinate origin, the right is the positive direction of the X axis, and the downward is the positive direction of the Y axis). During the animation process, its value is obtained by linear interpolation of the position when the screen is off and the target position when it explodes; mScale is the scaling factor of the stroke. In the embodiment of the present application, the value of mScale is 0.17 when the screen is off, and the values ​​are both 0.68 when the screen is locked and in the desktop state. During the animation process, mScale is interpolated between 0.17 and 0.68; mAutoScale is the scaling factor of the periodic scaling of the desktop state, which changes periodically between 0.85 and 1.15 over time; in the canvas.scale method, the negative sign for sy is to solve the problem of the drawn strokes being upside down.

[0071] like Figure 3 A schematic diagram of a vector relationship for calculating an offset from a stroke center to the upper left corner of a text canvas is shown, in which wordWidth represents the width of the text canvas and wordHeight represents the height of the text canvas. Figure 3 In the vector OS, it is the value required by the getStrokeOffset function. Therefore, the implementation of the getStrokeOffset function is as follows:

[0072] Define a private method called getStrokeOffset that returns a float array to store the calculated offset. Create a floating point array called ws that contains two elements: the original stroke center offset mPathOffset and the value adjusted by mAodRate. mPathOffset is an array containing path offsets, and mAodRate is a scaling factor. Next, declare a float array os of length 2, corresponding to the offsets in the x and y directions, to store the final offsets. Then calculate the horizontal offset and store it in os[0]. The calculation formula is: (mWordWidth*0.5f+ws[0]+mAutoTranslate[0])*mScale*mAutoScale. mWordWidth is the width of the word, ws[0] is the horizontal offset calculated previously, mAutoTranslate[0] is the horizontal offset of the automatic translation, and mScale and mAutoScale are scaling factors. Next, calculate the vertical offset and store it in os[1]. The calculation formula is: -(mWordHeight*0.5f+ws[1]+mAutoTranslate[1])*mScale*mAutoScale. mWordHeight is the height of the word, ws[1] is the vertical offset calculated previously, mAutoTranslate[1] is the vertical offset of the automatic translation, and mScale and mAutoScale are scaling factors. Note that there is a minus sign here, indicating a vertical reversal. Return the calculated offset array os.

[0073] Among them, mPathOffset is the offset of the original stroke center in the hanzi-writer-date database relative to the center of the canvas. The center position of the stroke can be obtained through the computeBounds method of the Path class; mAodRate is the coefficient of the wallpaper in the screen-off state. When the wallpaper changes from the screen-off state to the lock screen (or desktop) state, mAodRate gradually changes from 1 to 0. When the screen is locked (or desktop), ws takes the value of (0, 0), that is, the stroke is moved to the center of the text. In this way, when calculating the target position of the explosion, only the position change of the stroke center needs to be considered; mAutoTranslate is the translation coefficient of the stroke periodically approaching and moving away from the center of the screen.

[0074] In a possible implementation, before creating multiple stroke layers corresponding to the stroke, the following steps may be performed: creating a background layer corresponding to the stroke parameters; after creating multiple stroke layers corresponding to the stroke parameters, further comprising: creating a blur layer and a mask layer corresponding to the stroke parameters.

[0075] In this possible implementation, see Figure 2 The layer diagram shown is Figure 2 The background layer, mask layer, blur layer and stroke layer are shown. In Canvas, a Layer of a specified size and position can be created through the saveLayer method, and the image drawn by the layer can be flushed to the buffer through the restoreToCount method. In addition, a Canvas can be created through the beginRecording method of RenderNode, which is equivalent to creating an independent layer. The advantage of using layers is that images of different layers can be controlled independently without affecting each other, which makes it convenient to transform each layer independently. Therefore, the embodiment of the present application draws the layers in the order of background layer, stroke layer, blur layer and mask layer, that is, before creating multiple stroke layers corresponding to the stroke parameters, it also includes: creating a background layer corresponding to the stroke parameters; after creating multiple stroke layers corresponding to the stroke parameters, it also includes: creating a blur layer and a mask layer corresponding to the stroke parameters.

[0076] The following is an introduction to the drawing of each layer using a specific embodiment. The following is a function that requests rendering of a frame:

[0077] Define a method named requestRender, which is public and has a return type of void. Call the lockHardwareCanvas method of the mSurfaceHolder object to get a Canvas object canvas. mSurfaceHolder is a SurfaceHolder object, which is typically used to manage the drawing surface of SurfaceView. The lockHardwareCanvas method locks the canvas for drawing and returns a hardware-accelerated Canvas object. Call the draw method of the mRenderer object and pass canvas to it as a parameter. mRenderer is an object responsible for drawing content, and its draw method performs drawing operations on the passed-in Canvas. Call the unlockCanvasAndPost method of the mSurfaceHolder object to unlock the canvas and submit the drawing operation. The unlockCanvasAndPost method submits the drawn content to the Surface for display.

[0078] It should be noted that mSurfaceHolder is the native SurfaceHolder class of Android. When the wallpaper engine is created, the system will call back the onCreated method and pass the SurfaceHolder. We can save this SurfaceHolder object; Canvas is the native canvas class of Android. After defining the brush (Paint), various graphics can be drawn on the canvas; in SurfaceHolder, the Canvas object can be obtained through the lockCanvas and lockHardwareCanvas methods. The former is software rendering (CPU rendering) and the latter is hardware rendering (GPU rendering, more efficient); mRenderer is a custom WordRenderer renderer, which renders graphics through Canvas; after rendering, you need to call the unlockCanvasAndPost method of SurfaceHolder to unlock and submit the canvas content on the Surface, and write the image data into the Surface buffer.

[0079] The implementation of the draw method of WordRenderer is as follows, where mBgEffect is a custom background effect class (BackgroundEffect), and mMaskEffect is a custom mask effect class.

[0080] Define a method named draw, which is public, has a void return type, and accepts a Canvas object as a parameter. Call the drawBackground method of the mBgEffect object and pass the canvas to it as a parameter. mBgEffect is an object responsible for drawing background effects, and its drawBackground method draws the background layer on the passed Canvas. Call the drawMask method of the mMaskEffect object and pass the canvas to it as a parameter. mMaskEffect is an object responsible for drawing mask effects, and its drawMask method draws the mask layer on the passed Canvas.

[0081] The following is an introduction to the background layer. Draw a gradient background, which is implemented as follows:

[0082] Define a method called drawBackground, which is public, has a return type of void, and accepts a Canvas object and an int array bgColors as parameters. Create a new LinearGradient object and set it as the shader of mBgPaint. LinearGradient is a linear gradient shader. The parameters of the constructor are the x and y coordinates of the starting point, the x and y coordinates of the end point, the color array bgColors, the position array (null here, indicating that the colors are evenly distributed), and the shader's tiling mode Shader.TileMode.CLAMP (indicating that the edge color will extend to the border of the control). Continue the previous line, passing the color array bgColors, the position array (null here), and the tiling mode Shader.TileMode.CLAMP. Create a new Rect object bgRect, which represents the area of ​​the background rectangle. The parameters of the Rect constructor are the coordinates of the left, top, right, and bottom boundaries, respectively. Here, a rectangular area from (0, 0) to (mScreenWidth, mScreenHeight) is defined. Use the drawRect method of the canvas object to draw the background rectangle bgRect and fill it with mBgPaint. mBgPaint contains the LinearGradient shader set previously, so the drawn rectangle will display a linear gradient effect.

[0083] In this method, the input parameter canvas is the Canvas returned by the lockHardwareCanvas method of the above SurfaceHolder; bgColors is the input decimal color array, which represents the gradient color; mBgPaint is the background brush (the one starting with m indicates a member variable of the class, the same below), which is an object of the Paint class; mScreenWidth and mScreenHeight represent the screen width and height respectively (the same below).

[0084] The following is an introduction to the mask layer. The mask layer is used to mask the strokes at the top and bottom of the screen, making the stroke color of the status bar and navigation bar area transparent so that it appears as the background color. The mask layer can be implemented by following the steps below:

[0085] The function of the following method is to draw a mask layer. Define a method named drawMask, which accepts a Canvas object as a parameter. Set the Xfermode of mMaskPaint to PorterDuff.Mode.DST_OUT mode. This mode means that the target part will become transparent in the area where the source and target intersect. Save the state of the current canvas and create a new layer. The size of the new layer is from (0, 0) to (mScreenWidth, mScreenHeight), and it is drawn using mMaskPaint. Call the drawBlur method of the mBlurEffect object to draw the blur effect layer on the passed in canvas. Next, the top rectangle will be drawn. Use mMaskPaint to draw a rectangle with the upper left corner coordinates of (topRect.left, topRect.top) and the lower right corner coordinates of (topRect.right, topRect.bottom). Next, the bottom rectangle will be drawn. Use mMaskPaint to draw another rectangle with the upper left corner coordinates (bottomRect.left, bottomRect.top) and the lower right corner coordinates (bottomRect.right, bottomRect.bottom). Restore the canvas state saved before, that is, the state before saveLayerCount. This means that all drawing operations after saveLayer will be applied to this layer. Clear the Xfermode of mMaskPaint and restore the default drawing mode.

[0086] It should be noted that the input parameter canvas is the Canvas returned by the lockHardwareCanvas method of the above-mentioned SurfaceHolder; mMaskPaint is the mask brush (an object of the Paint class); DST_OUT will clear the pixels where SRC and DST intersect to transparent color, that is, set the top and bottom strokes to transparent color; mBlurEffect is a custom blur effect class.

[0087] The following is an introduction to the blur layer. When the wallpaper is in desktop state, it will become blurred, and when switching between lock screen and desktop state, the wallpaper will be enlarged and reduced. This operation is also implemented in the blur layer. The blur layer can be implemented as follows:

[0088] The following method is used to draw the blur layer. Define a method named drawBlur, which accepts a Canvas object as a parameter. Start recording drawing operations on mBlurRenderNode and return a Canvas object blurCanvas, which is used to draw on mBlurRenderNode. Determine whether the blur radius mBlurRadius is greater than 0. If mBlurRadius is greater than 0, create a blur effect blur with a blur radius of mBlurRadius and use Shader.TileMode.CLAMP mode. Apply the created blur effect blur to mBlurRenderNode. Otherwise (that is, mBlurRadius is not greater than 0). Cancel the blur effect on mBlurRenderNode. Call the scaleCanvas method to scale blurCanvas. Iterate over each stroke in mStrokeList. Draw each stroke on blurCanvas. End the forEach loop. End recording on mBlurRenderNode. Draw mBlurRenderNode on the passed canvas.

[0089] The following method is used to scale the canvas. Define a private method called scaleCanvas, which accepts a Canvas object as a parameter. Call the getScaleCenter method to get the scaling center point center. Scale the canvas with the center point as the center, and the scaling ratio is mTotalScale.

[0090] The following method is used to get the scaling center of the canvas. Define a private method named getScaleCenter, which has no parameters and returns a PointF object. Create a new PointF object center to store the center point coordinates. Calculate the x coordinate of the center point using the formula mScreenWidth*0.5f*mTotalScale. Calculate the y coordinate of the center point using the formula mScreenHeight*0.5f*mTotalScale. Return the calculated center point center.

[0091] It should be noted that the input parameter canvas is the Canvas in the mask layer; mBlurRenderNode is an object of the RenderNode class, which is a native class of Android and supports hardware accelerated rendering. When creating an mBlurRenderNode object, you need to call the setPosition method to set the rendering interval. The four parameters passed in the embodiment of the present application are: (0, 0, mScreenWidth, mScreenHeight); mBlurRadius is the blur radius of the canvas; mStrokeList is a stroke list that stores the data of all strokes, and each element in it is an object of a custom Stroke class; mTotalScale is the global scaling factor of the canvas when switching between the lock screen and desktop states. In the embodiment of the present application, when switching from the lock screen to the desktop state, mTotalScale gradually changes from 1 to 1.15.

[0092] The following is an introduction to the relevant content of the stroke layer. The embodiment of the present application creates a stroke layer for each stroke, which will perform translation, scaling, copying and other processing of the stroke, and the steps are as follows:

[0093] The following method is used to draw the text layer. Define a method named drawStroke, which accepts a Canvas object as a parameter. Save the current canvas state. After calling the save method, all drawing operations will be performed on a new layer until the restore method is called to restore the previous state. Call the transform method to translate and scale the canvas. This line of comments indicates that this method is responsible for the translation and scaling of the stroke. Start recording drawing operations on mStrokeRenderNode and return a Canvas object strokeCanvas for drawing on mStrokeRenderNode. Draw the path mStrokePath on strokeCanvas and use mStrokePaint to draw. This line of comments indicates that this is an operation to draw a stroke. Call the drawMedian method of the mMediaEffect object to apply a media effect on strokeCanvas. This line of comments indicates that this is an operation to copy a stroke. End recording on mStrokeRenderNode. Draw mStrokeRenderNode on the passed canvas. Restore to the previously saved canvas state. After calling the restore method, all drawing operations performed after the save method will be undone.

[0094] It should be noted that the input parameter canvas is the Canvas in the blurred layer, mStrokeRenderNode is an object of the RenderNode class, which is an Android native class that supports hardware accelerated rendering. When creating the mStrokeRenderNode object, it is necessary to call the setPosition method to set the rendering interval. The four parameters passed in the embodiment of the present application are: (0, 0, mWordWidth, mWordHeight), mWordWidth, mWordHeight are the original canvas width and height of the text, respectively, and the original canvas width and height of the text defined in the hanzi-writer-date character library are both 1024*1024; mStrokePath is the path data of the stroke loaded by the method of converting each string in the above strokes to Path; mStrokePaint is the brush object of the stroke. In order to make the stroke also have a gradient color, refer to the method of converting each string in the above strokes to Path, and set the shader of the brush to LinearGradient; mMediaEffect is a copying special effect; the transform method translates and scales the stroke.

[0095] In a possible implementation, the method may further perform the following steps: another part of the multiple strokes are randomly distributed in multiple virtual areas surrounding the window, each of the virtual areas displays at most one stroke or part of the virtual areas display multiple strokes.

[0096] In this possible implementation, see Figure 4 A possible schematic diagram of the division of regions within and outside the window of an electronic device is shown, where the window 40 (screen) of an electronic device such as a mobile phone is divided into Figure 4 In the grid area shown, the gray represents the inside of the mobile phone screen (i.e., the window 40 of the electronic device described in this article), and the white represents the enclosed area 42 outside the mobile phone window 40. The enclosed area 42 includes multiple virtual areas 420 described in this article. Each grid in the window 40, such as the first area 401 and the second area 402, has at most one stroke, and each grid in the enclosed area 42, such as the virtual area 420, can have one or more strokes. By designing the window 40 to be 9 grids or other appropriate grid numbers, it is realized that when the screen is locked, there is time on the top of the screen and UIs such as flashlight, camera, fingerprint, etc. on the bottom. This design avoids large-scale overlap of text and UI. There are more blank areas in the middle of the window 40, so there will be more distributed strokes.

[0097] Each time the screen is off, the explosion position of each stroke will be recalculated, that is, the stroke position and / or stroke displayed on the wallpaper in each lock screen state can be different. The explosion position is the position of the stroke displayed on the screen after the screen is switched to the lock screen state, that is, the stroke lock screen position. Based on this, obtaining the stroke lock screen position can be achieved based on the following steps:

[0098] ① At most 9 strokes are randomly selected each time to be displayed in the window, and the remaining strokes are displayed outside the window.

[0099] ② There are as many strokes as possible in the window (until all 9 grids are filled, then consider displaying outside the window), and the strokes outside the window are as dispersed as possible (until every space is filled, then consider random overlapping).

[0100] ③ The coordinates of the center of the grid are randomly offset to a certain range in all directions as the explosion position of the stroke (in this application, the random offset range of the x-axis is -80 to 80, and the random offset range of the y-axis is -250 to 250).

[0101] See also Fig.12 A schematic diagram of the implementation steps of a display method is shown, and a possible specific implementation method of the display method is described below.

[0102] First, load the path data of the strokes and center tracks, then calculate the stroke screen-off position and the stroke explosion position (i.e. the stroke lock screen position and stroke desktop position mentioned in this article), then draw the mask layer and blur layer to use the blur layer to control the overall scaling of the canvas, then draw the strokes, control the stroke translation and scaling, and finally draw the copying data to show the copying effect. This display method can integrate explosion and copying special effects: when entering the lock screen state from the screen-off state, the strokes of the text will explode to a random position; when entering the screen-off state from the lock screen state, the strokes will return to the position when the screen was in the screen-off state; when entering the desktop state from the lock screen state, the strokes will show a copying animation, the entire canvas will gradually enlarge to the target size, and the strokes will gradually blur, and the strokes will periodically enlarge and shrink as well as move away from and approach the center of the screen over time; when entering the lock screen state from the desktop state, the strokes will also perform a copying animation, the entire canvas will gradually shrink to the target size, and the strokes will gradually become clear; when entering the desktop state from the screen-off state, the explosion and copying special effects will be integrated; when entering the screen-off state from the desktop state, the explosion shrinkage and copying special effects will be integrated. The method can realize the fusion effect of stroke copying. There is a fusion stroke copying effect from the lock screen state to the desktop state (or from the desktop state to the lock screen state, from the screen off state to the desktop state, and from the desktop state to the screen off state). The copying from the lock screen state to the desktop state and from the desktop state to the lock screen state is not a simple inverse relationship (one is copying from the beginning of the pen to the end of the pen, and the other is copying from the end of the pen to the beginning of the pen), but both are copying from the beginning of the pen to the end of the pen. In the desktop state, automatic scaling and translation effects of the strokes can be realized to simulate the pulse beating effect. Each stroke moves closer to and farther away from the center of the screen while scaling, bringing a better interactive experience to the user.

[0103] Fig.13 FIG. 1 is a block diagram of an electronic device used to implement an embodiment of the present application. Fig.13 As shown, the electronic device includes: a memory 1301 and a processor 1302. The memory 1301 stores a computer program that can be run on the processor 1302. When the processor 1302 executes the computer program, the method in the above embodiment is implemented. The number of the memory 1301 and the processor 1302 can be one or more.

[0104] The electronic device also includes:

[0105] The communication interface 1303 is used to communicate with external devices and perform data exchange transmission.

[0106] If the memory 1301, the processor 1302 and the communication interface 1303 are implemented independently, the memory 1301, the processor 1302 and the communication interface 1303 can be connected to each other through a bus and communicate with each other. The bus can be an Industry Standard Architecture (ISA) bus, a Peripheral Component Interconnect (PCI) bus or an Extended Industry Standard Architecture (EISA) bus. The bus can be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Fig.13 Only one thick line is used in the diagram, but this does not mean that there is only one bus or only one type of bus.

[0107] Optionally, in a specific implementation, if the memory 1301, the processor 1302 and the communication interface 1303 are integrated on a chip, the memory 1301, the processor 1302 and the communication interface 1303 can communicate with each other through an internal interface.

[0108] An embodiment of the present application provides a computer-readable storage medium storing a computer program, which implements the method provided in the embodiment of the present application when the program is executed by a processor.

[0109] An embodiment of the present application provides a computer program product, wherein the computer program product includes a computer program, and when the computer program is executed by a processor, the method provided in the embodiment of the present application is implemented.

[0110] An embodiment of the present application also provides a chip, which includes a processor for calling and executing instructions stored in the memory from the memory, so that a communication device equipped with the chip executes the method provided by the embodiment of the present application.

[0111] An embodiment of the present application also provides a chip, including: an input interface, an output interface, a processor and a memory, wherein the input interface, the output interface, the processor and the memory are connected via an internal connection path, and the processor is used to execute the code in the memory. When the code is executed, the processor is used to execute the method provided in the embodiment of the application.

[0112] It should be understood that the processor may be a central processing unit (CPU), or other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), field programmable gate arrays (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. A general-purpose processor may be a microprocessor or any conventional processor, etc. It is worth noting that the processor may be a processor supporting the Advanced RISC Machines (ARM) architecture.

[0113] Further, optionally, the above-mentioned memory may include a read-only memory and a random access memory. The memory may be a volatile memory or a non-volatile memory, or may include both volatile and non-volatile memory. Among them, the non-volatile memory may include a read-only memory (ROM), a programmable read-only memory (PROM), an erasable programmable read-only memory (EPROM), an electrically erasable programmable read-only memory (EEPROM), or a flash memory. The volatile memory may include a random access memory (RAM), which is used as an external cache. By way of exemplary but not limiting description, many forms of RAM are available. For example, static random access memory (SRAM), dynamic random access memory (DRAM), synchronous dynamic random access memory (SDRAM), double data rate synchronous dynamic random access memory (DDR SDRAM), enhanced synchronous dynamic random access memory (ESDRAM), synchronous link dynamic random access memory (SLDRAM) and direct memory bus random access memory (DR RAM).

[0114] In the above embodiments, it can be implemented in whole or in part by software, hardware, firmware or any combination thereof. When implemented using software, it can be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the process or function according to the present application is generated in whole or in part. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer-readable storage medium, or transmitted from one computer-readable storage medium to another computer-readable storage medium.

[0115] In the description of this specification, the description with reference to the terms "one embodiment", "some embodiments", "example", "specific example", or "some examples" means that the specific features, structures, materials or characteristics described in conjunction with the embodiment or example are included in at least one embodiment or example of the present application. Moreover, the specific features, structures, materials or characteristics described may be combined in any one or more embodiments or examples in a suitable manner. In addition, those skilled in the art may combine and combine different embodiments or examples described in this specification and the features of different embodiments or examples, unless they are contradictory.

[0116] In addition, the terms "first" and "second" are used for descriptive purposes only and should not be understood as indicating or implying relative importance or implicitly indicating the number of technical features indicated. Therefore, a feature defined as "first" or "second" may explicitly or implicitly include at least one of the features. In the description of this application, the meaning of "plurality" is two or more, unless otherwise clearly and specifically defined.

[0117] Any process or method described in the flow chart or otherwise described herein can be understood as a module, fragment or portion of a code representing one or more executable instructions for implementing the steps of a specific logical function or process. And the scope of the preferred embodiment of the present application includes other implementations, in which the functions may not be performed in the order shown or discussed, including in a substantially simultaneous manner or in a reverse order according to the functions involved.

[0118] The logic and / or steps described in the flowchart or otherwise described herein, for example, can be considered as an ordered list of executable instructions for implementing logical functions, which can be specifically implemented in any computer-readable medium for use by an instruction execution system, device or apparatus (such as a computer-based system, a system including a processor, or other system that can fetch instructions from an instruction execution system, device or apparatus and execute instructions), or used in combination with these instruction execution systems, devices or apparatuses.

[0119] It should be understood that the various parts of the present application can be implemented with hardware, software, firmware or a combination thereof. In the above embodiments, multiple steps or methods can be implemented with software or firmware stored in a memory and executed by a suitable instruction execution system. All or part of the steps of the above embodiment method can be completed by instructing the relevant hardware through a program, which can be stored in a computer-readable storage medium, and when the program is executed, it includes one of the steps of the method embodiment or a combination thereof.

[0120] In addition, each functional unit in each embodiment of the present application can be integrated into a processing module, or each unit can exist physically separately, or two or more units can be integrated into one module. The above-mentioned integrated module can be implemented in the form of hardware or in the form of a software functional module. If the above-mentioned integrated module is implemented in the form of a software functional module and sold or used as an independent product, it can also be stored in a computer-readable storage medium. The storage medium can be a read-only memory, a disk or an optical disk, etc.

[0121] The above is only an exemplary embodiment of the present application, but the protection scope of the present application is not limited thereto. Any technician familiar with the technical field can easily think of various changes or substitutions within the technical scope recorded in the present application, which should be included in the protection scope of the present application. Therefore, the protection scope of the present application shall be based on the protection scope of the claims.

Claims

1. A display method, comprising: In response to the electronic device receiving an instruction to enter a target interface from an off-screen interface, acquiring a plurality of strokes corresponding to the text on the off-screen interface; as well as The electronic device enters the target interface from the screen-off interface, and some of the multiple strokes are distributed and displayed in the window of the electronic device.

2. The method according to claim 1, wherein: Distributing and displaying some of the plurality of strokes in a window of the electronic device includes: Dividing the viewing window into a plurality of first regions and a plurality of second regions, wherein the plurality of second regions are between the plurality of first regions, the plurality of first regions are closer to the top or the bottom of the viewing window, and the size of the second regions is smaller than the size of the first regions; Part of the plurality of strokes is randomly distributed in the plurality of first regions and the plurality of second regions, and each first region and each second region displays a stroke.

3. The method according to claim 2, wherein: The stroke is displayed at the center position of the first area and the second area after being offset.

4. The method according to claim 1, wherein the target interface is a lock screen interface, and the method further comprises: In response to the electronic device receiving an instruction to enter the screen off interface from the lock screen interface, the electronic device enters the screen off interface from the lock screen interface, and the multiple strokes are resynthesized into the text and displayed on the screen off interface.

5. The method according to claim 1, wherein: The target interface is a lock screen interface, and the method further includes: In response to the electronic device receiving an instruction to enter a desktop interface from a lock screen interface, the electronic device enters the desktop interface from the lock screen interface, and displays tracing handwriting on the multiple strokes, wherein the tracing handwriting is gradually displayed from the stroke starting points of the multiple strokes until it reaches the stroke ending points of the multiple strokes.

6. The method according to claim 5, further comprising: In response to the electronic device receiving an instruction to enter a lock screen interface from a desktop interface, the electronic device enters the lock screen interface from the desktop interface, and displays the copied handwriting on the multiple strokes, wherein the copied handwriting is gradually displayed from the stroke starting points of the multiple strokes until it reaches the stroke ending points of the multiple strokes.

7. The method according to claim 1, wherein: The target interface is a desktop interface, and the method further includes: Displaying the copied handwriting on the multiple strokes, wherein the copied handwriting is gradually displayed from the stroke starting points of the multiple strokes until reaching the stroke ending points of the multiple strokes; In response to the electronic device receiving an instruction to enter a screen-off interface from a desktop interface, the electronic device enters the screen-off interface from the desktop interface, the multiple strokes are resynthesized into the text and displayed on the screen-off interface, and the copied handwriting is displayed on the multiple strokes, wherein the copied handwriting is gradually displayed from the stroke starting points of the multiple strokes until reaching the stroke ending points of the multiple strokes.

8. The method according to claim 1, further comprising: Another part of the multiple strokes are randomly distributed in multiple virtual areas surrounding the window, each of the virtual areas displays at most one stroke or part of the virtual areas display multiple strokes.

9. An electronic device, comprising a memory, a processor, and a computer program stored in the memory, wherein the processor implements the method according to any one of claims 1 to 8 when executing the computer program.

10. A computer-readable storage medium, wherein a computer program is stored in the computer-readable storage medium, and when the computer program is executed by a processor, the method according to any one of claims 1 to 8 is implemented.

Images