Picture editing method, electronic equipment and readable storage medium

Abstract

The invention provides a picture editing method, electronic equipment and a readable storage medium, and relates to the technical field of picture editing. In the method, the electronic equipment can provide a photo frame function and a graffiti function; the electronic equipment can sequentially carry out photo frame adding operation and graffiti operation on the picture; in the graffiti process, when the drawing track corresponding to the graffiti operation passes through the picture (namely the region of the picture) in the photo frame, the electronic equipment generates a graffiti trace for the drawing track on the picture in the photo frame; when the drawing track corresponding to the graffiti operation passes through the photo frame, the electronic equipment does not generate the graffiti track from the drawing track on the photo frame any more, that is, the graffiti operation takes effect in the non-photo-frame area and does not take effect in the photo frame area, and the user experience is improved.

Description

Image editing method, electronic device and readable storage medium

[0001] This application claims priority to the Chinese patent application filed with the State Intellectual Property Office on November 22, 2022, with application number 202211467837.8 and application name “A picture editing method, electronic device and readable storage medium”, the entire contents of which are incorporated by reference into this application. Technical Field

[0002] The present application relates to the technical field of picture editing, and in particular to a picture editing method, an electronic device, and a readable storage medium. Background Art

[0003] Electronic devices can provide image editing functions, such as cropping, filtering, graffiti, mosaic, photo framing, etc. Generally, users can perform one or more of the above editing functions on images through electronic devices.

[0004] Currently, during the image editing process, the user's operation of adding a photo frame to the image will trigger the electronic device to generate a picture containing the photo frame; the user can continue to doodle on the picture containing the photo frame. When the doodle operation passes through the photo frame area, doodle traces corresponding to the doodle operation will be generated in the photo frame area, resulting in a poor user experience.

[0005] Summary of the Invention

[0006] The present application provides a picture editing method, an electronic device, and a readable storage medium. When a photo frame is first added to a picture and then graffiti is drawn, the electronic device generates graffiti traces corresponding to the graffiti operation on the screen inside the photo frame, but does not generate graffiti traces corresponding to the graffiti operation on the photo frame, thereby improving the user experience.

[0007] To achieve the above objectives, this application adopts the following technical solutions:

[0008] In a first aspect, the present application provides a method for editing an image, the method comprising:

[0009] The electronic device displays a first picture and a first control;

[0010] The electronic device receives a first operation, and the first operation acts on the first control;

[0011] In response to the first operation, the electronic device displays a second picture, where the second picture includes the content of the first picture and a picture frame surrounding the content of the first picture;

[0012] The electronic device receives a second operation, where the second operation is a first sliding operation of the user on the second picture, and the first sliding operation passes through an area of ​​the second picture where the content of the first picture is located and an area where the photo frame is located;

[0013] In response to the first sliding operation, the electronic device displays the first graffiti trace corresponding to the first sliding operation in the area where the content of the first picture is located, and does not display the graffiti trace corresponding to the first sliding operation in the area where the photo frame is located.

[0014] In this application, a photo frame can be added to the first picture to obtain a second picture, and then the second picture can be graffitied. When the graffiti operation passes through the area where the content of the first picture is located and the area where the photo frame is located in the second picture, the first graffiti trace corresponding to the first sliding operation is displayed in the area where the content of the first picture is located, and the graffiti trace corresponding to the first sliding operation is not displayed in the area where the photo frame is located; thereby improving the user experience.

[0015] As an implementation of the first aspect of the present application, before the electronic device receives the second operation, the method further includes:

[0016] The electronic device displays a second picture and a second control;

[0017] The electronic device receives a third operation, and the third operation acts on the second control.

[0018] In this application, before the electronic device generates graffiti traces on the second picture, it is necessary to trigger the electronic device to start the graffiti function through the second control. After the graffiti function is started, the sliding operation on the second picture can generate graffiti traces.

[0019] As another implementation of the first aspect of the present application, before the electronic device receives the third operation, the method further includes:

[0020] The electronic device receives a fourth operation, where the fourth operation is a second sliding operation of the user on the second picture, and the second sliding operation passes through an area of ​​the second picture where the content of the first picture is located and an area where the photo frame is located;

[0021] In response to the second sliding operation, the electronic device does not display the graffiti trace corresponding to the second sliding operation in the area where the content of the first picture is located, and does not display the graffiti trace corresponding to the second sliding operation in the area where the photo frame is located.

[0022] In the present application, before the electronic device triggers the electronic device to start the graffiti function through the second control, the sliding operation on the second picture will not generate graffiti traces.

[0023] As another implementation of the first aspect of the present application, after the electronic device displays a first graffiti trace corresponding to the first sliding operation in an area where the content of the first picture is located, and does not display the graffiti trace corresponding to the first sliding operation in an area where the photo frame is located, the method further includes:

[0024] The electronic device displays a first area of ​​a third picture, the third picture including the content of the first picture, a picture frame surrounding the content of the first picture, and a first graffiti mark in the area where the content of the first picture is located, the first area including a portion of the content of the first picture and a portion of the content of the picture frame;

[0025] The electronic device receives a fifth operation, where the fifth operation is a third sliding operation of the user on the third picture, and the third sliding operation passes through an area in the first area where a portion of the content of the first picture is located and an area in the photo frame where a portion of the content is located;

[0026] In response to the third sliding operation, the electronic device displays the second graffiti trace corresponding to the third sliding operation in the area where the partial content of the first picture is located in the first area, and does not display the graffiti trace corresponding to the third sliding operation in the area where the partial content of the photo frame is located in the first area.

[0027] In the present application, when an electronic device displays a partial area of ​​a picture, and the partial area includes a photo frame portion and a picture portion inside the photo frame, when a graffiti operation passes through the photo frame portion and the picture portion inside the photo frame, graffiti traces are generated on the picture portion inside the photo frame, and no graffiti traces are generated on the photo frame.

[0028] As another implementation of the first aspect of the present application, after the electronic device receives the third operation and before receiving the second operation, the method further includes:

[0029] The electronic device displays a first graffiti drawing layer on top of the second picture. The first graffiti drawing layer is used to display first graffiti traces. The first graffiti drawing layer and the area corresponding to the content of the first picture in the second picture have the same position and size.

[0030] In the present application, after the graffiti function is turned on in the electronic device, a graffiti drawing layer will be displayed on the upper layer of the currently displayed picture. The area corresponding to the graffiti drawing layer is the area of ​​the currently displayed picture with the frame removed. The graffiti drawing layer is used to display graffiti traces in real time during the graffiti process. Since the graffiti drawing layer removes the frame area for the content currently displayed in the preview area, graffiti operations in the frame area will not generate corresponding graffiti traces on the graffiti drawing layer. Graffiti operations in areas outside the frame will generate corresponding graffiti traces on the graffiti drawing layer. From the user's perspective, it is as if the graffiti is drawn on the picture below the graffiti drawing layer.

[0031] As another implementation of the first aspect of the present application, the first sliding operation includes: a first contact operation, a first move operation, and a first lift operation. In response to the first sliding operation, the electronic device displays a first graffiti trace corresponding to the first sliding operation in an area where content of the first picture is located, and does not display the graffiti trace corresponding to the first sliding operation in an area where the photo frame is located, including:

[0032] In response to the first movement operation, the electronic device displays a first graffiti trace corresponding to the first sliding operation in the first graffiti drawing layer, and does not display the graffiti trace corresponding to the first sliding operation in an area outside the first graffiti drawing layer.

[0033] In the present application, as the user moves on the display screen, the electronic device can generate graffiti traces in real time on the graffiti drawing layer, and no graffiti traces are generated in real time in areas outside the graffiti drawing layer.

[0034] As another implementation of the first aspect of the present application, the method further includes:

[0035] In response to the first lifting operation, the electronic device displays a third picture, where the third picture includes the content of the first picture, a frame surrounding the content of the first picture, and a first graffiti mark in an area where the content of the first picture is located;

[0036] The electronic device clears the first graffiti trace on the first graffiti drawing layer.

[0037] In this application, when the user lifts their finger from the display screen, the current graffiti operation ends and a new view is generated. In the new view, graffiti traces corresponding to the graffiti operation are generated in the area inside the photo frame, but no graffiti traces corresponding to the graffiti operation are generated on the photo frame. After the electronic device displays the new view, the graffiti traces on the graffiti drawing layer can be cleared.

[0038] As another implementation of the first aspect of the present application, after the electronic device displays the third picture, the method further includes:

[0039] The electronic device receives a sixth operation, where the sixth operation is used to trigger the electronic device to display the first area of ​​the third picture;

[0040] In response to the sixth operation, the electronic device displays the first area of ​​the third picture;

[0041] The electronic device displays a second graffiti drawing layer on the upper layer of the first area of ​​the third picture. The second graffiti drawing layer is used to display second graffiti traces. The second graffiti drawing layer and the area corresponding to the content of the first picture in the first area of ​​the third picture have the same position and size.

[0042] As another implementation of the first aspect of the present application, the method further includes:

[0043] The electronic device receives a third sliding operation, where the third sliding operation includes: a second contact operation, a second move operation, and a second lift operation;

[0044] In response to the second movement operation, the electronic device displays a second graffiti trace corresponding to the third sliding operation on the second graffiti drawing layer, and does not display the graffiti trace corresponding to the third sliding operation in an area outside the second graffiti drawing layer;

[0045] In response to the second lifting operation, the electronic device displays a first area of ​​a fourth picture, where the fourth picture includes the content of the first picture, a frame surrounding the content of the first picture, and first and second graffiti traces in the area where the content of the first picture is located;

[0046] The electronic device erases the second graffiti trace on the second graffiti drawing layer.

[0047] As another implementation of the first aspect of the present application, before the electronic device displays the second graffiti drawing layer on the upper layer of the first area of ​​the third image, the method further includes:

[0048] The electronic device obtains a first position of the first area on the third image;

[0049] The electronic device obtains a second position of the content of the first picture on the third picture;

[0050] The electronic device calculates an area where a first position of the first area on the third image overlaps with a second position of the content of the first image on the third image, and obtains a third position of the graffiti drawing layer on the third image;

[0051] The electronic device obtains a fourth position of the graffiti drawing layer on the first area according to the first position of the first area on the third image and the third position of the graffiti drawing layer on the third image;

[0052] The electronic device obtains a fifth position of the first area on the display screen of the electronic device;

[0053] The electronic device obtains a sixth position of the graffiti drawing layer on the display screen according to the fourth position of the graffiti drawing layer on the first area and the fifth position of the first area on the display screen.

[0054] As another implementation of the first aspect of the present application, the electronic device displays a second graffiti drawing layer on an upper layer of the first area of ​​the third image, including:

[0055] The electronic device displays the second graffiti drawing layer on an upper layer of the first area of ​​the third image according to the sixth position of the graffiti drawing layer on the display screen.

[0056] As another implementation of the first aspect of the present application, after obtaining the sixth position of the graffiti drawing layer on the display screen, the method further includes:

[0057] The electronic device obtains a seventh position of the graffiti drawing layer on the first picture according to the second position of the first picture on the third picture and the third position of the graffiti drawing layer on the third picture;

[0058] The electronic device obtains a first mapping relationship between coordinates on the display screen and coordinates on the first picture according to the seventh position of the graffiti drawing layer on the first picture and the sixth position of the graffiti drawing layer on the display screen;

[0059] The electronic device obtains a second mapping relationship between the coordinates on the first picture and the coordinates on the graffiti drawing layer according to the seventh position of the graffiti drawing layer on the first picture.

[0060] As another implementation of the first aspect of the present application, the second movement operation carries the first coordinates of the user's finger on the display screen. In response to the second movement operation, the electronic device displays a second graffiti trace corresponding to the third slide operation in the second graffiti drawing layer, and does not display the graffiti trace corresponding to the third slide operation in an area outside the second graffiti drawing layer, including:

[0061] In response to the second movement operation, the electronic device maps the first coordinate of the user's finger on the display screen to the second coordinate of the user's finger on the first picture according to the first mapping relationship;

[0062] The electronic device maps the second coordinate of the user's finger on the first image to a third coordinate of the user's finger on the graffiti drawing layer according to the second mapping relationship;

[0063] The electronic device displays a second graffiti trace corresponding to the third sliding operation on the second graffiti drawing layer according to the third coordinate of the user's finger on the graffiti drawing layer.

[0064] As another implementation of the first aspect of the present application, the method further includes:

[0065] The electronic device saves the unique identifier of the photo frame corresponding to the first control;

[0066] The electronic device saves the fourth coordinate of the first graffiti trace on the first image;

[0067] The electronic device saves the second coordinates of the second graffiti trace on the first picture, where the second coordinates of the second graffiti trace on the second picture include the second coordinates of the user's finger on the second picture in the third sliding operation.

[0068] As another implementation of the first aspect of the present application, in response to the second lifting operation, the electronic device displays a first area of ​​a fourth picture, including:

[0069] In response to the second lifting operation, the electronic device obtains an editing record of the first picture, where the editing record of the first picture includes: a unique identifier of the photo frame, a fourth coordinate of the first graffiti mark on the first picture, and a second coordinate of the second graffiti mark on the first picture;

[0070] The electronic device generates a first graffiti trace and a second graffiti trace on the first picture according to the fourth coordinate of the first graffiti trace on the first picture and the second coordinate of the second graffiti trace on the first picture;

