WO2023284442A1 - 一种页面处理方法、装置、电子设备及可读存储介质 - Google Patents

一种页面处理方法、装置、电子设备及可读存储介质 Download PDF

Info

Publication number
WO2023284442A1
WO2023284442A1 PCT/CN2022/097301 CN2022097301W WO2023284442A1 WO 2023284442 A1 WO2023284442 A1 WO 2023284442A1 CN 2022097301 W CN2022097301 W CN 2022097301W WO 2023284442 A1 WO2023284442 A1 WO 2023284442A1
Authority
WO
WIPO (PCT)
Prior art keywords
picture
target
position information
target picture
touch
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Ceased
Application number
PCT/CN2022/097301
Other languages
English (en)
French (fr)
Inventor
蒋维
李迪昂
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing ByteDance Network Technology Co Ltd
Original Assignee
Beijing ByteDance Network Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing ByteDance Network Technology Co Ltd filed Critical Beijing ByteDance Network Technology Co Ltd
Priority to JP2023573551A priority Critical patent/JP2024521202A/ja
Priority to EP22841082.5A priority patent/EP4339808B1/en
Priority to US18/569,940 priority patent/US12578849B2/en
Publication of WO2023284442A1 publication Critical patent/WO2023284442A1/zh
Anticipated expiration legal-status Critical
Ceased legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0485—Scrolling or panning
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G06F3/04883—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures for inputting data by handwriting, e.g. gesture or text
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G06F3/04886—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures by partitioning the display area of the touch-screen or the surface of the digitising tablet into independently controllable areas, e.g. virtual keyboards or menus
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T13/00—Animation
    • G06T13/80—Two-dimensional [2D] animation, e.g. using sprites
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F2203/00—Indexing scheme relating to G06F3/00 - G06F3/048
    • G06F2203/048—Indexing scheme relating to G06F3/048
    • G06F2203/04806—Zoom, i.e. interaction techniques or interactors for controlling the zooming operation
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F2203/00—Indexing scheme relating to G06F3/00 - G06F3/048
    • G06F2203/048—Indexing scheme relating to G06F3/048
    • G06F2203/04808—Several contacts: gestures triggering a specific function, e.g. scrolling, zooming, right-click, when the user establishes several contacts with the surface simultaneously; e.g. using several fingers or a combination of fingers and pen
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T2200/00—Indexing scheme for image data processing or generation, in general
    • G06T2200/24—Indexing scheme for image data processing or generation, in general involving graphical user interfaces [GUIs]

