Page processing method, apparatus, electronic device, and readable storage medium

Abstract

A page processing method, device, electronic device and readable storage medium are disclosed, which includes: in response to a touch operation acting on a terminal interface, acquiring touch position information and acquiring picture position information of each picture in a target dynamic page (S101); determining a touched target picture and target picture position information based on the touch position information and the picture position information (S102); creating a native image view component at the position of the target picture, rendering the target picture based on the native image view component, and initiating a screen touch event interception mechanism (S103); when the touch event of the target picture is intercepted, appropriately processing the target picture rendered by the native image view component according to the touch operation indicated by the touch event of the target picture (S104). In this method, the user can realize the scaling of pictures in the page only in the target dynamic page without the user jumping to a large image page, and can improve interaction efficiency.

Description

Technical Field

[0001] [Related Application] This application claims priority based on a Chinese patent application with application number 202110796850.7, filed on July 14, 2021, and invention title "Page Processing Method, Apparatus, Electronic Device, and Readable Storage Medium", and all contents of this Chinese patent application are incorporated herein by reference.

[0002] [Technical Field] The present disclosure relates to the field of information technology, and specifically, to a page processing method, apparatus, electronic device, and readable storage medium.

Background Art

[0003] With the development of Internet technology, the content displayed on terminal pages is becoming increasingly diverse. To achieve dynamic display of content, usually, dynamic web pages created based on hypertext markup language are used for content display.

[0004] Currently, when enlarging the picture of a dynamic web page, usually, first click on the picture of the dynamic web page on the terminal interface, the terminal interface jumps to a page that displays a large image, and then an operation step of performing a gesture of picture enlargement on the large image page needs to be executed.

[0005] The process of enlarging the picture in the above dynamic web page is complicated in operation and low in interaction efficiency.

Summary of the Invention

[0006] Embodiments of the present disclosure provide at least a page processing method, apparatus, electronic device, and readable storage medium.

[0007] In a first aspect, embodiments of the present disclosure provide a page processing method, In response to touch operations performed on the terminal interface, the system acquires touch position information and obtains picture position information for each picture within the target dynamic page displayed on the terminal interface. Based on the touch position information and the picture position information of each picture, the touched target picture in each picture and the target picture position information of the target picture in the terminal interface are obtained. At the target picture location indicated by the target picture location information, create a native image view component and render the target picture based on the native image view component, and activate the screen touch event intercept mechanism. When a touch event of the target picture is intercepted, the native image view component rendering appropriately processes the target picture according to the touch operation indicated by the touch event of the target picture.

[0008] In selectable embodiments, based on the touch position information and the picture position information of each picture, the touched target picture in each picture and the target picture position information of the target picture in the terminal interface are obtained. Based on the picture position information of each picture in the target dynamic page and the coordinate system transformation relationship between the target dynamic page and the terminal interface, the picture position information of each picture in the terminal interface is determined. This includes obtaining the touched target picture in each picture and the target picture location information of the target picture in the terminal interface, based on the touch position information in the terminal interface and the determined picture position information of each picture.

[0009] In an optional embodiment, determining the touched target picture in each picture based on the touch position information in the terminal interface and the determined picture position information of each picture is: If the touch location information indicates multiple touch location points, the system includes selecting a picture from among the pictures in the terminal interface whose corresponding picture area includes the multiple touch location points, based on the picture location information of each picture in the terminal interface, as the target picture.

[0010] In an optional embodiment, updating the display attributes of the target picture is done by rendering and updating the target picture based on the native image view component based on the touch operation indicated by the touch event of the target picture. In response to the change in the touch position information, the scaling attribute information of the target picture is determined, and the scaling attribute information includes the scaling ratio and the scaling direction. This includes updating the display attributes of the target picture by rendering and updating the target picture based on the native image view component according to the scaling attribute information.

[0011] In a selectable embodiment, after obtaining the touched target picture in each picture and the target picture location information of the target picture in the terminal interface based on the touch location information and the picture location information of each picture, the method then: The process further includes adding a placeholder picture at the target picture location that matches the size of the target picture in the target dynamic page, wherein the placeholder picture is located below the target picture rendered by the native image view component and above the target picture in the target dynamic page.

[0012] In selectable embodiments, When it is detected that the touch operation has stopped, the target picture is animate-rendered based on the native image view component and restored to its position so that it matches the size of the target picture in the target dynamic page.

[0013] In an optional embodiment, a native image view component is created at the target picture location indicated by the target picture location information, the target picture is rendered based on the native image view component, and before invoking the screen touch event intercept mechanism, Based on the aforementioned touch position information, determine whether there are multiple touch position points on the terminal interface. Creating a native image view component at the target picture location indicated by the target picture location information, rendering the target picture based on the native image view component, and activating the screen touch event intercept mechanism is: If it is determined that multiple touch locations exist, the system includes creating a native image view component at the target picture location indicated by the target picture location information, rendering the target picture based on the native image view component, and activating the screen touch event intercept mechanism.

