WO2023092992A1 - Procédé et dispositif de traitement d'élément de page, et support de stockage lisible par ordinateur - Google Patents

Procédé et dispositif de traitement d'élément de page, et support de stockage lisible par ordinateur Download PDF

Info

Publication number
WO2023092992A1
WO2023092992A1 PCT/CN2022/097864 CN2022097864W WO2023092992A1 WO 2023092992 A1 WO2023092992 A1 WO 2023092992A1 CN 2022097864 W CN2022097864 W CN 2022097864W WO 2023092992 A1 WO2023092992 A1 WO 2023092992A1
Authority
WO
WIPO (PCT)
Prior art keywords
page element
page
event
offset
zoom
Prior art date
Application number
PCT/CN2022/097864
Other languages
English (en)
Chinese (zh)
Inventor
林溢彬
卢道和
林挺
万纯
李为
Original Assignee
深圳前海微众银行股份有限公司
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 深圳前海微众银行股份有限公司 filed Critical 深圳前海微众银行股份有限公司
Publication of WO2023092992A1 publication Critical patent/WO2023092992A1/fr

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR 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; CALCULATING OR 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; CALCULATING OR 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; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR 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; CALCULATING OR 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

Definitions

  • the present application relates to the technical field of financial technology (Fintech) data processing, and relates to but not limited to a method, device and computer-readable storage medium for processing page elements.
  • Financial technology Fetech
  • the processor currently applicable to the page elements of the framework is mainly the officially recommended v-viewer, which is a component for viewing pictures. In addition to supporting operations such as rotation, scaling, and flipping, it also supports zooming
  • V-viewer is encapsulated based on viewer.js.
  • the underlying core is based on the absolute positioning and relative positioning of the positioning function (position) of Cascading Style Sheets Level 2 (CSS2), and the pictures are displayed on the canvas.
  • CSS2 Cascading Style Sheets Level 2
  • v-viewer only uses the rotation function (rotate) of Cascading Style Sheets Level 3 (CSS3) when rendering.
  • Viewer.js handles various events such as mouse events, keyboard events, and touch events on the bottom layer.
  • the operation bar can be customized through configuration, but the attribute parameters cannot be converted by custom algorithms.
  • the position is used to implement the viewer at present.
  • the position method generally deals with three attributes separately, such as zooming first, then shifting, and then rotating.
  • zooming first When the page element is a picture
  • shifting When using a small image, the above-mentioned operations take place in a very short time, giving the impression that they are implemented at the same time, but in fact they are not, that is, multiple attributes cannot be converted at the same time, for the processing of large page elements such as large images
  • Embodiments of the present application provide a method and device for processing page elements, and a computer-readable storage medium, so as to solve the problem that the existing position viewer tends to freeze and drop frames when viewing pictures.
  • This embodiment of the application provides a method for processing page elements, including:
  • deformation processing is performed on the page elements.
  • An embodiment of the present application provides a device for processing page elements, including:
  • the memory is used to store executable instructions; the processor is used to implement the above method when executing the executable instructions stored in the memory.
  • An embodiment of the present application provides a computer-readable storage medium, which stores executable instructions, and is used to cause a processor to execute to implement the above method.
  • the embodiment of the present application has the following beneficial effects: by obtaining the operation event for the page element; based on the operation coordinates corresponding to the operation event, calculating the attribute parameter generated by the operation event processing the page element; based on the event type of the operation event, the attribute parameter is calculated Cascading style sheet three-level transformation processing, to obtain the transformed attribute parameters; that is, to transform the attribute parameters based on the self-developed algorithm corresponding to the transformation function (transform) of CSS3; finally, based on the transformed attribute parameters, transform the page elements In this way, the new attribute parameter is applied to the transform attribute.
  • the processing method of the page element uses the above-mentioned self-developed algorithm to design multiple attributes at one time from a microscopic point of view, such as translation function (translate), scaling The function (scale) and the rotation function (rotate) are implemented at the same time, which is fundamentally different from the position scheme, and the use of CSS3 transform can utilize the graphics processing unit (GPU) for rendering optimization, avoiding freezes and dropped frames.
  • translation function translate
  • scale scaling
  • rotation function rotation function
  • FIG. 1 is a schematic diagram of an optional architecture of a terminal provided in an embodiment of the present application.
  • FIG. 2 is a schematic flowchart of a method for processing page elements provided by an embodiment of the present application
  • FIG. 3 is a schematic flowchart of a method for processing page elements in different event scenarios provided by an embodiment of the present application
  • FIG. 4 is a schematic diagram of operations in a dragging scenario provided by an embodiment of the present application.
  • FIG. 5 is a schematic diagram of operations in a zooming scenario provided by an embodiment of the present application.
  • Fig. 6 is a schematic diagram of multi-finger scrolling and multi-finger zooming provided by the embodiment of the present application.
  • Fig. 7 is a schematic diagram of the rotation operation provided by the embodiment of the present application.
  • FIG. 8 is a schematic diagram of a second-order Bezier curve provided by an embodiment of the present application.
  • FIG. 9 is a schematic diagram of a third-order Bezier curve provided by an embodiment of the present application.
  • the page element processing device provided in the embodiment of the present application can be implemented as a notebook computer, a tablet computer, a desktop computer, a mobile device (for example, a mobile phone, a portable Music players, personal digital assistants, special message devices, portable game devices), intelligent robots and other terminals with screen display functions can also be implemented as servers.
  • a mobile device for example, a mobile phone, a portable Music players, personal digital assistants, special message devices, portable game devices
  • intelligent robots and other terminals with screen display functions can also be implemented as servers.
  • FIG. 1 is a schematic structural diagram of a terminal 100 provided by an embodiment of the present application.
  • the terminal 100 shown in FIG. Various components in the terminal 100 are coupled together through the bus system 140 .
  • the bus system 140 is used to realize connection and communication between these components.
  • the bus system 140 also includes a power bus, a control bus and a status signal bus.
  • the various buses are labeled as bus system 140 in FIG.
  • Processor 110 can be a kind of integrated circuit chip, has signal processing capability, such as general-purpose processor, digital signal processor (DSP, Digital Signal Processor), or other programmable logic device, discrete gate or transistor logic device, discrete hardware Components, etc., wherein the general-purpose processor can be a microprocessor or any conventional processor, etc.
  • DSP digital signal processor
  • DSP Digital Signal Processor
  • User interface 130 includes one or more output devices 131 that enable presentation of media content, including one or more speakers and/or one or more visual displays.
  • the user interface 130 also includes one or more input devices 132, including user interface components that facilitate user input, such as a keyboard, mouse, microphone, touch screen display, camera, other input buttons and controls.
  • Memory 150 may be removable, non-removable or a combination thereof. Exemplary hardware devices include solid-state memory, hard disk drives, optical disk drives, and the like. Memory 150 optionally includes one or more storage devices located physically remote from processor 110 . Memory 150 includes volatile memory or nonvolatile memory, and may include both volatile and nonvolatile memory. The non-volatile memory can be read-only memory (Read Only Memory, ROM), and the volatile memory can be random access memory (Random Access Memory, RAM). The memory 150 described in the embodiment of the present application is intended to include any suitable type of memory. In some embodiments, the memory 150 is capable of storing data to support various operations, examples of which include programs, modules, and data structures, or subsets or supersets thereof, as exemplified below.
  • Operating system 151 including system programs for processing various basic system services and performing hardware-related tasks, such as framework layer, core library layer, driver layer, etc., for implementing various basic services and processing hardware-based tasks;
  • the network communication module 152 is used to reach other computing devices via one or more (wired or wireless) network interfaces 120.
  • Exemplary network interfaces 120 include: Bluetooth, Wireless Compatibility Authentication (WiFi), and Universal Serial Bus ( Universal Serial Bus, USB), etc.;
  • the input processing module 153 is configured to detect one or more user inputs or interactions from one or more of the input devices 132 and translate the detected inputs or interactions.
  • FIG. 1 shows a page element processing device 154 stored in a memory 150.
  • the page element processing device 154 may be a terminal 100
  • the device for processing the page elements in which can be software in the form of programs and plug-ins, includes the following software modules: acquisition module 1541, processing module 1542, these modules are logical, so any combination can be made according to the realized functions or split further. The function of each module will be explained below.
  • the device provided in the embodiment of the present application may be implemented in hardware.
  • the device provided in the embodiment of the present application may be a processor in the form of a hardware decoding processor, which is programmed to execute the The processing method of the page element provided by the embodiment, for example, the processor in the form of a hardware decoding processor can adopt one or more Application Specific Integrated Circuits (Application Specific Integrated Circuit, ASIC), DSP, Programmable Logic Device (Programmable Logic Device) , PLD), Complex Programmable Logic Device (Complex Programmable Logic Device, CPLD), Field Programmable Gate Array (Field-Programmable Gate Array, FPGA) or other electronic components.
  • ASIC Application Specific Integrated Circuit
  • DSP Digital Signal Processing
  • Programmable Logic Device Programmable Logic Device
  • PLD Complex Programmable Logic Device
  • CPLD Complex Programmable Logic Device
  • Field Programmable Gate Array Field-Programmable Gate Array
  • FPGA Field-Programmable Gate Array
  • FIG. 2 is an optional flowchart of the method for processing page elements provided by the embodiment of the present application, which will be described in conjunction with the steps shown in FIG. 2.
  • Step S201 obtaining operation events for page elements.
  • the Document Object Model (Document Object Model, DOM) is a set of web page (Web) standards of the World Wide Web Consortium (W3C) international organization. It defines a set of properties, methods, and events for accessing Hypertext Markup Language (HTML) document objects.
  • the page element can be obtained by obtaining the DOM element.
  • Page elements include but are not limited to pictures and text on the page.
  • the operation event includes an operation event generated by operating on the page element through at least one of an input module of the terminal, such as a vertical and horizontal position indicator of the display system, and a shortcut key of a keyboard.
  • an input module of the terminal such as a vertical and horizontal position indicator of the display system, and a shortcut key of a keyboard.
  • the operation event may also include events generated in other ways, for example, an operation event generated by detecting the operation of the operation object through the touch module of the terminal.
  • this application is not only applicable to personal computer (Personal Computer, PC) browsers, but also to common mobile devices, such as smart phones, tablets, etc.
  • Dashboard gestures The self-developed algorithm provided by the embodiment of this application can design multiple attributes such as displacement, scaling, and rotation at the same time from a microscopic point of view.
  • the control panel recognizes gestures.
  • the mobile terminal does not provide intuitive gesture judgment like the touchpad.
  • different touch points are used to simulate and judge gestures to achieve the same effect.
  • the zoom event can be realized through the scroll wheel on the PC side. It is also easier to judge the scrolling direction through the scrolling event on the touchpad.
  • the mobile side needs to be realized through gestures. The center point of the two fingers is used as the origin, and by judging the x-axis and y-axis The offset yields the direction of scrolling.
  • the PC end is different from the mobile end.
  • One is the mouse drag event (mouseMove) event, and the other is to monitor the touch screen finger touch move (touchmove) event, but the principles are basically the same, that is, the two
  • the coordinates between two points are calculated to calculate the offset, which is the displacement of dragging.
  • Step S202 based on the operation coordinates corresponding to the operation event, calculate the attribute parameters generated by the operation event processing the page element.
  • attribute parameters generated by processing the page elements calculated by the operation events are different.
  • this application fully considers the control displacement, rotation angle, zoom ratio, and the influence among the three in the process of calculating the attribute parameters generated by the operation event on the page element based on the operation coordinates corresponding to the operation event.
  • Step S203 based on the event type of the operation event, perform cascading style sheet three-level conversion processing on the attribute parameters to obtain converted attribute parameters.
  • a self-developed algorithm is newly added in CSS3, and multiple attributes such as translation function (translate), scaling function (scale), and rotation function (rotate) are designed at one time from a microscopic point of view, and then realized based on For the event type of the operation event, the corresponding cascading style sheet three-level conversion process is performed on the attribute parameters to obtain the converted attribute parameters.
  • Step S204 deforming the page elements based on the converted attribute parameters.
  • the CSS3transform is used to calculate and convert the attribute parameters into actual CSS3 attribute values, and finally realize the deformation processing effects such as dragging, rotating, and zooming by changing the CSS3 values.
  • step S203 performs cascading style sheet three-level conversion processing on attribute parameters based on the event type of the operation event to obtain converted attribute parameters.
  • the method for processing page elements obtains operation events for page elements; based on the operation coordinates corresponding to the operation events, calculates the attribute parameters generated by the operation events to process the page elements; based on the event type of the operation events, the attribute parameters Perform cascading style sheet three-level conversion processing to obtain the converted attribute parameters; that is, transform the attribute parameters based on the self-developed algorithm corresponding to the CSS3 transformation function (transform); finally, transform the page elements based on the transformed attribute parameters Processing; in this way, the new attribute parameters are applied to the transform attribute.
  • the processing method of the page element provided by this application is based on CSS3 self-developed algorithm, and multiple attributes are designed at one time from a microscopic point of view, such as translation function (translate), scaling The function (scale) and rotation function (rotate) are realized at the same time, which is fundamentally different from the position scheme, and the use of CSS3transform can utilize the graphics processing unit (GPU) for rendering optimization, avoiding freezes and dropped frames.
  • translation function translation
  • scale scaling
  • rotation function rotation function
  • the operation events in the embodiment of the present application include drag events, zoom events and rotation events; the processing of events is a focus of this application, and functions such as drag and zoom depend on these events
  • the essence of different event processing is to record the coordinates of the DOM, and finally convert them into actual CSS3 attribute values through calculation, and finally realize dragging, rotation, and zoom effects by changing CSS3 values.
  • step S202 calculates the operation event pair based on the operation coordinates corresponding to the operation event.
  • the attribute parameters generated by the processing of page elements can be realized through the following steps:
  • A11 obtain the first coordinate of the operation object of the page element on the page before dragging, and the second coordinate of the operation object on the page after dragging;
  • the operation object includes, but is not limited to, a vertical and horizontal position indicator of the display system such as a mouse, a stylus, and a finger.
  • the operation object is a finger
  • it can be a single-finger operation as shown in a in FIG. 4 or a multi-finger operation as shown in b in FIG. 4 . It can be seen that this application supports rich drag operation gestures .
  • the first offset is characterized as (xOffset1, yOffset1),
  • xOffset1 parseInt(clientX-this.clickLeft)/this.scale;
  • yOffset1 parseInt(clientY-this.clickTop)/this.scale; wherein, the first coordinate is represented by P1(this.clickLeft, this.clickTop), and the second coordinate is represented by P2(clientX, clientY).
  • step S203 is based on the event type of the operation event, and the attribute Cascading style sheet three-level conversion processing is performed on parameters to obtain converted attribute parameters, which can be realized through the following steps:
  • the preset angle is 360 degrees
  • the second offset is represented as (xOffset2, yOffset2)
  • the first offset is represented as (xOffset1, yOffset1)
  • the third offset is represented as (xOffset3, yOffset3)
  • the second The rotation angle is characterized as rotateDeg; based on the second offset and the mapping relationship between the offset and the rotation angle, A24 performs cascading style sheet three-level conversion processing on the first offset to obtain the converted third offset amount, there are the following situations:
  • this offset that is, the displacement is combined with the rotation angle and the scaling ratio to obtain the final Offset to apply to CSS3 transforms.
  • the realization principle of the drag effect in this application is to calculate and continuously compare the coordinates of the two nodes before and after, calculate the displacement and convert it into CSS3 displacement, and then use the translate function to change the position of page elements such as pictures.
  • the mouse mouse move (mouseMove) event or the touch screen finger touch move (touchmove) event is triggered for the first time, and the coordinates of the mouse or finger on the page at this time will be recorded and saved.
  • step S202 calculates the impact of the operation event on the page element based on the operation coordinates corresponding to the operation event.
  • the attribute parameters generated by processing can be realized through the following steps:
  • the key point of zooming the page elements with the third coordinate as the center and realizing center zoom proposed in the embodiment of this application is that the horizontal offset xOffset and vertical offset of the final transform need to be calculated before the new scale ratio is applied to the transform attribute.
  • the offset yOffset is the fifth offset.
  • the simplified calculation formula can be: view offset/current zoom ratio. The key point is to calculate the pixel values that need to be offset in the horizontal and vertical directions in order to ensure that the image is zoomed in the center.
  • the operation object is a finger, and in this case, the operation may be the multi-finger zooming operation shown in FIG. 5 .
  • the center of the gesture as the origin to ensure that the image is scaled around the origin.
  • B14 calculates the fifth offset for zooming the page element centered on the third coordinate based on the width, height, fourth offset, first zoom ratio, and second zoom ratio
  • the amount can be realized by the following formula: the fifth offset is represented as (xOffset5, yOffset5), where,
  • yOffset5 ((v-this.referScale) ⁇ (naturalHeight ⁇ k-this.scaleY)+this.referY ⁇ this.referScale)/v; where, the height is represented by naturalHeight.
  • this.referScale is only recorded once, and unless the mouse coordinates change, the reference calculation is based on the data triggered by the scroll wheel for the first time.
  • the above this.scaleX can be understood as the relative displacement of the current mouse in the horizontal direction of the page element such as the picture (relative to the left border of the picture) when zooming; the above this.scaleY can be understood as the relative displacement of the current mouse in the vertical direction of the picture when zooming. Displacement (relative to the upper border of the image).
  • this.referX and this.referY ensure that the image can still be zoomed in with the current mouse as the center after being dragged.
  • step S201 obtains operation events for page elements, which can be implemented through the following steps C11 or C12:
  • the shortcut key includes but not limited to the Ctrl/Shift key.
  • the operation events generated by operating on the page elements through one input module are different from those through two input modules; the operation events include scaling events and scrolling events.
  • Example 1 Only operate the mouse wheel to represent a scroll event, while pressing Ctrl/shift, switch to a zoom event, and then operate the mouse wheel to represent a zoom event. In this way, zoom and scroll events are supported at the same time through key distinction.
  • Example 2 Only operate the mouse wheel to represent a zoom event, press Ctrl/shift while switching to a scroll event, and then operate the mouse wheel to represent a scroll event. In this way, zoom and scroll events are supported at the same time through key distinction.
  • the drag boundary can also be set. If the user drags a page element such as a picture and it is about to exceed the boundary, here, instead of allowing the picture to exceed the boundary like the traditional solution, but by limiting the maximum value or The minimum value is used to ensure that the dragged image coordinates do not exceed the maximum or minimum value. In this way, the embodiment of the present application not only limits that the picture does not exceed the border of the browser, but also supports scrolling through mouse scrolling and gestures, and supports vertical and horizontal scrolling.
  • the general approach in the Position solution in related technologies is to only provide zooming operations, and does not support scrolling operations, because when scrolling and rotation are required to be supported, the rotation angle uses the rotate property of CSS3, and the two are not the same in essence.
  • the schemes, calculation benchmarks and methods are different, and compatibility processing cannot be performed, which will cause the picture to be zoomed in, dragged and rotated, and then scrolled to fail to achieve the desired effect.
  • the CSS3 solution is fully used, the same set of benchmarks is used, and these two functions can be realized at the same time.
  • the mouse wheel generally represents scrolling or zooming in the user's view, but scrolling events can only represent one kind of event, so either mouse scrolling is used for scrolling events, or it can only be used for zooming events.
  • the embodiment of the present application supports zooming and scrolling operations at the same time, and the implementation method is to switch between scrolling events and zooming events by adding shortcut keys such as Ctrl/Shift.
  • the embodiment of this application can effectively optimize the stuttering phenomenon that occurs when large images are dragged and zoomed, and with the development of the browser's basic css3 underlying capabilities, the advantages of large image processing based on css3-based self-developed algorithms will become increasingly prominent. It brings great convenience to business, office and some fields that require detailed browsing of large images. In addition, the rich operating gestures and shortcut keys can also bring users a better operating experience, avoiding the embarrassing scenes that cannot be supported by the gestures commonly used by some touch screen users.
  • step S201 obtains operation events for page elements through the following steps D11 to D13, D11 to D12 and D14, or, D11 to D12 and D15 implements:
  • the scrolling and zooming operations are distinguished by identifying the angle of the two-finger operation, and the same is true for the three-finger operation.
  • Touch screen users are affected by the habit of using native gestures. , it is generally hoped that two-finger and three-finger gestures can also be used on the web page for quick browsing.
  • the algorithm for distinguishing two-finger scrolling and zooming operations is to determine the displacement direction of two fingers. For example, as shown in a in FIG. 6 , if the displacement directions of the two fingers are the same, it is scrolling. Referring to b in FIG. 6, if the displacement directions of the two fingers are opposite, it is zooming.
  • the wheel event of the mouse and the two-finger scrolling event of the touchpad are the same event, and the pinch-to-zoom gesture to be specially processed is implemented through steps D11 to D12 and D15.
  • the two-finger scrolling operation of the touchpad and touch screen will scroll horizontally and vertically at the same time. At this time, it is necessary to intercept the horizontal and vertical displacements in the scrolling event. If the horizontal displacement > vertical Displacement means horizontal scrolling, and if horizontal displacement ⁇ vertical displacement, it is vertical scrolling.
  • step S201 obtains operation events for page elements, which can be implemented through the following steps E11 to E12, or E11 and E13:
  • the click area of the toolbar button is relatively obvious. Users can rotate the picture by clicking the render button, but users of touch screen devices and touchpads are more accustomed to gesture operations. There are two reasons: One is that touch screen devices are generally small, and the buttons are inconvenient to click, and the other is that gesture operations are more in line with operating habits.
  • the rotation gesture is a two-finger gesture, and the coordinates of the two fingers are recorded for each event.
  • the key to judging the rotation direction is to calculate the angle between the two fingers and the horizontal axis during the rotation process.
  • the thumb When the angle between the thumb and the horizontal axis becomes larger or the angle between the index finger and the horizontal axis becomes smaller, it is a counterclockwise rotation.
  • the angle between the thumb and the horizontal axis becomes smaller or the angle between the index finger and the horizontal axis becomes larger, it is a clockwise rotation.
  • the specific rotation angle can be obtained by calculating the difference between the front and back coordinates.
  • the embodiment of the present application in addition to the two-finger gesture operation, also supports the three-finger gesture operation, and even the four-finger gesture operation and the five-finger gesture operation, which are not specifically limited in the embodiment of the present application.
  • the determination of the rotation direction and rotation angle is similar to the two-finger gesture operation. It can be seen that the embodiment of the present application processes user gestures in combination with js events, and supports gestures that are more comprehensive and more in line with user habits.
  • the scaling ratio in a scene where the scaling ratio is customized, can be customized through the following steps before deforming the page elements:
  • the zoom ratio range represents the fixed ratio of the size of the page element relative to the original size of the page element when zooming in or out;
  • the F12 determine at least three reference points within the zoom ratio range; wherein, the at least three reference points include the zoom start point, the zoom end point, and at least one zoom step point between the zoom start point and the zoom end point; at least one zoom step point distance zoom The closer the end point is, the larger the corresponding fixed ratio of each enlargement or reduction is.
  • the embodiment considering the process of image enlargement, if each time the image is enlarged or reduced by a fixed ratio, such as 10%, then when the original size of the image is large, it needs to be zoomed many times before it can be enlarged to the original size.
  • the embodiment provides a custom scaling curve, and the user can define the zoom-in and zoom-out curves of the picture to achieve such an effect: when the picture is not enlarged to 40% of the original size, each time the picture is enlarged by 10%, when the original size is exceeded After 40%, each time zoom in itself 30%, shrink the same.
  • the zoom ratio when customizing the zoom ratio, it can be realized by combining Bezier curves (bezier). Users can decide to configure several orders of Bezier curves according to their needs, so as to achieve the purpose of finely controlling the zoom ratio, thereby providing flexible changes.
  • the zoom ratio improves the user's zoom experience on page elements.
  • Bezier curves are also used in the animation properties of CSS3.
  • the corresponding properties are cubic-bezier functions, which are mostly used for the control of animation tracks and the process of element size changes, such as moving at a constant speed and accelerating movement. , accelerate first, then decelerate, etc.
  • animation is not suitable for the fine control of the zoom ratio. Take the image enlarged from 10% to 20% as an example. Animation can only adjust the speed of the image enlargement process within a certain period of time, whether to zoom in at a constant speed or to accelerate and decelerate.
  • the effect of visual presentation rather than calculating the zoom ratio of the image.
  • the principle of Bessel is applied to the calculation of the scaling ratio, so as to realize the scaling curve of the custom picture.
  • step S204 deforms the page element based on the converted attribute parameter, including the following steps: G11, obtaining the target ratio of the size of the page element to the original size of the page element during zooming; G12, select a target reference point that matches the target ratio from at least three reference points; G13, perform zoom processing on the page element based on the converted attribute parameters and the fixed ratio of each enlargement or reduction corresponding to the target reference point.
  • P 0 (x 0 , y 0 ) and P 2 (x 2 , y 2 ) represent the starting point and the ending point, respectively, and P 1 (x 1 , y 2 ) is a reference point for adjusting the change of the curve.
  • the second-order curve is determined by three points
  • the third-order curve consists of four points P 0 , P 1 , P 2 , and P 3 are determined; among them, the more reference points, the finer the control of the curve, which can be used according to the actual situation. In this way, the customization and flexible adjustment of the zoom ratio are realized.
  • the initial display ratio of the page element in a scene where the initial display ratio of a page element is customized, can also be customized through the following steps before obtaining the operation event for the page element in step S201:
  • the aspect ratio of the page element is represented by sizeRatio
  • the original length of the picture is represented by naturalHeight
  • the original width of the picture is represented by naturalWidth
  • the canvas width of the page is represented by width
  • the canvas length of the page is represented by height
  • the maximum display ratio It is represented by initialScale
  • the calculated picture width is represented by sizeW
  • the aspect ratio of a page element is also referred to as an aspect ratio.
  • the maximum display ratio of the page elements can be calculated in the following way:
  • the default configuration is verticalPic: ⁇ lengthWidthRatio:3, initialShow:true ⁇ , that is, the default aspect ratio is 3, and it is suitable for displaying large-size pictures. Users can also call the init method When initializing the settings, you can choose to pass in parameters to override, such as verticalPic: ⁇ lengthWidthRatio: 4, initialShow:true ⁇ .
  • the default aspect ratio may also be other parameters, which are not specifically limited in this embodiment of the present application.
  • the software stored in the page element processing device 154 of the memory 150 A module may be a device for processing page elements in the terminal 100, including:
  • Obtaining module 1541 configured to obtain operation events for page elements
  • the processing module 1542 is used to calculate the attribute parameters generated by the operation event processing the page element based on the operation coordinates corresponding to the operation event; based on the event type of the operation event, perform cascading style sheet three-level conversion processing on the attribute parameters to obtain the converted Attribute parameters; based on the converted attribute parameters, deform the page elements.
  • the operation event includes a drag event
  • the processing module 1542 is also used to obtain the first coordinate of the operation object of the page element on the page before dragging and the second coordinate of the operation object on the page after dragging ;
  • the first offset is characterized by (xOffset1, yOffset1),
  • xOffset1 parseInt(clientX-this.clickLeft)/this.scale;
  • yOffset1 parseInt(clientY-this.clickTop)/this.scale; wherein, the first coordinate is represented by P1(this.clickLeft, this.clickTop), and the second coordinate is represented by P2(clientX, clientY).
  • the processing module 1542 is further configured to obtain the second offset of the page element before dragging;
  • the cascading style sheet three-level conversion process is performed on the first offset to obtain a converted third offset.
  • the preset angle is 360 degrees
  • the second offset is represented as (xOffset2, yOffset2)
  • the first offset is represented as (xOffset1, yOffset1)
  • the third offset is represented as (xOffset3, yOffset3 )
  • the second rotation angle is characterized as rotateDeg
  • the operation event includes a zoom event
  • the processing module 1542 is also used to obtain the first zoom ratio of the page element before zooming, the second zoom ratio of the page element during zooming, and the width and height of the page element before zooming;
  • yOffset5 ((v-this.referScale) ⁇ (naturalHeight ⁇ k-this.scaleY)+this.referY ⁇ this.referScale)/v; where, the height is represented by naturalHeight.
  • the processing module 1542 is further configured to operate an input module on a page element by displaying a system vertical and horizontal position indicator and a shortcut key of the keyboard to generate an operation event; or,
  • the operation events generated by operating on the page elements through one input module are different from those through two input modules; the operation events include scaling events and scrolling events.
  • the processing module 1542 is also configured to receive a multi-finger scrolling operation performed on page elements through the touch module;
  • the processing module 1542 is also configured to receive a two-finger gesture operation performed on a page element through a touch module;
  • the operation event includes a zoom event
  • the processing module 1542 is also used to obtain the zoom ratio range of the page element; wherein, the zoom ratio range indicates that the size of the page element is relative to the original size of the page element during zooming, and each zoom-in or A fixed ratio of reduction;
  • the at least three reference points include a zoom start point, a zoom end point, and at least one zoom step point between the zoom start point and the zoom end point; at least one zoom step point is closer to the zoom end point Closer, the larger the corresponding fixed ratio of zooming in or zooming out each time;
  • the page element is zoomed based on the converted attribute parameter and the fixed ratio of each enlargement or reduction corresponding to the target reference point.
  • the processing module 1542 is also used to obtain the aspect ratio of the page element
  • the page element processing device obtains the operation event for the page element; calculates the attribute parameters generated by processing the page element based on the operation event based on the operation coordinate corresponding to the operation event; based on the event type of the operation event, Cascading style sheet three-level conversion processing is performed on the attribute parameters to obtain the converted attribute parameters; that is, the attribute parameters are converted based on the self-developed algorithm corresponding to the CSS3 transformation function (transform); finally, based on the converted attribute parameters, the page element Perform deformation processing; in this way, the new attribute parameters are applied to the transform attribute.
  • the processing method of the page element provided by the embodiment of the present application is based on the self-developed algorithm of CSS3, and multiple attributes are designed at one time from a microscopic point of view, such as a displacement function ( translate), scaling function (scale), and rotation function (rotate) are implemented at the same time, which is fundamentally different from the position scheme, and the use of CSS3transform can utilize the graphics processing unit (GPU) for rendering optimization, avoiding freezes and dropped frames.
  • GPU graphics processing unit
  • the embodiment of the present application provides a storage medium storing executable instructions, and the executable instruction is stored therein.
  • the executable instruction When executed by the processor, it will cause the processor to execute the method provided in the embodiment of the present application, for example, as shown in FIG. 2 shows the method.
  • the computer-readable storage medium obtaineds the operation event for the page element; calculates the attribute parameter generated by processing the page element based on the operation event based on the operation coordinate corresponding to the operation event; based on the event type of the operation event, the Cascading style sheet three-level conversion processing is performed on the attribute parameters to obtain the converted attribute parameters; that is, the attribute parameters are converted based on the self-developed algorithm corresponding to the CSS3 transformation function (transform); finally, based on the converted attribute parameters, the page element Perform deformation processing; in this way, the new attribute parameters are applied to the transform attribute.
  • the processing method of the page element provided by the embodiment of the present application is based on the self-developed algorithm of CSS3, and multiple attributes are designed at one time from a microscopic point of view, such as a displacement function ( translate), scaling function (scale), and rotation function (rotate) are implemented at the same time, which is fundamentally different from the position scheme, and the use of CSS3transform can utilize the graphics processing unit (GPU) for rendering optimization, avoiding frame lag .
  • GPU graphics processing unit
  • the storage medium can be a computer-readable storage medium, for example, a ferroelectric memory (FRAM, Ferromagnetic Random Access Memory), a read-only memory (ROM, Read Only Memory), a programmable read-only memory (PROM, Programmable Read Only Memory), Erasable Programmable Read Only Memory (EPROM, Erasable Programmable Read Only Memory), Electrically Erasable Programmable Read Only Memory (EEPROM, Electrically Erasable Programmable Read Only Memory), flash memory, magnetic surface memory, optical disc, Or memory such as CD-ROM (Compact Disk-Read Only Memory); It can also be various devices including one or any combination of the above-mentioned memories.
  • FRAM Ferroelectric memory
  • ROM Read Only Memory
  • PROM programmable read-only memory
  • EPROM Erasable Programmable Read Only Memory
  • EEPROM Electrically Erasable Programmable Read Only Memory
  • flash memory magnetic surface memory
  • optical disc Or memory such as CD-ROM (Compact Disk-Read Only Memory); It can also be various
  • executable instructions may take the form of programs, software, software modules, scripts, or code written in any form of programming language, including compiled or interpreted languages, or declarative or procedural languages, and its Can be deployed in any form, including as a stand-alone program or as a module, component, subroutine or other unit suitable for use in a computing environment.
  • executable instructions may, but do not necessarily correspond to files in a file system, may be stored as part of a file that holds other programs or data, for example, in Hyper Text Markup Language (HTML, Hyper Text Markup Language) in one or more scripts in a document, in a single file dedicated to the program in question, or in multiple cooperating files (for example, a file that stores one or more modules, subroutines, or code sections )middle.
  • executable instructions may be deployed to be executed on one computing device, or on multiple computing devices located at one site, or alternatively, on multiple computing devices distributed across multiple sites and interconnected by a communication network. to execute.
  • the embodiment of the present application provides a page element processing method, device, and computer-readable storage medium, by obtaining the operation event for the page element; based on the operation coordinates corresponding to the operation event, calculating the attribute generated by the operation event processing the page element Parameters; based on the event type of the operation event, the cascading style sheet three-level conversion process is performed on the attribute parameters to obtain the converted attribute parameters; that is, the attribute parameters are converted based on the self-developed algorithm corresponding to the CSS3 transformation function (transform); finally, Based on the converted attribute parameters, the page elements are deformed; in this way, the new attribute parameters are applied to the transform attribute, and it can be seen that the processing method of the page elements provided by the embodiment of the present application, through the above self-developed algorithm, once from a microscopic point of view Multiple attributes such as translation function (translate), scaling function (scale) and rotation function (rotate) are realized at the same time, which is fundamentally different from the position scheme, and the use of CSS3 transform can utilize GPU for rendering optimization,