[0071] The electronic device adds a photo frame to the first picture having the first graffiti trace and the second graffiti trace according to the unique identifier of the photo frame to obtain a fourth picture;

[0072] The electronic device displays the first area of ​​the fourth picture according to the position of the first area in the third picture.

[0073] In a second aspect, an electronic device is provided, comprising a processor, wherein the processor is configured to execute a computer program stored in a memory to implement any one of the methods of the first aspect of the present application.

[0074] In a third aspect, a chip system is provided, comprising a processor coupled to a memory, wherein the processor executes a computer program stored in the memory to implement any method of the first aspect of the present application.

[0075] In a fourth aspect, a computer-readable storage medium is provided, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by one or more processors, it implements any method of the first aspect of the present application.

[0076] In a fifth aspect, the present application provides a computer program product, which, when executed on a device, enables the device to execute any one of the methods in the first aspect of the present application.

[0077] It can be understood that the beneficial effects of the second to fifth aspects mentioned above can be found in the relevant description of the first aspect mentioned above, and will not be repeated here. BRIEF DESCRIPTION OF THE DRAWINGS

[0078] FIG1 is a schematic diagram of the hardware structure of an electronic device provided in an embodiment of the present application;

[0079] FIG2 is a schematic diagram of interface changes when adding a photo frame to a picture according to an embodiment of the present application;

[0080] FIG3 is a schematic diagram of an interface change when graffiti is performed on a view after adding a photo frame, provided by an embodiment of the present application;

[0081] FIG4 is another schematic diagram of interface changes when graffiti is performed on a view after adding a photo frame, provided by an embodiment of the present application;

[0082] FIG5 is a schematic diagram showing the relationship between various layers in the image editing method provided in an embodiment of the present application;

[0083] FIG6 is a schematic diagram showing the relationship between the layers in FIG5 and the layers related to the scenes shown in FIG2 to FIG4;

[0084] FIG7 is a schematic diagram showing the positional relationship between the view and the graffiti drawing layer in the interface shown in (d) of FIG3 ;

[0085] FIG8 shows the relationship between the layers displayed in the preview area during the graffiti process shown in FIG3 (d);

[0086] FIG9 shows the layer relationship when view 1-2 is generated after the graffiti is completed as shown in (d) in FIG3;

[0087] FIG10 is a schematic diagram showing the positional relationship between the view and the graffiti drawing layer in the interface shown in (d) of FIG4 ;

[0088] FIG11 shows the relationship between the layers displayed in the preview area during the graffiti process shown in FIG4(d);

[0089] FIG12 shows the layer relationship when views 1-3 are generated after the graffiti is completed as shown in FIG4(d);

[0090] FIG13 is a technical architecture diagram of a gallery application provided in an embodiment of the present application;

[0091] FIG14 is a technical architecture diagram of the graffiti module in the gallery application shown in FIG13 according to an embodiment of the present application;

[0092] FIG15 is a timing diagram of the image editing method provided in an embodiment of the present application;

[0093] FIG16 is a diagram illustrating the positional relationship between the area corresponding to view 1-2, the area corresponding to the content of view 1-0, the area corresponding to the display screen, the area corresponding to the content displayed in the preview area, and the area corresponding to the graffiti drawing layer in the interface shown in FIG4(c) according to an embodiment of the present application;

[0094] FIG17 is a schematic diagram of a process for calculating the position of the area where the graffiti drawing layer is located on the display screen, a first mapping relationship, and a second mapping relationship according to an embodiment of the present application;

[0095] FIG18 is a schematic diagram of a process for calculating the position of the area where the graffiti drawing layer is located on the display screen, the first mapping relationship, and the second mapping relationship, taking the interface shown in (c) of FIG4 as an example, provided by an embodiment of the present application;

[0096] FIG19 is a schematic diagram of a process for calculating the position of the area where the graffiti drawing layer is located on the display screen, the first mapping relationship, and the second mapping relationship, taking the interface shown in FIG3(c) as an example, provided by an embodiment of the present application;

[0097] FIG20 is a timing diagram of the graffiti module according to an embodiment of the present application displaying graffiti traces;

[0098] FIG21 is a diagram showing the effect of drawing graffiti traces using another image editing method provided by an embodiment of the present application;

[0099] FIG22 is a technical architecture diagram of an editing module provided in an embodiment of the present application;

[0100] Figure 23 is a flow chart of a picture editing method provided in an embodiment of the present application. DETAILED DESCRIPTION

[0101] In the following description, specific details such as specific system structures and technologies are provided for illustration rather than limitation to facilitate a thorough understanding of the embodiments of the present application. However, it should be clear to those skilled in the art that the present application may also be implemented in other embodiments without these specific details.

[0102] It should be understood that when used in the present specification and the appended claims, the term "comprising" indicates the presence of described features, integers, steps, operations, elements and / or components, but does not preclude the presence or addition of one or more other features, integers, steps, operations, elements, components and / or collections thereof.

[0103] It should also be understood that in the embodiments of this application, "one or more" refers to one, two, or more than two; "and / or" describes the relationship between associated objects, indicating that three relationships can exist; for example, A and / or B can mean: A exists alone, A and B exist simultaneously, and B exists alone, where A and B can be singular or plural. The character " / " generally indicates that the associated objects are in an "or" relationship.

[0104] In addition, in the description of this application specification and the appended claims, the terms "first", "second", "third", "fourth", etc. are only used to distinguish the descriptions and cannot be understood as indicating or implying relative importance.

[0105] References to "one embodiment" or "some embodiments" in this specification mean that a particular feature, structure, or characteristic described in conjunction with that embodiment is included in one or more embodiments of the present application. Thus, phrases such as "in one embodiment," "in some embodiments," "in other embodiments," and "in other embodiments" appearing in various places in this specification do not necessarily refer to the same embodiment, but rather mean "one or more but not all embodiments," unless otherwise specifically emphasized. The terms "including," "comprising," "having," and variations thereof all mean "including but not limited to," unless otherwise specifically emphasized.

[0106] The image editing method provided in the embodiments of the present application can be applied to electronic devices such as large-screen devices, tablet computers, mobile phones, laptop computers, ultra-mobile personal computers (UMPCs), netbooks, and personal digital assistants (PDAs). The embodiments of the present application do not limit the specific type of electronic device.

[0107] Figure 1 shows a schematic diagram of the structure of an electronic device. The electronic device 100 may include a processor 110, an external memory interface 120, an internal memory 121, a sensor module 180, a camera 193, and a display screen 194. The sensor module 180 may include a pressure sensor 180A, a touch sensor 180K, etc.

[0108] It should be understood that the structures illustrated in the embodiments of the present application do not constitute a specific limitation on the electronic device 100. In other embodiments of the present application, the electronic device 100 may include more or fewer components than shown, or may combine or separate certain components, or arrange the components differently. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.

[0109] The processor 110 may include one or more processing units. For example, the processor 110 may include an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, a memory, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU). The different processing units may be independent devices or integrated into one or more processors.

[0110] The controller may be the nerve center and command center of the electronic device 100. The controller may generate an operation control signal according to the instruction operation code and the timing signal to complete the control of fetching and executing instructions.

[0111] Processor 110 may also include a memory for storing instructions and data. In some embodiments, the memory in processor 110 is a cache memory. This memory can store instructions or data that have just been used or are being recycled by processor 110. If processor 110 needs to use the same instruction or data again, it can directly retrieve it from the memory. This avoids duplicate accesses, reduces processor 110 latency, and thus improves system efficiency.

[0112] The external memory interface 120 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 100. The external memory card communicates with the processor 110 via the external memory interface 120 to implement data storage functions. For example, files such as music, videos, and pictures can be stored on the external memory card.

[0113] The internal memory 121 can be used to store computer executable program code, which includes instructions. The processor 110 executes various functional applications and data processing of the electronic device 100 by running the instructions stored in the internal memory 121. The internal memory 121 may include a program storage area and a data storage area. The program storage area may store an operating system and at least one application required for a function (such as a sound playback function, an image playback function, etc.).

[0114] In addition, the internal memory 121 may include a high-speed random access memory and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, a universal flash storage (UFS), etc.

[0115] The pressure sensor 180A is used to sense pressure signals and convert them into electrical signals. In some embodiments, the pressure sensor 180A can be provided on the display screen 194. There are many types of pressure sensors 180A, such as resistive pressure sensors, inductive pressure sensors, capacitive pressure sensors, etc. A capacitive pressure sensor can be a device comprising at least two parallel plates having a conductive material. When a force acts on the pressure sensor 180A, the capacitance between the electrodes changes. The electronic device 100 determines the intensity of the pressure based on the change in capacitance. When a touch operation is applied to the display screen 194, the electronic device 100 detects the intensity of the touch operation based on the pressure sensor 180A. The electronic device 100 can also calculate the position of the touch based on the detection signal of the pressure sensor 180A.

[0116] The touch sensor 180K is also called a "touch panel." The touch sensor 180K can be disposed on the display screen 194. The touch sensor 180K and the display screen 194 form a touch screen, also called a "touch screen." The touch sensor 180K is used to detect touch operations applied thereto or in the vicinity thereof. The touch sensor can transmit the detected touch operations to the application processor to determine the type of touch event. Visual output related to the touch operations can be provided via the display screen 194. In other embodiments, the touch sensor 180K can also be disposed on the surface of the electronic device 100, in a location different from that of the display screen 194.

[0117] Electronic device 100 implements display functionality through a GPU, display screen 194, and an application processor. A GPU is a microprocessor for image processing that connects display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. Processor 110 may include one or more GPUs that execute program instructions to generate or modify display information.

[0118] The display screen 194 is used to display images, videos, etc. In some embodiments, the electronic device 100 may include 1 or N display screens 194 , where N is a positive integer greater than 1.

[0119] The camera 193 is used to capture still images or videos. In some embodiments, the electronic device 100 may include 1 or N cameras 193, where N is a positive integer greater than 1.

[0120] The embodiments of the present application do not particularly limit the specific structure of the execution subject of the image editing method. As long as the code recording the image editing method of the embodiments of the present application can be executed to perform processing according to the image editing method provided by the embodiments of the present application. For example, the execution subject of the image editing method provided by the embodiments of the present application can be a functional module in an electronic device that can call and execute a program, or a processing device used in an electronic device, such as a chip.

[0121] Before describing the embodiments of this application, we first describe the definition of views used later in the embodiments of this application. An image view is the result of overlaying the image's content with the editing effects corresponding to the editing operation. This overlaid content is not yet saved as a true image in the gallery; it is only used to display a preview of the effects of each editing operation performed on the image during the image editing process.

[0122] For example, when an electronic device is editing an image, before the first editing operation is performed, the preview area of ​​the electronic device's interface will display the original view of the image. The content of this original view is the image itself. During the first editing operation, the editing effect of the first editing operation is presented on top of the original view. After the first editing operation is completed, the electronic device generates a post-first editing view based on the image content and the editing effect of the first editing operation. This post-first editing view is used to preview the effect of the first editing operation on the image.

[0123] Before any editing operation other than the first one, the preview area of ​​the electronic device's interface displays the view after the previous editing operation. During any editing operation other than the first one, the electronic device presents the editing effect of the current editing operation on top of the view after the previous editing operation. After the current editing operation is completed, the electronic device generates a view after the current editing operation based on the image content and the editing effects of all the current editing operations. The view after the current editing operation is used to preview the effects of all the current editing operations on the image.

[0124] After the last editing operation is completed, the edited image can be generated according to the view after the last editing operation, and the edited image can be saved in the gallery as a real image.

[0125] From the above content, it can be understood that during the editing process of a picture, the view is a presentation of the preview effect of the editing process of the picture. When the preview area of ​​the electronic device displays the view, it can display the view itself or a thumbnail of the view. The embodiment of the present application does not limit this.

[0126] Electronic devices may provide image editing functions, such as cropping, filtering, graffiti, mosaics, photo frames, etc. Users may perform one or more of the above editing functions on images through the electronic device.

[0127] As an example, referring to (a) in Figure 2, the user selects a picture (for example, picture 1) in the gallery and clicks on the editing control on the preview interface of the picture. After the electronic device receives the click operation on the editing control, it displays the main interface of the picture editing application shown in (b) in Figure 2, which is the interface corresponding to the cropping function. The view displayed in the preview area of ​​the interface corresponding to the cropping function is the original view 1-0 of picture 1 (picture 1 itself) and the cropping frame (a discontinuous bold frame encircling view 1-0). The user clicks on control 1 on the interface shown in (b) in Figure 2. After the electronic device receives the click operation on control 1, it displays the interface shown in (c) in Figure 2. View 1-0 is also displayed in the interface shown in (c) in Figure 2. The interface shown in (c) in Figure 2 also displays controls corresponding to multiple editing functions, such as annotation, graffiti, mosaic, watermark, photo frame, cropping, filter, adjustment, etc. The user clicks the photo frame control in the interface shown in (c) of FIG2 . After the electronic device receives the click operation of the photo frame control, it displays the interface corresponding to the photo frame function shown in (d) of FIG2 . The interface still displays view 1 - 0 of picture 1 .

[0128] It should be noted that (a) to (c) in FIG. 2 are merely examples of triggering the electronic device to display an interface corresponding to the photo frame function, and do not impose any limitations on the present application.