[0014] In a second embodiment, the embodiments of the present disclosure further provide a page processing apparatus, An acquisition module for acquiring touch position information in response to touch operations acting on the terminal interface and for acquiring picture position information for each picture within the target dynamic page displayed on the terminal interface, A determination module for obtaining the touched target picture in each picture and the target picture location information of the target picture in the terminal interface, based on the touch location information and the picture location information of each picture. A rendering module for creating a native image view component at the target picture location indicated by the target picture location information, rendering the target picture based on the native image view component, and activating a screen touch event intercept mechanism, The system includes a processing module for appropriately processing the target picture in the native image view component rendering, in accordance with the touch operation indicated by the touch event of the target picture, when the touch event of the target picture is intercepted.

[0015] In a third embodiment, an embodiment of the present disclosure further provides a computer device comprising a processor, memory and a bus, wherein the memory stores machine-readable commands that the processor can execute, and when the computer device is in operation, the processor communicates with the memory and via the bus, and when the machine-readable command is executed by the processor, it performs a step in the first embodiment or any possible embodiment of the first embodiment.

[0016] In a fourth embodiment, an embodiment of the present disclosure further provides a computer-readable storage medium in which a computer program is stored, and when the computer program is executed by a processor, it performs a step in the first embodiment or any possible embodiment of the first embodiment.

[0017] The page processing method, apparatus, electronic device, and readable storage medium provided in the embodiments of this disclosure create a native image view component at the target picture location, render the target picture based on the native image view component, intercept touch events of the target picture based on a screen intercept event mechanism, and then process the target picture rendered by the native image view component appropriately according to the touch operation indicated by the touch event of the target picture, thereby realizing gesture scaling and dragging display effects for pictures within a target dynamic page. In the embodiments of this disclosure, there is no need to click on the target picture within the target dynamic page to jump to a large image page and perform related operations on the picture. Viewing operations such as scaling and dragging of the picture can be realized using only the target picture rendered by the native image view component, reducing the number of operation steps and improving interaction efficiency.

[0018] Furthermore, the page processing method provided in the embodiments of this disclosure adds a placeholder picture at the location of the target picture that matches the size of the target picture, and when the placeholder picture is located below and above the target picture, and the target picture rendered by the native image view component is scaled and dragged, the placeholder picture can block the target picture, achieving the effect that the target picture is scaled and dragged by the touch object, thereby improving the truthfulness of the display effect.

[0019] To make the above-mentioned objectives, features, and advantages of this disclosure clearer and easier to understand, better embodiments are described below in detail with accompanying drawings. [Brief explanation of the drawing]

[0020] To more clearly illustrate the technical solutions of the embodiments of the present disclosure, the attached drawings that need to be used in the embodiments are briefly described. The attached drawings here are incorporated into the specification and form a part of this specification. These attached drawings show embodiments that conform to the present disclosure and are used to explain the technical solutions of the present disclosure together with the specification. Note that the following attached drawings only illustrate some embodiments of the present disclosure and should not be regarded as limiting the scope. Those skilled in the art should understand that they can obtain other related drawings based on these attached drawings without creative labor. [Figure 1] It is a flowchart showing the page processing method provided by the embodiment of the present disclosure. [Figure 2] It is a schematic diagram showing the effect of touching the previous page provided by the embodiment of the present disclosure. [Figure 3] It is a schematic diagram showing the effect of touching the page after the embodiment of the present disclosure is provided. [Figure 4] It is a flowchart showing another page processing method provided by the embodiment of the present disclosure. [Figure 5] It is a schematic diagram showing the page processing apparatus provided by the embodiment of the present disclosure. [Figure 6] It is a schematic diagram showing the computer apparatus provided by the embodiment of the present disclosure.

Mode for Carrying Out the Invention

[0021] To further clarify the objectives, technical solutions, and advantages of the embodiments of this disclosure, the technical solutions of the embodiments of this disclosure will be described clearly and completely below, together with the accompanying drawings of the embodiments of this disclosure. However, obviously, the embodiments described are only a selection of embodiments of this disclosure, not all of them. Typically, the components of the embodiments of this disclosure described and shown in the accompanying drawings can be arranged and designed in a variety of different configurations. Therefore, the following detailed description of the embodiments of this disclosure provided in the accompanying drawings is not intended to limit the scope of protection of this disclosure, but is merely an illustrative example of this disclosure. Any other embodiments that a person skilled in the art could obtain based on the embodiments of this disclosure without creative work shall all be included within the scope of protection of this disclosure.

[0022] To enlarge a picture within a dynamic page, the user typically first clicks on the picture displayed on the device interface, then the device interface jumps to the enlarged image page, and finally, gesture scaling and drag operations are performed on the enlarged image page to achieve the goal of displaying the enlarged image. The above steps for enlarging a picture within a dynamic page are relatively cumbersome and have low interaction efficiency.