Abstract

La présente invention concerne un procédé et un dispositif de traitement d'élément de page, et un support de stockage lisible par ordinateur. Le procédé comprend les étapes suivantes : obtention d'un événement d'opération pour un élément de page ; sur la base des coordonnées d'opération correspondant à l'événement d'opération, calcul d'un paramètre d'attribut généré par le traitement de l'élément de page par l'événement d'opération ; réalisation d'un traitement de conversion à trois niveaux de feuille de style en cascade sur le paramètre d'attribut sur la base du type d'événement de l'événement d'opération afin d'obtenir un paramètre d'attribut converti ; et réalisation d'un traitement de déformation sur l'élément de page sur la base du paramètre d'attribut converti.
PCT/CN2022/097864 2021-11-25 2022-06-09 Procédé et dispositif de traitement d'élément de page, et support de stockage lisible par ordinateur WO2023092992A1 (fr)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202111412083.1 2021-11-25
CN202111412083.1A CN114115665A (zh) 2021-11-25 2021-11-25 一种页面元素的处理方法、设备及计算机可读存储介质

Publications (1)

Publication Number Publication Date
WO2023092992A1 true WO2023092992A1 (fr) 2023-06-01

Family

ID=80373069

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2022/097864 WO2023092992A1 (fr) 2021-11-25 2022-06-09 Procédé et dispositif de traitement d'élément de page, et support de stockage lisible par ordinateur