[0129] 2 (d) shows an interface corresponding to the photo frame function, in which there is a no-photo-frame control and controls corresponding to multiple photo frame types. The user can select a photo frame type and add it to the original view during the photo frame operation.

[0130] When the user first adds a photo frame to picture 1, the operation of adding a photo frame acts on the original view 1-0; when the user performs other operations (for example, cropping operations) on picture 1 and then adds a photo frame, the operation of adding a photo frame acts on the view obtained after the other operations are performed on picture 1 (for example, the cropped view).

[0131] The user continues to click on the control corresponding to a photo frame type (for example, photo frame A) in the interface shown in (d) in Figure 2. After the electronic device receives the selection operation of photo frame A, it displays the interface shown in (a) in Figure 3, in which the content displayed is view 1-0 and photo frame A.

[0132] After adding photo frame A to view 1-0, the user clicks control 2 on the interface shown in Figure 3 (a). Upon receiving the click, the electronic device displays the interface shown in Figure 3 (b), which shows view 1-1. View 1-1 is the view generated after adding photo frame A to view 1-0. From the user's perspective, Figures 3 (a) and 3 (b) display the same content.

[0133] The interface shown in FIG3(b) also includes controls corresponding to multiple editing functions, such as annotation, graffiti, mosaic, watermark, frame, crop, filter, adjustment, etc. The user clicks the graffiti control on this interface to graffiti on view 1-1. After the electronic device receives the operation of the graffiti control on the interface shown in FIG3(b), it displays the interface shown in FIG3(c).

[0134] The interface shown in (c) in Figure 3 is the interface corresponding to the graffiti function, which includes graffiti line type controls, such as free lines, arrow lines, straight lines, square boxes, and circular boxes. Users can choose any graffiti line type according to their actual needs.

[0135] The interface corresponding to the graffiti function shown in (c) of FIG3 may also include graffiti color, graffiti line thickness, and eraser controls.

[0136] The graffiti feature has default settings for the initial graffiti color, line type, and thickness. Users can use these default initial graffiti parameters to draw on the preview area. Users can also change the color, line thickness, and line type of their graffiti to suit their needs. They can also use the eraser to erase existing graffiti.

[0137] Refer to (d) in Figure 3, which shows the content displayed in the preview area after the user enters a doodle operation in the preview area. The user's finger doodle operation passes through the area of ​​the image inside the photo frame and also passes through the area corresponding to the photo frame (for example, the dotted line with an arrow in the preview area indicates the direction of the user's finger sliding). Accordingly, a doodle trace corresponding to the doodle operation is generated in the area of ​​the image inside the photo frame (for example, black doodle trace 1). However, no doodle trace corresponding to the doodle operation is generated in the area corresponding to the photo frame (for example, no black doodle trace is generated at the location corresponding to the dotted line).

[0138] After the graffiti operation is completed, the content displayed in the preview area of ​​the interface shown in (d) in Figure 3 is view 1-2, that is, a view with graffiti traces 1 shown in (d) in Figure 3 added to view 1-1, which can also be understood as a view with graffiti traces 1 and photo frame A added to view 1-0.

[0139] The graffiti function may also provide a zoom display function, that is, to zoom in on a currently displayed view and display a partial area of ​​the currently displayed view.

[0140] Referring to the gesture operation on the interface shown in Figure 4 (a), the user can trigger the electronic device to zoom in on the currently displayed view in the preview area by moving two fingers apart in the preview area, resulting in the interface shown in Figure 4 (b). The preview area in this interface displays a partial area of ​​view 1-2.

[0141] 4( b ), the user may trigger the movement of view 1 - 2 displayed in the preview area of ​​the electronic device by sliding two fingers in the preview area, resulting in the interface shown in FIG. 4( c ).