[0023] According to the above research, this disclosure provides a page processing method that creates a native image view component at the target picture location, renders the target picture based on the native image view component, intercepts touch events of the target picture based on a screen intercept event mechanism, and then processes the target picture rendered by the native image view component appropriately according to the touch operation indicated by the touch event of the target picture, thereby realizing gesture scaling and dragging display effects for pictures within the target dynamic page. In the embodiments of this disclosure, there is no need to click on the target picture within the target dynamic page to jump to the large image page and perform related operations on the picture. Viewing operations such as scaling and dragging of the picture can be achieved using only the target picture rendered by the native image view component, reducing the number of operation steps and improving interaction efficiency.

[0024] The defects present in the above solutions are all the result of the inventor's practice and careful consideration, and therefore, the process of discovering the above problems and the solutions to those problems in this disclosure are contributions to this disclosure in the inventor's process of disclosing the invention.

[0025] Furthermore, since similar symbols and letters indicate the same items in the following attached drawings, there is no need to further define and interpret an item in subsequent attached drawings after it has been defined in one drawing.

[0026] To facilitate understanding of this embodiment, the page processing method disclosed in the embodiments of this disclosure will first be described in detail. The entity executing the page processing method provided in the embodiments of this disclosure may generally be a terminal device or other processing device having a certain computing power, and the terminal device may be a user device (UE), mobile device, user terminal, terminal, mobile phone, cordless phone, personal digital assistant (PDA), handheld device, calculator, in-vehicle device, wearable device, etc. In some possible embodiments, the page processing method may be implemented by calling computer-readable commands stored in memory by a processor.

[0027] The following describes the page processing method provided by the embodiments of this disclosure, using the case where the execution entity is a terminal device as an example.

[0028] First, the page processing method provided by the embodiments of this disclosure is mainly applied to scenarios in which a user views picture content in a dynamic page. The user launches a target application installed on a terminal device (the target application includes a dynamic page, such as a news information application), opens a content detail page in the target application, and if the content detail page is a dynamic page, the user touches the picture content contained in the content detail page that they wish to view, thereby executing the page processing method provided by the embodiments of this disclosure.

[0029] As shown in Figure 1, this is a flowchart of a page processing method provided by an embodiment of the present disclosure, the method including the following S101 to S104.

[0030] S101: In response to a touch operation acting on the terminal interface, touch position information is obtained, and picture position information for each picture in the target dynamic page displayed on the terminal interface is obtained.

[0031] The terminal interface may be a display interface on a touchscreen on a terminal device, and the target dynamic page refers to a page whose content or structure can be displayed dynamically, and may be a web page created based on Hyper Text Markup Language 5 (HTML5), which is here abbreviated as an H5 web page. Note that all of the following H5 web pages are web pages created based on HTML5. H5 pages may be loaded by a web page viewer and displayed on the terminal interface.

[0032] Typically, the target dynamic page does not overlap with the terminal interface. This is because when the terminal interface displays the target dynamic page, fixed page layout content rendered by several native components is displayed in other areas of the terminal interface. For example, when a detailed content page of news information (an H5 page in the web page view load) is opened on a terminal device, the terminal interface may display author information above the detailed content page and user comments below the detailed content page.

[0033] The target dynamic page can be moved vertically and horizontally relative to the device interface. By moving the target dynamic page, content not displayed on the device interface can be shown on the target dynamic page.

[0034] If the target dynamic page contains a large amount of content, this content may occupy a large space and cannot be fully displayed on the device interface. In such cases, a slide operation or other optional display operation can be performed on the target dynamic page to partially or completely obscure previously displayed content before displaying the undisplayed content. If the target dynamic page contains little content, this content may be fully displayed on the device interface, eliminating the need to perform any optional operations on the target dynamic page.

[0035] After the target dynamic page is displayed on the terminal interface, if pictures exist on the target dynamic page, the target script can first detect the picture location information of each picture on the target dynamic page. Each picture within the target dynamic page may be a picture that is currently fully displayed on the terminal interface, a picture that is partially displayed on the terminal interface, or a picture that is not displayed on the terminal interface (a picture that is not displayed may be displayed after navigating the target dynamic page). The picture location information refers to the location information of each picture within the target dynamic page.

[0036] The picture position information of a picture detected by the target script may include offsets of the top and bottom edges of the picture from the top of the target dynamic page, offsets of the left edge of the picture from the left edge of the target dynamic page, and offsets of the right edge of the picture from the right edge of the target dynamic page.

[0037] To facilitate the explanation of picture position information, a plane rectangular coordinate system may be established on the target dynamic page. In a possible embodiment, a plane rectangular coordinate system is established with a vertex of the target dynamic page as the coordinate origin, and the lines connecting two adjacent sides (assuming the target dynamic page is rectangular) to that vertex as the horizontal and vertical axes, respectively. The picture position information is the coordinate information of the picture in the plane rectangular coordinate system, and specifically, it may be the coordinate information of each vertex of the picture in the plane rectangular coordinate system. In other possible embodiments, a plane rectangular coordinate system may be established with another point on the target dynamic page as the origin, and a repeated explanation is omitted here.