Country Status (2)

Country Link
CN (1) CN114115665A (fr)
WO (1) WO2023092992A1 (fr)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117311708A (zh) * 2023-09-18 2023-12-29 中教畅享(北京)科技有限公司 一种网页端3d场景内资源展示页面动态修改方法及装置

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114115665A (zh) * 2021-11-25 2022-03-01 深圳前海微众银行股份有限公司 一种页面元素的处理方法、设备及计算机可读存储介质

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20150002433A1 (en) * 2011-11-18 2015-01-01 Sony Ericsson Mobile Communications Ab Method and apparatus for performing a zooming action
CN111651107A (zh) * 2020-06-03 2020-09-11 山东中创软件商用中间件股份有限公司 一种3d模型前端显示方法、装置、设备及介质
CN112965645A (zh) * 2021-03-15 2021-06-15 中国平安财产保险股份有限公司 页面拖拽方法、装置、计算机设备及存储介质
CN114115665A (zh) * 2021-11-25 2022-03-01 深圳前海微众银行股份有限公司 一种页面元素的处理方法、设备及计算机可读存储介质

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20150002433A1 (en) * 2011-11-18 2015-01-01 Sony Ericsson Mobile Communications Ab Method and apparatus for performing a zooming action
CN111651107A (zh) * 2020-06-03 2020-09-11 山东中创软件商用中间件股份有限公司 一种3d模型前端显示方法、装置、设备及介质
CN112965645A (zh) * 2021-03-15 2021-06-15 中国平安财产保险股份有限公司 页面拖拽方法、装置、计算机设备及存储介质
CN114115665A (zh) * 2021-11-25 2022-03-01 深圳前海微众银行股份有限公司 一种页面元素的处理方法、设备及计算机可读存储介质

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117311708A (zh) * 2023-09-18 2023-12-29 中教畅享(北京)科技有限公司 一种网页端3d场景内资源展示页面动态修改方法及装置
CN117311708B (zh) * 2023-09-18 2024-04-05 中教畅享科技股份有限公司 一种网页端3d场景内资源展示页面动态修改方法及装置