[0142] The user can continue to draw graffiti on the interface shown in (c) of Figure 4. Referring to the graffiti operation shown in (d) of Figure 4 (for example, the dotted line with an arrow marked in the preview area is the sliding direction of the user's finger), when the graffiti operation passes through the picture area within the photo frame in the local area of ​​the currently displayed view 1-2, a corresponding graffiti trace (for example, black graffiti trace 2) is generated. When the graffiti operation passes through the photo frame area in the local area of ​​the currently displayed view 1-2, no corresponding graffiti trace is generated (for example, no black graffiti trace is generated at the position corresponding to the dotted line).

[0143] After the graffiti is finished, the graffiti interface will display a partial area of ​​View 1-3. View 1-3 is a view with graffiti trace 2 added to View 1-2. It can also be understood as a view with graffiti trace 1 and graffiti trace 2 added to View 1-1, or a view with graffiti trace 1, graffiti trace 2, and photo frame A added to View 1-0.

[0144] It can be understood that in the image editing method provided in the embodiment of the present application, if a frame is added to the image before a certain graffiti operation, then during the graffiti operation, if the graffiti operation passes through the area corresponding to the picture inside the frame and the frame area, graffiti traces corresponding to the graffiti operation will be generated in the area corresponding to the picture inside the frame, and no graffiti traces corresponding to the graffiti operation will be generated in the frame area.

[0145] In the embodiment of the present application, the contents displayed in the preview area of ​​the interface shown in Figures 2 to 4 may be different. The presentation of these contents can be presented in the form of layers.

[0146] 5 , which shows the logical layers in the image editing process provided by an embodiment of the present application.

[0147] From bottom to top, the logical layer can include the content layer, effect functions, overlay functions, color functions, and photo frames. Among them, the clipping can be located between the overlay function and the effect function, or it can be located below the text, watermark, and stickers in the overlay function, and above the graffiti (as shown in Figure 5). Of course, it can also be located below the watermark and above the text, stickers, and graffiti. That is, the embodiment of the present application can set the specific position of the clipping in the logical layer according to actual needs.

[0148] The photo frame is displayed independently outside the screen.

[0149] Color functions may include preserving colors, and the color functions act on the colored content in the image.

[0150] Overlay functions can include text, watermarks, stickers, and graffiti. The order of the layers in the overlay function can be adjusted according to the actual situation. For example, text, watermarks, stickers, and graffiti can be placed in four layers respectively.

[0151] Effect functions may include mosaic, blur, filter, beauty and adjustment.

[0152] The content layer may include the image itself or other views of the image.

[0153] In actual applications, the order of the layers shown in FIG5 is not uniquely determined, and the order of the layers may be changed according to actual conditions, or corresponding layers may be deployed according to the functions provided by the image editing application of the electronic device.

[0154] In this embodiment of the present application, when generating the view after each editing operation, the editing operation record during the current image editing process is first obtained; then, based on the layer order shown in Figure 5, the editing effects of the corresponding operation record for each layer are sequentially superimposed on the original image from the bottom layer to the top layer, and finally the view after the current editing operation is obtained. The view after the current editing operation can be used as the original view for the next editing operation.

[0155] The content displayed in the preview area of ​​the interface shown in FIG. 2 to FIG. 4 involves one or more layers among the content layer, the graffiti drawing layer and the photo frame layer.

[0156] Referring to Figure 6, a diagram illustrating the positional relationship between the content layer (image), graffiti layer (graffiti), and photo frame layer (photo frame) provided in an embodiment of the present application is shown; the content layer is located at the bottom, the graffiti layer is located above the content, and the photo frame layer is located above the graffiti layer. In the scenarios shown in Figures 2 to 4, when calculating the view after an edit operation, the edit effects corresponding to the operation records (the operation records of the current edit operation and the operation records before the current edit operation) are superimposed on the original image in order from bottom to top, according to the layer relationship shown in Figure 6, to obtain the view after the current edit operation.

[0157] As shown in FIG7 , during the graffiti process shown in FIG3 (d), in order to achieve real-time graffiti traces, the preview area of ​​the interface shown in FIG3 (d) can be configured to display the content layer and the graffiti drawing layer during the graffiti drawing process. The position and size of the graffiti drawing layer are consistent with the position and size of the content of View 1-0 in the currently displayed View 1-1.

[0158] As shown in Figure 8, during the graffiti process, the content layer is the view after the last editing operation. This view is View 1-1 after the frame is added to the original image. Therefore, the size of the content layer is the size of View 1-1 after the frame is added, for example, 1224*1934, where the size of the original image in the frame (View 1-0) is: 1024*1734.

[0159] The size of the graffiti drawing layer during the graffiti process is the area of ​​the content displayed in the preview area without the frame. As shown in Figure 7, the size of the graffiti drawing layer is the size of the view 1-1 without the frame, that is, the size of the original image (view 1-0): 1024*1734.

[0160] Among them, graffiti traces can be drawn on the graffiti drawing layer as the user graffiti operations. For example, when the user's finger slides to the position shown in Figure 8, the graffiti trace will be applied to the graffiti drawing layer in real time, but will not be applied to areas outside the graffiti drawing layer. Because the graffiti drawing layer is located above the content layer, from the user's perspective, it is as if it is drawn on View 1-1 corresponding to the content layer. Because the size and position of the graffiti drawing layer correspond to the size and position of the original image (View 1-0) in View 1-1, graffiti operations in the area corresponding to the graffiti drawing layer on the display screen will generate corresponding graffiti traces on the graffiti drawing layer. Graffiti operations in areas outside the graffiti drawing layer on the display screen (for example, the photo frame area) will not generate corresponding graffiti traces on the graffiti drawing layer.

[0161] After the graffiti operation is completed (after the user's finger is lifted in the interface shown in (d) of FIG3 ), view 1-2 will be generated according to the current graffiti operation.

[0162] When generating a view, all operation records during the image editing process can be added to the original image in order from the lower layer to the upper layer in the layer relationship.

[0163] According to the interface diagrams shown in Figures 2 to 3, it can be understood that the operation records in this image editing process include: adding photo frame A and drawing graffiti traces 1. Therefore, the logical layers involved include: content layer, graffiti drawing layer and photo frame layer.

[0164] As an example of calculating View 1-2 after the graffiti operation in the interface shown in (d) of Figure 3, referring to Figure 9, when calculating View 1-2, the content layer is the original image (View 1-0), which is sized at 1024*1734. The operation record corresponding to the graffiti operation is the coordinates of the graffiti trace relative to the original image (of course, it can also include the graffiti color, graffiti line thickness, etc.). Therefore, the graffiti drawing layer is equivalent to the size of the original image, that is, the size is also 1024*1734. The operation record corresponding to the add frame operation is the unique identifier of Frame A. Frames are usually added to the outermost circle of the screen, so the size of the frame layer is larger than the size of the original View 1-0, for example, 1224*1934 as shown in Figure 9. The inner circle of the frame can be the size of the original View 1-0. The ring width of the frame itself is related to the size of the view to which the frame is added, for example, it can be a certain proportion of the view to which the frame is added.

[0165] In order from bottom to top, first add the graffiti drawing layer (the coordinates of graffiti trace 1 relative to the original image) to the original image corresponding to the content layer, and then add the frame layer (frame A) to the original image to which the graffiti drawing layer has been added, to obtain view 1-2.

[0166] It can be understood that since the size of the graffiti drawing layer is the size of the original image when the view is generated (the coordinates of the graffiti trace 1 relative to the original image), the graffiti traces on the graffiti drawing layer will not exceed the area of ​​the original image when drawn on the original image. Finally, after the photo frame is added, there will be no graffiti traces on the photo frame.

[0167] As mentioned above, you can also zoom in on the view currently displayed in the preview area and then draw the graffiti trace. Take the graffiti operation corresponding to the interface shown in (d) in Figure 4 as an example.

[0168] As shown in FIG10 , in order to implement real-time graffiti traces during the graffiti drawing process shown in FIG4 (d), the preview area of ​​the interface shown in FIG4 (d) can be configured to display both the content layer and the graffiti drawing layer. The position and size of the graffiti drawing layer are the position and size of the portion of view 1-2 currently displayed in the preview area, excluding the photo frame.

[0169] As shown in Figure 11, during the graffiti process, the content layer is the view after the last editing operation. This view is View 1-2 after the operation of adding a photo frame and adding graffiti trace 1. View 1-2 and View 1-1 are the same size, so the content layer size is: 1224*1934, of which the size of the original image in the photo frame (View 1-0) is: 1024*1734.

[0170] As shown in (d) of Figure 4 , the preview area displays a portion of View 1-2, while the size of the graffiti drawing layer is the size of the preview area's content, minus the photo frame. Therefore, the size of the graffiti drawing layer is smaller than that of the graffiti drawing layer in the previous embodiment. Refer to the sizes of the graffiti drawing layers shown in Figures 10 and 11 . The size of this graffiti drawing layer is 683*1198.

[0171] Among them, graffiti traces can be drawn on the graffiti drawing layer as the user graffiti operations. For example, when the user's finger slides to the position shown in Figure 11, the graffiti trace will be applied to the graffiti drawing layer in real time, but will not be applied to areas outside the graffiti drawing layer. Because the graffiti drawing layer is located above the content layer, from the user's perspective, it is as if it is drawn on View 1-2 corresponding to the content layer. Because the size and position of the graffiti drawing layer are fixed, graffiti operations in the area corresponding to the graffiti drawing layer on the display screen will generate corresponding graffiti traces on the graffiti drawing layer. Graffiti operations in areas outside the area corresponding to the graffiti drawing layer on the display screen (for example, the photo frame area) will not generate corresponding graffiti traces on the graffiti drawing layer.

[0172] After the graffiti operation is completed (after the user lifts his finger in the interface shown in (d) of FIG4 ), views 1-3 will be generated according to the current graffiti operation.

[0173] 12 , the operation records during this image editing process include: adding frame A, drawing graffiti trace 1, and drawing graffiti trace 2. Therefore, the logical layers involved include: content layer, graffiti drawing layer, and frame layer.

[0174] As an example of calculating View 1-3 after the graffiti operation in the interface shown in (d) of Figure 4, when calculating View 1-3, the content layer is the original image (View 1-0), with a size of 1024*1734. The operation records corresponding to the graffiti drawing layer are the coordinates of graffiti trace 1 and graffiti trace 2 relative to the original image, respectively. Therefore, the graffiti drawing layer is equivalent to the size of the original image, that is, the size is also 1024*1734. Therefore, the size of the photo frame layer is larger than the size of the original View 1-0, for example, 1224*1934 as shown in Figure 8, and the inner circle of the photo frame can be the size of the original View 1-0.

[0175] In order from bottom to top, first add the graffiti drawing layer (the coordinates of graffiti trace 1 relative to the original image and the coordinates of graffiti trace 2 relative to the original image) to the original image, and then add the frame layer (frame A) to the original image with the graffiti drawing layer added, to obtain views 1-3.

[0176] It can be understood that since the size of the graffiti drawing layer is the size of the original image when the view is generated (the coordinates of graffiti trace 1 and graffiti trace 2 relative to the original image), the graffiti traces on the graffiti drawing layer will not exceed the area of ​​the original image when drawn on the original image. Finally, after the photo frame is added, there will be no graffiti traces on the photo frame.

[0177] After understanding the principles of the image editing method provided by the embodiment of the present application, the specific implementation process of adding a photo frame and then graffiti in the scenes shown in Figures 2 to 4 will be described in detail, whereby the graffiti traces are effective on the picture in the middle of the photo frame, but not on the photo frame.

[0178] Referring to Figure 13, a technical architecture diagram of the image editing function provided in an embodiment of the present application is shown. This technical architecture diagram only illustrates modules relevant to the embodiment of the present application. The image editing function can be provided within the Gallery application or as an application independent of the Gallery application, such as a standalone image editing application. In actual applications, this technical architecture diagram may also include other modules, which are not shown one by one.

[0179] The technical architecture diagram includes an editing module and modules corresponding to various editing functions, such as a photo frame module, a graffiti module, and a filter module. Of course, it can also include modules corresponding to other editing functions provided by the image editing function, such as a cropping module and a filter module.

[0180] As a general module, the editing module can interact with the outside world and perform tasks such as calculating the preview area view (the view after adding editing effects) corresponding to different editing functions during the image editing process. It can also store operation records for each editing operation, such as the unique identifier of the selected photo frame, the coordinates of the graffiti trace relative to the original image, the color, and line thickness, etc.

[0181] As a graffiti module related to the embodiment of the present application, reference can be made to the technical architecture diagram shown in Figure 14, and modules corresponding to other editing functions are not given one by one.

[0182] Refer to Figure 14, which is a technical architecture diagram of the Tuya module provided in an embodiment of the present application.

[0183] The BrushState (Master Controller) in the Tuya module is used to manage Tuya functions and interact with the editing module.

[0184] The BrushUiController (Tuya interface control management) in the Tuya module is used to manage the controls on the interface corresponding to the Tuya function.

[0185] MosaicView (graffiti drawing layer) in the graffiti module is used to manage the graffiti drawing layer.

[0186] SupportExpandMenuRender (Preview Area View Drawing Management) in the Tuya module is used to manage the drawing of the preview area view.

[0187] Of course, in actual applications, the graffiti module may also include other modules. FIG14 only shows the modules related to the process in which the graffiti operation is performed on a view with a photo frame added, and the graffiti operation is only effective on the picture within the photo frame and not on the photo frame.

[0188] After describing the technical architecture diagram of the picture editing function provided by the embodiment of the present application, the timing diagram of the picture editing method provided by the embodiment of the present application is described. This timing diagram corresponds to the scenarios shown in Figures 2 to 4, that is, the process of editing Picture 1 includes the process of adding a photo frame and the process of drawing graffiti. Of course, other editing processes may also be included before the process of adding a photo frame, and other editing processes may also be included after the process of drawing graffiti, and the embodiment of the present application does not limit this.

[0189] 15 is a flowchart of the image editing method provided by an embodiment of the present application. The flowchart shown in FIG15 is a flowchart of adding a photo frame A and then performing graffiti.

[0190] S101: The photo frame module receives a click operation on a control of the photo frame A.

[0191] In this embodiment of the present application, during the editing process of Image 1, various editing operations can be performed on Image 1. Adding a photo frame can be the first editing operation of this editing process, or it can be a non-first editing operation of this editing process. Regardless of whether the photo frame operation is the first editing operation of this editing process of Image 1 or a non-first editing operation, the user's operation can trigger the electronic device to display the interface corresponding to the photo frame function. Specifically, refer to the interface shown in (d) of Figure 2, which shows the original view (view 1-0) of this photo frame operation.

[0192] When the electronic device displays the interface shown in (d) of Figure 2, the interface may display at least one control corresponding to the photo frame type. For example, the user may click the control corresponding to photo frame A, and the photo frame module will receive the click operation on the control of photo frame A.

[0193] S102: After receiving the selection operation of the photo frame A, the photo frame module displays the view 1-0 of adding the photo frame A in the preview area of ​​the currently displayed interface.

[0194] 3 (a), which is the currently displayed interface, the photo frame module updates the display content of the preview area of ​​the currently displayed interface to view 1-0 with a photo frame added.

[0195] It should be noted that at this time, photo frame A and view 1-0 belong to two layers. Therefore, the user can click the no-photo-frame control on the interface to remove photo frame A, triggering the photo frame module to update the display content of the preview area of ​​the currently displayed interface to view 1-0; the user can also click the control corresponding to other photo frame types on the interface to replace photo frame A with other photo frames, thereby triggering the photo frame module to update the display content of the preview area of ​​the currently displayed interface to view 1-0 with other photo frames added.

[0196] S103: The photo frame module receives a click operation of control 2.

[0197] In this embodiment of the present application, after the user confirms to add photo frame A to view 1-0, they can click control 2 in the interface shown in Figure 3 (a). The electronic device will receive the user's click operation on control 2. Control 2 is used to indicate that the current photo frame addition is complete, and the electronic device needs to generate a view based on the currently added photo frame A and view 1-0.

[0198] S104: After receiving the click operation of the control 2, the photo frame module sends the photo frame parameters to the editing module.

[0199] In the embodiment of the present application, the photo frame parameters may carry the unique identifier of the added photo frame A. After receiving the photo frame parameters, the editing module may store the unique identifier of the added photo frame A.

[0200] During specific implementation, the editing module may return a message indicating successful saving to the photo frame module after storing the unique identifier of the photo frame A.

[0201] S105 , after receiving a click operation on the control 2 or sending frame parameters to the editing module or receiving a successful save message returned by the editing module, the photo frame module sends a preview area view calculation request to the editing module.

[0202] In this embodiment of the present application, as previously described, the preview area of ​​the interface in step S102 displays view 1-0 with photo frame A added. In reality, view 1-0 and photo frame A are two separate layers. However, after the user clicks control 2, the two layers containing view 1-0 and photo frame A are updated to a single layer, with view 1-1 on this updated layer. Therefore, the photo frame module needs to request the editing module to calculate the preview area view to obtain view 1-1.

[0203] In the embodiment of the present application, the preview area view calculation request may also carry the unique identifier of the photo frame A.

[0204] As another example, step S104 and step S105 can be combined into one step, or can be performed separately as two steps, which is not limited in the embodiment of the present application.

[0205] S106 : After receiving the preview area view calculation request, the editing module generates a preview area view according to the unique identifier of the photo frame A and the view 1 - 0 .

[0206] In an embodiment of the present application, if adding a photo frame is the first editing operation in the current picture editing process of Picture 1, then when generating the preview area view, the current editing operation record only has the operation of adding a photo frame. Then, View 1-1 can be obtained based on the original picture (View 1-0) and the photo frame A corresponding to the unique identifier in the operation of adding a photo frame.

[0207] Of course, in actual application, if adding a photo frame is not the first editing operation in the current image editing process of Picture 1, then when generating the preview area view, the current editing operation record includes other editing operations and the operation of adding a photo frame. Then, according to the pre-set layer order, from bottom to top, the editing effects corresponding to other editing operations can be added to the original image first to obtain View 1-0, and then photo frame A is added to View 1-0 to obtain View 1-1.

[0208] S107: The editing module sends the calculated preview area view to the photo frame module.

[0209] S108 , after receiving the preview area view, the photo frame module displays the interface shown in FIG. 3 ( b ), on which the received preview area view (view 1 - 1 ) is displayed.

[0210] It should be noted that from the user's perspective, the preview areas of the interfaces shown in Figure 3 (b) and Figure 3 (a) display the same content. However, for the electronic device, the preview area of ​​the interface shown in Figure 3 (a) displays the View 1-0 layer and the photo frame layer located above the View 1-0 layer. The preview area of ​​the interface shown in Figure 3 (b) displays the View 1-1 layer. View 1-1 is a view generated based on View 1-0 and the photo frame.

[0211] After step S108, the electronic device can select other editing functions to perform other editing operations through the interface shown in (b) of Figure 3. The embodiment of the present application takes the selection of the graffiti function as an example.

[0212] S109: The photo frame module receives a click operation of the graffiti control.

[0213] In the embodiment of the present application, the user needs to click on the graffiti control in the interface shown in (b) of Figure 3 to trigger the electronic device to display the interface corresponding to the graffiti function.

[0214] In the embodiment of the present application, operations on an interface containing controls corresponding to more editing functions that is displayed after one editing function is completed are responded to by the module corresponding to the previous editing function. In actual applications, an interface containing controls corresponding to more editing functions may be displayed after multiple editing functions are completed. However, the interfaces containing controls corresponding to more editing functions that are displayed belong to modules corresponding to different editing functions.

[0215] S110: The photo frame module sends a request to the editing module to switch to the graffiti module.

[0216] S111: After receiving the request to switch to the tutu module, the editing module sends a display instruction to the tutu module.

[0217] In actual application, the graffiti module displays the interface corresponding to the graffiti function according to the display instruction. After displaying the interface corresponding to the graffiti function, the graffiti module may send a message indicating that the display has been successful to the editing module.

[0218] S112: After receiving the request to switch to the graffiti module or sending a display instruction to the graffiti module or receiving the successfully displayed information from the graffiti module, the editing module sends a hiding instruction to the photo frame module.

[0219] S113: After receiving the display instruction from the editing module, the graffiti module displays an interface corresponding to the graffiti function, and the preview area of ​​the interface corresponding to the graffiti function displays view 1-1.

[0220] In an embodiment of the present application, when the editing module sends a display instruction to the graffiti module, it may send the latest cached view 1-1 or the storage address of the latest cached view 1-1 to the graffiti module. When the graffiti module displays the interface corresponding to the graffiti function, it may display the view 1-1.

[0221] Referring to the interface corresponding to the graffiti function shown in (c) of FIG. 3 , the view currently displayed on the interface is view 1-1.

[0222] S114, after receiving the hiding instruction sent by the editing module, the photo frame module hides the interface shown in (b) in FIG. 3 .

[0223] In specific implementation, the timing for the photo frame module to hide the interface shown in (b) in FIG. 3 may be set to be after the graffiti module has finished displaying the interface corresponding to the graffiti function.

[0224] In specific implementation, the modules corresponding to the various editing functions do not directly display the various interfaces. Instead, other modules in the electronic device trigger the display screen of the electronic device to display different interfaces.

[0225] S115 , the graffiti module determines that the area corresponding to the graffiti drawing layer is the area corresponding to view 1 - 0 in view 1 - 1 , and displays the graffiti drawing layer on top of view 1 - 1 .

[0226] In this embodiment of the present application, the preview area of ​​the interface corresponding to the graffiti function displayed by the graffiti module after receiving the display instruction generally displays the complete original view (view 1-1) of the graffiti operation. View 1-1 is generated based on view 1-0 and the photo frame, so the graffiti drawing layer is the area corresponding to view 1-0.

[0227] After the graffiti drawing layer is determined, it can be displayed above View 1-1, which is displayed in the preview area of ​​the interface corresponding to the graffiti function. At this point, there are no traces of graffiti on the graffiti drawing layer, so from the user's perspective, View 1-1 is displayed. The specific method for determining the position and size of the graffiti drawing layer on the display screen can be found in the description of the above embodiment and will not be repeated here.

[0228] Of course, after determining the position and size of the graffiti drawing layer on the display screen, the first mapping relationship and the second mapping relationship may be further calculated so as to be used in subsequent steps.

[0229] S116: The graffiti module receives the graffiti operation.

[0230] The graffiti operation in the embodiment of the present application can be a sliding operation of the user's finger in the area of ​​view 1-1 displayed on the touch screen. At this time, view 1-1 displayed in the preview area includes the content of view 1-0 and the content of the photo frame.

[0231] S117 , the graffiti module draws a graffiti trace 1 on the graffiti drawing layer according to the graffiti operation.

[0232] During a graffiti editing process, the user can enter multiple graffiti operations, for example, first entering the Arabic numeral "1" and then the Arabic numeral "2." Alternatively, the user can first draw graffiti trace 1 according to the interface shown in Figure 3 (d), and then draw graffiti trace 2 according to the interface shown in Figure 4 (d). From the user's perspective, the input process of a graffiti operation mainly includes the following steps: the user's finger contacts the touch screen, the user's finger slides on the touch screen, and the user's finger leaves the touch screen.

[0233] For electronic devices, the following processes are included: receiving a contact event, receiving a movement event, and receiving a lift event.

[0234] The detailed process of the electronic device generating graffiti traces in real time on the graffiti drawing layer as the user's finger moves on the touch screen during a graffiti operation can be referred to the description of the embodiment shown in the subsequent FIG. 17 .

[0235] S118: After the graffiti operation is completed, the graffiti module sends a preview area view calculation request to the editing module.

[0236] In an embodiment of the present application, the real-time sliding of the user's finger in the preview area will generate graffiti traces in real time. The graffiti traces corresponding to a user's sliding process (from the user's finger contacting the touch screen to the user's finger leaving the touch screen) are actually drawn on the graffiti drawing layer. After the user's finger leaves the touch screen, the electronic device needs to generate a view with graffiti traces added, and at the same time clear the graffiti traces on the graffiti drawing layer. Therefore, after the graffiti module receives the information that the graffiti operation is completed (the finger leaves the touch screen), it needs to send a calculation request for the preview area view to the editing module.

[0237] The preview area view calculation request may carry the coordinates of the graffiti trace (for example, relative to the coordinates of the original image), line color, line thickness, etc. In the embodiment of the present application, if adding a frame is the first editing operation on image 1, the original image is view 1-0.

[0238] S119: After receiving the preview area view calculation request sent by the graffiti module, the editing module calculates the preview area view according to the coordinates of the graffiti trace carried in the calculation request to obtain view 1-2.

[0239] In the embodiment of the present application, at this time, the editing module obtains the historical editing record including: the unique identifier of the photo frame A corresponding to step S104. The editing module can determine that the photo frame operation and the graffiti operation have been performed currently based on the historical editing record and the coordinates of the graffiti trace 1 carried in the currently received preview area view calculation request. In accordance with the order described above, the graffiti trace is first generated on the picture 1 according to the coordinates of the graffiti trace 1 relative to the picture 1. Even if the coordinates of the graffiti trace 1 on the picture 1 exceed the picture 1, when the graffiti trace 1 is generated on the picture 1, the graffiti trace will not be generated outside the picture 1. Therefore, the graffiti trace is currently generated only within the range of the picture 1. Then a photo frame is added to the picture 1 with the graffiti trace 1 added, thereby obtaining view 1-2.

[0240] S120: The editing module sends the calculated preview area view to the graffiti module.

[0241] S121, after receiving the preview area view, the graffiti module displays the received view (view 1-2) in the preview area on the currently displayed interface, and clears the graffiti trace 1 on the graffiti drawing layer.

[0242] As an example of the graffiti module, referring to FIG4 (a), it is a schematic diagram showing that the graffiti module displays the received view in the preview area of ​​the interface corresponding to the currently displayed graffiti function based on the received preview area view. At this time, the view displayed in the preview area is view 1-2.

[0243] After step S113, the graffiti function interface displays the entire view. Therefore, the graffiti drawing layer represents the area corresponding to view 1-0 before the photo frame was added. However, in actual applications, the graffiti function may provide a zoom function, which magnifies the currently displayed view to display a partial area of ​​the currently displayed view. In this case, the size and position of the graffiti drawing layer will change.

[0244] S122: The graffiti module receives an operation to zoom in on view 1-2 displayed in the preview area.

[0245] Referring to Figure 4(a), a user can trigger the electronic device to zoom in on the preview area of ​​the currently displayed view 1-2 by moving two fingers apart in the preview area, resulting in the interface shown in Figure 4(b). The preview area of ​​this interface displays a partial area of ​​view 1-2.

[0246] 4( b ), the user may trigger the movement of view 1 - 2 displayed in the preview area of ​​the electronic device by sliding two fingers in the preview area, resulting in the interface shown in FIG. 4( c ).

[0247] 4 (c), the content displayed in the preview area on the current interface is the lower right corner area of ​​view 1-2. The displayed content includes a partial area of ​​view 1-0 and a partial photo frame.

[0248] In an embodiment of the present application, after the user triggers the preview area of ​​the electronic device to enlarge and display the currently displayed view 1-2 by moving two fingers away from the preview area, for example, in the interface shown in (b) of Figure 4, since the preview area does not include a photo frame, the electronic device will re-determine the position and size corresponding to the graffiti drawing layer to be the position and size corresponding to the entire content displayed in the entire preview area.

[0249] After the user triggers the movement of view 1-2 displayed in the preview area of ​​the electronic device by sliding two fingers in the preview area, for example, in the interface shown in (c) of Figure 4, since the preview area includes a photo frame, the electronic device will re-determine the position and size of the graffiti drawing layer as the position and size of the entire content displayed in the entire preview area minus the position and size of the photo frame area. For details, please refer to the description of the above embodiment.

[0250] S123: The graffiti module refreshes the area of ​​the view displayed in the preview area according to the operation of zooming in on the view 1-2 displayed in the preview area.

[0251] In the embodiment of the present application, the content of the preview area shown in (c) in FIG. 4 is taken as an example.

[0252] S124: The graffiti module re-determines the area corresponding to the graffiti drawing layer as area A, and displays the graffiti drawing layer on the upper layer of view 1-2.

[0253] In the embodiment of the present application, as the user operates, after the area of ​​view 1-2 displayed in the preview area changes, the graffiti module will re-determine the position and size of the graffiti drawing layer on the display screen.

[0254] S125: The graffiti module receives the graffiti operation.

[0255] 4 ( d ), the thick lines distributed on the picture within the frame and the dotted lines distributed on the frame are the user's drawing tracks in the preview area.

[0256] S126 , the graffiti module draws a graffiti trace 2 on the currently determined graffiti drawing layer based on the graffiti operation.

[0257] In the embodiment of the present application, since the graffiti drawing layer is the area without the photo frame in (d) of FIG. 4 , a user's sliding operation on the preview area will generate a graffiti trace 2 (the bold line portion) on the graffiti drawing layer. A graffiti operation on the photo frame outside the area corresponding to the graffiti drawing layer will be mapped to coordinates on the graffiti drawing layer that exceed the graffiti drawing layer, and therefore, no graffiti trace (the dotted line portion) will be generated on the graffiti drawing layer.

[0258] In the embodiment of the present application, the graffiti trace generated by the previous graffiti operation is recorded as graffiti trace 1, and the graffiti trace generated by the current graffiti operation is recorded as graffiti trace 2.

[0259] S127: After the graffiti operation is completed, the graffiti module sends a preview area view calculation request to the editing module. The preview area view calculation request carries the coordinates, color, and line thickness of the current graffiti trace 2 relative to the original image.

[0260] The process can be described in detail in step S118 and will not be repeated here.

[0261] S128: After receiving the preview area view calculation request sent by the graffiti module, the editing module calculates the preview area view according to the coordinates of the graffiti trace 2 relative to the original image and other parameters carried in the calculation request to obtain views 1-3.

[0262] In this embodiment of the present application, the editing module obtains the stored editing operation record: the unique identifier of photo frame A and the coordinates of graffiti trace 1 relative to the original image. The editing module calculates the coordinates of graffiti trace 2 carried in the request relative to the original image based on the currently received preview area view. The editing module can first generate graffiti trace 1 and graffiti trace 2 on the original image based on the coordinates of graffiti trace 1 and graffiti trace 2 on the original image, and then add photo frame A to the original image with graffiti trace 1 and graffiti trace 2 generated, resulting in views 1-3.

[0263] S129: The editing module sends the calculated preview area view to the graffiti module.

[0264] S130: After receiving the preview area view, the graffiti module displays a partial area of ​​the received views 1-3 in the preview area on the currently displayed interface, and clears the graffiti trace 2 on the graffiti drawing layer.

[0265] It should be noted that after step S129, the preview area view obtained by the graffiti module is view 1-3 itself. However, since the content currently displayed in the preview area is the enlarged partial area of ​​view 1-2, when displaying the received view 1-3, it is also necessary to determine the currently displayed partial area of ​​view 1-3 based on the currently displayed partial area of ​​view 1-2.

[0266] From the above example, we can understand that when a user graffiti, graffiti traces are generated in real time on the graffiti drawing layer. Therefore, it is necessary to obtain the coordinates of each point in the graffiti trace on the graffiti drawing layer, that is, it is necessary to obtain the coordinates of the real-time position of the user's finger on the graffiti drawing layer;

[0267] After the user finishes graffiti, when generating the view, it is necessary to obtain the coordinates of each point in the graffiti trace on the original image, that is, the coordinates of each position of the user's finger on the original image during the graffiti operation.

[0268] However, in actual applications, the position of the user's finger is acquired in real time by the touch screen of the electronic device. Therefore, the coordinates received by the electronic device are the coordinates of the real-time position of the user's finger on the display screen during the graffiti operation.

[0269] The following describes how to convert the coordinates of the user's finger on the display screen into the coordinates of the user's finger on the graffiti drawing layer to display the graffiti traces in real time during the user's graffiti process, and how to convert the coordinates of the user's finger on the display screen into the coordinates of the user's finger on the original image to generate a view after the user's graffiti operation is completed.

[0270] Taking the process of drawing graffiti trace 2 as an example, the positional relationship among the displayed view 1-2, the original image, the display screen, the content currently displayed in the preview area of ​​the display screen, and the graffiti drawing layer is first described.

[0271] Referring to Figure 16 , the preview area of ​​the current interface displayed on the display screen shows view 1-2. View 1-2 includes the content of view 1-0, graffiti traces on the content of view 1-0, and a photo frame surrounding the content of view 1-0. However, the preview area only displays a portion of view 1-2. The area corresponding to the graffiti drawing layer is the area within this portion without the photo frame.

[0272] The coordinates of the user's finger on the display screen are equivalent to the coordinates of the user's finger relative to the upper left corner of the display screen as the origin.

[0273] The coordinates of the user's finger on the original image are equivalent to the coordinates of the user's finger relative to the upper left corner of the original image as the origin.

[0274] The coordinates of the user's finger on the currently displayed view are equivalent to the coordinates of the finger relative to the upper left corner of the displayed view 1-2 as the origin.

[0275] Of course, the embodiment of the present application uses the upper left corner as the origin for example. In actual applications, the origin can also be other corners or a center point.

[0276] 17 and 18 , an embodiment of the present application provides a process for calculating the position of an area corresponding to a graffiti drawing layer on a display screen, a first mapping relationship between coordinates on the display screen and coordinates on the original image, and a second mapping relationship between coordinates on the original image and coordinates on the graffiti drawing layer.

[0277] Step S1101 , obtaining the first position (parameter 1) of the content displayed in the preview area on view 1 - 2 .

[0278] The embodiment of the present application takes the upper left corner as the coordinate origin as an example.

[0279] 18( a ) shows the first position of the content displayed in the preview area on view 1 - 2 , which can also be understood as a coordinate set of the area enclosed by a thick black frame with the upper left corner of view 1 - 2 as the origin.

[0280] In an embodiment of the present application, in the interface shown in (c) of FIG. 4 , when the preview area displays a partial area of ​​view 1 - 2 , the coordinates of the content displayed in the preview area on view 1 - 2 may be stored.

[0281] Step S1102 : Obtain the second position of view 1 - 0 on view 1 - 2 (parameter 3).

[0282] 18( b ) shows the second position of view 1 - 0 on view 1 - 2 , which can also be understood as a coordinate set of the area circled by a thick black frame with the upper left corner of view 1 - 2 as the origin.

[0283] In an embodiment of the present application, when the electronic device generates view 1-1 based on view 1-0 (original image) and photo frame A, it can store the positional relationship between view 1-0 and view 1-1. Therefore, the graffiti module can obtain the position of view 1-0 on view 1-1. Since view 1-1 and view 1-2 have the same size, the position of view 1-0 on view 1-2 can be obtained.

[0284] Step S1103 , calculating the intersection of the first position of the content displayed in the preview area on view 1-2 and the second position of view 1-0 on view 1-2 (the intersection of parameter 1 and parameter 3), and obtaining the third position of the graffiti drawing layer on view 1-2 (parameter 4-0).

[0285] Refer to (c) in Figure 18, which shows the intersection of parameters 1 and 3. Since parameters 1 and 3 are coordinate sets in the same coordinate system, the coordinate set of parameter 1 and the coordinate set of parameter 3 can be directly intersected. The resulting intersection is the third position of the graffiti drawing layer on view 1-2, that is, the coordinate set of the area circled by the thick black frame with the upper left corner of view 1-2 as the origin.

[0286] Step S1104 : Obtain the fourth position of the graffiti drawing layer in the preview area based on the first position of the preview area display content in view 1-2 and the third position of the graffiti drawing layer in view 1-2 (the relationship between parameter 1 and parameter 4-0).

[0287] Parameters 1 and 4-0 are in the same coordinate system. The area in parameter 1 represents the content displayed in the preview area, and the area in parameter 4-0 represents the area corresponding to the graffiti drawing layer. This can be used to determine the fourth position of the graffiti drawing layer's content displayed in the preview area. It can also be understood that the relationship between parameters 1 and 4 determines how to extract the area corresponding to the graffiti drawing layer from the content displayed in the preview area in the same coordinate system.

[0288] Step S1105: Obtain the fifth position of the preview area display content on the display screen (parameter 2).

[0289] 18( d ) shows the fifth position (parameter 2 ) of the content displayed in the preview area on the display screen, ie, the coordinate set of the area enclosed by the thick black frame with the upper left corner of the display screen as the origin.

[0290] In the embodiment of the present application, the upper left corner of the content displayed in the preview area is not necessarily the upper left corner of the display screen.

[0291] When the interface corresponding to the graffiti function displays a partial area of ​​view 1-2 in the preview area, there is a mapping relationship between the coordinate system with the upper left corner of the display screen as the origin and the coordinate system with the upper left corner of view 1-2 as the origin (this mapping relationship can be determined when the electronic device displays a partial area of ​​view 1-2). Based on this mapping relationship, the first position (parameter 1) of the content displayed in the preview area on view 1-2 can be mapped to the fifth position (parameter 2) of the content displayed in the preview area on the display screen.

[0292] Step S1106 , obtaining the sixth position (parameter 5) of the graffiti drawing layer on the display screen based on the fourth position of the graffiti drawing layer on the preview area display content (the relationship between parameter 1 and parameter 4-0) and the fifth position (parameter 2) of the preview area display content on the display screen.

[0293] The relationship between parameter 1 and parameter 4, and the relationship between parameter 2 and parameter 5 are consistent. Therefore, when the relationship between parameter 1 and parameter 4 has been determined and parameter 2 is known, parameter 5 can be obtained.

[0294] Referring to (e) in Figure 18 , the conversion of parameter 2 to parameter 5 corresponds to determining the area corresponding to the graffiti drawing layer within the content displayed in the preview area within the same coordinate system. Parameter 5 represents the sixth position of the graffiti drawing layer on the display screen, specifically the coordinates of the area enclosed by the thick black frame, with the upper left corner of the display screen as the coordinate origin.

[0295] By executing this step, the position and size of the area corresponding to the graffiti drawing layer relative to the display screen can be obtained. Therefore, the graffiti drawing layer can be generated on the display screen.

[0296] The process of obtaining the first mapping relationship will be described below.

[0297] Step S1201 : Obtain the seventh position (parameter 4) of the graffiti drawing layer on view 1-0 according to the second position (parameter 3) of view 1-0 on view 1-2 and the third position (parameter 4-0) of the graffiti drawing layer on view 1-2.

[0298] In the embodiment of the present application, it can be understood from Figures 18(b) and 18(c) that parameter 3 and parameter 4-0 belong to different regions in the same coordinate system, and parameter 4-0 is included in parameter 3. Therefore, based on the relationship between parameter 3 and parameter 4-0, the seventh position (parameter 4) of parameter 4-0 on parameter 3 can be obtained. Specifically, the position of the area enclosed by the thick black frame on view 1-0 can be seen in Figure 18(f).

[0299] Step S1202 : Obtain a first mapping relationship between coordinates on the display screen and coordinates on view 1 - 0 based on the seventh position (parameter 4) of the graffiti drawing layer on view 1 - 0 and the sixth position (parameter 5) of the graffiti drawing layer on the display screen.

[0300] Parameter 4 and parameter 5 are coordinate sets of the same area in different coordinate systems. Therefore, a first mapping relationship between the coordinate system where parameter 4 is located and the coordinate system where parameter 5 is located can be obtained.

[0301] This first mapping relationship can convert the coordinates on view 1-0 (original image) and the coordinates on the display screen, so that the coordinates of the touch point (the contact point between the user's finger and the display screen) in the graffiti operation on the display screen can be converted into the coordinates of the touch point on view 1-0, that is, the coordinates of the touch point on the original image.

[0302] The process of obtaining the second mapping relationship will be described below.

[0303] Step S1301 : Obtain a second mapping relationship between coordinates on view 1 - 0 and coordinates on the graffiti drawing layer according to the seventh position (parameter 4) of the graffiti drawing layer on view 1 - 0 .

[0304] In this embodiment, parameter 4 is the coordinate set of the area corresponding to the graffiti drawing layer in view 1-0. Therefore, a mapping relationship between the coordinates in view 1-0 and the coordinates on the graffiti drawing layer can be obtained. Subsequently, the coordinates of the touch point on the original image can be mapped to the coordinates of the touch point on the graffiti drawing layer.

[0305] In the above process, picture 1 (view 1-0) is the original picture during this picture editing process, and view 1-2 is the original view during this graffiti operation.

[0306] Similarly, before drawing the graffiti trace 1, the electronic device displays the interface shown in (c) in Figure 3. Since the content currently displayed in the preview area is view 1-1, the upper left corner of view 1-1 is the upper left corner of the content displayed in the preview area. The flowchart shown in Figure 17 can still be used to calculate the position of the area corresponding to the graffiti drawing layer in the interface shown in (c) in Figure 3 on the display screen, the first mapping relationship between the coordinates on the display screen and the coordinates on the original picture, and the second mapping relationship between the coordinates on the original picture and the coordinates on the graffiti drawing layer. It should be noted that the mapping relationship in the interface shown in (c) in Figure 3 is different from the mapping relationship in the interface shown in (d) in Figure 4.

[0307] 19( a ) shows the first position of the content displayed in the preview area on view 1 - 1 , ie, the coordinate set of the area enclosed by the thick black frame with the upper left corner of view 1 - 1 as the origin.

[0308] 19( b ) shows the second position of view 1-0 on view 1-1, ie, a coordinate set of the region enclosed by a thick black frame with the upper left corner of view 1-1 as the origin.

[0309] Refer to (c) in Figure 19, which shows the intersection of parameters 1 and 3. Since parameters 1 and 3 are in the same coordinate system, they can be directly intersected to obtain the third position of the area corresponding to the graffiti drawing layer on View 1-1. This is the coordinate set of the area enclosed by the thick black frame, with the upper left corner of View 1-1 as the origin. In this case, parameter 4-0 is parameter 3.

[0310] 19( d ) shows a coordinate set of the fifth position of the content displayed in the preview area on the display screen, ie, the area enclosed by a thick black frame with the upper left corner of the display screen as the origin.

[0311] Among them, the upper left corner of the display screen is outside the preview area. For details, please refer to the relationship diagram in the interface shown in Figure 11.

[0312] 19( e ), the coordinates of the area corresponding to the graffiti drawing layer on the display screen are converted into a coordinate set of the sixth position of the graffiti drawing layer on the display screen, that is, the area circled by the thick black frame with the upper left corner of the display screen as the origin.

[0313] At this point, the position and size of the graffiti drawing layer on the display screen have been determined, and the graffiti drawing layer can be generated in the interface shown in (c) of Figure 3. Subsequently, the first mapping relationship and the second mapping relationship can be generated.

[0314] For example, referring to (f) in Figure 19, the process of converting parameter 2 to parameter 5 is equivalent to determining the area corresponding to the graffiti drawing layer within the content displayed in the preview area within the same coordinate system. Based on the relationship between parameter 3 and parameter 4-0, parameter 4-0 can be used to determine parameter 4: the position of the graffiti drawing layer within view 1-0. This is the coordinate set of the area enclosed by the thick black frame, with the upper left corner of view 1-0 as the origin.

[0315] Then, a first mapping relationship is obtained based on the relationship between parameter 4 and parameter 5. Finally, a second mapping relationship (1:1) is obtained based on parameter 4.

[0316] Through the above embodiments, we can understand how to convert the coordinates of the user's finger on the display screen into the coordinates of the user's finger on the graffiti drawing layer to display the graffiti traces in real time during the user's graffiti process, and how to convert the coordinates of the user's finger on the display screen into the coordinates of the user's finger on the original image to generate a view after the user's graffiti operation is completed.

[0317] For a clearer understanding of the above embodiment, refer to FIG20 , which shows the timing diagram of generating graffiti traces in real time on the graffiti drawing layer as the user graffiti operates, and generating a view after the user graffiti operation is completed. This can also be understood as steps S124 to S130 in FIG15 , or steps S115 to S121.

[0318] Step S200 : MosaicView calculates the position and size of the area corresponding to the graffiti drawing layer on the display screen, a first mapping relationship between the coordinates on the display screen and the coordinates on the original image, and a second mapping relationship between the coordinates on the original image and the coordinates on the graffiti drawing layer.

[0319] The specific calculation process can be shown in Figures 16 to 19. Step S200 can be completed in step S115 or S124.

[0320] Step S201: MosaicView receives a preview area touch event.

[0321] In an embodiment of the present application, when the interface shown in (c) in Figure 3 and the interface shown in (c) in Figure 4 are displayed, the user can slide his finger in the preview area of ​​the interface of the graffiti function to trigger the electronic device to generate graffiti traces in the preview area to display (d) in Figure 3 or (d) in Figure 4.

[0322] As mentioned above, the input process of a graffiti operation, from the user's perspective, mainly includes the following steps: the user's finger contacts the touchscreen, the user's finger slides across the touchscreen, and the user's finger lifts off the touchscreen. For the electronic device, the following steps are involved: receiving a touch event, receiving a move event, and receiving a lift event.

[0323] When a user's finger touches the preview area on the touchscreen, the electronic device's MosaicView receives a preview area touch event. This event can be reported by the pressure sensor on the electronic device's touchscreen (carrying the first coordinates of the touch point on the display) and transmitted to MosaicView. The preview area touch event carries the first coordinates of the touch point on the electronic device's display.

[0324] In actual applications, the operation performed by the user's finger on the touch screen in the embodiment of the present application can also be the operation performed by other body parts of the user or a stylus on the touch screen.

[0325] Step S202: After receiving the user contact event, MosaicView records the initial coordinates of the contact point in the contact event on the display screen.

[0326] In an embodiment of the present application, the starting point when the user's finger slides in the preview area is usually the position where the user's finger first contacts the preview area on the touch screen. Therefore, after receiving a user contact event, it is necessary to record the first coordinate of the contact point in the currently received user contact event on the display screen to record the subsequent sliding path.

[0327] Step S203 : MosaicView maps the first coordinate of the touch point on the display screen to a second coordinate on the original image (size of view 1 - 0 ) of image 1 according to the first mapping relationship.

[0328] The mapping process is to map the first coordinate on the display screen to the second coordinate on the original image. The mapping relationship between the first coordinate on the display screen and the second coordinate on the original image (view 1-0) is the first mapping relationship between parameter 5 and parameter 4 in the above embodiment.

[0329] It should be noted that, in practical applications, the first mapping relationship may also be calculated before step S203.

[0330] Step S204 : After mapping the first coordinate to the second coordinate on the original image, MosaicView sends a setting instruction to BrushUiControl, where the setting instruction is used to instruct BrushUiControl to set the controls on the current graffiti function interface to be unavailable.

[0331] Step S205: After receiving the setting instruction, BrushUiControl sets the controls on the current graffiti interface to be unavailable.

[0332] In the embodiment of the present application, while a user is drawing a graffiti trace in the preview area, the controls on the graffiti interface (e.g., graffiti line type, thickness, color, eraser, etc.) are unavailable. That is, during the input of a graffiti trace, the graffiti color, line type, and thickness will not change. The user can change the graffiti color, line type, and thickness of the next graffiti trace after completing the input of one graffiti trace and before entering the next graffiti trace.

[0333] Step S206: MosaicView receives a move event of the preview area.

[0334] In this embodiment of the present application, when a user slides their finger across the preview area of ​​the graffiti interface, the electronic device's MosaicView will receive a user movement event. This event can be reported by a pressure sensor on the electronic device's touch screen and transmitted to MosaicView. This event also carries the real-time first coordinates of the point of contact between the user's finger and the display.

[0335] Step S207 : When MosaicView receives a user movement event, it records the first coordinate of the touch point on the display screen during the finger movement process.

[0336] Step S208 : MosaicView maps the first coordinate to a second coordinate (the coordinate on the original image) according to the first mapping relationship.

[0337] Step S209 : MosaicView sends the size of the graffiti drawing layer, the second coordinate, and the second mapping relationship to BrushUiControl.

[0338] In an embodiment of the present application, the drawing process of the user's finger on the display screen will trigger the electronic device to display the graffiti traces in real time in the preview area. Therefore, after MosaicView generates the first and second coordinates of the sliding event, it sends the second coordinates in the contact event and the first and second coordinates of the sliding event to BrushUiControl, and also sends the size of the graffiti drawing layer and the second mapping relationship.

[0339] Subsequently, as the user's finger slides, MosaicView generates the second, third, ... first coordinates, and continues to send the second, third, ... first coordinates, without sending the size of the graffiti drawing layer and the second mapping relationship.

[0340] Of course, in actual applications, if the user can accept the display delay of the graffiti traces, multiple first coordinates can be sent to BrushUiControl at one time. This embodiment of the present application does not limit this.

[0341] Step S210: After receiving the size, second coordinates and second mapping relationship of the graffiti drawing layer, BrushUiControl forwards the size, second coordinates and second mapping relationship of the target coordinate graffiti drawing layer to BrushState.

[0342] Step S211 : After receiving the size of the graffiti drawing layer, the second coordinate, and the second mapping relationship, BrushState generates a canvas of the same size as the graffiti drawing layer.

[0343] In the embodiment of the present application, as previously described, the size and position of the graffiti drawing layer on the display screen have been determined by parameter 5 in Figure 18 or Figure 19. Therefore, a canvas of the same size as the graffiti drawing layer can be obtained based on the previously obtained parameter 5.

[0344] In step S212 , BrushState maps the second coordinate to a third coordinate on the current canvas according to the second mapping relationship.

[0345] In the embodiment of the present application, the first coordinate on the display screen is first mapped to the second coordinate on the original image (view 1-0), and then the second coordinate on the original image (view 1-0) is mapped to the third coordinate of the graffiti drawing layer.

[0346] In the embodiment of the present application, the second coordinate of the touch point in the graffiti drawing layer can be obtained according to the second mapping relationship.

[0347] Step S213 : BrushState generates a graffiti trace on the canvas according to the third coordinate obtained by mapping.

[0348] In practice, if the user's finger moves outside the canvas corresponding to the designated graffiti drawing layer during the sliding process, the converted third coordinate will be projected outside the canvas. In this case, the graffiti trace will not be generated on the canvas. Therefore, graffiti operations in the photo frame area will not be effective on the canvas.

[0349] Step S214: BrushState returns the canvas with the graffiti traces to BrushUiControl.

[0350] Step S215 , after receiving the canvas with the graffiti traces, BrushUiControl returns the received canvas to MosaicView.

[0351] Step S216 , MosaicView draws the returned canvas (bitmap) with graffiti traces on the current graffiti drawing layer (MosaiView).

[0352] While the user's finger is drawing in the preview area, steps S206 to S216 are continuously performed, causing the graffiti trace to be displayed in real time on the graffiti drawing layer displayed in the preview area. From the user's perspective, it appears as if the graffiti trace is drawn on View 1-1 (or View 1-2) below the graffiti drawing layer. Of course, in reality, at this point, the graffiti drawing layer and View 1-1 (or View 1-2) 1-2 are still two layers.

[0353] Step S217: MosaicView receives a lift event of the preview area.

[0354] In the embodiment of the present application, after the user's finger finishes sliding on the preview area on the touch screen and is lifted up, MosaicView will detect the user lifting event.

[0355] Step S218: MosaicView sends a setting instruction to BrushUiControl, where the setting instruction is used to instruct BrushUiControl to set the controls on the current interface to be available.

[0356] Step S219: BrushUiControl receives the setting instruction and sets the controls on the current interface to be clickable.

[0357] In the embodiment of the present application, when the user's finger is lifted, it indicates that a graffiti mark is finished. At this time, the user can click the controls on the interface to modify the line type, color and thickness of the graffiti mark, and can also erase the graffiti mark just drawn.

[0358] Step S220 , BrushUiControl sends a setting completion message to MosaicView.

[0359] Step S221 , after receiving a lift event or a setting completion message, MosaicView sends a preview area view calculation request to BrushUiControl.

[0360] The preview area view calculation request is used to draw the graffiti trace on view 1-1 (or view 1-2). The preview area view calculation request can carry the coordinates (i.e., second coordinates) of the graffiti trace relative to the original image (view 1-0). The second coordinates have been obtained in steps S203 and S208.

[0361] Step S222: After receiving the preview area view calculation request, BrushUiControl sends the preview area view calculation request to BrushState.

[0362] Step S223: After receiving the preview area view calculation request, BrushState sends the preview area view calculation request to the editing module.

[0363] Step S224: After receiving the calculation request, the editing module calculates the preview area view.

[0364] Taking the calculation of views 1-3 after drawing graffiti trace 2 as an example, the editing module retrieves the stored editing operation record: the unique identifier of frame A and the coordinates of graffiti trace 1 relative to the original image. Based on the currently received preview area view calculation request, the editing module carries the coordinates of graffiti trace 2 relative to the original image. The editing module can first generate graffiti traces 1 and 2 on the original image using the coordinates of graffiti traces 1 and 2 on the original image. Then, it can add frame A to the original image with generated graffiti traces 1 and 2, resulting in views 1-3.

[0365] In step S225 , the editing module sends the calculated preview area view to BrushState.

[0366] Step S226: After receiving the preview area view, BrushState sends the preview area view to SupportExpandMenuRender.

[0367] Step S227 : SupportExpandMenuRender displays the received view in the preview area according to the received preview area view.

[0368] When displaying view 1-3, view 1-2 and view 1-3 have the same size. Therefore, the partial area that originally displayed view 1-2 now also displays the same partial area of ​​view 1-3.

[0369] Step S228 : MosaicView clears the graffiti traces on the current graffiti drawing layer.

[0370] In actual application, in S228, the moment when MosaicView actually executes to clear the graffiti traces will be delayed for a period of time (greater than 500ms) after S221 to ensure that the graffiti traces on the graffiti drawing layer are cleared after the preview area refreshes the display view.

[0371] Regardless of the process of drawing graffiti trace 1 or the process of drawing graffiti trace 2, reference may be made to the embodiment shown in FIG. 17 .

[0372] The difference is that there are differences in the position and size of the graffiti drawing layer when drawing graffiti trace 1 and the graffiti drawing layer when drawing graffiti trace 2; when calculating the preview area view after drawing graffiti trace 1, the historical operation record includes the unique identifier of photo frame A, and the current graffiti operation record includes the second coordinate of graffiti trace 1, etc.; when calculating the preview area view after drawing graffiti trace 2, the historical operation record includes the unique identifier of photo frame A and the second coordinate of graffiti trace 1, etc., and the current graffiti operation record includes the second coordinate of graffiti trace 2, etc.

[0373] By setting the size of the graffiti drawing layer to the same size as the portion of the preview area displayed without the photo frame, the user can ensure that only graffiti operations within the photo frame will generate real-time graffiti traces. Graffiti operations on the photo frame will not generate graffiti traces because they exceed the graffiti drawing layer. After the graffiti is completed, when the preview area is generated, the graffiti trace is first generated on the original image based on the second coordinate of the graffiti trace on the original image. Therefore, graffiti traces will not be generated if the second coordinate exceeds the original image area. Finally, the photo frame is added to the original image with the graffiti trace, so that there are no graffiti traces on the photo frame.

[0374] As another embodiment of the present application, in actual application, it can also be set that when the user draws graffiti, when the graffiti operation passes through the area inside the photo frame and the area where the photo frame is located, graffiti traces corresponding to the graffiti operation are generated in the area inside the photo frame and the area where the photo frame is located. However, when generating a view, or when generating the final picture, graffiti traces corresponding to the graffiti operation are generated in the area inside the photo frame, and no graffiti traces corresponding to the graffiti operation are generated in the photo frame area.

[0375] As shown in Figure 21, when the user's finger draws graffiti traces in the preview area on the display screen, graffiti traces corresponding to the graffiti operation of the user's finger can be generated on the screen displayed in the entire preview area, that is, when the graffiti operation passes through the area inside the photo frame and the area where the photo frame is located, graffiti traces corresponding to the graffiti operation are generated in the area inside the photo frame and the area where the photo frame is located. However, after the user's finger is lifted from the display screen, the electronic device will refresh the display view, and the area of ​​the photo frame in the latest displayed view will no longer display graffiti traces.

[0376] In this scenario, you can set the size of the graffiti drawing layer to be the same as or larger than the preview area currently displayed on the screen while the user is graffitiing. When generating a view, the size of the graffiti drawing layer is the same as the original image size.

[0377] In the above embodiments, the operation of adding a frame to a picture is taken as an example. In actual applications, other editing operations can be performed on the picture first, and then the operation of adding a frame is performed after the other editing operations are completed. After the operation of adding a frame, the graffiti operation is performed.

[0378] Of course, in actual applications, no matter whether the picture is first added with a frame, a preview area view after an editing operation is generated according to the historical editing operation record in the above embodiment.

[0379] When calculating the view of the preview area, you can obtain all the operation records that have been stored before calculating the view of the current preview area, and then add the editing effects corresponding to the operation records of each layer in order from bottom to top with reference to the logical layers shown in Figure 5, and finally get the view.

[0380] Refer to Figure 22, which is an internal architecture diagram of the editing module in an embodiment of the present application.

[0381] Among them, EditorView (editing master) is used to interact with the outside world and different editing function modules.

[0382] As an example, when editing Picture 1, the electronic device obtains Picture 1 from the gallery through EditorView, and the editing module can also interact with modules corresponding to other editing functions through EditorView.

[0383] SimpleeditorManager (monitoring task), used to monitor events in each editing operation and storage acquisition events of the operation record of each editing operation.

[0384] ProcessingService (image computing service) is responsible for computing and managing various types of images or views.

[0385] ProcessingTaskController (computing task control) is used to receive instructions from ProcessingService and pass the instructions to the corresponding computing module.

[0386] UpdatePreviewTask (preview area image calculation task) is used to calculate the view displayed in the preview area after each editing operation is completed.

[0387] ImagesavingTask (image saving module) is used to save the edited image.

[0388] RenderingRequestTask (original image calculation task in comparison) is used to calculate the original image for comparison with the view after the editing operation in some editing operations.

[0389] MasterImage (view management) is used to manage various views.

[0390] StepStack (operation stack management) is used to manage the operation stack (which stores all operation records during the current image editing process).

[0391] The operation stack management includes the current saved operation stack, the restore function stack and the effective layer stack.

[0392] The current saved operation stack is used to store the operation records of each currently saved editing operation, which is used to implement the undo and restore functions;

[0393] The recovery function stack is used to move the top of the current saved operation stack out of the operation record and push it into the recovery function stack when undoing.

[0394] The effective layer stack is used to provide operation records corresponding to each layer of the calculation preview area view.

[0395] Imagepreset (stack transfer object) is used to transfer the operation records in the operation stack management to the computing task.

[0396] SteplayerStack (layer stack management object) is used to manage the effective layer stack.

[0397] Referring to Figure 23, a flowchart of a method for editing an image provided in an embodiment of the present application is shown. In the embodiment shown in Figure 23, the first image, the second image, the third image, and the fourth image are named for the content presented on the display screen of the electronic device. In actual applications, the first image, the second image, the third image, and the fourth image can be the content corresponding to a certain view of Image 1, or the content of a certain view of Image 1 superimposed with other layers.

[0398] S2301: The electronic device displays a first picture and a first control.

[0399] In the embodiment of the present application, the first picture may be the original view of picture 1 or the view after some editing operations on picture 1. As an example, the first picture may be the content displayed in the preview area of ​​the interface shown in (d) of FIG2 .

[0400] The first control is used to add a photo frame to the first picture. For example, the first control may include a control of the photo frame A shown in (d) of FIG2 .

[0401] S2302: The electronic device receives a first operation, and the first operation acts on a first control.

[0402] The first operation in the embodiment of the present application may be a click operation performed by the user on a display screen (which may be a touch screen).

[0403] S2303: In response to the first operation, the electronic device displays a second picture, where the second picture includes the content of the first picture and a frame surrounding the content of the first picture.

[0404] In the embodiment of the present application, the content of the second picture may be the content displayed in the preview area in the interface shown in (a) in FIG. 3 .

[0405] S2304: The electronic device receives a second operation, where the second operation is a first sliding operation of the user on the second picture, and the first sliding operation passes through an area of ​​the second picture where the content of the first picture is located and an area where the photo frame is located.

[0406] In the embodiment of the present application, the second operation may be the operation of drawing a graffiti trace 1 as shown in (d) in FIG. 3 .

[0407] Of course, other steps may be included between step S2303 and step S2304 , and the details may be referred to the description in the embodiment shown in FIG. 3 .

[0408] S2305: In response to the first sliding operation, the electronic device displays a first graffiti trace corresponding to the first sliding operation in the area where the content of the first picture is located, and does not display the graffiti trace corresponding to the first sliding operation in the area where the photo frame is located.

[0409] As another embodiment of the present application, before the electronic device receives the second operation, the method further includes:

[0410] The electronic device displays a second picture and a second control.

[0411] The electronic device receives a third operation, and the third operation acts on the second control.

[0412] In the embodiment of the present application, the second control may be the graffiti control shown in (b) of Figure 3. The third operation may be a click operation of the graffiti control on the interface shown in (b) of Figure 3.

[0413] As another embodiment of the present application, before the electronic device receives the third operation, the method further includes:

[0414] The electronic device receives a fourth operation, where the fourth operation is a second sliding operation of the user on the second picture, and the second sliding operation passes through an area of ​​the second picture where the content of the first picture is located and an area where the photo frame is located;

[0415] In response to the second sliding operation, the electronic device does not display the graffiti trace corresponding to the second sliding operation in the area where the content of the first picture is located, and does not display the graffiti trace corresponding to the second sliding operation in the area where the photo frame is located.

[0416] In the embodiment of the present application, before the electronic device receives the third operation, the electronic device has not yet entered the graffiti function. At this time, the user's sliding operation on the second picture will not generate graffiti traces.

[0417] As another embodiment of the present application, the electronic device displays a first graffiti trace corresponding to the first sliding operation in the area where the content of the first picture is located, and after the graffiti trace corresponding to the first sliding operation is not displayed in the area where the photo frame is located, the method further includes:

[0418] The electronic device displays a first area of ​​a third picture, the third picture including the content of the first picture, a photo frame surrounding the content of the first picture, and a first graffiti trace in the area where the content of the first picture is located, the first area including a portion of the content of the first picture and a portion of the content of the photo frame;

[0419] The electronic device receives a fifth operation, where the fifth operation is a third sliding operation of the user on the third picture, and the third sliding operation passes through an area in the first area where a portion of the content of the first picture is located and an area where a portion of the content of the photo frame is located;

[0420] In response to the third sliding operation, the electronic device displays a second graffiti trace corresponding to the third sliding operation in the area where the partial content of the first picture is located in the first area, and does not display a graffiti trace corresponding to the third sliding operation in the area where the partial content of the photo frame is located in the first area.

[0421] In the embodiment of the present application, the third picture may be the content displayed in the preview area of ​​the interface shown in (a) of Figure 4. The first area is the area on the third picture where the content displayed in the preview area of ​​the interface shown in (c) of Figure 4 is located.

[0422] The fifth operation is the operation of drawing a graffiti as shown in (d) of FIG. 4 .

[0423] As another embodiment of the present application, before the electronic device receives the second operation, the method further includes:

[0424] The electronic device displays a first graffiti drawing layer on top of the second picture, the first graffiti drawing layer being used to display first graffiti traces, and the first graffiti drawing layer and the area corresponding to the content of the first picture in the second picture have the same position and size.

[0425] In the interface shown in (d) of Figure 3 , the graffiti drawing layer when drawing the first graffiti trace (graffiti trace 1) is recorded as the first graffiti drawing layer. The first sliding operation when drawing the first graffiti trace includes a first contact operation, a first move operation, and a first lift operation, which correspond to S201, S206, and S217 in Figure 20 , respectively.

[0426] In an embodiment of the present application, the operations shown in (a) of Figure 4 and (b) of Figure 4 can be recorded as the sixth operation, and the sixth operation is used to trigger the electronic device to display a partial area (first area) of the view shown in (c) of Figure 4.

[0427] In the interface shown in FIG4(d), the graffiti drawing layer when drawing the second graffiti trace (graffiti trace 2) is recorded as the second graffiti drawing layer. The third sliding operation when drawing the second graffiti trace includes a second contact operation, a second move operation, and a second lift operation, which correspond to S201, S206, and S217 in FIG20, respectively.

[0428] In the embodiment of the present application, the coordinates of the graffiti traces in different coordinate systems can be distinguished by using the first, second, third, fourth, etc.

[0429] In the interface shown in (d) of FIG4 , the content displayed in the preview area can be recorded as the fourth picture.

[0430] It should be understood that the size of the serial numbers of the steps in the above embodiments does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of this application.

[0431] An embodiment of the present application further provides a computer-readable storage medium, which stores a computer program. When the computer program is executed by a processor, the steps in the above-mentioned method embodiments can be implemented.

[0432] An embodiment of the present application further provides a computer program product. When the computer program product is run on an electronic device, the electronic device can implement the steps in the above-mentioned various method embodiments.

[0433] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the present application implements all or part of the processes in the above-mentioned embodiment method, which can be completed by instructing the relevant hardware through a computer program. The computer program can be stored in a computer-readable storage medium, and when the computer program is executed by the processor, it can implement the steps of the above-mentioned various method embodiments. Among them, the computer program includes computer program code, and the computer program code can be in source code form, object code form, executable file or some intermediate form. The computer-readable medium may include at least: any entity or device capable of carrying the computer program code to the first device, a recording medium, a computer memory, a read-only memory (ROM), a random access memory (RAM), an electric carrier signal, a telecommunication signal and a software distribution medium. For example, a USB flash drive, a mobile hard disk, a magnetic disk or an optical disk. In some jurisdictions, according to legislation and patent practice, computer-readable media cannot be electric carrier signals and telecommunication signals.

[0434] The present application also provides a chip system, comprising a processor coupled to a memory, the processor executing a computer program stored in the memory to implement the steps of any method embodiment of the present application. The chip system can be a single chip or a chip module composed of multiple chips.

[0435] In the above embodiments, the description of each embodiment has its own focus. For parts that are not described or recorded in detail in a certain embodiment, reference can be made to the relevant description of other embodiments.

[0436] Those skilled in the art will appreciate that the units and method steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0437] The above embodiments are only used to illustrate the technical solutions of the present application, rather than to limit them. Although the present application has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. These modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the various embodiments of the present application, and should all be included in the scope of protection of the present application.

Claims

1. A method for editing a picture, characterized in that: include: The electronic device displays a first picture and a first control; The electronic device receives a first operation, where the first operation acts on the first control; In response to the first operation, the electronic device displays a second picture, where the second picture includes the content of the first picture and a picture frame surrounding the content of the first picture; The electronic device receives a second operation, where the second operation is a first sliding operation of the user on the second picture, and the first sliding operation passes through an area of ​​the second picture where the content of the first picture is located and an area where the photo frame is located; In response to the first sliding operation, the electronic device displays a first graffiti trace corresponding to the first sliding operation in the area where the content of the first picture is located, and does not display the graffiti trace corresponding to the first sliding operation in the area where the photo frame is located.

2. The method according to claim 1, wherein Before the electronic device receives the second operation, the method further includes: The electronic device displays the second picture and the second control; The electronic device receives a third operation, and the third operation acts on the second control.

3. The method according to claim 2, wherein Before the electronic device receives the third operation, the method further includes: The electronic device receives a fourth operation, where the fourth operation is a second sliding operation of the user on the second picture, and the second sliding operation passes through an area of ​​the second picture where the content of the first picture is located and an area where the photo frame is located; In response to the second sliding operation, the electronic device does not display the graffiti trace corresponding to the second sliding operation in the area where the content of the first picture is located, and does not display the graffiti trace corresponding to the second sliding operation in the area where the photo frame is located.

4. The method according to any one of claims 1 to 3, wherein After the electronic device displays a first graffiti trace corresponding to the first sliding operation in an area where the content of the first picture is located, and the area where the photo frame is located does not display the graffiti trace corresponding to the first sliding operation, the method further includes: The electronic device displays a first area of ​​a third picture, the third picture including the content of the first picture, a photo frame surrounding the content of the first picture, and a first graffiti trace in the area where the content of the first picture is located, the first area including a portion of the content of the first picture and a portion of the content of the photo frame; The electronic device receives a fifth operation, where the fifth operation is a third sliding operation of the user on the third picture, and the third sliding operation passes through an area in the first area where a portion of the content of the first picture is located and an area where a portion of the content of the photo frame is located; In response to the third sliding operation, the electronic device displays a second graffiti trace corresponding to the third sliding operation in the area where part of the content of the first picture is located in the first area, and does not display a graffiti trace corresponding to the third sliding operation in the area where part of the content of the photo frame is located in the first area.

5. The method according to claim 2 or 3, wherein: After the electronic device receives the third operation and before receiving the second operation, the method further includes: The electronic device displays a first graffiti drawing layer on top of the second image. The first graffiti drawing layer is For displaying the first graffiti trace, the first graffiti drawing layer and the area corresponding to the content of the first picture in the second picture have the same position and size.

6. The method according to claim 5, wherein The first sliding operation includes: a first contact operation, a first move operation, and a first lift operation. In response to the first sliding operation, the electronic device displays a first graffiti trace corresponding to the first sliding operation in an area where the content of the first picture is located, and does not display the graffiti trace corresponding to the first sliding operation in an area where the photo frame is located, including: In response to the first movement operation, the electronic device displays a first graffiti trace corresponding to the first sliding operation on the first graffiti drawing layer, and does not display the graffiti trace corresponding to the first sliding operation in an area outside the first graffiti drawing layer.

7. The method according to claim 6, wherein The method further comprises: In response to the first lifting operation, the electronic device displays a third picture, where the third picture includes the content of the first picture, a frame surrounding the content of the first picture, and a first graffiti trace in an area where the content of the first picture is located; The electronic device clears the first graffiti trace on the first graffiti drawing layer.

8. The method according to claim 7, wherein After the electronic device displays the third picture, the method further includes: The electronic device receives a sixth operation, where the sixth operation is used to trigger the electronic device to display the first area of ​​the third picture; In response to the sixth operation, the electronic device displays the first area of ​​the third picture; The electronic device displays a second graffiti drawing layer on an upper layer of the first area of ​​the third picture, the second graffiti drawing layer being used to display second graffiti traces, and the second graffiti drawing layer and the area corresponding to the content of the first picture in the first area of ​​the third picture have the same position and size.

9. The method according to claim 8, wherein The method further comprises: The electronic device receives a third sliding operation, where the third sliding operation includes: a second contact operation, a second move operation, and a second lift operation; In response to the second movement operation, the electronic device displays a second graffiti trace corresponding to the third sliding operation on the second graffiti drawing layer, and does not display the graffiti trace corresponding to the third sliding operation in an area outside the second graffiti drawing layer; In response to the second lifting operation, the electronic device displays a first area of ​​a fourth picture, where the fourth picture includes the content of the first picture, a frame surrounding the content of the first picture, and first and second graffiti traces in an area where the content of the first picture is located; The electronic device clears the second graffiti trace on the second graffiti drawing layer.

10. The method according to claim 9, wherein Before the electronic device displays the second graffiti drawing layer on the upper layer of the first area of ​​the third image, the method further includes: The electronic device obtains a first position of the first area on the third image; The electronic device obtains a second position of the content of the first picture on the third picture; The electronic device calculates, by the first position of the first area on the third image, an area where a first position of the first area on the third image overlaps with a second position of the content of the first image on the third image, to obtain a third position of the graffiti drawing layer on the third image; The electronic device obtains a fourth position of the graffiti drawing layer on the first area according to the first position of the first area on the third image and the third position of the graffiti drawing layer on the third image; The electronic device acquires a fifth position of the first area on the display screen of the electronic device; The electronic device obtains a sixth position of the graffiti drawing layer on the display screen according to the fourth position of the graffiti drawing layer on the first area and the fifth position of the first area on the display screen.

11. The method according to claim 10, wherein The electronic device displays a second graffiti drawing layer on an upper layer of the first area of ​​the third image, including: The electronic device displays the second graffiti drawing layer on an upper layer of the first area of ​​the third image according to the sixth position of the graffiti drawing layer on the display screen.

12. The method according to claim 10 or 11, wherein: After obtaining the sixth position of the graffiti drawing layer on the display screen, the method further includes: The electronic device obtains a seventh position of the graffiti drawing layer on the first picture according to the second position of the first picture on the third picture and the third position of the graffiti drawing layer on the third picture; The electronic device obtains a first mapping relationship between coordinates on the display screen and coordinates on the first picture according to the seventh position of the graffiti drawing layer on the first picture and the sixth position of the graffiti drawing layer on the display screen; The electronic device obtains a second mapping relationship between coordinates on the first picture and coordinates on the graffiti drawing layer according to a seventh position of the graffiti drawing layer on the first picture.

13. The method according to claim 12, wherein: The second movement operation carries the first coordinate of the user's finger on the display screen, The step of displaying, in response to the second movement operation, a second graffiti trace corresponding to the third sliding operation on the second graffiti drawing layer and not displaying the graffiti trace corresponding to the third sliding operation in an area outside the second graffiti drawing layer includes: In response to the second movement operation, the electronic device maps the first coordinate of the user's finger on the display screen to the second coordinate of the user's finger on the first picture according to the first mapping relationship; The electronic device maps the second coordinate of the user's finger on the first image to a third coordinate of the user's finger on the graffiti drawing layer according to the second mapping relationship; The electronic device displays a second graffiti trace corresponding to the third sliding operation on the second graffiti drawing layer according to a third coordinate of the user's finger on the graffiti drawing layer.

14. The method according to claim 13, wherein The method further comprises: The electronic device stores a unique identifier of the photo frame corresponding to the first control; The electronic device stores a fourth coordinate of the first graffiti trace on the first picture; The electronic device saves the second coordinates of the second graffiti trace on the first picture, and the second coordinates of the second graffiti trace on the second picture include the second coordinates of the user's finger on the second picture in the third sliding operation.

15. The method according to claim 14, wherein In response to the second lifting operation, the electronic device displays a first area of ​​a fourth picture, including: In response to the second lifting operation, the electronic device obtains the editing record of the first picture, where the editing record of the first picture includes: the unique identifier of the photo frame, the location of the first graffiti trace on the first picture, and the second coordinate of the second graffiti trace on the first picture; The electronic device generates a first graffiti trace and a second graffiti trace on the first picture according to the fourth coordinate of the first graffiti trace on the first picture and the second coordinate of the second graffiti trace on the first picture; The electronic device adds the photo frame to the first picture having the first and second graffiti traces generated thereon according to the unique identifier of the photo frame to obtain the fourth picture; The electronic device displays the first area of ​​the fourth picture according to the position of the first area in the third picture.

16. An electronic device, characterized in that: The electronic device includes a processor, and the processor is configured to run a computer program stored in a memory, so that the electronic device implements the method according to any one of claims 1 to 15.

17. A computer-readable storage medium, characterized in that The computer-readable storage medium stores a computer program, and when the computer program is executed by one or more processors, the method according to any one of claims 1 to 15 is implemented.

Images