Definitions

  • the present disclosure relates to the field of information technology, and in particular, relates to a page processing method, device, electronic equipment, and readable storage medium.
  • Embodiments of the present disclosure at least provide a page processing method, device, electronic equipment, and readable storage medium.
  • an embodiment of the present disclosure provides a page processing method, including:
  • determining the touched target picture in each picture based on the touch position information and the determined picture position information of each picture in the terminal interface includes:
  • the touch position point indicated by the touch position information is a plurality of touch position points
  • the corresponding picture area select the corresponding picture area to include The pictures of the plurality of touch position points are used as the target pictures.
  • the target picture is rendered and updated based on the native image view component, so as to update the display properties of the target picture, including :
  • the zoom attribute information includes a zoom scale and a zoom direction
  • the method based on the touch position information and the picture position information of each picture, determine the touched target picture in each picture, and the target of the target picture in the terminal interface After the picture location information, the method also includes:
  • the placeholder picture is located below the target picture rendered by the native image view component and located on the target dynamic page above the target image in the .
  • it also includes:
  • animation rendering is performed on the target picture based on the native image view component, so that the target picture is restored to the position of the target picture, and it is consistent with the target in the target dynamic page
  • the images are the same size.
  • a native image view component is created at the target picture position indicated by the target picture position information, and the target picture is rendered based on the native image view component, and screen touch event interception is started Before the mechanism, it also includes:
  • a native image view component At the target picture position indicated by the target picture position information, create a native image view component, and render the target picture based on the native image view component, and start a screen touch event interception mechanism, including:
  • an embodiment of the present disclosure further provides a page processing device, including:
  • An acquisition module configured to acquire touch position information in response to a touch operation acting on the terminal interface, and acquire picture position information of each picture in the target dynamic page displayed on the terminal interface;
  • a determining module configured to determine the touched target picture in each picture and the target picture position information of the target picture in the terminal interface based on the touch position information and the picture position information of each picture;
  • a rendering module configured to create a native image view component at the target picture position indicated by the target picture position information and render the target picture based on the native image view component, and start a screen touch event interception mechanism;
  • the processing module is configured to perform corresponding processing on the target picture rendered by the native image view component according to the touch operation indicated in the touch event of the target picture when the touch event for the target picture is intercepted.
  • an embodiment of the present disclosure further provides a computer device, including: a processor, a memory, and a bus, the memory stores machine-readable instructions executable by the processor, and when the computer device is running, the processing The processor communicates with the memory through a bus, and when the machine-readable instructions are executed by the processor, the above-mentioned first aspect, or the steps in any possible implementation manner of the first aspect are executed.
  • a computer device including: a processor, a memory, and a bus
  • the memory stores machine-readable instructions executable by the processor, and when the computer device is running, the processing
  • the processor communicates with the memory through a bus, and when the machine-readable instructions are executed by the processor, the above-mentioned first aspect, or the steps in any possible implementation manner of the first aspect are executed.
  • embodiments of the present disclosure further provide a computer-readable storage medium, on which a computer program is stored, and when the computer program is executed by a processor, the above-mentioned first aspect, or any of the first aspects of the first aspect, may be executed. Steps in one possible implementation.
  • a native image view component is created at the position of the target image and the target image is rendered based on the native image view component, and then based on the screen interception event mechanism, the Intercept the touch event of the target picture, and then process the target picture rendered by the native image view component according to the touch operation indicated in the touch event of the target picture, and realize gesture zooming and dragging of pictures in the target dynamic page Display effect
  • the embodiment of the present disclosure does not need to click the target picture in the target dynamic page to jump to the large picture page and then perform related operations on the picture, and can directly realize the zooming and zooming of the picture in the target picture rendered by the native image view component. Viewing operations such as dragging and dropping save operation steps and improve interaction efficiency.
  • a placeholder picture with the same size as the target picture is added at the position of the target picture, where the placeholder picture is located below the target picture and above the target picture, when rendered by the native image view component
  • the placeholder picture can cover the target picture, making it look like the target picture is zoomed and dragged by the touched object, thereby improving the authenticity of the display effect.
  • FIG. 1 shows a flow chart of a page processing method provided by an embodiment of the present disclosure
  • FIG. 2 shows a schematic diagram of the page effect before touch provided by an embodiment of the present disclosure
  • FIG. 3 shows a schematic diagram of a touched page effect provided by an embodiment of the present disclosure
  • FIG. 4 shows a flow chart of another page processing method provided by an embodiment of the present disclosure
  • FIG. 5 shows a schematic diagram of a page processing device provided by an embodiment of the present disclosure
  • Fig. 6 shows a schematic diagram of a computer device provided by an embodiment of the present disclosure.
  • this disclosure provides a page processing method, which creates a native image view component at the position of the target image and renders the target image based on the native image view component, and then intercepts the touch event of the target image based on the screen interception event mechanism , and then according to the touch operation indicated in the touch event of the target picture, the target picture rendered by the native image view component is processed accordingly, and the display effect of zooming and dragging the picture in the target dynamic page is realized.
  • the embodiment of the present disclosure does not need Click the target picture in the target dynamic page to jump to the large picture page and then perform related operations on the picture. You can directly perform viewing operations such as zooming and dragging the picture in the target picture rendered by the native image view component, which saves a lot of time. The operation steps have improved the interaction efficiency.
  • the execution subject of the page processing method provided in the embodiments of the present disclosure is generally a terminal device with a certain computing capability or other processing device
  • the terminal device can be user equipment (User Equipment, UE), mobile device, user terminal, terminal, cellular phone, cordless phone, personal digital assistant (Personal Digital Assistant, PDA), handheld device, computing device, vehicle-mounted device, Wearable equipment etc.
  • the page processing method may be implemented by a processor invoking computer-readable instructions stored in a memory.
  • the page processing method provided by the embodiments of the present disclosure is mainly applied in the scene where the user views the picture content in the dynamic page, and starts the target application program installed on the terminal device (the target application program includes a dynamic page, such as News and information applications), and open the content details page in the target application, when the content details page is a dynamic page and the user wants to view the picture content contained in the content details page through a touch operation, you can execute this
  • the target application program includes a dynamic page, such as News and information applications
  • the method includes S101-S104, wherein:
  • S101 In response to a touch operation acting on a terminal interface, acquire touch position information, and acquire picture position information of each picture in a target dynamic page displayed on the terminal interface.
  • the terminal interface can be the display interface in the touch screen on the terminal device, and the target dynamic page can refer to a page that can realize dynamic display of page content or structure, such as based on Hyper Text Markup Language 5 (Hyper Text Mark up Language5, HTML5) production
  • the web page here referred to as the H5 web page.
  • the H5 webpages mentioned below all refer to webpages made based on HTML5.
  • the H5 page can be loaded through the web view (webview) and displayed in the terminal interface.
  • the target dynamic page does not overlap with the terminal interface, because when the terminal interface displays the target dynamic page, some fixed page layout content rendered by native components will also be displayed in other display areas of the terminal interface, such as opening news on the terminal device
  • the terminal interface When consulting the content details page (the H5 page loaded in the web view), the terminal interface will also display the author information of the article at the top of the content details page, and user comments at the bottom of the content details page.
  • the target dynamic page can be translated relative to the terminal interface in the up and down directions, and can also be translated in the left and right directions. By panning the target dynamic page, the content in the target dynamic page that is not displayed on the terminal interface can be displayed.
  • the target dynamic page contains a lot of content
  • the content takes up a long space and cannot be fully displayed on the terminal interface. Perform a sliding operation on the target dynamic page or any other possible display operations to partially display the previously displayed content. Or after completely hiding, the undisplayed content can be displayed.
  • the target dynamic page contains less content, all of the content can be displayed on the terminal interface, so there is no need to perform any operation on the target dynamic page.
  • the target script can first detect the picture position information of each picture in the target dynamic page.
  • Each picture in the target dynamic page can be all currently displayed on the terminal interface, or partially displayed on the terminal interface, or none of the pictures displayed on the terminal interface (the undisplayed pictures can be displayed by panning the target dynamic page).
  • the picture position information refers to the position information of each picture in the target dynamic page.
  • the picture position information of the picture detected by the target script can include the offset between the upper and lower edges of the picture and the top of the target dynamic page, the offset of the left edge of the picture from the left of the target dynamic page, and the offset of the right edge of the picture from the right of the target dynamic page. displacement.
  • a plane Cartesian coordinate system can also be established in the target dynamic page.
  • a vertex of the target dynamic page can be used as the origin of the coordinates, and the straight lines where the two adjacent sides of the vertex (assuming the target dynamic page is a rectangle) are located are the abscissa axis and the ordinate axis respectively , establish a plane Cartesian coordinate system, and the picture position information may be the coordinate information of the picture in the plane Cartesian coordinate system, specifically, it may be the coordinate information of each vertex of the picture in the plane Cartesian coordinate system.
  • a plane Cartesian coordinate system may also be established with other points on the target dynamic page as the origin, which will not be repeated here.
  • the terminal device After obtaining the picture position information of each picture in the target dynamic page, if a touch object (such as a user's finger) performs a touch operation on the terminal interface, the terminal device can detect the touch position, thereby obtaining the touch position information.
  • the touch position information refers to the position information of the touch object in contact with the terminal interface when the touch object touches the terminal interface.
  • a plane Cartesian coordinate system can be established in the terminal interface, and then the touch position information in the plane Cartesian coordinate system can be acquired.
  • a vertex of the terminal interface can be used as the origin, and the straight lines where the two adjacent sides of the vertex (assuming the terminal interface is a rectangle) are located are the abscissa axis and the ordinate axis, respectively, to establish a plane
  • the touch position information may be coordinate information in a plane Cartesian coordinate system.
  • the touch position may be regarded as a point, that is, a point where the touch object (such as the user's finger) is tangent to the terminal interface.
  • coordinate information corresponding to each touch position may be obtained.
  • a plane Cartesian coordinate system may also be established with other points on the terminal interface as the origin, which will not be repeated here.
  • the vertex in the upper left corner in the terminal interface and the vertex in the upper left corner in the target dynamic page can be used as the origin respectively (or vertices in other positions , but the vertex as the origin in the terminal interface should have the same relative position as the vertex as the origin in the target dynamic page in their respective planes), establish two plane rectangular coordinate systems with the same coordinate axis direction, and then obtain the touch position information and Image location information.
  • the accuracy of the touch position information and picture position information is ensured by establishing a plane Cartesian coordinate system in the terminal interface and the target dynamic page respectively, and then obtaining the touch position information and picture position information respectively.
  • a plane Cartesian coordinate system can also be established in the terminal interface or the target dynamic page, and then in the plane Cartesian coordinate system, not only the touch position information but also the picture position information of each picture are acquired,
  • this embodiment can describe the touch position information and the picture position information at the same time, reduce the workload of processing the position information, and quickly determine the touched target picture in each picture in step S102 (the plane established in the terminal interface does not need to be Cartesian coordinate system and the planar Cartesian coordinate system established in the target dynamic page for coordinate system conversion), but the premise that this implementation can be implemented is that the terminal interface is required to completely overlap with the target dynamic page, and the pictures contained in the target dynamic page are all display.
  • S102 Based on the touch position information and the picture position information of each picture, determine a touched target picture in each picture, and target picture position information of the target picture in the terminal interface.
  • the touch position information and the picture position information of each picture have been obtained through the established planar rectangular coordinate system.
  • the touched target picture in each picture can be determined based on the touch position information and the picture position information of each picture.
  • the terminal interface and the target dynamic page are completely overlapped, and all the pictures contained in the target dynamic page are displayed at the same time, it is possible to directly establish a plane right angle on the terminal interface or the target dynamic page. Under the coordinates, based on the touch position information and the picture position information of each picture, the touched target picture in each picture is determined.
  • the coordinate system transformation can be performed between the plane Cartesian coordinates established in the terminal interface and the plane Cartesian coordinates established in the target dynamic page, that is, the touch position information and each picture
  • the image position information of the image is converted to the same coordinate system, so as to be comparable, so as to determine the touched target image in each image based on the touch position information in the same coordinate system and the image position information of each image.
  • the picture position information in the plane Cartesian coordinates in the target dynamic page can be converted to the picture position information in the plane Cartesian coordinates in the terminal interface, specifically, based on each picture in the target dynamic
  • the picture position information in the page, and the coordinate system conversion relationship between the target dynamic page and the terminal interface determine the picture position information of each picture in the terminal interface.
  • the coordinate system conversion relationship here may include the conversion relationship of the coordinate axis and the conversion relationship of the coordinate unit (here, it is mainly considered that different terminal devices have different pixel densities, so the display sizes of pictures on different terminal interfaces may be different).
  • the plane Cartesian coordinate system in the target dynamic page can be based on the relative position of the origin of the plane Cartesian coordinate system in the target dynamic page and the origin of the plane Cartesian coordinate system in the terminal interface and the direction of the coordinate axes (in this disclosure, the plane Cartesian coordinate system in the target dynamic page
  • the direction of the coordinate axis of the coordinate axis and the coordinate axis of the plane Cartesian coordinate system in the terminal interface may be consistent), and the conversion relationship of the coordinate axes is determined.
  • the screen pixel density in the terminal interface determine the conversion relationship of the coordinate units. Specifically, multiply the picture coordinate units of each picture in the target dynamic page returned by the script by the screen pixel density in the terminal interface to get each picture in the terminal interface Coordinate units for display.
  • the touch position point indicated by the touch position information is a plurality of touch position points
  • the corresponding picture area containing multiple touch points is used as the target picture. That is, when there are multiple touch position points, and the multiple touch position points are located in the picture area corresponding to the same picture, the picture is used as the target picture.
  • the user needs to use multi-finger operation to drag/zoom the picture, therefore, judging whether the current multi-finger operation is performed can be taken as a prerequisite for performing the subsequent steps (ie, S103 below). Specifically, based on the touch position information, it is judged whether there are multiple touch position points in the picture area corresponding to the same picture. When there is only one touch position point in the picture area corresponding to the same picture, it can be detected whether it is a long According to the operation, if it is a long press operation, the prompt information of downloading pictures or sharing pictures can be displayed on the terminal interface. If it is not a long press operation, it does not need to respond to the current touch operation, and it is considered as a normal touch during the sliding process. When there are multiple touch points in the image area corresponding to the same image, the step of S103 may be executed to realize the effect of dragging/zooming.
  • S103 At the target picture position indicated by the target picture position information, create a native image view component and render the target picture based on the native image view component, and start a screen touch event interception mechanism.
  • the native image view component here may be a native ImageView (image view) component.
  • a native image view component can be created at the target image location indicated by the target image location information.
  • the native image view component can load the image address corresponding to the target image and render the target image.
  • the rendered image by the native image view component The target image overlays the position of the original image.
  • each touch operation of the touch object on the target image can be intercepted by the screen touch event transmission mechanism of the terminal interface, and then act on the native image view component, which is the process of S104.
  • the touch operation may be a zoom operation on the target image, and according to the touch operation indicated in the touch event of the target image, the zoom attribute information on the target image may be determined; the zoom attribute information includes a zoom ratio and a zoom direction.
  • the change of the touch position information can be determined according to the touch operation, and the change of the touch position information can include the change of the distance between the touch positions and the change of the relative direction of the touch position, which can be based on the change of the touch position information.
  • the zoom ratio refers to the ratio of the target image after zooming to that before zooming;
  • the zooming direction refers to the relative direction of the target image after zooming and before zooming.
  • the target image is rendered and updated based on the native image view component, so as to update the display attribute of the target image.
  • the display attribute of the target picture refers to the display size and/or display position information of the target picture.
  • the display size and/or display position information of the target image rendered by the native image view component may be updated according to the zoom scale and zoom direction.
  • Fig. 2 shows a schematic diagram of the page effect before touching.
  • Fig. 2 shows the target picture in the original target dynamic page.
  • Fig. 3 shows a schematic diagram of the page effect after touching.
  • the touch event zooms in on the target image rendered by the native image view component, and the displayed effect looks like the target image in the target dynamic page is enlarged, and the display size of the target image and the content in the target image are enlarged synchronously.
  • the target image at the position of the target image in the original target dynamic page still exists, because it is always in the target dynamic page, and does not appear as if it is currently
  • the target image rendered by the native image view component that is scaled and dragged by the touch object can be moved freely.
  • the view (view) component uses the view component to render a placeholder image that is the same size as the target picture in the target dynamic page.
  • the placeholder picture can be a gray picture, which is added below the target picture rendered by the native image view component and the target dynamic page Above the target picture in , ensure that the position and size of the placeholder picture can completely cover the target picture in the target dynamic page.
  • the touch object starts to touch the target image rendered by the native image view component
  • the placeholder image is displayed. Since the target image rendered by the native image view component is right above the target image in the target dynamic page, as the touch object moves When the touch position changes, the display properties of the target image rendered by the native image view component change in real time. At the same time, the target image in the target dynamic page has been blocked by the placeholder image. The actual effect is as if the touch object has given the target image in the target dynamic page to Drag it out and it will scale.
  • the target image can be animated and rendered based on the native image view component, so that the target image rendered by the native image view component can be restored to the original image position, and the size of the original image is the same. That is, the target image rendered by the native image view component moves from the position where the touch operation stopped to the position of the target image in the target dynamic page, and restores the size of the target image rendered by the native image view component to the target in the target dynamic page
  • the size of the picture for example, the animation duration can be set to 200ms.
  • the target image rendered by the native image view component returns to the position of the target image in the target dynamic page, and after it is the same size as the target image in the target dynamic page, delete the target image rendered by the native image view component And the placeholder picture, the target picture in the target dynamic page is displayed on the terminal interface at this time, but the actual visual effect is that the touch object zooms and drags the target picture in the target dynamic page through touch operations, and the target dynamic page The target picture in will follow the touch object to physically move on the terminal interface, and the target picture in the target dynamic page will be automatically restored when the touch operation stops.
  • the native image view component in this disclosure not only supports touch operations such as zooming and dragging, but also supports arbitrary touch interaction operations, such as single click, double click, long press, handwriting input and other operations.
  • FIG. 4 shows a flow chart of a specific page processing process. As shown in the figure, after starting the target application program installed on the terminal device, and After opening the target dynamic page in the target application program, each picture in the target dynamic page can be displayed on the terminal device, and Java script (javascript) can detect the picture position information of each picture in the target dynamic page.
  • Java script Javascript
  • the touch position information of each finger on the terminal interface can be obtained in response to the touch operation acting on the terminal interface, and then according to the touch position information of each finger and the picture position of each picture Information, to determine whether a finger touches the picture; in the case of a finger touching the picture, further determine whether there are multiple touch points in the picture area corresponding to the same picture;
  • it can detect whether it is a long-press operation; if it is a long-press operation, it can display a prompt message for downloading pictures or sharing pictures on the terminal interface. If it is not a long-press operation, it does not need to respond to the current touch operation.
  • the picture with multiple touch position points in the picture area may be used as the target picture.
  • a native ImageView component can be created at the position of the target picture indicated by the position information of the target picture, and the target picture can be rendered based on the ImageView component.
  • Each touch operation of the finger on the target picture can be intercepted by the screen touch event transfer mechanism, and then act to the native image view component.
  • the gray placeholder image is added below the target image rendered by the native image view component and above the target image in the target dynamic page, ensuring that the position and size of the placeholder image can fully cover the target image in the target dynamic page.
  • the target image rendered by the native image view component will restore from the position where the touch operation stopped to the original target image location through animation, and the size of the original image is the same, and finally delete the native image view component The rendered target image and placeholder image.
  • the target image in the target dynamic page is redisplayed on the terminal interface.
  • the writing order of each step does not mean a strict execution order and constitutes any limitation on the implementation process.
  • the specific execution order of each step should be based on its function and possible
  • the inner logic is OK.
  • the embodiment of the present disclosure also provides a page processing device corresponding to the page processing method. Since the problem-solving principle of the device in the embodiment of the present disclosure is similar to the above-mentioned page processing method in the embodiment of the present disclosure, the implementation of the device Reference can be made to the implementation of the method, and repeated descriptions will not be repeated.
  • FIG. 5 it is a schematic structural diagram of a page processing device provided by an embodiment of the present disclosure, the device includes: an acquisition module 501, a first determination module 502, a rendering module 503, and a processing module 504; wherein,
  • An acquisition module 501 configured to acquire touch position information in response to a touch operation acting on the terminal interface, and acquire picture position information of each picture in the target dynamic page displayed on the terminal interface;
  • the first determining module 502 is configured to determine the touched target picture in each picture and the target picture of the target picture in the terminal interface based on the touch position information and the picture position information of each picture location information;
  • the rendering module 503 is configured to create a native image view component at the target picture position indicated by the target picture position information and render the target picture based on the native image view component, and start a screen touch event interception mechanism;
  • the processing module 504 is configured to perform corresponding processing on the target picture rendered by the native image view component according to the touch operation indicated in the touch event of the target picture when the touch event for the target picture is intercepted.
  • a native image view component is created at the position of the target image and the target image is rendered based on the native image view component, and the touch operation indicated in the touch event performs corresponding processing on the target image rendered by the native image view component, without Click the target picture in the target dynamic page to jump to the big picture page and then perform related operations on the picture.
  • the first determining module 502 is specifically configured to: based on the picture position information of each picture in the target dynamic page, and the coordinates between the target dynamic page and the terminal interface system conversion relationship, determine the picture position information of each picture in the terminal interface;
  • the first determining module 502 is specifically configured to: in the case where the touch position point indicated by the touch position information is a plurality of touch position points, based on each of the pictures in the terminal interface From each of the pictures, a picture whose corresponding picture area contains the plurality of touch position points is selected as the target picture.
  • the processing module 504 is specifically configured to determine zoom attribute information for the target image according to the touch operation indicated in the touch event of the target image; the zoom attribute information includes zoom ratio and zoom direction;
  • an adding module configured to add, at the position of the target picture, a placeholder picture with the same size as the target picture in the target dynamic page; the placeholder picture is located in the The target image rendered by the native image view component is located below the target image and above the target image in the target dynamic page.
  • the processing module 504 is specifically configured to perform animation rendering on the target picture based on the native image view component when detecting that the touch operation stops, so that the target picture returns to the The location of the target picture, and the size of the target picture in the target dynamic page is consistent.
  • the method further includes: a second determination module, configured to determine whether there are multiple touch position points on the terminal interface based on the touch position information;
  • the rendering module 503 is specifically configured to create a native image view component at the target picture position indicated by the target picture position information when it is determined that there are multiple touch position points, and render based on the native image view component The target picture, and, start the screen touch event interception mechanism.
  • FIG. 6 it is a schematic structural diagram of a computer device 600 provided by an embodiment of the present disclosure, including a processor 601 , a memory 602 , and a bus 603 .
  • the memory 602 is used to store execution instructions, including a memory 6021 and an external memory 6022; the memory 6021 here is also called an internal memory, and is used to temporarily store calculation data in the processor 601 and exchange data with an external memory 6022 such as a hard disk.
  • the processor 601 exchanges data with the external memory 6022 through the memory 6021.
  • the processor 601 communicates with the memory 602 through the bus 603, so that the processor 601 executes the following instructions:
  • Embodiments of the present disclosure further provide a computer-readable storage medium, on which a computer program is stored, and when the computer program is executed by a processor, the steps of the page processing method described in the foregoing method embodiments are executed.
  • the storage medium may be a volatile or non-volatile computer-readable storage medium.
  • the embodiment of the present disclosure also provides a computer program product, the computer product carries a program code, and the instructions contained in the program code can be used to execute the steps of the page processing method described in the above method embodiment, for details, please refer to the above method implementation example, which will not be repeated here.
  • the above-mentioned computer program product may be specifically implemented by means of hardware, software or a combination thereof.
  • the computer program product is embodied as a computer storage medium, and in another optional embodiment, the computer program product is embodied as a software product, such as a software development kit (Software Development Kit, SDK) etc. Wait.
  • the units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place, or may be distributed to multiple network units. Part or all of the units can be selected according to actual needs to achieve the purpose of the solution of this embodiment.
  • each functional unit in each embodiment of the present disclosure may be integrated into one processing unit, each unit may exist separately physically, or two or more units may be integrated into one unit.
  • the functions are realized in the form of software function units and sold or used as independent products, they can be stored in a non-volatile computer-readable storage medium executable by a processor.
  • the technical solution of the present disclosure is essentially or the part that contributes to the prior art or the part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including Several instructions are used to make a computer device (which may be a personal computer, a server, or a network device, etc.) execute all or part of the steps of the methods described in various embodiments of the present disclosure.
  • the aforementioned storage media include: U disk, mobile hard disk, read-only memory (Read-Only Memory, ROM), random access memory (Random Access Memory, RAM), magnetic disk or optical disc and other media that can store program codes. .

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

一种页面处理方法、装置、电子设备及可读存储介质，其中，该方法包括：响应于作用在终端界面上的触摸操作，获取触摸位置信息，以及获取目标动态页面中的各个图片的图片位置信息（S101）；基于触摸位置信息和图片位置信息，确定触摸的目标图片以及目标图片位置信息（S102）；在目标图片位置处，创建原生图像视图组件并基于原生图像视图组件渲染目标图片，以及，启动屏幕触摸事件拦截机制（S103）；当拦截到针对目标图片的触摸事件时，根据目标图片的触摸事件中指示的触摸操作对原生图像视图组件渲染的目标图片进行相应处理（S104）。该方法中，用户在目标动态页面就可以实现对页面中图片的缩放，无需跳转到查看大图页面，提高了交互效率。

Description

一种页面处理方法、装置、电子设备及可读存储介质
相关申请的交叉引用
本申请基于申请号为202110796850.7、申请日为2021年07月14日，名称为“一种页面处理方法、装置、电子设备及可读存储介质”的中国专利申请提出，并要求该中国专利申请的优先权，该中国专利申请的全部内容在此引入本申请作为参考。
技术领域
本公开涉及信息技术领域，具体而言，涉及一种页面处理方法、装置、电子设备及可读存储介质。
背景技术
随着互联网技术的发展，在终端页面上展示的内容越来越多样化。为了实现内容可以动态化地展示，通常采用基于超文本标记语言制作的动态网页展示内容。
目前，在动态网页上对图片进行放大查看时，通常需要进行先点击终端界面上动态网页中的图片，终端界面跳转到查看大图页面，然后在查看大图页面上进行手势放大图片的操作步骤。
上述对动态网页中的图片进行放大查看的过程，操作繁琐，交互效率较低。
发明内容
本公开实施例至少提供一种页面处理方法、装置、电子设备及可读存储介质。
第一方面，本公开实施例提供了一种页面处理方法，包括：
响应于作用在终端界面上的触摸操作，获取触摸位置信息，以及获取在所述终端界面上显示的目标动态页面中的各个图片的图片位置信息；
基于所述触摸位置信息和所述各个图片的图片位置信息，确定所述各个图片中被触摸的目标图片，以及所述目标图片在所述终端界面中的目标图片位置信息；
在所述目标图片位置信息指示的目标图片位置处，创建原生图像视图组件并基于所述原生图像视图组件渲染所述目标图片，以及，启动屏幕触摸事件拦截机制；
当拦截到针对所述目标图片的触摸事件时，根据所述目标图片的触摸事件中指示的触摸操作对所述原生图像视图组件渲染的所述目标图片进行相应处理。
一种可选的实施方式中，基于所述触摸位置信息和所述各个图片的图片位置信息，确定所述各个图片中被触摸的目标图片，以及所述目标图片在所述终端界面中的目标图片位置信息，包括：
基于所述各个图片在所述目标动态页面中的图片位置信息，以及所述目标动态页面与所述终端界面之间的坐标系转换关系，确定所述各个图片在所述终端界面中的图片位置信息；
基于所述触摸位置信息以及确定的所述各个图片在所述终端界面中的图片位置信息，确定所述各个图片中被触摸的目标图片，以及所述目标图片在所述终端界面中的目标图片位置信息。
一种可选的实施方式中，基于所述触摸位置信息以及确定的所述各个图片在所述终端界面中的图片位置信息，确定所述各个图片中被触摸的目标图片，包括：
在所述触摸位置信息指示的触摸位置点为多个触摸位置点的情况下，基 于所述各个图片在所述终端界面中的图片位置信息，从所述各个图片中，选择对应的图片区域包含所述多个触摸位置点的图片作为所述目标图片。
一种可选的实施方式中，根据所述目标图片的触摸事件中指示的触摸操作，基于所述原生图像视图组件对所述目标图片进行渲染更新，以更新所述目标图片的显示属性，包括：
根据所述触摸位置信息的变化，确定对所述目标图片的缩放属性信息；所述缩放属性信息包括缩放比例和缩放方向；
按照所述缩放属性信息，基于所述原生图像视图组件对所述目标图片进行渲染更新，以更新所述目标图片的显示属性。
一种可选的实施方式中，基于所述触摸位置信息和所述各个图片的图片位置信息，确定所述各个图片中被触摸的目标图片，以及所述目标图片在所述终端界面中的目标图片位置信息之后，所述方法还包括：
在所述目标图片位置处，添加与所述目标动态页面中的目标图片大小一致的占位图片；所述占位图片位于所述原生图像视图组件渲染的目标图片下方且位于所述目标动态页面中的目标图片上方。
一种可选的实施方式中，还包括：
检测到所述触摸操作停止时，基于所述原生图像视图组件对所述目标图片进行动画渲染，以使所述目标图片恢复至所述目标图片位置处，且与所述目标动态页面中的目标图片的大小一致。
一种可选的实施方式中，在所述目标图片位置信息指示的目标图片位置处，创建原生图像视图组件，并基于所述原生图像视图组件渲染所述目标图片，以及，启动屏幕触摸事件拦截机制之前，还包括：
基于所述触摸位置信息，判断在所述终端界面上是否存在多个触摸位置点；
在所述目标图片位置信息指示的目标图片位置处，创建原生图像视图组 件，并基于所述原生图像视图组件渲染所述目标图片，以及，启动屏幕触摸事件拦截机制，包括：
当确定存在多个触摸位置点的情况下，在所述目标图片位置信息指示的目标图片位置处，创建原生图像视图组件，并基于所述原生图像视图组件渲染所述目标图片，以及，启动屏幕触摸事件拦截机制。
第二方面，本公开实施例还提供一种页面处理装置，包括：
获取模块，用于响应于作用在终端界面上的触摸操作，获取触摸位置信息，以及获取在所述终端界面上显示的目标动态页面中的各个图片的图片位置信息；
确定模块，用于基于所述触摸位置信息和所述各个图片的图片位置信息，确定所述各个图片中被触摸的目标图片，以及所述目标图片在所述终端界面中的目标图片位置信息；
渲染模块，用于在所述目标图片位置信息指示的目标图片位置处，创建原生图像视图组件并基于所述原生图像视图组件渲染所述目标图片，以及，启动屏幕触摸事件拦截机制；
处理模块，用于当拦截到针对所述目标图片的触摸事件时，根据所述目标图片的触摸事件中指示的触摸操作对所述原生图像视图组件渲染的所述目标图片进行相应处理。
第三方面，本公开实施例还提供一种计算机设备，包括：处理器、存储器和总线，所述存储器存储有所述处理器可执行的机器可读指令，当计算机设备运行时，所述处理器与所述存储器之间通过总线通信，所述机器可读指令被所述处理器执行时执行上述第一方面，或第一方面中任一种可能的实施方式中的步骤。
第四方面，本公开实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述第一方面，或第一方面中任一种可能的实施方式中的步骤。
本公开实施例提供的一种页面处理方法、装置、电子设备及可读存储介质，在目标图片位置处创建原生图像视图组件并基于原生图像视图组件渲染目标图片，后续基于屏幕拦截事件机制，将针对目标图片的触摸事件进行拦截，然后根据目标图片的触摸事件中指示的触摸操作对原生图像视图组件渲染的目标图片进行相应处理，实现了对目标动态页面中的图片进行手势缩放、拖拽的显示效果，本公开实施例无需点击目标动态页面中的目标图片跳转到查看大图页面后再进行图片的相关操作，直接在原生图像视图组件渲染的目标图片中就可以实现对图片的缩放、拖拽等查看操作，节省了操作步骤，提高了交互效率。
进一步，本公开实施例提供的页面处理方法，在目标图片位置处，添加与目标图片大小一致的占位图片，其中占位图片位于目标图片下方且位于目标图片上方，当原生图像视图组件渲染的目标图片被缩放拖拽时，占位图片可以遮挡目标图片，实现看起来像是目标图片被触摸对象进行了缩放、拖拽，从而提高了显示效果的真实性。
为使本公开的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。
附图说明
为了更清楚地说明本公开实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，此处的附图被并入说明书中并构成本说明书中的一部分，这些附图示出了符合本公开的实施例，并与说明书一起用于说明本公开的技术方案。应当理解，以下附图仅示出了本公开的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
图1示出了本公开实施例所提供的一种页面处理方法的流程图；
图2示出了本公开实施例所提供的触摸前的页面效果示意图；
图3示出了本公开实施例所提供的触摸后的页面效果示意图；
图4示出了本公开实施例所提供的另一种页面处理方法的流程图；
图5示出了本公开实施例所提供的一种页面处理装置的示意图；
图6示出了本公开实施例所提供的一种计算机设备的示意图。
具体实施方式
为使本公开实施例的目的、技术方案和优点更加清楚，下面将结合本公开实施例中附图，对本公开实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本公开一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本公开实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本公开的实施例的详细描述并非旨在限制要求保护的本公开的范围，而是仅仅表示本公开的选定实施例。基于本公开的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本公开保护的范围。
在对动态页面中的图片进行放大查看时，通常需要先点击终端界面显示的动态页面中的图片，然后终端界面跳转到查看大图页面，最后在查看大图页面上进行手势缩放、拖拽操作，以实现查看大图的目的。上述对动态页面中的图片进行放大查看的操作步骤比较繁琐、交互效率较低。
基于上述研究，本公开提供了一种页面处理方法，在目标图片位置处创建原生图像视图组件并基于原生图像视图组件渲染目标图片，后续基于屏幕拦截事件机制，将针对目标图片的触摸事件进行拦截，然后根据目标图片的触摸事件中指示的触摸操作对原生图像视图组件渲染的目标图片进行相应处理，实现了对目标动态页面中的图片进行手势缩放、拖拽的显示效果，本公开实施例无需点击目标动态页面中的目标图片跳转到查看大图页面后再进行图片的相关操作，直接在原生图像视图组件渲染的目标图片中就可以实现对图片的缩放、拖拽等查看操作，节省了操作步骤，提高了交互效率。
针对以上方案所存在的缺陷，均是发明人在经过实践并仔细研究后得出的结果，因此，上述问题的发现过程以及下文中本公开针对上述问题所提出的解决方案，都应该是发明人在本公开过程中对本公开做出的贡献。
应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。
为便于对本实施例进行理解，首先对本公开实施例所公开的一种页面处理方法进行详细介绍，本公开实施例所提供的页面处理方法的执行主体一般为具有一定计算能力的终端设备或其它处理设备，终端设备可以为用户设备(User Equipment，UE)、移动设备、用户终端、终端、蜂窝电话、无绳电话、个人数字助理(Personal Digital Assistant，PDA)、手持设备、计算设备、车载设备、可穿戴设备等。在一些可能的实现方式中，该页面处理方法可以通过处理器调用存储器中存储的计算机可读指令的方式来实现。
下面以执行主体为终端设备为例对本公开实施例提供的页面处理方法加以说明。
首先需要说明的是，本公开实施例提供的页面处理方法主要应用在用户查看动态页面中的图片内容的场景中，启动安装在终端设备上的目标应用程序(目标应用程序中包含动态页面，例如新闻资讯类的应用程序)，并打开目标应用程序中的内容详情页后，在该内容详情页为动态页面，且用户通过触摸操作想要查看内容详情页中包含的图片内容时，可以执行本公开实施例提供的页面处理方法。
参见图1所示，为本公开实施例提供的页面处理方法的流程图，所述方法包括S101～S104，其中：
S101：响应于作用在终端界面上的触摸操作，获取触摸位置信息，以及获取在所述终端界面上显示的目标动态页面中的各个图片的图片位置信息。
终端界面可以是终端设备上的触摸屏中的显示界面，目标动态页面可以 指的是能够实现页面内容或者结构动态化展示的页面，例如基于超文本标记语言5(Hyper Text Mark up Language5，HTML5)制作的网页，这里简称H5网页。需要说明的是，下文中涉及到的H5网页均指代基于HTML5制作的网页。H5页面可以通过网页视图(webview)加载，并显示在终端界面中。
通常目标动态页面并没有与终端界面重合，这是因为终端界面显示目标动态页面时，在终端界面的其他显示区域还会显示一些由原生组件渲染的固定的页面布局内容，例如终端设备上打开新闻咨询类的内容详情页(网页视图加载的H5页面)时，终端界面在内容详情页上方还会显示文章作者信息，以及在内容详情页下方还会显示用户评论内容等。
目标动态页面可以相对于终端界面在上下的方向上平移，也可以在左右的方向上平移。通过平移目标动态页面，可以将目标动态页面中未显示在终端界面上的内容显示出来。
当目标动态页面中包含的内容较多时，这些内容占用的篇幅较长，无法全部地展示在终端界面中，对目标动态页面执行滑动操作或者其他任何可能的显示操作，将之前展示的内容部分地或者完全地隐藏起来后，那些未展示出来的内容才可以展示出来。当目标动态页面中包含的内容较少时，这些内容可以全部地展示在终端界面中，那么就无需对目标动态页面执行任何操作。
终端界面显示出目标动态页面后，如果目标动态页面中有图片时，首先目标脚本可以检测目标动态页面中各个图片的图片位置信息。目标动态页面中的各个图片可以是当前全部显示在终端界面中的图片，也可以是部分显示在终端界面中的图片，也可以是均未显示在终端界面中的图片(未显示出来的图片可以通过平移目标动态页面后显示出来)。图片位置信息指的是各个图片在目标动态页面中的位置信息。
目标脚本检测到的图片的图片位置信息，可以包括图片上下边缘距离目标动态页面顶部的偏移量、图片左边缘距离目标动态页面左边的偏移量、以及图片右边缘距离目标动态页面右边的偏移量。
为了方便描述图片位置信息，也可以在目标动态页面中建立平面直角坐标系。在一种可行的实施方式中，可以以目标动态页面的一个顶点为坐标原点，以该顶点相邻的两条边(假设目标动态页面为矩形)所在的直线分别为横坐标轴和纵坐标轴，建立平面直角坐标系，图片位置信息可以是图片在平面直角坐标系中的坐标信息，具体地可以是图片的每个顶点在平面直角坐标系中的坐标信息。在其他可行的实施方式中，也可以是以目标动态页面的其他点为原点建立平面直角坐标系，这里不再赘述。
在获取到目标动态页面中各个图片的图片位置信息后，如果有触摸对象(例如用户的手指)在终端界面上执行触摸操作，则终端设备能够检测到触摸位置，从而获取到触摸位置信息。其中，触摸位置信息指的是触摸对象触摸终端界面时与终端界面接触的位置信息。
同样，为了方便描述触摸位置信息，可以在终端界面中建立平面直角坐标系，然后获取该平面直角坐标系中的触摸位置信息。在一种可行的实施方式中，可以以终端界面的一个顶点为原点，以该顶点相邻的两条边(假设终端界面为矩形)所在的直线分别为横坐标轴和纵坐标轴，建立平面直角坐标系，触摸位置信息可以是平面直角坐标系中的坐标信息。需要说明的是，这里可以把触摸位置当做是一个点，也就是触摸对象(例如用户的手指)与终端界面相切的点。当触摸位置有多个时，可以获取每个触摸位置对应的坐标信息。在其他可行的实施方式中，也可以是以终端界面的其他点为原点建立平面直角坐标系，这里不再赘述。
在一种可行的实施方式中，进一步为了方便描述触摸位置信息和图片位置信息，可以将终端界面中左上角的顶点以及目标动态页面中左上角的顶点分别作为原点(也可以是其他位置的顶点，但是终端界面中作为原点的顶点应与目标动态页面中作为原点的顶点在各自的平面中的相对位置相同)，建立坐标轴方向相同的两个平面直角坐标系，然后分别获取触摸位置信息和图片位置信息。
在上述实施方式中，通过在终端界面和目标动态页面中分别建立平面直 角坐标系，然后分别获取触摸位置信息和图片位置信息，以此保证触摸位置信息和图片位置信息的准确性。
在一种可行的实施方式中，还可以在终端界面或者目标动态页面中建立一个平面直角坐标系，然后在该平面直角坐标系下，既获取触摸位置信息，又获取各个图片的图片位置信息，虽然这种实施方式可以同时描述触摸位置信息和图片位置信息，减少处理位置信息的工作量，并且快速在步骤S102中确定出各个图片中被触摸的目标图片(不需要将终端界面中建立的平面直角坐标系与目标动态页面中建立的平面直角坐标系进行坐标系的转换)，但是这种实施方式能够执行的前提是要求终端界面与目标动态页面完全重合，且目标动态页面中包含的图片全部显示出来。
S102：基于所述触摸位置信息和所述各个图片的图片位置信息，确定所述各个图片中被触摸的目标图片，以及所述目标图片在所述终端界面中的目标图片位置信息。
在前述步骤中已经通过建立的平面直角坐标系，获取了触摸位置信息和各个图片的图片位置信息，这里可以基于触摸位置信息和各个图片的图片位置信息，确定各个图片中被触摸的目标图片。
针对前述一种可行的实施方式中，当终端界面与目标动态页面完全重合，且目标动态页面中包含的图片全部同时显示出来的情况下，可以直接在终端界面或者目标动态页面中建立的平面直角坐标下，基于触摸位置信息和各个图片的图片位置信息，确定各个图片中被触摸的目标图片。
而针对终端界面与目标动态页面不完全重合的情况，可以将在终端界面中建立的平面直角坐标与在目标动态页面中建立的平面直角坐标进行坐标系转换，也就是将触摸位置信息和各个图片的图片位置信息转换到同一坐标系下，这样才能有对比性，从而基于同一坐标系下的触摸位置信息和各个图片的图片位置信息，确定各个图片中被触摸的目标图片。
在一种可行的实施方式中，可以将目标动态页面中的平面直角坐标下的 图片位置信息转换到终端界面中的平面直角坐标系下的图片位置信息，具体地，可以基于各个图片在目标动态页面中的图片位置信息，以及目标动态页面与终端界面之间的坐标系转换关系，确定各个图片在终端界面中的图片位置信息。
这里的坐标系转换关系可以包括坐标轴的转换关系以及坐标单位的转换关系(这里主要是考虑不同的终端设备具有不同的像素密度，因此图片在不同的终端界面上的显示尺寸可能不同)。
具体地，可以根据目标动态页面中的平面直角坐标系的原点与终端界面中的平面直角坐标系的原点的相对位置以及坐标轴的方向(在本公开中，目标动态页面中的平面直角坐标系的坐标轴与终端界面中的平面直角坐标系的坐标轴的方向可以是一致的)，确定坐标轴的转换关系。然后根据终端界面中的屏幕像素密度，确定坐标单位的转换关系，具体地，将脚本返回的目标动态页面中各个图片的图片坐标单位乘以终端界面中的屏幕像素密度，得到各个图片在终端界面上进行显示的坐标单位。
在确定出各个图片在终端界面中的图片位置信息之后，可以基于触摸位置信息以及确定的各个图片在终端界面中的图片位置信息，确定各个图片中被触摸的目标图片，以及目标图片在终端界面中的目标图片位置信息。
在本公开中，在触摸位置信息指示的触摸位置点为多个触摸位置点的情况下，基于各个图片在终端界面中的图片位置信息，从各个图片中，选择对应的图片区域包含多个触摸位置点的图片作为目标图片。也就是当有多个触摸位置点时，多个触摸位置点均位于同一个图片对应的图片区域内时，该图片才作为目标图片。
由于一般情况下，用户对图片进行拖拽/缩放是需要使用多指操作的，因此，可以将判断当前是否为多指操作作为执行后续步骤(也即下述S103)的前提。具体地，基于触摸位置信息，判断在同一个图片对应的图片区域内是否存在多个触摸位置点，当在同一个图片对应的图片区域内存在的触摸位置点为一个时，可以检测是否为长按操作，如果是长按操作，可以在终端界面 展示下载图片或者分享图片的提示信息，如果不是长按操作，则可以不响应当前的触摸操作，认为是普通的滑动过程中的触摸。当在同一个图片对应的图片区域内存在的触摸位置点为多个时，则可以执行S103的步骤，以实现拖拽/缩放的效果。
S103：在所述目标图片位置信息指示的目标图片位置处，创建原生图像视图组件并基于所述原生图像视图组件渲染所述目标图片，以及，启动屏幕触摸事件拦截机制。
这里的原生图像视图组件可以是原生的ImageView(图像视图)组件。在确定了目标图片之后，可以在目标图片位置信息指示的目标图片位置处，创建原生图像视图组件，原生图像视图组件可以加载目标图片对应的图片地址，并渲染目标图片，原生图像视图组件渲染的目标图片覆盖在了原来的图片的位置上。
当原生图像视图组件渲染了目标图片之后，触摸对象对目标图片的各个触摸操作可以被终端界面的屏幕触摸事件传递机制拦截下来，然后作用到原生图像视图组件上，也就是S104的过程。
S104：当拦截到针对所述目标图片的触摸事件时，根据所述目标图片的触摸事件中指示的触摸操作对所述原生图像视图组件渲染的所述目标图片进行相应处理。
这里触摸操作可以是对目标图片的缩放操作，根据目标图片的触摸事件中指示的触摸操作，可以确定对目标图片的缩放属性信息；缩放属性信息包括缩放比例和缩放方向。
具体地，根据触摸操作可以确定出触摸位置信息的变化，触摸位置信息的变化可以包括触摸位置间距离的变化以及触摸位置的相对方向的变化，这里可以基于触摸位置信息的变化。
其中，缩放比例指的是目标图片缩放后与缩放前的比例；缩放方向指的是目标图片缩放后与缩放前的相对方向。
然后按照缩放属性信息，基于原生图像视图组件对目标图片进行渲染更新，以更新目标图片的显示属性。其中目标图片的显示属性指的是目标图片的显示尺寸和/或显示位置信息。当确定缩放属性信息后，可以根据缩放比例和缩放方向，更新原生图像视图组件渲染的目标图片的显示尺寸和/或显示位置信息。图2中示出了触摸前的页面效果示意图，图2中展示有原目标动态页面中的目标图片，图3示出了触摸后的页面效果示意图，拦截针对原目标动态页面中的目标图片的触摸事件，对原生图像视图组件渲染的目标图片进行放大，展示出的效果看起来像是对目标动态页面中的目标图片进行了放大，目标图片的显示尺寸以及目标图片中的内容被同步放大。
考虑到当触摸对象对原生图像视图组件渲染的目标图片进行触摸操作时，原目标动态页面中目标图片位置的目标图片依然是存在的，因为它始终是在目标动态页面中，而不会像正在被触摸对象缩放拖拽的原生图像视图组件渲染的目标图片那样可以随意移动。为了实现原目标动态页面中的目标图片看起来像是被触摸对象进行缩放、拖拽移动的效果，需要当原生图像视图组件渲染的目标图片被缩放拖拽时，在目标图片位置处，创建一个视图(view)组件，利用view组件渲染一个与目标动态页面中的目标图片大小一致的占位图片，占位图片可以是灰色的图片，添加在原生图像视图组件渲染的目标图片下方且目标动态页面中的目标图片上方，保证该占位图片的位置和大小完全能够覆盖目标动态页面中的目标图片。当触摸对象开始触摸原生图像视图组件渲染的目标图片时，将该占位图片显示出来，由于原生图像视图组件渲染的目标图片正处于目标动态页面中的目标图片的正上方，随着触摸对象的触摸位置变化，原生图像视图组件渲染的目标图片的显示属性实时地变化，同时目标动态页面中的目标图片已经被占位图片遮挡住，实际效果就好像触摸对象把目标动态页面中的目标图片给拖动出来并且能缩放了。
检测到触摸操作停止时，可以基于原生图像视图组件对目标图片进行动画渲染，以使原生图像视图组件渲染的目标图片恢复至原来的图片位置处，且与原来的图片的大小一致。也就是原生图像视图组件渲染的目标图片从触 摸操作停止的位置，移动到目标动态页面中的目标图片所在的位置，并且将原生图像视图组件渲染的目标图片的尺寸恢复到目标动态页面中的目标图片的尺寸，示例性地，动画时长可以设定为200ms。当动画结束时，也就是原生图像视图组件渲染的目标图片恢复至目标动态页面中的目标图片位置处，且与目标动态页面中的目标图片的大小一致之后，删除原生图像视图组件渲染的目标图片以及占位图片，此时目标动态页面中的目标图片显示在终端界面，但是实际视觉效果是触摸对象通过触摸操作把目标动态页面中的目标图片进行了缩放、拖拽等动作，并且目标动态页面中的目标图片会跟随触摸对象在终端界面上物理移动了，触摸操作停止时目标动态页面中的目标图片再自动还原回去。需要说明的是，本公开中原生图像视图组件不仅支持缩放、拖拽等触摸操作，还可以支持任意的触摸交互操作，比如单击、双击、长按、手写输入等操作。
为了更清楚地描述本公开实施例提供的页面处理方法，图4中示出了一种具体的页面处理过程的流程图，如图所示，在启动安装在终端设备上的目标应用程序，并打开目标应用程序中的目标动态页面后，终端设备上可以显示目标动态页面中的各个图片，Java脚本(javascript)可以检测目标动态页面中的各个图片的图片位置信息。
当有手指在终端界面上进行触摸操作时，可以响应于作用在终端界面上的触摸操作，获取各个手指在终端界面上的触摸位置信息，然后根据各个手指的触摸位置信息以及各个图片的图片位置信息，判断是否有手指触摸到图片；在手指触摸到图片的情况下，进一步判断在同一个图片对应的图片区域内是否存在多个触摸位置点；当在同一个图片对应的图片区域内存在的触摸位置点为一个时，可以检测是否为长按操作；如果是长按操作，可以在终端界面展示下载图片或者分享图片的提示信息，如果不是长按操作，则可以不响应当前的触摸操作，认为是普通的滑动过程中的触摸。当在同一个图片对应的图片区域内存在的触摸位置点为多个时，则可以将图片区域包含多个触摸位置点的图片作为目标图片。
然后，可以在目标图片位置信息指示的目标图片位置处，创建一个原生的ImageView组件，并基于ImageView组件渲染目标图片，手指对目标图片的各个触摸操作可以被屏幕触摸事件传递机制拦截下来，然后作用到原生图像视图组件上。
还可以创建一个简单的原生view组件并基于view组件渲染一个与目标图片的大小一致的灰色占位图片。灰色占位图片添加在原生图像视图组件渲染的目标图片下方且目标动态页面中的目标图片上方，保证该占位图片的位置和大小完全能够覆盖目标动态页面中的目标图片。
接下来，判断是否在屏幕执行了缩放拖拽等操作，当没有在屏幕执行缩放拖拽等操作，可以不进行响应，并继续监测是否有手指触摸到图片。当手指执行缩放拖拽操作时，随着触摸对象的触摸位置变化，原生图像视图组件渲染的目标图片的显示属性实时地变化。同时目标动态页面中的目标图片被占位图片遮挡住，实际效果就好像触摸对象把目标动态页面中的目标图片给拖动出来并且缩放了。
当手指停止触摸操作时，原生图像视图组件渲染的目标图片通过动画的形式，从触摸操作停止的位置恢复至原来目标图片所在的位置，且与原来的图片的大小一致，最后删除原生图像视图组件渲染的目标图片以及占位图片，此时目标动态页面中的目标图片重新显示在终端界面。
本领域技术人员可以理解，在具体实施方式的上述方法中，各步骤的撰写顺序并不意味着严格的执行顺序而对实施过程构成任何限定，各步骤的具体执行顺序应当以其功能和可能的内在逻辑确定。
基于同一发明构思，本公开实施例中还提供了与页面处理方法对应的页面处理装置，由于本公开实施例中的装置解决问题的原理与本公开实施例上述页面处理方法相似，因此装置的实施可以参见方法的实施，重复之处不再赘述。
参照图5所示，为本公开实施例提供的一种页面处理装置的架构示意图，所述装置包括：获取模块501、第一确定模块502、渲染模块503、处理模块504；其中，
获取模块501，用于响应于作用在终端界面上的触摸操作，获取触摸位置信息，以及获取在所述终端界面上显示的目标动态页面中的各个图片的图片位置信息；
第一确定模块502，用于基于所述触摸位置信息和所述各个图片的图片位置信息，确定所述各个图片中被触摸的目标图片，以及所述目标图片在所述终端界面中的目标图片位置信息；
渲染模块503，用于在所述目标图片位置信息指示的目标图片位置处，创建原生图像视图组件并基于所述原生图像视图组件渲染所述目标图片，以及，启动屏幕触摸事件拦截机制；
处理模块504，用于当拦截到针对所述目标图片的触摸事件时，根据所述目标图片的触摸事件中指示的触摸操作对所述原生图像视图组件渲染的所述目标图片进行相应处理。
本公开实施例通过在目标图片位置处创建原生图像视图组件并基于原生图像视图组件渲染所述目标图片，触摸事件中指示的触摸操作对原生图像视图组件渲染的所述目标图片进行相应处理，无需点击目标动态页面中的目标图片跳转到查看大图页面后再进行图片的相关操作，直接在目标动态页面中就可以实现对图片的缩放、拖拽等查看操作，节省了操作步骤，提高了交互效率。
一种可能的实施方式中，第一确定模块502，具体用于：基于所述各个图片在所述目标动态页面中的图片位置信息，以及所述目标动态页面与所述终端界面之间的坐标系转换关系，确定所述各个图片在所述终端界面中的图片位置信息；
基于所述触摸位置信息以及确定的所述各个图片在所述终端界面中的图 片位置信息，确定所述各个图片中被触摸的目标图片，以及所述目标图片在所述终端界面中的目标图片位置信息。
一种可能的实施方式中，第一确定模块502，具体用于：在所述触摸位置信息指示的触摸位置点为多个触摸位置点的情况下，基于所述各个图片在所述终端界面中的图片位置信息，从所述各个图片中，选择对应的图片区域包含所述多个触摸位置点的图片作为所述目标图片。
一种可能的实施方式中，处理模块504，具体用于根据所述目标图片的触摸事件中指示的触摸操作，确定对所述目标图片的缩放属性信息；所述缩放属性信息包括缩放比例和缩放方向；
按照所述缩放属性信息，基于所述原生图像视图组件对所述目标图片进行渲染更新，以更新所述目标图片的显示属性。
一种可能的实施方式中，还包括：添加模块，用于在所述目标图片位置处，添加与所述目标动态页面中的目标图片大小一致的占位图片；所述占位图片位于所述原生图像视图组件渲染的目标图片下方且位于所述目标动态页面中的目标图片上方。
一种可能的实施方式中，处理模块504，具体用于检测到所述触摸操作停止时，基于所述原生图像视图组件对所述目标图片进行动画渲染，以使所述目标图片恢复至所述目标图片位置处，且与所述目标动态页面中的目标图片的大小一致。
一种可能的实施方式中，还包括：第二确定模块，用于基于所述触摸位置信息，判断在所述终端界面上是否存在多个触摸位置点；
所述渲染模块503，具体用于当确定存在多个触摸位置点的情况下，在所述目标图片位置信息指示的目标图片位置处，创建原生图像视图组件，并基于所述原生图像视图组件渲染所述目标图片，以及，启动屏幕触摸事件拦截机制。
关于装置中的各模块的处理流程、以及各模块之间的交互流程的描述可 以参照上述方法实施例中的相关说明，这里不再详述。
基于同一技术构思，本公开实施例还提供了一种计算机设备。参照图6所示，为本公开实施例提供的计算机设备600的结构示意图，包括处理器601、存储器602、和总线603。其中，存储器602用于存储执行指令，包括内存6021和外部存储器6022；这里的内存6021也称内存储器，用于暂时存放处理器601中的运算数据，以及与硬盘等外部存储器6022交换的数据，处理器601通过内存6021与外部存储器6022进行数据交换，当计算机设备600运行时，处理器601与存储器602之间通过总线603通信，使得处理器601在执行以下指令：
响应于作用在终端界面上的触摸操作，获取触摸位置信息，以及获取在所述终端界面上显示的目标动态页面中的各个图片的图片位置信息；
基于所述触摸位置信息和所述各个图片的图片位置信息，确定所述各个图片中被触摸的目标图片，以及所述目标图片在所述终端界面中的目标图片位置信息；
在所述目标图片位置信息指示的目标图片位置处，创建原生图像视图组件并基于所述原生图像视图组件渲染所述目标图片，以及，启动屏幕触摸事件拦截机制；
当拦截到针对所述目标图片的触摸事件时，根据所述目标图片的触摸事件中指示的触摸操作对所述原生图像视图组件渲染的所述目标图片进行相应处理。
本公开实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述方法实施例中所述的页面处理方法的步骤。其中，该存储介质可以是易失性或非易失的计算机可读取存储介质。
本公开实施例还提供一种计算机程序产品，该计算机产品承载有程序代码，所述程序代码包括的指令可用于执行上述方法实施例中所述的页面处理 方法的步骤，具体可参见上述方法实施例，在此不再赘述。
其中，上述计算机程序产品可以具体通过硬件、软件或其结合的方式实现。在一个可选实施例中，所述计算机程序产品具体体现为计算机存储介质，在另一个可选实施例中，计算机程序产品具体体现为软件产品，例如软件开发包(Software Development Kit，SDK)等等。
所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统和装置的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。在本公开所提供的几个实施例中，应该理解到，所揭露的系统、装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外，在本公开各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。
所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个处理器可执行的非易失的计算机可读取存储介质中。基于这样的理解，本公开的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本公开各个实施例所述方法的全 部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-Only Memory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
最后应说明的是：以上所述实施例，仅为本公开的具体实施方式，用以说明本公开的技术方案，而非对其限制，本公开的保护范围并不局限于此，尽管参照前述实施例对本公开进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本公开揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本公开实施例技术方案的精神和范围，都应涵盖在本公开的保护范围之内。因此，本公开的保护范围应以所述权利要求的保护范围为准。

Claims (10)

  1. 一种页面处理方法，其特征在于，包括：
    响应于作用在终端界面上的触摸操作，获取触摸位置信息，以及获取在所述终端界面上显示的目标动态页面中的各个图片的图片位置信息；
    基于所述触摸位置信息和所述各个图片的图片位置信息，确定所述各个图片中被触摸的目标图片，以及所述目标图片在所述终端界面中的目标图片位置信息；
    在所述目标图片位置信息指示的目标图片位置处，创建原生图像视图组件，并基于所述原生图像视图组件渲染所述目标图片，以及，启动屏幕触摸事件拦截机制；
    当拦截到针对所述目标图片的触摸事件时，根据所述目标图片的触摸事件中指示的触摸操作对所述原生图像视图组件渲染的所述目标图片进行相应处理。
  2. 根据权利要求1所述的方法，其特征在于，基于所述触摸位置信息和所述各个图片的图片位置信息，确定所述各个图片中被触摸的目标图片，以及所述目标图片在所述终端界面中的目标图片位置信息，包括：
    基于所述各个图片在所述目标动态页面中的图片位置信息，以及所述目标动态页面与所述终端界面之间的坐标系转换关系，确定所述各个图片在所述终端界面中的图片位置信息；
    基于所述触摸位置信息以及所述各个图片在所述终端界面中的图片位置信息，确定所述各个图片中被触摸的目标图片，以及所述目标图片在所述终端界面中的目标图片位置信息。
  3. 根据权利要求2所述的方法，其特征在于，基于所述触摸位置信息以及确定的所述各个图片在所述终端界面中的图片位置信息，确定所述各个图片中被触摸的目标图片，包括：
    在所述触摸位置信息指示的触摸位置点为多个触摸位置点的情况下，基于所述各个图片在所述终端界面中的图片位置信息，从所述各个图片中，选择对应的图片区域包含所述多个触摸位置点的图片作为所述目标图片。
  4. 根据权利要求1所述的方法，其特征在于，根据所述目标图片的触摸事件中指示的触摸操作对所述原生图像视图组件渲染的所述目标图片进行相应处理，包括：
    根据所述目标图片的触摸事件中指示的触摸操作，确定对所述目标图片的缩放属性信息；所述缩放属性信息包括缩放比例和缩放方向；
    按照所述缩放属性信息，基于所述原生图像视图组件对所述目标图片进行渲染更新。
  5. 根据权利要求1所述的方法，其特征在于，基于所述触摸位置信息和所述各个图片的图片位置信息，确定所述各个图片中被触摸的目标图片，以及所述目标图片在所述终端界面中的目标图片位置信息之后，所述方法还包括：
    在所述目标图片位置处，添加与所述目标动态页面中的目标图片大小匹配的占位图片；所述占位图片位于所述原生图像视图组件渲染的目标图片下方且位于所述目标动态页面中的目标图片上方。
  6. 根据权利要求1所述的方法，其特征在于，还包括：
    检测到所述触摸操作停止时，基于所述原生图像视图组件对所述目标图片进行动画渲染，以使所述目标图片恢复至所述目标图片位置处，且与所述目标动态页面中的目标图片的大小一致。
  7. 根据权利要求1所述的方法，其特征在于，在所述目标图片位置信息指示的目标图片位置处，创建原生图像视图组件，并基于所述原生图像视图组件渲染所述目标图片，以及，启动屏幕触摸事件拦截机制之前，还包括：
    基于所述触摸位置信息，判断在所述终端界面上是否存在多个触摸位置点；
    在所述目标图片位置信息指示的目标图片位置处，创建原生图像视图组件，并基于所述原生图像视图组件渲染所述目标图片，以及，启动屏幕触摸事件拦截机制，包括：
    当确定存在多个触摸位置点的情况下，在所述目标图片位置信息指示的目标图片位置处，创建原生图像视图组件，并基于所述原生图像视图组件渲染所述目标图片，以及，启动屏幕触摸事件拦截机制。
  8. 一种页面处理装置，其特征在于，包括：
    获取模块，用于响应于作用在终端界面上的触摸操作，获取触摸位置信息，以及获取在所述终端界面上显示的目标动态页面中的各个图片的图片位置信息；
    确定模块，用于基于所述触摸位置信息和所述各个图片的图片位置信息，确定所述各个图片中被触摸的目标图片，以及所述目标图片在所述终端界面中的目标图片位置信息；
    渲染模块，用于在所述目标图片位置信息指示的目标图片位置处，创建原生图像视图组件并基于所述原生图像视图组件渲染所述目标图片，以及， 启动屏幕触摸事件拦截机制；
    处理模块，用于当拦截到针对所述目标图片的触摸事件时，根据所述目标图片的触摸事件中指示的触摸操作对所述原生图像视图组件渲染的所述目标图片进行相应处理。
  9. 一种计算机设备，其特征在于，包括：处理器、存储器和总线，所述存储器存储有所述处理器可执行的机器可读指令，当计算机设备运行时，所述处理器与所述存储器之间通过总线通信，所述机器可读指令被所述处理器执行时执行如权利要求1至7任一项所述的页面处理方法的步骤。
  10. 一种计算机可读存储介质，其特征在于，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行如权利要求1至7任一项所述的页面处理方法的步骤。
PCT/CN2022/097301 2021-07-14 2022-06-07 一种页面处理方法、装置、电子设备及可读存储介质 Ceased WO2023284442A1 (zh)

Priority Applications (3)

Application Number Priority Date Filing Date Title
JP2023573551A JP2024521202A (ja) 2021-07-14 2022-06-07 ページ処理方法、装置、電子機器および可読記憶媒体
EP22841082.5A EP4339808B1 (en) 2021-07-14 2022-06-07 PAGE PROCESSING METHOD AND APPARATUS, ELECTRONIC DEVICE AND READABLE STORAGE MEDIA
US18/569,940 US12578849B2 (en) 2021-07-14 2022-06-07 Method, apparatus, electronic device and readable storage medium for page processing

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202110796850.7A CN113536173B (zh) 2021-07-14 2021-07-14 一种页面处理方法、装置、电子设备及可读存储介质
CN202110796850.7 2021-07-14

Publications (1)

Publication Number Publication Date
WO2023284442A1 true WO2023284442A1 (zh) 2023-01-19

Family

ID=78099122

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2022/097301 Ceased WO2023284442A1 (zh) 2021-07-14 2022-06-07 一种页面处理方法、装置、电子设备及可读存储介质

Country Status (5)

Country Link
US (1) US12578849B2 (zh)
EP (1) EP4339808B1 (zh)
JP (1) JP2024521202A (zh)
CN (1) CN113536173B (zh)
WO (1) WO2023284442A1 (zh)

Families Citing this family (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113536173B (zh) * 2021-07-14 2024-01-16 抖音视界有限公司 一种页面处理方法、装置、电子设备及可读存储介质
CN114064176B (zh) * 2021-11-11 2025-09-12 北京沃东天骏信息技术有限公司 一种视图交互方法、装置、电子设备及计算机可读介质
CN114491372B (zh) * 2022-02-08 2023-09-08 北京有竹居网络技术有限公司 页面处理方法、装置、电子设备及存储介质
CN115904148A (zh) * 2022-11-14 2023-04-04 京东方科技集团股份有限公司 触控事件的处理方法及装置、存储介质、电子设备
CN116991528B (zh) * 2023-08-14 2024-03-19 腾讯科技（深圳）有限公司 一种页面切换方法、装置、存储介质和电子设备

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105988702A (zh) * 2015-03-02 2016-10-05 阿里巴巴集团控股有限公司 查看对象图片的方法及系统
CN106406855A (zh) * 2016-08-26 2017-02-15 乐视控股（北京）有限公司 一种基于浏览器的图片处理方法及装置
CN108182021A (zh) * 2018-01-30 2018-06-19 腾讯科技（深圳）有限公司 多媒体信息展示方法、装置、存储介质及设备
CN110221722A (zh) * 2019-05-27 2019-09-10 掌阅科技股份有限公司 图片处理方法、电子设备及存储介质
CN110413913A (zh) * 2019-07-04 2019-11-05 北京字节跳动网络技术有限公司 一种页面刷新方法、装置、终端及存储介质
US10795547B1 (en) * 2014-06-11 2020-10-06 Amazon Technologies, Inc. User-visible touch event queuing
CN113536173A (zh) * 2021-07-14 2021-10-22 北京字节跳动网络技术有限公司 一种页面处理方法、装置、电子设备及可读存储介质

Family Cites Families (34)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
SE518545C2 (sv) 2000-02-25 2002-10-22 Maple & Star Ab Förfarande och anordning för ett bildpresentationssystem
KR100830467B1 (ko) * 2006-07-13 2008-05-20 엘지전자 주식회사 터치 패널을 갖는 영상기기 및 이 영상기기에서 줌 기능을수행하는 방법
KR101857564B1 (ko) * 2009-05-15 2018-05-15 삼성전자 주식회사 휴대 단말기의 이미지 처리 방법
US20110074830A1 (en) * 2009-09-25 2011-03-31 Peter William Rapp Device, Method, and Graphical User Interface Using Mid-Drag Gestures
US8766928B2 (en) * 2009-09-25 2014-07-01 Apple Inc. Device, method, and graphical user interface for manipulating user interface objects
JP5597069B2 (ja) 2010-08-31 2014-10-01 キヤノン株式会社 画像編集装置、その制御方法、及び、プログラム
CN102012914A (zh) * 2010-11-22 2011-04-13 深圳市斯尔顿科技有限公司 一种网页图像的处理方法和装置
JP5797590B2 (ja) 2012-03-13 2015-10-21 シャープ株式会社 表示装置、表示方法、制御プログラム、および記録媒体
JP2013218375A (ja) 2012-04-04 2013-10-24 Sharp Corp 端末装置、画像表示システム、画像表示方法およびプログラム
KR20140097820A (ko) 2013-01-30 2014-08-07 삼성전자주식회사 전자장치에서 웹페이지 내의 특정 객체의 속성을 조절하기 위한 방법 및 장치
JP6131072B2 (ja) 2013-03-14 2017-05-17 シャープ株式会社 表示制御装置
CN103279293A (zh) * 2013-04-27 2013-09-04 天脉聚源(北京)传媒科技有限公司 一种切换图片的方法、装置和终端
JP2015103086A (ja) 2013-11-26 2015-06-04 キヤノン株式会社 画像変換装置、画像変換方法、コンピュータプログラム
CN104077387B (zh) * 2014-06-27 2018-03-02 北京奇虎科技有限公司 一种网页内容显示方法和浏览器装置
JP6659090B2 (ja) * 2014-08-11 2020-03-04 キヤノン株式会社 情報処理装置、情報処理装置の制御方法、及びコンピュータプログラム
JP2016126657A (ja) * 2015-01-07 2016-07-11 キヤノン株式会社 情報処理装置、情報処理装置の制御方法、及びプログラム
CN108353126B (zh) * 2015-04-23 2019-08-23 苹果公司 处理相机的内容的方法、电子设备和计算机可读存储介质
US10599305B2 (en) * 2015-10-16 2020-03-24 International Business Machines Corporation Approach for selecting a desired object on a small touch screen
CN106909354A (zh) * 2015-12-22 2017-06-30 北京奇虎科技有限公司 图片显示方法及装置
US10366144B2 (en) * 2016-04-01 2019-07-30 Ebay Inc. Analyzing and linking a set of images by identifying objects in each image to determine a primary image and a secondary image
US10009536B2 (en) * 2016-06-12 2018-06-26 Apple Inc. Applying a simulated optical effect based on data received from multiple camera sensors
CN110301136B (zh) * 2017-02-17 2023-03-24 交互数字麦迪逊专利控股公司 在流传输视频中进行选择性感兴趣对象缩放的系统和方法
CN108319414A (zh) * 2018-01-31 2018-07-24 北京小米移动软件有限公司 界面显示方法及装置
CN108280231A (zh) 2018-02-26 2018-07-13 深圳市富途网络科技有限公司 一种实现资讯文章详情页图片的手势缩放的方法及系统
CN111736740B (zh) * 2020-03-24 2022-06-07 北京沃东天骏信息技术有限公司 图片热区生成方法、装置、设备和存储介质
CN116820289A (zh) * 2020-03-31 2023-09-29 腾讯科技（深圳）有限公司 信息展示方法、装置、设备及存储介质
AU2021102652B4 (en) * 2020-05-18 2022-02-24 Apple Inc. User interfaces for viewing and refining the current location of an electronic device
CN112419137B (zh) * 2020-07-30 2024-10-08 上海幻电信息科技有限公司 遮罩图片显示方法、装置及遮罩图片显示方法、装置
CN112053286B (zh) * 2020-09-04 2023-09-05 抖音视界有限公司 图像处理方法、装置、电子设备和可读介质
CN112099690B (zh) 2020-09-15 2024-07-02 深圳市欢太科技有限公司 页面缩放方法、装置、终端及存储介质
CN112051952A (zh) 2020-09-27 2020-12-08 平安普惠企业管理有限公司 图片动态浏览方法、装置、电子设备及可读存储介质
CN112578971B (zh) * 2020-12-07 2023-02-10 腾讯科技（深圳）有限公司 页面内容展示方法、装置、计算机设备及存储介质
CN112596648B (zh) 2020-12-21 2022-07-08 北京百度网讯科技有限公司 页面处理方法、装置、电子设备及可读存储介质
US11694400B2 (en) * 2021-06-03 2023-07-04 Shopify Inc. Systems and methods for supplementing digital media with three-dimensional (3D) models

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US10795547B1 (en) * 2014-06-11 2020-10-06 Amazon Technologies, Inc. User-visible touch event queuing
CN105988702A (zh) * 2015-03-02 2016-10-05 阿里巴巴集团控股有限公司 查看对象图片的方法及系统
CN106406855A (zh) * 2016-08-26 2017-02-15 乐视控股（北京）有限公司 一种基于浏览器的图片处理方法及装置
CN108182021A (zh) * 2018-01-30 2018-06-19 腾讯科技（深圳）有限公司 多媒体信息展示方法、装置、存储介质及设备
CN110221722A (zh) * 2019-05-27 2019-09-10 掌阅科技股份有限公司 图片处理方法、电子设备及存储介质
CN110413913A (zh) * 2019-07-04 2019-11-05 北京字节跳动网络技术有限公司 一种页面刷新方法、装置、终端及存储介质
CN113536173A (zh) * 2021-07-14 2021-10-22 北京字节跳动网络技术有限公司 一种页面处理方法、装置、电子设备及可读存储介质

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
See also references of EP4339808A4 *

Also Published As

Publication number Publication date
CN113536173A (zh) 2021-10-22
US12578849B2 (en) 2026-03-17
JP2024521202A (ja) 2024-05-28
US20240272783A1 (en) 2024-08-15
EP4339808C0 (en) 2025-12-31
EP4339808B1 (en) 2025-12-31
CN113536173B (zh) 2024-01-16
EP4339808A4 (en) 2024-12-11
EP4339808A1 (en) 2024-03-20

Similar Documents

Publication Publication Date Title
WO2023284442A1 (zh) 一种页面处理方法、装置、电子设备及可读存储介质
CN102662566B (zh) 屏幕内容放大显示方法及终端
US9389777B2 (en) Gestures for manipulating tables, charts, and graphs
US20150067469A1 (en) Electronic apparatus and method for display control
US9792268B2 (en) Zoomable web-based wall with natural user interface
US20140237357A1 (en) Two-dimensional document navigation
US11379112B2 (en) Managing content displayed on a touch screen enabled device
TW201409340A (zh) 圖形移動控制系統及方法
US11610563B2 (en) Location-based display of pixel history
US10417310B2 (en) Content inker
WO2023092992A1 (zh) 一种页面元素的处理方法、设备及计算机可读存储介质
CN102799343B (zh) 一种显示索引图标内容的方法和装置
Tair The importance of responsive logo design across a wide range of devices on the web
CN121165991A (zh) 电子画布的处理方法、装置及显示设备
CN116893770A (zh) 截图方法、装置、电子设备及可读存储介质
CN113763459B (zh) 元素位置更新方法、装置、电子设备及存储介质
JP7755501B2 (ja) 名刺管理システム及び名刺管理プログラム
CN119414952A (zh) 基于安卓设备的信号源画面裁剪方法、装置及电子设备
CN110325957B (zh) 内容作为导航
CN120216087A (zh) 窗口管理方法、装置、电子设备及可读存储介质
HK1174119B (zh) 一种显示索引图标内容的方法和装置

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 22841082

Country of ref document: EP

Kind code of ref document: A1

WWE Wipo information: entry into national phase

Ref document number: 2023573551

Country of ref document: JP

WWE Wipo information: entry into national phase

Ref document number: 18569940

Country of ref document: US

Ref document number: 2022841082

Country of ref document: EP

ENP Entry into the national phase

Ref document number: 2022841082

Country of ref document: EP

Effective date: 20231213

NENP Non-entry into the national phase

Ref country code: DE

WWG Wipo information: grant in national office

Ref document number: 2022841082

Country of ref document: EP

WWG Wipo information: grant in national office

Ref document number: 18569940

Country of ref document: US