[0038] After obtaining the picture location information for each picture in the target dynamic page, if a touch target (e.g., a user's finger) performs a touch operation on the terminal interface, the terminal device can detect the touch position and obtain touch position information. Here, the touch position information refers to the location where the touch target touches and makes contact with the terminal interface.

[0039] Similarly, to facilitate the explanation of touch position information, a plane rectangular coordinate system may be established on the terminal interface, and then the touch position information in the plane rectangular coordinate system may be obtained. In a possible embodiment, the plane rectangular coordinate system may be established with the vertex of the terminal interface as the origin, and the lines where two adjacent sides (assuming the terminal interface is rectangular) are located are the horizontal and vertical axes, respectively, and the touch position information may be coordinate information in the plane rectangular coordinate system. Here, the touch position may be considered as a single point, i.e., the point where the object being touched (e.g., the user's finger) and the terminal interface are in contact. If there are multiple touch positions, coordinate information corresponding to each touch position may be obtained. In another possible embodiment, the plane rectangular coordinate system may be established with another point on the terminal interface as the origin, and a repeated explanation is omitted here.

[0040] In possible embodiments, to facilitate the explanation of touch position information and picture position information, the upper-left corner vertex of the terminal interface and the upper-left corner vertex of the target dynamic page are set as the origins (other vertices may be used, but the vertex serving as the origin in the terminal interface and the vertex serving as the origin in the target dynamic page should be in the same relative position in their respective planes), two plane rectangular coordinate systems with the same coordinate axis direction are established, and then the touch position information and picture position information are obtained, respectively.

[0041] In the above embodiment, a planar rectangular coordinate system is established for the terminal interface and the target dynamic page, respectively, and the accuracy of the touch position information and picture position information is ensured by acquiring touch position information and picture position information, respectively.

[0042] In possible embodiments, a single plane rectangular coordinate system can be established on the terminal interface or target dynamic page, and under this plane rectangular coordinate system, not only can touch position information be obtained, but picture position information for each picture can also be obtained. Such embodiments describe touch position information and picture position information simultaneously, reducing the workload for processing position information, and quickly determine the touched target picture for each picture in step S102 (without the need to perform coordinate system transformation between the plane rectangular coordinate system established on the terminal interface and the plane rectangular coordinate system established on the target dynamic page). However, such embodiments can be implemented on the premise that the terminal interface completely overlaps with the target dynamic page and all pictures contained in the target dynamic page are displayed.

[0043] S102: Based on the touch position information and the picture position information of each picture, the touched target picture in each picture and the target picture position information of the target picture in the terminal interface are obtained.

[0044] In the steps described above, touch position information and picture position information for each picture are obtained using the established plane rectangular coordinate system. Based on the touch position information and picture position information for each picture, the touched target picture can be determined from among the pictures.

[0045] In the embodiments described above, when the terminal interface completely overlaps with the target dynamic page and all pictures contained in the target dynamic page are displayed simultaneously, the touched target picture can be directly determined from among the pictures based on the touch position information and the picture position information of each picture, under the plane rectangular coordinate system established on the terminal interface or the target dynamic page.

[0046] If the terminal interface does not perfectly overlap with the target dynamic page, the plane rectangular coordinates established on the terminal interface and the plane rectangular coordinates established on the target dynamic page are transformed into the same coordinate system. That is, the touch position information and the picture position information of each picture are transformed into the same coordinate system and compared. Based on the touch position information and the picture position information of each picture under the same coordinate system, the touched target picture is determined from among the pictures.

[0047] In possible embodiments, picture position information under planar rectangular coordinates within the target dynamic page may be converted to picture position information under planar rectangular coordinates within the terminal interface. Specifically, the picture position information for each picture in the terminal interface can be determined based on the picture position information for each picture within the target dynamic page and the coordinate system transformation relationship between the target dynamic page and the terminal interface.

[0048] The coordinate system transformation relationships here may include transformation relationships of coordinate axes and transformation relationships of coordinate units (considering that the display dimensions of pictures may differ in different terminal interfaces, mainly because different terminal devices have different pixel densities).

[0049] Specifically, the coordinate axis transformation relationship can be determined based on the relative position and axis direction of the origin of the plane rectangular coordinate system in the target dynamic page and the origin of the plane rectangular coordinate system in the terminal interface (in this disclosure, the axis directions of the plane rectangular coordinate system in the target dynamic page and the axis directions of the plane rectangular coordinate system in the terminal interface may be the same). Subsequently, the coordinate unit transformation relationship is determined according to the screen pixel density in the terminal interface, and specifically, the picture coordinate units of each picture in the target dynamic page returned by the script are multiplied by the screen pixel density in the terminal interface to obtain the display coordinate units of each picture in the terminal interface.

[0050] After determining the picture location information for each picture in the terminal interface, the touched target picture and the target picture location information for the target picture in the terminal interface may be determined based on the touch location information and the determined picture location information for each picture in the terminal interface.

[0051] In this disclosure, if the touch location information indicates multiple touch locations, the system selects a target picture from each picture based on the picture location information of each picture in the terminal interface, specifically the picture whose corresponding picture area contains multiple touch locations. That is, in the case of multiple touch locations, the target picture is the picture in which all of the multiple touch locations are located within the picture area corresponding to the same picture.

[0052] Generally, dragging / scaling a picture by the user requires multi-finger operation, so it is determined whether the current operation is a multi-finger operation as a prerequisite for executing the subsequent step (i.e., S103 below). Specifically, based on the touch position information, it is determined whether there are multiple touch points within the picture area corresponding to the same picture. If there is one touch point in the picture area corresponding to the same picture, it is detected whether it is a long press operation. If it is a long press operation, information suggesting a downloaded or shared picture is displayed on the terminal interface. If it is not a long press operation, the system may not respond to the current touch operation, and it is considered a touch during a normal slide process. If there are multiple touch points in the picture area corresponding to the same picture, the step in S103 can be executed to obtain the drag / scaling effect.

[0053] S103: A native image view component is created at the target picture location indicated by the target picture location information, the target picture is rendered based on the native image view component, and the screen touch event intercept mechanism is activated.

[0054] The native image view component here may also be a native ImageView component. After determining the target picture, a native image view component may be created at the target picture location indicated by the target picture location information. The native image view component may load the picture address corresponding to the target picture and render the target picture, so that the target picture rendered by the native image view component covers the location of the original picture.

[0055] After the native image view component renders the target picture, each touch operation on the target picture by the touch object is intercepted by the terminal interface's screen touch event distribution mechanism, which can then act on the native image view component, which is the process in S104.

[0056] S104: When a touch event of the target picture is intercepted, the target picture rendered by the native image view component is processed appropriately according to the touch operation indicated by the touch event of the target picture.

[0057] Here, the touch operation may be a scaling operation of the target picture, and the scaling attribute information of the target picture can be determined according to the touch operation indicated by the touch event of the target picture, and the scaling attribute information includes the scaling ratio and the scaling direction.

[0058] Specifically, the system can determine how to change the touch position information in accordance with touch operations, and these changes may include changes in the distance between touch positions and changes in the relative direction of the touch positions, which are based on changes in the touch position information.

[0059] Here, the scaling ratio refers to the ratio of the target picture after scaling to its original size, and the scaling direction refers to the relative direction between the target picture after scaling and its original size.

[0060] Subsequently, the target picture is rendered and updated based on the native image view component according to the scaling attribute information, updating the display attributes of the target picture. Here, the display attributes of the target picture refer to the display dimensions and / or display position information of the target picture. After the scaling attribute information is determined, the display dimensions and / or display position information of the target picture rendered by the native image view component can be updated based on the scaling ratio and scaling direction. Figure 2 is a schematic diagram of the effect of touching the previous page, showing the target picture in the original target dynamic page, and Figure 3 is a schematic diagram showing the effect of touching the next page, where the touch event of the target picture in the original target dynamic page is intercepted, the target picture rendered by the native image view component is enlarged, and there is a display effect as if the target picture in the target dynamic page has been enlarged, with the display dimensions of the target picture and the content within the target picture being enlarged synchronously.

[0061] When a touch object touches a target picture rendered by a native image view component, the target picture at the original target dynamic page's location still exists and is always present on the target dynamic page, so the touch object cannot move it as freely as the target picture rendered by the native image view component that is being scaled and dragged. To achieve the effect that the target picture in the original target dynamic page is scaled, dragged, and moved by the touch object, when the target picture rendered by the native image view component is scaled and dragged, create an image view (view) component at the target picture's location, render a placeholder picture that matches the size of the target picture in the target dynamic page using the view component, the placeholder picture may be a gray picture, and be added below the target picture rendered by the native image view component and above the target picture in the target dynamic page, ensuring that the position and size of the placeholder picture completely cover the target picture in the target dynamic page. When the touch target begins to touch the target picture rendered by the native image view component, the placeholder picture is displayed, and since the target picture rendered by the native image view component is directly above the target picture in the target dynamic page, the display attributes of the target picture rendered by the native image view component change in a timely manner as the touch target's touch position changes, and at the same time the target picture in the target dynamic page is obscured by the placeholder picture, resulting in a practical effect where the touch target can drag and scale the target picture in the target dynamic page.

[0062] If it is detected that the touch operation has stopped, the target picture is animate-rendered based on the native image view component, and the target picture rendered by the native image view component is restored to its original picture position and size. That is, the target picture rendered by the native image view component moves from the touch operation stop position to the position where the target picture is located in the target dynamic page, the dimensions of the target picture rendered by the native image view component are restored to the dimensions of the target picture in the target dynamic page, and the animation duration may be set to 200ms as an example. After the animation finishes, that is, after the target picture rendered by the native image view component is restored to its position within the target dynamic page and matches the size of the target picture within the target dynamic page, the native image view component deletes the rendered target picture and placeholder picture. At this point, the target picture within the target dynamic page is displayed on the terminal interface, and the touch target can scale, drag, etc., the target picture within the target dynamic page via touch operation, creating a visual effect as if the target picture within the target dynamic page has been physically moved to the touch target's terminal interface. When the touch operation stops, the target picture within the target dynamic page automatically returns to its original position. Note that the native image view component in this disclosure supports not only touch operations such as scaling and dragging, but also arbitrary touch interaction operations such as clicking, double-clicking, long-pressing, and handwriting input.

[0063] To more clearly illustrate the page processing method provided by the embodiments of this disclosure, Figure 4 is a flowchart of a specific page processing process. For example, as shown in Figure 4, after launching a target application installed on a terminal device and opening a target dynamic page within the target application, each picture and JavaScript within the target dynamic page displayed on the terminal device can detect the picture position information of each picture within the target dynamic page.

[0064] When a finger performs a touch operation on the terminal interface, in response to the touch operation acting on the terminal interface, the touch position information of each finger on the terminal interface is acquired. Based on the touch position information of each finger and the picture position information of each picture, it is determined whether the finger has touched a picture. If the finger has touched a picture, it is further determined whether there are multiple touch position points within the picture area corresponding to the same picture. If there is one touch position point in the picture area corresponding to the same picture, it is detected whether it is a long press operation. If it is a long press operation, information suggesting a downloaded picture or shared picture is displayed on the terminal interface. If it is not a long press operation, the current touch operation is not responded to and is considered a touch during a normal slide process. If there are multiple touch position points in the picture area corresponding to the same picture, the picture area containing the multiple touch position points is considered the picture and target picture.

[0065] Subsequently, a native ImageView component is created at the target picture location indicated by the target picture location information. The ImageView component renders the target picture, and each touch operation on the target picture is intercepted by the screen touch event delivery mechanism and can then be acted upon by the native ImageView component.

[0066] It is also possible to create a single, simple native view component and have the view component render a gray placeholder picture that matches the size of the target picture. The gray placeholder picture is added below the target picture rendered by the native image view component and above the target picture in the target dynamic page, so that the position and size of the placeholder picture can completely cover the target picture in the target dynamic page.

[0067] Next, it determines whether an operation such as scaling drag is performed on the screen. If no such operation is performed on the screen, it may remain unresponsive and continue monitoring whether a finger touches the picture. When a scaling drag operation is performed by a finger, the display attributes of the target picture rendered by the native image view component change in a timely manner as the touch position of the touch target changes. At the same time, the target picture within the target dynamic page is obscured by a placeholder picture, creating the effect that the touch target is dragging and scaling the target picture within the target dynamic page.

[0068] When the finger touch operation stops, the target picture rendered by the native image view component is animated to return to its original position from the touch operation's stopping point, restored to its original size, and finally the target picture and placeholder picture rendered by the native image view component are deleted. At this point, the target picture within the target dynamic page is redisplayed in the terminal interface.

[0069] Those skilled in the art will understand that in the above-described method of a specific embodiment, the order of each step does not imply any restriction of the implementation process by a strict execution order, and the specific execution order of each step should be determined by its function and possible internal logic.

[0070] Based on a similar inventive concept, embodiments of this disclosure further provide a page processing apparatus corresponding to a page processing method, and since the apparatus in embodiments of this disclosure solves the problem by the same principle as the page processing method described in embodiments of this disclosure, the implementation of the apparatus can be found by referring to the implementation of the method, and a repeated explanation is omitted.

[0071] As shown in Figure 5, this is a schematic diagram of the architecture of a page processing device provided in an embodiment of the present disclosure, the device comprising an acquisition module 501, a first decision module 502, a rendering module 503, and a processing module 504. The acquisition module 501 is used to acquire touch position information in response to touch operations acting on the terminal interface, and to acquire picture position information for each picture in the target dynamic page displayed on the terminal interface. The first decision module 502 is used to obtain the touched target picture in each picture and the target picture location information of the target picture in the terminal interface, based on the touch location information and the picture location information of each picture. The rendering module 503 is used to create a native image view component at the target picture position indicated by the target picture position information, to render the target picture based on the native image view component, and to activate the screen touch event intercept mechanism. When a touch event of the target picture is intercepted, the processing module 504 is used to appropriately process the target picture rendered by the native image view component in accordance with the touch operation indicated by the touch event of the target picture.

[0072] The embodiments of this disclosure create a native image view component at the target picture location, render the target picture using the native image view component, and process the rendered target picture appropriately according to the touch operation indicated by the touch event. This eliminates the need to click on the target picture in the target dynamic page to jump to the large image page and perform related operations on the picture. Viewing operations such as scaling and dragging the picture can be performed solely on the target dynamic page, reducing the number of operation steps and improving interaction efficiency.

[0073] In possible embodiments, the first determination module 502 is specifically used to determine the picture location information of each picture in the terminal interface based on the picture location information of each picture in the target dynamic page and the coordinate system transformation relationship between the target dynamic page and the terminal interface. Based on the touch position information and the determined picture position information of each picture in the terminal interface, the touched target picture in each picture and the target picture position information of the target picture in the terminal interface are obtained.

[0074] In a possible embodiment, if the touch location points indicated by the touch location information are multiple touch location points, the first decision module 502 specifically selects a picture from each of the pictures in the terminal interface, based on the picture location information of each of the pictures, the picture in which the corresponding picture area includes the multiple touch location points, as the target picture.

[0075] In possible embodiments, the processing module 504 is specifically used to determine scaling attribute information of the target picture based on the touch operation indicated by the touch event of the target picture, the scaling attribute information includes a scaling ratio and a scaling direction. The display attributes of the target picture are updated by rendering and updating the target picture based on the native image view component according to the scaling attribute information.

[0076] In a possible embodiment, the system further comprises an additional module used to add a placeholder picture at the target picture location that matches the size of the target picture in the target dynamic page, wherein the placeholder picture is located below the target picture rendered by the native image view component and above the target picture in the target dynamic page.

[0077] In a possible embodiment, the processing module 504 is used specifically, when it detects that the touch operation has stopped, to animate-render the target picture based on the native image view component and to restore the target picture to its position so as to match the size of the target picture in the target dynamic page.

[0078] In a possible embodiment, the system further comprises a second determination module used to determine whether multiple touch points exist on the terminal interface based on the touch position information, Specifically, the rendering module 503, when it determines that multiple touch position points exist, is used to create a native image view component at the target picture position indicated by the target picture position information, render the target picture based on the native image view component, and activate the screen touch event intercept mechanism.

[0079] For a description of the processing flow of each module of the device and the interaction flow between each module, please refer to the relevant description in the embodiment of the method described above, and a detailed explanation will be omitted.

[0080] Based on a similar technical concept, embodiments of the present disclosure further provide a computer device. As shown in Figure 6, this is a schematic diagram of the structure of a computer device 600 provided by embodiments of the present disclosure, comprising a processor 601, memory 602, and bus 603. Here, memory 602 is used to store execution commands and comprises internal memory 6021 and external memory 6022, where internal memory 6021 is also called internal memory and is used to temporarily store calculation data of the processor 601 and data exchanged with external memory 6022 such as a hard disk. The processor 601 exchanges data with external memory 6022 via internal memory 6021, and when the computer device 600 is operating, the processor 601 communicates with memory 602 via bus 603, and the processor 601 executes the following commands: In response to touch operations acting on the terminal interface, touch position information is acquired, and picture position information for each picture in the target dynamic page displayed on the terminal interface is acquired. Based on the touch position information and the picture position information of each picture, the touched target picture in each picture and the target picture position information of the target picture in the terminal interface are obtained. A native image view component is created at the target picture location indicated by the target picture location information, the target picture is rendered based on the native image view component, and the screen touch event intercept mechanism is activated. When a touch event of the target picture is intercepted, the native image view component processes the rendered target picture appropriately according to the touch operation indicated by the touch event of the target picture.

[0081] Embodiments of the present disclosure further provide a computer-readable storage medium that stores a computer program, and when the computer program is executed by a processor, the steps of the page processing method described above are performed. Here, the storage medium may be volatile or non-volatile computer-readable storage medium.

[0082] Embodiments of the present disclosure further provide a computer program product in which program code is carried, and instructions contained in the program code are used to perform the steps of the page processing method described in the above embodiment, and further repetition is omitted as specifics should be seen from the above embodiment.

[0083] Here, the computer program product described above can be specifically implemented by hardware, software, or a combination thereof. In one optional embodiment, the computer program product is specifically implemented as a computer storage medium, and in another optional embodiment, the computer program product can be specifically implemented as a software product, such as a software development kit (SDK).

[0084] For the convenience and brevity of explanation, those skilled in the art will need to refer to the corresponding steps in the aforementioned method embodiments for the specific working steps of the systems and apparatus described above, and will not need to repeat the explanation. In some embodiments provided in this disclosure, it should be understood that the disclosed systems, apparatus and methods may be implemented in other forms. The apparatus embodiments described above are illustrative, and for example, the division of the units is merely a division of logical functions and may be divided in other ways when actually implemented, for example, multiple units or components may be combined, or integrated into another system, or some features may be ignored or not performed. In other words, the coupling or direct coupling or communication connection between the illustrated or discussed may be an indirect coupling or communication connection via some communication interface, apparatus or unit, and may be in an electrical, mechanical or other form.

[0085] The units described as separation members may or may not be physically separated, and the members referred to as units may or may not be physical units; that is, they may be located in a single location or distributed across multiple network units. To solve the objectives of this embodiment, some or all of these units may be selected according to the actual needs.

[0086] Furthermore, each functional unit in each embodiment of the present disclosure may be integrated into a single processing unit, each unit may exist physically independently, or two or more units may be integrated into a single unit.

[0087] The aforementioned functions may be implemented as software function units and, if sold or used as standalone products, may be stored in a processor-executable, non-volatile, computer-readable storage medium. Based on this understanding, the technical solutions of the present disclosure may be substantially, or in part as a contribution to the present art, or in part as a software product, which may be stored in a storage medium and may include several instructions for causing a computer device (such as a personal computer, server, or network device) to perform all or part of the steps described in each embodiment of the present disclosure. The aforementioned storage medium may include various media capable of storing program code, such as USB flash drives, removable hard disks, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0088] Finally, the embodiments described above are merely specific embodiments of the Disclosure, illustrating, not limiting, the technical solutions of the Disclosure, and the scope of protection of the Disclosure is not limited herein. Although the Disclosure has been described in detail with reference to the embodiments described above, a person skilled in the art can modify, or readily conceive of, or substitute certain technical features of the technical solutions described in the embodiments described above, within the technical scope disclosed herein. Such modifications, changes, or substitutions do not detract from the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the Disclosure, and are all included within the scope of protection of the Disclosure. Therefore, the scope of protection of the Disclosure shall be subject to the scope of protection of the claims.

Claims

1. In response to touch operations performed on the terminal interface, the system acquires touch position information and picture position information for each picture within the target dynamic page displayed on the terminal interface. Based on the touch position information and the picture position information of each picture, the touched target picture in each picture and the target picture position information of the target picture in the terminal interface are determined. Based on the aforementioned touch position information, it is determined whether there are multiple touch position points on the terminal interface. If it is determined that multiple touch points exist, a native image view component is created at the target picture location indicated by the target picture location information, the target picture is rendered based on the native image view component, and the screen touch event intercept mechanism is activated. When a touch event of the target picture is intercepted, the target picture rendered based on the native image view component is processed appropriately according to the touch operation indicated by the touch event of the target picture. When it is detected that the touch operation has stopped, the target picture is animate-rendered based on the native image view component, and the target picture is restored to its position so that it matches the size of the target picture in the target dynamic page. A page processing method characterized by including the following:

2. Based on the touch position information and the picture position information of each picture, obtaining the touched target picture in each picture and the target picture position information of the target picture in the terminal interface is: Based on the picture position information of each picture in the target dynamic page and the coordinate system transformation relationship between the target dynamic page and the terminal interface, the picture position information of each picture in the terminal interface is determined. The page processing method according to claim 1, characterized in that it includes obtaining the touched target picture in each picture and the target picture location information of the target picture in the terminal interface, based on the touch location information in the terminal interface and the picture location information of each picture.

3. Based on the touch position information in the terminal interface and the determined picture position information of each picture, determining the touched target picture in each picture is: The page processing method according to claim 2, characterized in that, if the touch position points indicated by the touch position information are multiple touch position points, the method includes selecting a picture from each of the pictures in the terminal interface, where the corresponding picture area includes the multiple touch position points, as the target picture.

4. Processing the target picture rendered based on the native image view component in accordance with the touch operation indicated by the touch event of the target picture is as follows: Based on the touch operation indicated by the touch event of the target picture, the scaling attribute information of the target picture is determined, and the scaling attribute information includes the scaling ratio and the scaling direction. The page processing method according to claim 1, characterized in that the target picture is rendered and updated based on the native image view component according to the scaling attribute information.

5. Based on the touch position information and the picture position information of each picture, the page processing method obtains the touched target picture in each picture and the target picture position information of the target picture in the terminal interface, and then: The page processing method according to claim 1, further comprising adding a placeholder picture at the target picture location that matches the size of the target picture in the target dynamic page, wherein the placeholder picture is located below the target picture rendered by the native image view component and above the target picture in the target dynamic page.

6. An acquisition module used to acquire touch position information in response to touch operations acting on the terminal interface, and to acquire picture position information for each picture in the target dynamic page displayed on the terminal interface, A first determination module used to determine the touched target picture in each picture and the target picture location information of the target picture in the terminal interface, based on the touch location information and the picture location information of each picture. A second determination module that determines whether multiple touch points exist on the terminal interface based on the aforementioned touch position information, If it is determined that multiple touch points exist, a rendering module is provided to create a native image view component at the target picture location indicated by the target picture location information, render the target picture based on the native image view component, and activate the screen touch event intercept mechanism. A page processing device comprising: a processing module for appropriately processing the target picture rendered based on the native image view component in accordance with the touch operation instructed by the touch event of the target picture when the touch event of the target picture is intercepted, and a processing module that, when it detects that the touch operation has stopped, animates and renders the target picture based on the native image view component, and restores the target picture to the target picture position so as to match the size of the target picture in the target dynamic page.

7. A computer device comprising a processor, memory, and a bus, wherein the memory stores machine-readable commands that the processor can execute, and when the computer device is in operation, the processor communicates with the memory via the bus, and when the machine-readable command is executed by the processor, the steps of the page processing method described in any one of claims 1 to 5 are executed.

8. A computer-readable storage medium storing a computer program, characterized in that when the computer program is executed by a processor, the steps of the page processing method described in any one of claims 1 to 5 are executed.

Images