Also Published As

Publication number Publication date
CN114115665A (zh) 2022-03-01

Similar Documents

Publication Publication Date Title
US11532072B2 (en) Multifunctional environment for image cropping
US11099712B2 (en) Device, method, and graphical user interface for navigating and displaying content in context
US11402978B2 (en) Devices, methods, and systems for manipulating user interfaces
WO2023092992A1 (fr) Procédé et dispositif de traitement d'élément de page, et support de stockage lisible par ordinateur
EP3260969B1 (fr) Dispositif, procédé et interface utilisateur graphique de manipulation d'objets d'interface utilisateur
US11947791B2 (en) Devices, methods, and systems for manipulating user interfaces
US20120174029A1 (en) Dynamically magnifying logical segments of a view
WO2011072497A1 (fr) Procédé, dispositif et équipement de calcul pour gestion de fenêtres
KR20150095541A (ko) 사용자 단말 장치 및 이의 디스플레이 방법
WO2013044735A1 (fr) Navigateur web et procédé de navigation de page web
WO2017059734A1 (fr) Procédé de zoom avant/arrière d'image et dispositif électronique
TWI510083B (zh) 電子設備及其圖片縮放方法
TWI490774B (zh) 用於觸控裝置之瀏覽頁面鎖定縮放區域之控制方法
WO2018198703A1 (fr) Dispositif d'affichage
WO2023284442A1 (fr) Procédé et appareil de traitement de page, dispositif électronique et support de stockage lisible
CN112148167A (zh) 控件设置方法、装置和电子设备
WO2022017090A1 (fr) Procédé d'affichage d'informations, dispositif électronique et support de stockage
WO2023030307A1 (fr) Procédé et appareil de capture d'écran et dispositif électronique
EP2791773B1 (fr) Zone d'affichage à distance comprenant des lentilles d'entrée représentant chacune une région d'une interface utilisateur graphique
JP2020507174A (ja) 表示コンテンツのパネルをナビゲートする方法
CN110286827B (zh) 一种元素缩放控制方法、装置、设备及存储介质
KR101381878B1 (ko) 마우스를 이용하여 터치 입력을 구현하기 위한 방법, 장치, 및 컴퓨터 판독 가능한 기록 매체
CN115917488A (zh) 一种显示界面处理方法、装置及存储介质
WO2018132971A1 (fr) Procédé et terminal de commande interactive
CN115167963A (zh) 一种基于h5的多层级窗口快速响应的方法及存储介质

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: 22897090

Country of ref document: EP

Kind code of ref document: A1