UI dragging method and device on mobile terminal

Abstract

The embodiment of the invention provides a UI dragging method and device on a mobile terminal, and the method comprises the steps: obtaining a screen coordinate of a touch position corresponding to each frame displayed by the mobile terminal in a life cycle of a dragging operation when the dragging operation acting on a first control displayed by the mobile terminal is detected; the life cycle is the process of the dragging operation from starting to touching the screen to leaving the screen; aiming at the screen coordinate of the touch position corresponding to each frame in the frames displayed by the mobile terminal, executing the following steps: converting the screen coordinate of the touch position corresponding to the frame into a first UI coordinate of the touch position corresponding to the frame under the UI layout in the UE engine; determining a first target coordinate of the first control under the UI layout according to the position of an anchor point of the first control on the first control and the first UI coordinate; and according to the first target coordinate, setting a position coordinate of the first control in a frame displayed by the mobile terminal. Therefore, the effect that a user drags the first control to move on the screen of the mobile terminal can be achieved.

Description

Technical Field

[0001] The embodiments of the present invention relate to the field of network technology, and in particular to a method and device for dragging a UI on a mobile terminal. Background Art

[0002] UE engine is a game engine developed by EPic Games, referred to as UE engine, which can support use on multiple platforms, such as PC, console, mobile device, virtual reality and augmented reality platforms. It has a powerful graphics rendering and blueprint system, which can create realistic game screens and quickly create game logic and interactive behaviors. UI is the bridge between people and computers. In the field of games, UI not only provides information and control means, but also is a key component of player immersion and game experience. With the development of technology, game UI has changed from a static, single layout to a dynamic, customizable interactive environment. In order to enable players to have a more intuitive and personalized interactive experience, a draggable UI can be designed in the game, so that players can drag the skill icon from one position to another position they like on the mobile terminal, but the UMG system in the current UE engine does not provide a draggable UI. Summary of the invention

[0003] The embodiment of the present invention provides a UI dragging method and device on a mobile terminal, which are used to realize the movement of controls on the dragging UI on a mobile terminal based on a UE engine, thereby improving the user's interactive experience.

[0004] In a first aspect, an embodiment of the present invention provides a UI dragging method on a mobile terminal, the method comprising: when a drag operation acting on a first control displayed on the mobile terminal is detected, obtaining the screen coordinates of the touch positions corresponding to each frame displayed on the mobile terminal within the life cycle of the drag operation; wherein the first control is a draggable control, and the life cycle is the process of the drag operation from starting to contact the screen of the mobile terminal to leaving the screen of the mobile terminal; for the screen coordinates of the touch position corresponding to each frame in each frame displayed on the mobile terminal, executing: converting the screen coordinates of the touch position corresponding to the frame into the first UI coordinates of the touch position corresponding to the frame under the UI layout in the UE engine; determining the first target coordinates of the first control under the UI layout according to the position of the anchor point of the first control on the first control and the first UI coordinates; and setting the position coordinates of the first control in the frame displayed on the mobile terminal according to the first target coordinates.

[0005] In the above scheme, when a drag operation acting on the first control is detected, the screen coordinates of the touch positions corresponding to each frame displayed on the mobile terminal are obtained during the life cycle of the drag operation, and the screen coordinates corresponding to each frame are converted into UI coordinates under the UI layout, thereby unifying the touch position and the position of the draggable first control in the same UI coordinate system, and then according to the first UI coordinates of the touch position of each frame and the position of the anchor point of the first control on the first control, the actual position of the first control in each frame displayed on the mobile terminal during the life cycle of the drag can be determined. Then, when the user drags the first control on the screen of the mobile terminal, during the life cycle of the drag operation, as the touch position changes, the actual position of the first control also changes accordingly, thereby realizing the effect of dragging the first control on the mobile terminal based on the UE engine, thereby improving the user's interactive experience.

[0006] In a possible implementation, the first target coordinates of the first control in the UI layout are determined according to the position of the anchor point of the first control on the first control and the first UI coordinates, including: setting the position coordinates of the anchor point of the first control in the UI layout to the first UI coordinates, and using the position coordinates of the anchor point of the first control in the UI layout as the first target coordinates of the first control in the UI layout. In this way, by directly setting the first UI coordinates of the touch position corresponding to each frame in the UI layout to the anchor point of the first control in real time, the effect of the user's finger dragging the movement of the first control on the mobile terminal can be achieved.

[0007] In a possible implementation, the first target coordinates of the first control under the UI layout are determined according to the position of the anchor point of the first control on the first control and the first UI coordinates, including: setting the coordinates of the center position of the first control as the first UI coordinates; determining the position coordinates of the anchor point of the first control under the UI layout according to the position of the anchor point of the first control on the first control and the coordinates of the center position of the first control, and using the position coordinates of the anchor point of the first control under the UI layout as the first target coordinates of the first control under the UI layout. In this way, by directly setting the first UI coordinates of the touch position corresponding to each frame under the UI layout to the center position of the first control in real time, it can be achieved that when dragging the first control, the center position of the first control is moved, thereby avoiding the situation of first space teleportation or jump when the dragging of the first control ends.

[0008] In a possible implementation, determining the position coordinates of the anchor point of the first control in the UI layout according to the position of the anchor point of the first control on the first control and the coordinates of the center position of the first control includes:

[0009] If the anchor point of the first control is at the upper left corner of the first control, the x value of the first target coordinates of the first control in the UI layout is the difference between the x value of the first target coordinates and half the width of the first control, and the y value of the first target coordinates is the difference between the y value of the first target coordinates and half the height of the first control; or,

[0010] If the anchor point of the first control is in the middle of the upper edge of the first control, the x value of the first target coordinates of the first control in the UI layout is the x value of the first target coordinates, and the y value of the first target coordinates is the difference between the y value of the first target coordinates and half the height of the first control; or,

[0011] If the anchor point of the first control is at the upper right corner of the first control, the x value of the first target coordinates of the first control in the UI layout is the sum of the x value of the first target coordinates and half of the width of the first control, and the y value of the first target coordinates is the difference between the y value of the first target coordinates and half of the height of the first control; or,

[0012] If the anchor point of the first control is in the middle of the left edge of the first control, the x value of the first target coordinates of the first control in the UI layout is the difference between the x value of the first target coordinates and half the width of the first control, and the y value of the first target coordinates is the y value of the first target coordinates; or,

[0013] If the anchor point of the first control is at the exact center of the first control, the x value of the first target coordinates of the first control in the UI layout is the x value of the first target coordinates, and the y value of the first target coordinates is the y value of the first target coordinates; or,

[0014] If the anchor point of the first control is in the middle of the right edge of the first control, the x value of the first target coordinates of the first control in the UI layout is the sum of the x value of the first target coordinates and half the width of the first control, and the y value of the first target coordinates is the y value of the first target coordinates; or,

[0015] If the anchor point of the first control is at the lower left corner of the first control, the x value of the first target coordinates of the first control in the UI layout is the difference between the x value of the first target coordinates and half the width of the first control, and the y value of the first target coordinates is the sum of the y value of the first target coordinates and half the height of the first control; or,

[0016] If the anchor point of the first control is in the middle of the lower edge of the first control, the x value of the first target coordinates of the first control in the UI layout is the x value of the first target coordinates, and the y value of the first target coordinates is the sum of the y value of the first target coordinates and half the height of the first control; or,

[0017] If the anchor point of the first control is in the lower right corner of the first control, the x value of the first target coordinates of the first control in the UI layout is the sum of the x value of the first target coordinates and half the width of the first control, and the y value of the first target coordinates is the sum of the y value of the first target coordinates and half the height of the first control.

[0018] In a possible implementation, before determining the first target coordinates of the first control in the UI layout according to the position of the anchor point of the first control on the first control and the first UI coordinates, it also includes: determining the moving boundary range of the first control in the UI layout; determining the first target coordinates of the first control in the UI layout according to the position of the anchor point of the first control on the first control and the first UI coordinates, including: determining the first target coordinates of the first control in the UI layout according to the position of the anchor point of the first control on the first control, the moving boundary range of the first control in the UI layout, and the first UI coordinates. In this way, when the first control is dragged on the mobile terminal, the first control always moves within the moving boundary range, which can ensure that the first control can maintain visibility and operability on different mobile devices.

[0019] In a possible implementation, determining the first target coordinates of the first control in the UI layout according to the position of the anchor point of the first control on the first control, the moving boundary range of the first control in the UI layout, and the first UI coordinates includes:

[0020] If the x value and the y value of the first UI coordinate are both within the moving boundary, then the first target coordinate of the first control in the UI layout is determined according to the position of the anchor point of the first control on the first control and the first UI coordinate; or,

[0021] If the x value of the first UI coordinate is outside the moving boundary range and the y value of the first UI coordinate is within the moving boundary range, the x value of the first target coordinate of the first control in the UI layout is determined according to the boundary x value in the moving boundary range that is closest to the x value of the first UI coordinate, and the y value of the first target coordinate of the first control in the UI layout is determined according to the position of the anchor point of the first control on the first control and the y value of the first UI coordinate;

[0022] If the y value of the first UI coordinate is outside the moving boundary range and the x value of the first UI coordinate is within the moving boundary range, the x value of the first target coordinate of the first control in the UI layout is determined according to the position of the anchor point of the first control on the first control and the x value of the first UI coordinate, and the y value of the first target coordinate of the first control in the UI layout is determined according to the boundary y value closest to the y value of the first UI coordinate in the moving boundary range;

[0023] If the x value and y value of the first UI coordinate are both outside the moving boundary range, the x value of the first target coordinate of the first control in the UI layout is determined according to the boundary x value closest to the x value of the first UI coordinate in the moving boundary range, and the x value of the first target coordinate of the first control in the UI layout is determined according to the boundary y value closest to the y value of the first UI coordinate in the moving boundary range.

[0024] In a possible implementation, the screen coordinates of the touch position corresponding to the frame are converted into the first UI coordinates of the touch position corresponding to the frame under the UI layout in the UE engine, including: according to the conversion relationship between the screen coordinate system of the mobile terminal and the viewport coordinate system, the screen coordinates of the touch position corresponding to the frame are converted into viewport coordinates; according to the conversion relationship between the viewport coordinate system and the UI coordinate system corresponding to the UI layout in the UE engine, the viewport coordinates of the touch position corresponding to the frame are converted into the first UI coordinates.

[0025] In a second aspect, an embodiment of the present invention further provides a UI dragging device on a mobile terminal, comprising:

[0026] an acquisition unit, configured to acquire, when a drag operation acting on a first control displayed on a mobile terminal is detected, screen coordinates of touch positions corresponding to respective frames displayed on the mobile terminal within a life cycle of the drag operation; wherein the first control is a draggable control, and the life cycle is a process from the beginning of the drag operation contacting the screen of the mobile terminal to the leaving the screen of the mobile terminal;

[0027] The processing unit is configured to execute, for each screen coordinate of the touch position corresponding to each frame displayed on the mobile terminal:

[0028] Convert the screen coordinates of the touch position corresponding to the frame to the first UI coordinates of the touch position corresponding to the frame under the UI layout in the UE engine;

[0029] Determine a first target coordinate of the first control in the UI layout according to the position of the anchor point of the first control on the first control and the first UI coordinate;

[0030] According to the first target coordinates, the position coordinates of the first control in the frame displayed on the mobile terminal are set.

[0031] In a third aspect, an embodiment of the present invention provides a computing device, including:

[0032] A memory for storing program instructions;

[0033] The processor is used to call the program instructions stored in the memory and execute the UI drag method on the mobile terminal according to the obtained program.

[0034] In a fourth aspect, an embodiment of the present invention provides a computer-readable storage medium, wherein the computer-readable storage medium stores computer-executable instructions, and the computer-executable instructions are used to enable a computer to execute a UI dragging method on a mobile terminal. BRIEF DESCRIPTION OF THE DRAWINGS

[0035] In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0036] Figure 1 A flowchart of a UI dragging method on a mobile terminal provided by an embodiment of the present invention;

[0037] Figure 2 A schematic diagram of the anchor point position of the first control provided in an embodiment of the present invention;

[0038] Figures 3 to 11 They are schematic diagrams of different positions of an anchor point of a first control on the first control provided by embodiments of the present invention;

[0039] Fig.12 A schematic diagram of an embodiment of the present invention providing a first control in which an anchor point is set at a central position of the first control;

[0040] Fig.13 A schematic diagram of an interface of a game scene provided by an embodiment of the present invention;

[0041] Fig.14 A schematic diagram of the UI layout of the UE engine provided in an embodiment of the present invention;

[0042] Figures 15 to 23 They are schematic diagrams of moving boundary schematic diagrams of the first control provided in embodiments of the present invention;

[0043] Fig.24 A structural schematic diagram of a UI dragging device on a mobile terminal provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0044] In order to make the purpose, technical scheme and advantages of the present invention clearer, the present invention will be further described in detail below in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, rather than all the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0045] First, the terms used in the present invention are explained.

[0046] (1) UE engine, namely Unreal Engine, is a game engine developed by EPic Games. It supports multiple platforms, including PC, console, mobile device, virtual reality and augmented reality, etc. It has a powerful graphics rendering and blueprint system, which can create realistic game screens and quickly create game logic and interactive behaviors. UE engine is an open source game engine with huge community support. Developers can freely modify and customize the engine to meet their own needs. It is one of the preferred tools for game developers. The current latest version is 5.4.3.

[0047] (2) Blueprint system is a scripting system in Unreal Engine that allows developers to create game logic, interactions, and behaviors using a graphical interface instead of traditional programming languages ​​(such as C++). The Blueprint system is based on the concept of nodes and connections. Developers can create complex logic and functions by dragging and dropping nodes and connecting them. The Blueprint system makes program development more intuitive and visual. Even people without programming experience can create game logic through the Blueprint system. Developers can create variables, functions, events, conditional judgments, loops, etc. in blueprints to implement various functions such as character movement, weapon shooting, UI interaction, etc. The Blueprint system supports inheritance. Developers can create custom blueprint classes and add specific functions to them, and then use these custom blueprint classes in the game. Blueprints can also be mixed with C++ code. Developers can write part of the code in C++ when performance optimization or complex logic is required, and then call these C++ functions through blueprints. The Blueprint system is a powerful visual scripting system in Unreal Engine that provides developers with an intuitive way to create game logic and functions.

[0048] (3) UMG, or Unreal Motion Graphics, is a user interface design tool in Unreal Engine that is used to create user interfaces and interactive elements in games. With UMG, developers can use blueprints or C++ code to create and design various UI elements in games, such as buttons, text, images, progress bars, etc. UMG provides a visual editor that enables developers to intuitively design and layout UI elements and add interactive logic. Developers can quickly create complex user interfaces by dragging, dropping and adjusting UI components, and add interactive functions and animation effects using blueprints or C++ code. UMG supports multi-platform development, and developers can maintain consistent UI design on different platforms and adjust it as needed. In addition, UMG also provides a wealth of style and theme settings, allowing developers to customize the appearance and style of UI elements. In general, UMG is a powerful user interface design tool in Unreal Engine, providing developers with a convenient way to create, design and implement game UIs.

[0049] (4) User Interface (UI) is the interface through which users interact with software, applications or devices. User interface design aims to enable users to intuitively operate and use software or devices, and to provide a friendly and easy-to-understand interface so that users can easily complete tasks or obtain information. User interface design includes aspects such as visual design, interaction design and user experience design, aiming to create a simple, intuitive and easy-to-use interface to improve user satisfaction and efficiency. Good user interface design can help users quickly get started and enjoy the use process, while reducing users' learning costs and operational difficulties.

[0050] (5) Screen coordinate system. In UE5 (UE5 in this article refers to a UE engine, which will not be described in detail later), the screen coordinate system is a two-dimensional coordinate system used to represent the position and size on the screen. Some terms related to the screen coordinate system are introduced as follows:

[0051] Origin position: In UE5, the origin of the screen coordinate system is located in the upper left corner of the screen, with a coordinate value of (0,0). The x-axis extends to the right and the y-axis extends downward, so the positive direction of the x-axis is to the right and the positive direction of the y-axis is downward.

[0052] Coordinate unit: In the screen coordinate system, pixels are usually used as units. Each pixel represents a point on the screen and is used to determine the position and size.

[0053] Screen size: The size of the screen coordinate system is usually related to the screen resolution. For example, 1920x1080 means the screen width is 1920 pixels and the height is 1080 pixels. The size of the screen coordinate system is proportional to the screen resolution.

[0054] ·Coordinate conversion: In UE5, screen coordinates can be converted to world coordinates or relative coordinates through functions or methods. This can realize the conversion between the position on the screen and the position in the game world, which is convenient for processing game logic.

[0055] Screen space: The screen coordinate system is also called screen space, which is used to represent the position and size on the screen. The screen coordinate system is very important in processing UI, touch events, etc.

[0056] (6) Viewport coordinate system: In UE5, the viewport coordinate system is a coordinate system used for 2D rendering and UI layout. It is mainly used to process pixel-level positions on the screen or window. Some terms related to the viewport coordinate system are as follows:

[0057] Normalized: Viewport coordinates are normalized, which means that their values ​​are between 0 and 1. Where (0,0) represents the top left corner of the viewport and (1,1) represents the bottom right corner of the viewport.

[0058] Viewport size changes: When the viewport size changes (for example, the window is resized or the device orientation changes), the viewport coordinate system is adjusted accordingly, keeping the origin position unchanged, but the coordinate values ​​are scaled proportionally to fit the new viewport size.

[0059] (7) UI coordinate system: In UE5, the UI coordinate system is a coordinate system used to represent the position and size of user interface (UI) elements. Unlike the three-dimensional coordinate system in the game world, the UI coordinate system is a two-dimensional coordinate system used to position and layout UI elements such as buttons, text boxes, images, etc. Some terms related to the UI coordinate system are as follows:

[0060] Origin position: The origin of the UI coordinate system is usually located in the upper left corner of the screen, which is consistent with the screen coordinate system. The origin coordinates are (0,0), the x-axis extends to the right, and the y-axis extends downward.

[0061] Coordinate unit: The unit of the UI coordinate system is usually pixels, which are used to determine the position and size of UI elements. Each pixel represents a point on the screen.

[0062] Parent-child relationship: UI elements can be nested inside other UI elements to form a parent-child relationship. The position and size of child elements are usually determined relative to the coordinate system of the parent element.

[0063] Anchor and alignment: In UE5, UI elements can determine their position on the screen by setting anchors and alignments. Anchors can specify the position of UI elements relative to the parent element or the screen, and alignments can control the alignment of UI elements within the parent element.

[0064] Resolution independence: UE5 supports resolution-independent UI design, which means that the position and size of UI elements can be adapted according to the screen resolution to ensure consistent display effects on different devices.

[0065] Coordinate conversion: When processing UI elements, you can use functions or methods to convert UI coordinates to screen coordinates or world coordinates so that they can interact with game world coordinates.

[0066] (8) max function: a mathematical maximum value function, max(a,b); when a>b, it returns a, otherwise it returns b.

[0067] (9)min function: mathematical calculation minimum function, min(a,b); when a>b, it returns b, otherwise it returns a.

[0068] The following is a detailed introduction to the UI dragging method on the mobile terminal provided by an embodiment of the present invention.

[0069] Figure 1 The process of a UI dragging method on a mobile terminal provided by an embodiment of the present invention is exemplarily shown. Figure 1 As shown, the process of the UI dragging method on the mobile terminal specifically includes the following steps:

[0070] Step 101, when a drag operation is detected on a first control displayed on a mobile terminal, the screen coordinates of the touch positions corresponding to each frame displayed on the mobile terminal are obtained within the life cycle of the drag operation, wherein the first control is a draggable control.

[0071] In step 101, the life cycle is a process from the beginning of the drag operation contacting the screen of the mobile terminal to the leaving of the screen of the mobile terminal.

[0072] Taking the display screen on the mobile terminal as a capacitive touch screen, referred to as a capacitive screen, as an example, during the life cycle of the drag operation, the capacitive screen on the mobile terminal will generate a capacitive signal, and the capacitive signal will continue to change. The display screen will collect capacitive signals at a fixed frequency, such as collecting capacitive signals once every about 10ms, corresponding to a frame of capacitive signals. For example, a frame of capacitive signals can be in the form of a matrix, each element in the matrix corresponds to a capacitive grid at a corresponding position on the capacitive screen, and the data of the element represents the capacitance value in the area of ​​the capacitive grid (i.e., the strength of the capacitive signal), the capacitance value of the area on the full screen that is not in contact with the finger is 0, and the capacitance value of the area on the screen that is in contact with the finger is not 0, therefore, the area on the screen that is in contact with the finger can be determined according to the capacitive signal, and then the screen coordinates of the touch position can be determined in the area on the screen that is in contact with the finger. For example, the user's finger performs a drag operation on the display screen, and the drag operation collects a total of N frames of capacitive signals during the entire life cycle on the display screen, then the screen coordinates of the touch position corresponding to each frame in the N frames. It should be understood that the display screen of the mobile terminal can also be other types of screens, and the corresponding method of obtaining the screen coordinates of the touch position may also be different from this example, which is not limited here.

[0073] Step 102, for the screen coordinates of the touch position corresponding to each frame in each frame displayed on the mobile terminal, execute the following steps 102-1 to 102-3 respectively:

[0074] Step 102-1: Convert the screen coordinates of the touch position corresponding to the frame into the first UI coordinates of the touch position corresponding to the frame under the UI layout in the UE engine.

[0075] In a possible implementation, the screen coordinates of the touch position corresponding to the frame are converted into viewport coordinates based on the conversion relationship between the screen coordinate system of the mobile terminal and the viewport coordinate system; and the viewport coordinates of the touch position corresponding to the frame are converted into the first UI coordinates based on the conversion relationship between the viewport coordinate system and the UI coordinate system corresponding to the UI layout in the UE engine.

[0076] The actual pixel resolution of the mobile terminal is: the screen width is S width , screen height is S height , the width of the size corresponding to the UI layout is UI width , the height of the size corresponding to the UI layout is UI height , the size of the first control is: width is DUI width , height is DUI height For example, use the UE5 engine to obtain the screen coordinates Pos of the real-time finger touch position screen , whose x coordinate is marked as Pos screen The x, y coordinates are marked as Pos screen Y.

[0077] First, the screen coordinates of the finger's touch position Pos screen Convert to viewport coordinates Pos view , the x value of the viewport coordinate can be determined by the following formula (1), denoted as Pos view X, the y value of the viewport coordinate is determined by the following formula (2), denoted as Pos view X:

[0078]

[0079] Secondly, the viewport coordinates Pos view Convert to UI coordinates Pos ui , the x value of the UI coordinate can be determined by the following formula (3), denoted as Pos ui X, determine the y value of the UI coordinate using the following formula (4), denoted as Pos ui Y:

[0080] Pos ui X = Pos view X * UI width Formula (3)

[0081] Pos ui Y = Pos view Y * UI height Formula (4)

[0082] Substituting the above formula (1) into the above formula (3) yields the following formula (5):

[0083]

[0084] Substituting the above formula (3) into the above formula (4) yields the following formula (6):

[0085]

[0086] Therefore, the x value Pos of the UI coordinate can be determined according to the above formula (3) or (5): ui X, the y value Pos of the UI coordinate can be determined according to the above formula (4) or (6) ui Y.

[0087] Step 102-2: Determine the first target coordinates of the first control in the UI layout according to the position of the anchor point of the first control on the first control and the first UI coordinates.

[0088] Among them, the first target coordinates of the first control in the UI layout, that is, the coordinates of the actual position of the first control in the UI layout of the current frame when the user's finger moves from the touch position of the previous frame to the touch position of the current frame. For the current frame, the actual position of the first control in the UI layout of the current frame can be determined by corresponding the first UI coordinates according to the touch position of the current frame and the position of the anchor point of the first control on the first control.

[0089] Step 102-3, according to the first target coordinates, setting the position coordinates of the first control in the frame displayed on the mobile terminal.

[0090] In an embodiment of the present application, the screen coordinates of the touch position of each frame are converted into UI coordinates under the UI layout, so that the touch position and the position of the draggable first control are unified in the same UI coordinate system, and then the actual position of the first control corresponding to each frame can be determined according to the first UI coordinates of the touch position of each frame and the position of the anchor point of the first control on the first control. When the user drags the first control on the screen of the mobile terminal, during the life cycle of the dragging operation, the actual position of the first control changes with the change of the touch position, thereby achieving the effect of the user's finger dragging the first control on the mobile terminal.

[0091] There are multiple possible implementations of the above step 102-2, which are introduced below respectively.

[0092] In implementation mode 1, the position coordinates of the anchor point of the first control in the UI layout are set as the first UI coordinates, and the position coordinates of the anchor point of the first control in the UI layout are used as the first target coordinates of the first control in the UI layout. The first UI coordinates of any frame are obtained by converting the screen coordinates of the touch position corresponding to the frame into UI coordinates. In implementation mode 1, the first UI coordinates are directly assigned to the position coordinates of the anchor point of the first control in the UI layout, and then the obtained position coordinates of the anchor point of the first control in the UI layout are used as the coordinates of the actual position of the first control in the UI layout, that is, the first target coordinates are obtained.

[0093] There are many ways to realize the position of the anchor point of the first control on the first control, for example Figure 2 In the schematic diagram of the anchor point position of the first control shown in FIG. 1 , 9 situations are shown. Figure 2 9 white rectangular boxes are shown, each representing a first control, and the smaller white rectangular block in each rectangular box represents the anchor point of the first control, and the position of the white rectangular block in the rectangular box represents the position of the anchor point of the first control in the first control. Figure 2In the three rectangular boxes in the first row shown: the white rectangular block in the first rectangular box is located at the upper left corner of the rectangular box, indicating that the anchor point of the first control is at the upper left corner (Top-Left Anchoring) of the first control; the white rectangular block in the second rectangular box is located in the middle of the upper edge of the rectangular box, indicating that the anchor point of the first control is at the middle of the upper edge of the first control; the white rectangular block in the third rectangular box is located at the upper right corner of the rectangular box, indicating that the anchor point of the first control is at the upper right corner of the first control; for example Figure 2 In the three rectangular boxes in the second row shown: the white rectangular block in the first rectangular box is located in the middle of the left edge of the rectangular box, indicating that the anchor point of the first control is located in the middle of the left edge of the first control; the white rectangular block in the second rectangular box is located in the center of the rectangular box, indicating that the anchor point of the first control is located in the center of the first control; the white rectangular block in the third rectangular box is located in the middle of the right edge of the rectangular box, indicating that the anchor point of the first control is located in the middle of the right edge of the first control; for example Figure 2 In the three rectangular boxes in the third row shown: the white rectangular block in the first rectangular box is located at the lower left corner of the rectangular box, indicating that the anchor point of the first control is at the lower left corner of the first control; the white rectangular block in the second rectangular box is located in the middle of the lower edge of the rectangular box, indicating that the anchor point of the first control is at the middle of the lower edge of the first control; the white rectangular block in the third rectangular box is located at the lower right corner of the rectangular box, indicating that the anchor point of the first control is at the lower right corner of the first control.

[0094] Based on different positions of the anchor point of the first control on the first control, there are multiple possible implementations of the first embodiment, which are described below respectively.

[0095] If the anchor point of the first control is at the top-left corner of the first control, such as Figure 3 As shown, the largest rectangular box represents the mobile phone screen, and the smallest rectangular box represents the first control. ui After that, set the position coordinates of the anchor point in the upper left corner of the first control in the UI layout to the first UI coordinate Pos ui , that is, Pos ui Assign to Figure 3 The anchor point in the upper left corner of the smallest rectangular box in the UI layout is the first target coordinate Pos dragui That is, the position coordinates of the anchor point of the first control in the UI layout, that is, Pos ui ,Right now

[0096]

[0097] If the anchor point of the first control is in the middle of the top edge of the first control (Top-Center Anchoring), such as Figure 4 As shown, the largest rectangular box represents the mobile phone screen, and the two smaller rectangular boxes represent the first control. ui After that, the position coordinates of the anchor point in the middle of the upper edge of the first control in the UI layout are set to the first UI coordinate Pos ui , that is, Pos ui Assign to Figure 4 The anchor point in the lower rectangular box of the two smaller rectangular boxes (position A), then the first target coordinate Pos of the first control in the UI layout dragui That is, the position coordinates of the anchor point of the first control in the UI layout, that is, Pos ui ,Right now Figure 4 The coordinates of position A in

[0098] If the anchor point of the first control is at the top-right corner of the first control, such as Figure 5 As shown, the largest rectangular box represents the mobile phone screen, and the two smaller rectangular boxes represent the first control. ui After that, set the position coordinates of the anchor point in the upper right corner of the first control in the UI layout to the first UI coordinate Pos ui , that is, Pos ui Assign to Figure 5 The anchor point in the lower left rectangle of the two smaller rectangles (position A), then the first target coordinate Pos of the first control in the UI layout is dragui That is, the position coordinates of the anchor point of the first control in the UI layout, that is, Pos ui ,Right now Figure 5 The coordinates of position A in

[0099] If the anchor point of the first control is in the middle of the left edge of the first control (Left-CenterAnchoring), such as Figure 6 As shown, the largest rectangular box represents the mobile phone screen, and the two smaller rectangular boxes represent the first control. ui After that, set the position coordinates of the anchor point in the middle of the left edge of the first control in the UI layout to the first UI coordinate Pos ui , that is, Pos ui Assign to Figure 6The anchor point in the right rectangle of the smaller of the two rectangles (position A), then the first target coordinate of the first control in the UI layout is Pos dragui That is, the position coordinates of the anchor point of the first control in the UI layout, that is, Pos ui ,Right now Figure 6 The coordinates of position A in

[0100] If the anchor point of the first control is at the center of the first control (Anchor to Center), such as Figure 7 As shown, the largest rectangular box represents the mobile phone screen, and the two smaller rectangular boxes represent the first control. ui After that, the position coordinates of the anchor point in the center of the first control in the UI layout are set to the first UI coordinate Pos ui , that is, Pos ui Assign to Figure 7 The anchor point in the smaller rectangular box (position A) in the middle, then the first target coordinate of the first control in the UI layout is Pos dragui That is, the position coordinates of the anchor point of the first control in the UI layout, that is, Pos ui ,Right now Figure 7 The coordinates of position A in

[0101]

[0102] If the anchor point of the first control is in the middle of the right edge of the first control (Right-Center Anchoring), such as Figure 8 As shown, the largest rectangular box represents the mobile phone screen, and the two smaller rectangular boxes represent the first control. ui After that, set the position coordinates of the anchor point in the middle of the right edge of the first control in the UI layout to the first UI coordinate Pos ui , that is, Pos ui Assign to Figure 8 The anchor point in the left rectangle of the smaller of the two rectangles (position A), then the first target coordinate of the first control in the UI layout is Pos dragui That is, the position coordinates of the anchor point of the first control in the UI layout, that is, Pos ui ,Right now Figure 8 The coordinates of position A in

[0103] If the anchor point of the first control is at the lower left corner (Left-Bottom Anchoring) of the first control, such as Fig. 9As shown, the largest rectangular box represents the mobile phone screen, and the two smaller rectangular boxes represent the first control. ui After that, set the position coordinates of the anchor point in the lower left corner of the first control in the UI layout to the first UI coordinate Pos ui , that is, Pos ui Assign to Fig. 9 The anchor point in the upper right rectangle of the smaller of the two rectangles (position A), then the first target coordinate of the first control in the UI layout is Pos dragui That is, the position coordinates of the anchor point of the first control in the UI layout, that is, Pos ui ,Right now Fig. 9 The coordinates of position A in

[0104] If the anchor point of the first control is at the bottom center of the first control (Bottom-Center Anchoring), such as Fig.10 As shown, the largest rectangular box represents the mobile phone screen, and the two smaller rectangular boxes represent the first control. ui After that, the position coordinates of the anchor point in the middle of the lower edge of the first control in the UI layout are set to the first UI coordinate Pos ui , that is, Pos ui Assign to Fig.10 The anchor point in the upper rectangular box of the two smaller rectangular boxes (position A), then the first target coordinate Pos of the first control in the UI layout dragui That is, the position coordinates of the anchor point of the first control in the UI layout, that is, Pos ui ,Right now Fig.10 The coordinates of position A in

[0105] If the anchor point of the first control is at the bottom-right corner of the first control, such as Fig.11 As shown, the largest rectangular box represents the mobile phone screen, and the two smaller rectangular boxes represent the first control. ui After that, set the position coordinates of the anchor point in the lower right corner of the first control in the UI layout to the first UI coordinate Pos ui , that is, Pos ui Assign to Fig.11 The anchor point in the upper left rectangle of the two smaller rectangles (position A), then the first target coordinate Pos of the first control in the UI layout is dragui That is, the position coordinates of the anchor point of the first control in the UI layout, that is, Posui ,Right now Fig.11 The coordinates of position A in

[0106] In the above-mentioned implementation mode 1, by directly setting the first UI coordinates of the touch position corresponding to each frame under the UI layout to the anchor point of the first control in real time, the effect of the user's finger dragging the movement of the first control on the mobile terminal can be achieved. Generally speaking, the interaction effect of the user's finger dragging the center position of the first control to move is the best, but with implementation mode 1, when the finger dragging operation ends, it is easy for the center position of the first control to move instantaneously to the position corresponding to the first UI coordinate set for the anchor point of the first control, so that the first control moves instantaneously or jumps slightly when the dragging operation ends. In order to further improve the user experience, the first UI coordinates of the touch position corresponding to each frame under the UI layout can be set to the center position of the first control, which is described in detail in the following implementation mode 2.

[0107] Implementation method two, setting the coordinates of the center position of the first control as the first UI coordinates; determining the position coordinates of the anchor point of the first control in the UI layout according to the position of the anchor point of the first control on the first control and the coordinates of the center position of the first control, and using the position coordinates of the anchor point of the first control in the UI layout as the first target coordinates of the first control in the UI layout.

[0108] Among them, there are multiple implementation methods for the position of the anchor point of the first control on the first control. Based on the different positions of the anchor point of the first control on the first control, the above-mentioned implementation method 2 has multiple possible implementation methods, which are explained below respectively.

[0109] Possible implementation method 2.1: If the anchor point of the first control is at the upper left corner of the first control, the coordinates of the center position of the first control are set to the first UI coordinates (denoted as Pos ui ),like Fig.12 As shown, the largest rectangular box represents the mobile phone screen, and the smaller rectangular box represents the first control. ui After that, Pos ui Assign to Fig.12 The center position of the smaller rectangular frame in the first control is set as the center position of the smaller rectangular frame in the first control. In this way, when the finger drags the first control, it moves at the center position of the first control, thereby avoiding the situation in the first embodiment where the first control moves instantly when the movement is completed. Then, according to the coordinates of the center position of the first control (i.e., the first UI coordinate Pos ui ) and the upper corner position of the anchor point of the first control on the first control, determine the position coordinates of the anchor point of the first control in the UI layout, and use the position coordinates of the anchor point of the first control in the UI layout as the first target coordinates of the first control in the UI layout.

[0110] Then the x value of the first target coordinate of the first control in the UI layout is the difference between the x value of the first target coordinate and half the width of the first control, and the y value of the first target coordinate is the difference between the y value of the first target coordinate and half the height of the first control.

[0111] Mark the first target coordinate of the first control in the UI layout as Pos dragui , Pos can be determined by the following formula (7) dragui The x value is denoted as Pos dragui X, determine Pos by the following formula (8) dragui The y value of dragui Y:

[0112]

[0113] Through the above implementation, when the finger is dragging the first control, the finger moves to the touch position Pos on the screen. screen , you can drag the anchor point in the upper left corner of the first control to Pos dragui Position, i.e. UI coordinates The corresponding position.

[0114] The implementation method 2.1 is described below with reference to a specific example.

[0115] The actual pixel resolution of the mobile terminal is: resolution: 2688*1216, the size of the UI layout designed by UMG is: 2532*1170, the size of the draggable UI is: 236*140, and the current finger drags the draggable UI to the screen coordinate position (600, 400), then the coordinates of the draggable UI are Pos dragui It can be calculated by the above formula (7) and formula (8), that is, Pos screen X is equal to 600, UI width Equal to 2532, S width Equal to 2688, DUI width Equal to 236 Substitute into the above formula (7) to get Pos dragui X=447.18; screen Y is equal to 400, UI height Equal to 1170, S height Equal to 1216, DUI height Substituting 140 into the above formula (8) yields Pos dragui Y=314.87.

[0116] Possible implementation 2.2: If the anchor point of the first control is in the middle of the upper edge of the first control, the coordinates of the center position of the first control are set to the first UI coordinates (denoted as Pos ui ), in this case, the first control is as follows Figure 4 The center position of the first control is as follows: Figure 4 At position A in the image, the anchor point of the first control is Figure 4 Position B in the ui Assign to Figure 4 In this way, when the finger drags the first control, it moves at the center of the first control, thereby avoiding the situation in which the first control moves instantly when the movement is completed in the first embodiment. Then, according to the coordinates of the center position of the first control (i.e., the first UI coordinate Pos ui ) and the anchor point of the first control is in the middle of the upper edge of the first control, determine the position coordinates of the anchor point of the first control in the UI layout, and use the position coordinates of the anchor point of the first control in the UI layout as the first target coordinates of the first control in the UI layout.

[0117] Then the x value of the first target coordinates of the first control in the UI layout is the x value of the first target coordinates, and the y value of the first target coordinates is the difference between the y value of the first target coordinates and half the height of the first control.

[0118] Mark the first target coordinate of the first control in the UI layout as Pos dragui , Pos can be determined by the following formula (9) dragui The x value is denoted as Pos dragui X, determine Pos by the following formula (10) dragui The y value of dragui Y:

[0119]

[0120] Through the above implementation, when the finger is dragging the first control, the finger moves to the touch position Pos on the screen. screen , you can drag the anchor point in the middle of the top edge of the first control to Pos dragui Position, i.e. UI coordinates The corresponding position.

[0121] The implementation method 2.2 is described below with reference to a specific example.

[0122] The actual pixel resolution of the mobile terminal is: resolution: 2688*1216, the size of the UI layout designed by UMG is: 2532*1170, the size of the draggable UI is: 236*140, and the current finger drags the draggable UI to the screen coordinate position (600, 400), then the coordinates of the draggable UI are Pos dragui It can be calculated by the above formula (9) and formula (10), that is, Pos screen X is equal to 600, UI width Equal to 2532, S width Equal to 2688, DUI width Substituting 236 into the above formula (9) yields Pos dragui X=565.18; change Pos screen Y is equal to 400, UI height Equal to 1170, S height Equal to 1216, DUI height Substituting 140 into the above formula (10), we get Pos dragui Y=314.87.

[0123] Possible implementation 2.3: If the anchor point of the first control is at the upper right corner of the first control, the coordinates of the center position of the first control are set to the first UI coordinates (denoted as Pos ui ), in this case, the first control is as follows Figure 5 The center position of the first control is as follows: Figure 5 At position A in the image, the anchor point of the first control is Figure 5 Position B in the ui Assign to Figure 5 In this way, when the finger drags the first control, it moves at the center of the first control, thereby avoiding the situation in which the first control moves instantly when the movement is completed in the first embodiment. Then, according to the coordinates of the center position of the first control (i.e., the first UI coordinate Pos ui ) and the upper right corner position of the anchor point of the first control on the first control, determine the position coordinates of the anchor point of the first control in the UI layout, and use the position coordinates of the anchor point of the first control in the UI layout as the first target coordinates of the first control in the UI layout.

[0124] Then the x value of the first target coordinate of the first control in the UI layout is the sum of the x value of the first target coordinate and half the width of the first control, and the y value of the first target coordinate is the difference between the y value of the first target coordinate and half the height of the first control.

[0125] Mark the first target coordinate of the first control in the UI layout as Posdragui , Pos can be determined by the following formula (11) dragui The x value is denoted as Pos dragui X, determine Pos by the following formula (12) dragui The y value of dragui Y:

[0126]

[0127] Through the above implementation, when the finger is dragging the first control, the finger moves to the touch position Pos on the screen. screen , you can drag the anchor point in the upper right corner of the first control to Pos dragui Position, i.e. UI coordinates The corresponding position.

[0128] The implementation method 2.3 is described below with reference to a specific example.

[0129] The actual pixel resolution of the mobile terminal is: resolution: 2688*1216, the size of the UI layout designed by UMG is: 2532*1170, the size of the draggable UI is: 236*140, and the current finger drags the draggable UI to the screen coordinate position (600, 400), then the coordinates of the draggable UI are Pos dragui It can be calculated by the above formula (11) and formula (12), that is, Pos screen X is equal to 600, UI width Equal to 2532, S width Equal to 2688, DUI width Substituting 236 into the above formula (11), we get Pos dragui X=683.18; change Pos screen Y is equal to 400, UI height Equal to 1170, S height Equal to 1216, DUI height Substituting 140 into the above formula (12), we get Pos dragui Y=314.87.

[0130] Possible implementation 2.4: If the anchor point of the first control is in the middle of the left edge of the first control, the coordinates of the center position of the first control are set to the first UI coordinates (denoted as Pos ui ), in this case, the first control is as follows Figure 6 The center position of the first control is as follows: Figure 6 At position A in the image, the anchor point of the first control is Figure 6 Position B in the uiAssign to Figure 6 In this way, when the finger drags the first control, it moves at the center of the first control, thereby avoiding the situation in which the first control moves instantly when the movement is completed in the first embodiment. Then, according to the coordinates of the center position of the first control (i.e., the first UI coordinate Pos ui ) and the anchor point of the first control is in the middle of the upper edge of the first control, determine the position coordinates of the anchor point of the first control in the UI layout, and use the position coordinates of the anchor point of the first control in the UI layout as the first target coordinates of the first control in the UI layout.

[0131] Then the x value of the first target coordinates of the first control in the UI layout is the difference between the x value of the first target coordinates and half the width of the first control, and the y value of the first target coordinates is the y value of the first target coordinates.

[0132] Mark the first target coordinate of the first control in the UI layout as Pos dragui , Pos can be determined by the following formula (13) dragui The x value is denoted as Pos dragui X, Pos is determined by the following formula (14) dragui The y value of dragui Y:

[0133]

[0134] Through the above implementation, when the finger is dragging the first control, the finger moves to the touch position Pos on the screen. screen , you can drag the anchor point in the middle of the left edge of the first control to Pos dragui Position, i.e. UI coordinates The corresponding position.

[0135] The implementation method 2.4 is described below with reference to a specific example.

[0136] The actual pixel resolution of the mobile terminal is: resolution: 2688*1216, the size of the UI layout designed by UMG is: 2532*1170, the size of the draggable UI is: 236*140, and the current finger drags the draggable UI to the screen coordinate position (600, 400), then the coordinates of the draggable UI are Pos dragui It can be calculated by the above formula (13) and formula (14), that is, Pos screen X is equal to 600, UI width Equal to 2532, S width Equal to 2688, DUI width Substituting 236 into the above formula (3), we get Posdragui X=447.18; screen Y is equal to 400, UI height Equal to 1170, S height Equal to 1216, DUI height Substituting 140 into the above formula (14), we get Pos dragui Y=384.87.

[0137] Possible implementation 2.5: If the anchor point of the first control is at the exact center of the first control, the coordinates of the center of the first control are set to the first UI coordinates (denoted as Pos ui ), in this case, the first control is as follows Figure 7 The smaller rectangular box in the middle, the center position of the first control is as follows Figure 7 The first control's anchor point is also Figure 7 Position A in the ui Assign to Figure 7 If the first control is located at position A in the UI layout, the position coordinates of the anchor point of the first control in the UI layout are also the first UI coordinates, so that when the finger drags the first control, it is moving at the center of the first control, thereby avoiding the situation in the first embodiment where the first control is moved instantly at the end of the movement. Then the position coordinates of the anchor point of the first control in the UI layout are used as the first target coordinates of the first control in the UI layout.

[0138] Then the x value of the first control in the first target coordinates under the UI layout is the x value of the first target coordinates, and the y value of the first target coordinates is the y value of the first target coordinates.

[0139] Mark the first target coordinate of the first control in the UI layout as Pos dragui , Pos can be determined by the following formula (15) dragui The x value is denoted as Pos dragui X, Pos is determined by the following formula (16) dragui The y value of dragui Y:

[0140]

[0141] Through the above implementation, when the finger is dragging the first control, the finger moves to the touch position Pos on the screen. screen When you drag the anchor point at the center of the first control to Pos dragui Position, i.e. UI coordinates The corresponding position.

[0142] The implementation method 2.5 is described below with reference to a specific example.

[0143] The actual pixel resolution of the mobile terminal is: resolution: 2688*1216, the size of the UI layout designed by UMG is: 2532*1170, the size of the draggable UI is: 236*140, and the current finger drags the draggable UI to the screen coordinate position (600, 400), then the coordinates of the draggable UI are Pos dragui It can be calculated by the above formula (15) and formula (16), that is, Pos screen X is equal to 600, UI width Equal to 2532, S width Equal to 2688, DUI width Substituting 236 into the above formula (15), we get Pos dragui X=565.18; change Pos screen Y is equal to 400, UI height Equal to 1170, S height Equal to 1216, DUI height Substituting 140 into the above formula (16), we get Pos dragui Y=384.87.

[0144] Possible implementation 2.6: If the anchor point of the first control is in the middle of the right edge of the first control, the coordinates of the center position of the first control are set to the first UI coordinates (denoted as Pos ui ), in this case, the first control is as follows Figure 8 The center position of the first control is as follows: Figure 8 At position A in the image, the anchor point of the first control is Figure 8 Position B in the ui Assign to Figure 8 In this way, when the finger drags the first control, it moves at the center of the first control, thereby avoiding the situation in which the first control moves instantly when the movement is completed in the first embodiment. Then, according to the coordinates of the center position of the first control (i.e., the first UI coordinate Pos ui ) and the anchor point of the first control in the middle of the right edge of the first control, determine the position coordinates of the anchor point of the first control in the UI layout, and use the position coordinates of the anchor point of the first control in the UI layout as the first target coordinates of the first control in the UI layout.

[0145] Then the x value of the first target coordinates of the first control in the UI layout is the sum of the x value of the first target coordinates and half the width of the first control, and the y value of the first target coordinates is the y value of the first target coordinates.

[0146] Mark the first target coordinate of the first control in the UI layout as Pos dragui , Pos can be determined by the following formula (7) dragui The x value is denoted as Pos dragui X, determine Pos by the following formula (18) dragui The y value of dragui Y:

[0147]

[0148] Through the above implementation, when the finger is dragging the first control, the finger moves to the touch position Pos on the screen. screen , you can drag the anchor point in the middle of the right edge of the first control to Pos dragui Position, i.e. UI coordinates The corresponding position.

[0149] The implementation method 2.6 is described below with reference to a specific example.

[0150] The actual pixel resolution of the mobile terminal is: resolution: 2688*1216, the size of the UI layout designed by UMG is: 2532*1170, the size of the draggable UI is: 236*140, and the current finger drags the draggable UI to the screen coordinate position (600, 400), then the coordinates of the draggable UI are Pos dragui It can be calculated by the above formula (17) and formula (18), that is, Pos screen X is equal to 600, UI width Equal to 2532, S width Equal to 2688, DUI width Substituting 236 into the above formula (17), we get Pos dragui X=683.18; change Pos screen Y is equal to 400, UI height Equal to 1170, S height Equal to 1216, DUI height Substituting 140 into the above formula (18), we get Pos dragui Y=384.87.

[0151] Possible implementation 2.7: If the anchor point of the first control is at the lower left corner of the first control, the coordinates of the center position of the first control are set to the first UI coordinates (denoted as Pos ui ), in this case, the first control is as follows Fig. 9 The center position of the first control is as follows: Fig. 9 At position A in the image, the anchor point of the first control is Fig. 9Position B in the ui Assign to Fig. 9 In this way, when the finger drags the first control, it moves at the center of the first control, thereby avoiding the situation in which the first control moves instantly when the movement is completed in the first embodiment. Then, according to the coordinates of the center position of the first control (i.e., the first UI coordinate Pos ui ) and the lower-left corner position of the anchor point of the first control on the first control, determine the position coordinates of the anchor point of the first control in the UI layout, and use the position coordinates of the anchor point of the first control in the UI layout as the first target coordinates of the first control in the UI layout.

[0152] Then the x value of the first target coordinate of the first control in the UI layout is the difference between the x value of the first target coordinate and half the width of the first control, and the y value of the first target coordinate is the sum of the y value of the first target coordinate and half the height of the first control.

[0153] Mark the first target coordinate of the first control in the UI layout as Pos dragui , Pos can be determined by the following formula (19) dragui The x value is denoted as Pos dragui X, determine Pos by the following formula (20) dragui The y value of dragui Y:

[0154]

[0155] Through the above implementation, when the finger is dragging the first control, the finger moves to the touch position Pos on the screen. screen When you drag the anchor point at the lower left corner of the first control to Pos dragui Position, i.e. UI coordinates The corresponding position.

[0156] The implementation method 2.7 is described below with reference to a specific example.

[0157] The actual pixel resolution of the mobile terminal is: resolution: 2688*1216, the size of the UI layout designed by UMG is: 2532*1170, the size of the draggable UI is: 236*140, and the current finger drags the draggable UI to the screen coordinate position (600, 400), then the coordinates of the draggable UI are Pos dragui It can be calculated by the above formula (19) and formula (20), that is, Pos screen X is equal to 600, UI width Equal to 2532, S width Equal to 2688, DUIwidth Substituting 236 into the above formula (19), we get Pos dragui X=447.18; screen Y is equal to 400, UI height Equal to 1170, S height Equal to 1216, DUI height Substituting 140 into the above formula (20), we get Pos dragui Y=454.87.

[0158] Possible implementation 2.8: If the anchor point of the first control is in the middle of the lower edge of the first control, the coordinates of the center position of the first control are set to the first UI coordinates (denoted as Pos ui ), in this case, the first control is as follows Fig.10 The center position of the first control is as follows: Fig.10 At position A in the image, the anchor point of the first control is Fig.10 Position B in the ui Assign to Fig.10 In this way, when the finger drags the first control, it moves at the center of the first control, thereby avoiding the situation in which the first control moves instantly when the movement is completed in the first embodiment. Then, according to the coordinates of the center position of the first control (i.e., the first UI coordinate Pos ui ) and the anchor point of the first control is in the middle of the lower edge of the first control, determine the position coordinates of the anchor point of the first control in the UI layout, and use the position coordinates of the anchor point of the first control in the UI layout as the first target coordinates of the first control in the UI layout.

[0159] Then the x value of the first target coordinates of the first control in the UI layout is the x value of the first target coordinates, and the y value of the first target coordinates is the sum of the y value of the first target coordinates and half the height of the first control.

[0160] Mark the first target coordinate of the first control in the UI layout as Pos dragui , Pos can be determined by the following formula (21) dragui The x value is denoted as Pos dragui X, determine Pos by the following formula (22) dragui The y value of dragui Y:

[0161]

[0162] Through the above implementation, when the finger is dragging the first control, the finger moves to the touch position Pos on the screen. screen, you can drag the anchor point in the middle of the bottom edge of the first control to Pos dragui Position, i.e. UI coordinates The corresponding position.

[0163] The implementation method 2.8 is described below with reference to a specific example.

[0164] The actual pixel resolution of the mobile terminal is: resolution: 2688*1216, the size of the UI layout designed by UMG is: 2532*1170, the size of the draggable UI is: 236*140, and the current finger drags the draggable UI to the screen coordinate position (600, 400), then the coordinates of the draggable UI are Pos dragui It can be calculated by the above formula (21) and formula (22), that is, Pos screen X is equal to 600, UI width Equal to 2532, S width Equal to 2688, DUI width Substituting 236 into the above formula (21), we get Pos dragui X=565.18; change Pos screen Y is equal to 400, UI height Equal to 1170, S height Equal to 1216, DUI height Substituting 140 into the above formula (21), we get Pos dragui Y=454.87.

[0165] Possible implementation 2.9: If the anchor point of the first control is at the lower right corner of the first control, the coordinates of the center position of the first control are set to the first UI coordinates (denoted as Pos ui ), in this case, the first control is as follows Fig.11 The center position of the first control is as follows: Fig.11 At position A in the image, the anchor point of the first control is Fig.11 Position B in the ui Assign to Fig.11 In this way, when the finger drags the first control, it moves at the center of the first control, thereby avoiding the situation in which the first control moves instantly when the movement is completed in the first embodiment. Then, according to the coordinates of the center position of the first control (i.e., the first UI coordinate Pos ui ) and the lower right corner position of the anchor point of the first control on the first control, determine the position coordinates of the anchor point of the first control in the UI layout, and use the position coordinates of the anchor point of the first control in the UI layout as the first target coordinates of the first control in the UI layout.

[0166] Then the x value of the first target coordinate of the first control in the UI layout is the sum of the x value of the first target coordinate and half of the width of the first control, and the y value of the first target coordinate is the sum of the y value of the first target coordinate and half of the height of the first control.

[0167] Mark the first target coordinate of the first control in the UI layout as Pos dragui , Pos can be determined by the following formula (23) dragui The x value is denoted as Pos dragui X, determine Pos by the following formula (24) dragui The y value of dragui Y:

[0168]

[0169] Through the above implementation, when the finger is dragging the first control, the finger moves to the touch position POS on the screen. screen When you drag the anchor point at the lower right corner of the first control to Pos dragui Position, i.e. UI coordinates The corresponding position.

[0170] The implementation method 2.9 is described below with reference to a specific example.

[0171] The actual pixel resolution of the mobile terminal is: resolution: 2688*1216, the size of the UI layout designed by UMG is: 2532*1170, the size of the draggable UI is: 236*140, and the current finger drags the draggable UI to the screen coordinate position (600, 400), then the coordinates of the draggable UI are Pos dragui It can be calculated by the above formula (23) and formula (24), that is, Pos screen X is equal to 600, UI width Equal to 2532, S width Equal to 2688, DUI width Substituting 236 into the above formula (23), we get Pos dragui X=683.18; change Pos screen Y is equal to 400, UI height Equal to 1170, S height Equal to 1216, DUI height Substituting 140 into the above formula (24), we get Pos dragui Y=454.87.

[0172] Through the above-mentioned second implementation mode, no matter where the anchor point of the first control is located in the first control, the first control can be continuously moved as the screen position corresponding to the dragging operation changes. In an actual game scenario, the anchor point of the first control generally adopts any one of the above-mentioned 9 positions. When the anchor point position is determined to be one, a corresponding implementation method can be used to determine the change of the screen coordinates of the touch position, corresponding to the change of the position coordinates of the first control in the UI layout when dragging, thereby achieving the effect of the first control moving in real time with the finger.

[0173] In actual application scenarios, due to the different screen sizes, front camera areas, notch screen areas, and curvature of screen edges of different mobile terminals, if the UI layout in the UE engine is fully spread over the entire screen, poor operation effects may occur when dragging the first control. For example, when the first control is moved to the notch screen area, the screen edge area, the front camera area, etc., it cannot be moved or freezes. To this end, the mobile boundary can be set to ensure that the first control can maintain visibility and operability (drag) on ​​different mobile devices, for example Fig.13 In the interface diagram of the game scene shown, when the user drags the first control with his finger, the moving range of the first control is limited within the moving boundary, and the specific implementation is introduced in the following implementation mode three.

[0174] Implementation method three, before the above step 102-2, the moving boundary range of the first control in the UI layout can also be determined. For example, the left boundary of the moving boundary range is the minimum X value of the moving boundary in the UI coordinate system, the right boundary is the maximum X value of the moving boundary in the UI coordinate system, the upper boundary is the minimum Y value of the moving boundary in the UI coordinate system, and the lower boundary is the maximum Y value of the moving boundary in the UI coordinate system. The above step 102-2, i.e., determining the first target coordinates of the first control in the UI layout according to the position of the anchor point of the first control on the first control and the first UI coordinates, can be implemented in the following way: determining the first target coordinates of the first control in the UI layout according to the position of the anchor point of the first control on the first control, the moving boundary range of the first control in the UI layout, and the first UI coordinates. Specifically, there can be a variety of possible implementation methods.

[0175] Possible implementation 3.1: If the x value and the y value of the first UI coordinate are both within the moving boundary, the first target coordinate of the first control in the UI layout is determined according to the position of the anchor point of the first control on the first control and the first UI coordinate.

[0176] Possible implementation 3.2, if the x value of the first UI coordinate is outside the moving boundary range and the y value of the first UI coordinate is within the moving boundary range, then the x value of the first target coordinate of the first control in the UI layout is determined according to the boundary x value in the moving boundary range that is closest to the x value of the first UI coordinate, and the y value of the first target coordinate of the first control in the UI layout is determined according to the position of the anchor point of the first control on the first control and the y value of the first UI coordinate.

[0177] Possible implementation 3.3: If the y value of the first UI coordinate is outside the moving boundary range and the x value of the first UI coordinate is within the moving boundary range, then the x value of the first target coordinate of the first control in the UI layout is determined according to the position of the anchor point of the first control on the first control and the x value of the first UI coordinate, and the y value of the first target coordinate of the first control in the UI layout is determined according to the boundary y value closest to the y value of the first UI coordinate in the moving boundary range.

[0178] Possible implementation 3.4, if the x value and y value of the first UI coordinate are both outside the moving boundary range, then the x value of the first target coordinate of the first control in the UI layout is determined according to the boundary x value closest to the x value of the first UI coordinate in the moving boundary range, and the x value of the first target coordinate of the first control in the UI layout is determined according to the boundary y value closest to the y value of the first UI coordinate in the moving boundary range.

[0179] In the UI layout of the UE engine, the distance between the left border of the moving border and the left edge of the UI layout, and the distance between the right border of the moving border and the right edge of the UI layout can be set to be the same, for example, denoted as EC width ; Set the distance between the upper boundary of the moving boundary and the upper edge of the UI layout, and the distance between the lower boundary of the moving boundary and the lower edge of the UI layout to be the same, for example, denoted as EC height In the embodiment of the present application, the distances between the left and right borders and their nearest screen edges are set to be the same as an example for explanation. In other embodiments, the distance between the left border and the left edge of the screen and the distance between the right border and the right edge of the screen may be set to be different. The MEC is determined accordingly. width , x value Pos in the first target coordinates dragui X and other related formulas should be changed accordingly, which will not be repeated here. Similarly, the distances between the upper and lower boundaries and their nearest screen edges are set to be the same for illustration. In other embodiments, the distance between the upper boundary and the upper edge of the screen and the distance between the lower boundary and the lower edge of the screen can also be set to be different, and the MEC is determined accordingly. height , the y value Pos in the first target coordinate draguiThe formulas related to Y should be changed accordingly and will not be elaborated here.

[0180] like Fig.14 The UI layout schematic diagram of the UE engine is shown, wherein the dragging area framed by the dotted box is the moving boundary of the first control, the distance between its left boundary and the left edge of the UI layout is 132 pixels, the distance between its right boundary and the right edge of the UI layout is 132 pixels, the distance between its upper boundary and the upper edge of the UI layout is 36 pixels, and the distance between its lower boundary and the lower edge of the UI layout is 36 pixels, wherein the specific values ​​of the distances between each boundary and each edge of the UI layout can be set according to requirements, and this application does not impose any restrictions on this.

[0181] First, it is necessary to calculate the moving boundary of the UI layout of the UE engine on the actual mobile terminal, where the distance between the left boundary of the moving boundary on the mobile terminal and the left edge of the mobile terminal screen, and the distance between the right boundary of the moving boundary and the right edge of the mobile terminal screen are both recorded as MEC width , can be calculated by the following formula (25):

[0182]

[0183] The distance between the upper boundary of the mobile boundary on the mobile terminal and the upper edge of the mobile terminal screen, and the distance between the lower boundary of the mobile boundary and the lower edge of the mobile terminal screen are both recorded as MEC height ,

[0184]

[0185] For example, the size of the UI layout designed by UMG in landscape mode is 2532*1170, and the moving boundary of the first control is as follows: Fig.14 As shown in width 132,EC height is 36, then the actual boundary range calculation process on the mobile terminal with a resolution of 2688*1216 is: width 2532, S width 2688, EC width Substituting 132 into the above formula (25), we get MEC width Equal to 124.34; UI height 1170, S height 1216, EC height Substituting 36 into the above formula (25), we get MEC height Equal to 34.64.

[0186] Based on different positions of the anchor point of the first control on the first control, specific methods for determining the first target coordinates of the first control in the UI layout while considering the moving boundary of the first control on the mobile terminal are introduced below.

[0187] In the first case, the anchor point of the first control is at the upper left corner of the first control.

[0188] like Fig.15 In the mobile boundary diagram shown, the outermost largest rectangular box represents the screen of the mobile terminal, the second larger rectangular box represents the draggable area, that is, the mobile boundary, the two smallest rectangular boxes represent the first control, that is, the draggable UI, and the triangle on the smallest rectangular box represents the anchor point of the first control.

[0189] The x value of the first control in the first target coordinates of the UI layout is recorded as Pos dragui The x, y coordinates are marked as Pos dragui Y.

[0190] The user drags the first control on the screen of the mobile terminal. Due to the limitation of the moving boundary, when the first control is dragged to the left to reach Fig.15 When the left boundary of the moving boundary where the smallest rectangular box on the left is located, if the user continues to drag the first control to the left, the position of the first control remains at the left boundary and does not exceed the left boundary. Therefore, the leftmost position that the anchor point of the first control can reach (for example Fig.15 Point A in the middle), which is the left boundary of the moving boundary, is at a distance of MEC from the left edge of the screen. width Similarly, when you drag the first control to the right and reach Fig.15 When the right boundary of the moving boundary where the smallest rectangular box on the right is located is reached, if the first control is continued to be dragged to the right, the position of the first control remains at the right boundary and does not exceed the right boundary. Therefore, the rightmost position that the anchor point of the first control can reach (for example Fig.15 The distance between point B in the middle and the right edge of the screen is MEC width +DUI width , Fig.15 The upper left corner of the screen is the coordinate origin, the positive direction of the X axis is along the right edge of the screen, and the positive direction of the Y axis is along the downward direction of the left edge of the screen, so Pos dragui X satisfies the following formula (27):

[0191] MEC width ≤ Pos dragui X ≤ UI width -MEC width -DUI width Formula (27)

[0192] Based on formula (27) and the above embodiments 3.1 to 3.4, Pos dragui X can be calculated by the following formula (28):

[0193]

[0194] When the user drags the first control on the screen of the mobile terminal, the X value Pos in the screen coordinates based on different touch positions screen X, the X value Pos of the actual position of the first control corresponding to the touch position can be determined by formula (28) dragui X.

[0195] Similarly, due to the limitation of the moving boundary, when you drag the first control upward to Fig.15 When the smallest rectangle in the upper middle part reaches the upper boundary of the moving boundary, if the user continues to drag the first control upward, the position of the first control remains at the upper boundary and does not exceed the upper boundary. Therefore, the uppermost position that the anchor point of the first control can reach (for example Fig.15 Point A in the middle), which is the upper boundary of the moving boundary, is at a distance of MEC from the upper edge of the screen. height When you drag the first control downward to Fig.15 When the smallest rectangle in the lower middle part reaches the lower boundary of the moving boundary, if you continue to drag the first control downward, the position of the first control remains unchanged at the lower boundary and does not exceed the lower boundary. Therefore, the lowest position that the anchor point of the first control can reach (for example Fig.15 The distance between point B in the middle and the bottom edge of the screen is MEC height +DUI height , Fig.15 The upper left corner of the screen is the coordinate origin, the positive direction of the X axis is along the right edge of the screen, and the positive direction of the Y axis is along the downward direction of the left edge of the screen, so Pos dragui Y satisfies the following formula (29):

[0196] MEC height ≤ Pos dragui Y ≤ UI height - *MEC height -DUI height Formula (29)

[0197] Based on formula (29) and the above embodiments 3.1 to 3.4, Pos dragui Y can be calculated by the following formula (30):

[0198]

[0199] When the user drags the first control on the screen of the mobile terminal, the Y value Pos in the screen coordinates of different touch positions is screen Y, the Y value Pos of the actual position of the first control corresponding to the touch position can be determined by formula (30) dragui Y.

[0200] The following is an explanation with reference to specific examples.

[0201] The actual pixel resolution of the mobile terminal is: resolution: 2688*1216, the size of the UI layout designed by UMG is: 2532*1170, the size of the draggable UI is: 236*140, EC width 132,EC height is 36, and the current finger drags the draggable UI to the screen coordinate (10, 400), then the x value Pos of the first target coordinate of the first control in the UI layout dragui It can be calculated by the above formula (28), that is, MEC width Equal to 124.34, UI width Equal to 2532, S width Equal to 2688, DUI width Equal to 236, Pos screen X is equal to 10 and is substituted into the above formula (28) to obtain Pos dragui X = 124.34; MEC height Equal to 34.64, UI height Equal to 1170, S height Equal to 1216, DUI height Equal to 140, Pos screen Y is equal to 400. Substitute it into the above formula (30) and we get Pos dragui Y=314.87.

[0202] In the second case, the anchor point of the first control is in the middle of the upper edge of the first control

[0203] like Fig.16 In the mobile boundary diagram shown, the outermost largest rectangular box represents the spare screen of the mobile terminal, the second larger rectangular box represents the draggable area, that is, the mobile boundary, the two smallest rectangular boxes represent the first control, that is, the draggable UI, and the triangle on the smallest rectangular box represents the anchor point of the first control.

[0204] The x value of the first control in the first target coordinates of the UI layout is recorded as Pos dragui The x, y coordinates are marked as Pos dragui Y.

[0205] The user drags the first control on the screen of the mobile terminal. Due to the limitation of the moving boundary, when the first control is dragged to the left to reach Fig.16 When the left boundary of the moving boundary where the smallest rectangular box on the left is located, if the user continues to drag the first control to the left, the position of the first control remains at the left boundary and does not exceed the left boundary. Therefore, the leftmost position that the anchor point of the first control can reach (for example Fig.16 Point A in the middle), the distance from the left edge of the screen is Similarly, when you drag the first control to the right to reach Fig.16 When the right boundary of the moving boundary where the smallest rectangular box on the right is located is reached, if the first control is continued to be dragged to the right, the position of the first control remains at the right boundary and does not exceed the right boundary. Therefore, the rightmost position that the anchor point of the first control can reach (for example Fig.16 The distance between point B in the middle and the right edge of the screen is Fig.16 The upper left corner of the screen is the coordinate origin, the positive direction of the X axis is along the right edge of the screen, and the positive direction of the Y axis is along the downward direction of the left edge of the screen, so Pos dragui X satisfies the following formula (31):

[0206]

[0207] Based on formula (31) and the above embodiments 3.1 to 3.4, Pos dragui X can be calculated by the following formula (32):

[0208]

[0209] When the user drags the first control on the screen of the mobile terminal, the X value Pos in the screen coordinates based on different touch positions screen X, the X value Pos of the actual position of the first control corresponding to different touch positions can be determined by formula (32) dragui X.

[0210] The user drags the first control on the screen of the mobile terminal with his finger and moves it. Due to the limitation of the moving boundary, when the first control is dragged upward to the position such as Fig.16 When the smallest rectangle in the upper middle part reaches the upper boundary of the moving boundary, if the user continues to drag the first control upward, the position of the first control remains at the upper boundary and does not exceed the upper boundary. Therefore, the uppermost position that the anchor point of the first control can reach (for example Fig.16 Point A in the middle), which is the upper boundary of the moving boundary, is at a distance of MEC from the upper edge of the screen. height Similarly, when you drag the first control downward to Fig.16When the smallest rectangle in the lower middle part reaches the lower boundary of the moving boundary, if you continue to drag the first control downward, the position of the first control remains unchanged at the lower boundary and does not exceed the lower boundary. Therefore, the lowest position that the anchor point of the first control can reach (for example Fig.16 The distance between point B in the middle and the bottom edge of the screen is MEC height +DUI height , Fig.16 The upper left corner of the screen is the coordinate origin, the positive direction of the X axis is along the right edge of the screen, and the positive direction of the Y axis is along the downward direction of the left edge of the screen, so Pos dragui Y satisfies the following formula (33):

[0211] MEC height ≤ Pos dragui Y ≤ UI height -MEC height -DUI height Formula (33)

[0212] Based on formula (33) and the above embodiments 3.1 to 3.4, Pos dragui Y can be calculated by the following formula (34):

[0213]

[0214] When the user drags the first control on the screen of the mobile terminal, the Y value Pos in the screen coordinates of different touch positions is screen Y, the Y value Pos of the actual position of the first control corresponding to the touch position can be determined by formula (34) dragui Y.

[0215] The following is an explanation with reference to specific examples.

[0216] The actual pixel resolution of the mobile terminal is: resolution: 2688*1216, the size of the UI layout designed by UMG is: 2532*1170, the size of the draggable UI is: 236*140, EC width 132,EC height is 36, and the current finger drags the draggable UI to the screen coordinate position (600, 400). Then the x value Pos of the first target coordinate of the first control in the UI layout is dragui It can be calculated by the above formula (32), that is, MEC width Equal to 124.34, UI width Equal to 2532, S width Equal to 2688, DUI width Equal to 236, Pos screenX is equal to 600. Substitute it into the above formula (32) and we get Pos dragui X = 565.18; MEC height Equal to 34.64, UI height Equal to 1170, S height Equal to 1216, DUI height Equal to 140, Pos screen Y is equal to 400. Substitute it into the above formula (34) and we get Pos dragui Y=314.87.

[0217] In the third case, the anchor point of the first control is at the upper right corner of the first control

[0218] like Fig.17 In the mobile boundary diagram shown, the outermost largest rectangular box represents the spare screen of the mobile terminal, the second larger rectangular box represents the draggable area, that is, the mobile boundary, the two smallest rectangular boxes represent the first control, that is, the draggable UI, and the triangle on the smallest rectangular box represents the anchor point of the first control.

[0219] The x value of the first control in the first target coordinates of the UI layout is recorded as Pos dragui The x, y coordinates are marked as Pos dragui Y.

[0220] The user drags the first control on the screen of the mobile terminal. Due to the limitation of the moving boundary, when the first control is dragged to the left to reach Fig.17 When the left boundary of the moving boundary where the smallest rectangular box on the left is located, if the user continues to drag the first control to the left, the position of the first control remains at the left boundary and does not exceed the left boundary. Therefore, the leftmost position that the anchor point of the first control can reach (for example Fig.17 The distance between the left edge of the screen and the screen is MEC width +DUI width Similarly, when you drag the first control to the right and reach Fig.17 When the right boundary of the moving boundary where the smallest rectangular box on the right is located is reached, if the first control is continued to be dragged to the right, the position of the first control remains at the right boundary and does not exceed the right boundary. Therefore, the rightmost position that the anchor point of the first control can reach (for example Fig.17 Point B in the middle), which is the right boundary of the moving boundary, is at a distance of MEC from the right edge of the screen. width , Fig.17 The upper left corner of the screen is the coordinate origin, the positive direction of the X axis is along the right edge of the screen, and the positive direction of the Y axis is along the downward direction of the left edge of the screen, so Pos dragui X satisfies the following formula (35):

[0221] MEC width + DUI width ≤ Pos dragui X ≤ UI width -MEC width Formula (35)

[0222] Based on formula (35) and the above embodiments 3.1 to 3.4, Pos dragui X can be calculated by the following formula (36):

[0223]

[0224] When the user drags the first control on the screen of the mobile terminal, the X value Pos in the screen coordinates based on different touch positions screen X, the X value Pos of the actual position of the first control corresponding to the touch position can be determined by formula (36) dragui X.

[0225] The user drags the first control on the screen of the mobile terminal with his finger and moves it. Due to the limitation of the moving boundary, when the first control is dragged upward to the position such as Fig.17 When the smallest rectangle in the upper middle part reaches the upper boundary of the moving boundary, if the user continues to drag the first control upward, the position of the first control remains at the upper boundary and does not exceed the upper boundary. Therefore, the uppermost position that the anchor point of the first control can reach (for example Fig.17 Point A in the middle), which is the upper boundary of the moving boundary, is at a distance of MEC from the upper edge of the screen. height Similarly, when you drag the first control downward to Fig.17 When the smallest rectangle in the lower middle part reaches the lower boundary of the moving boundary, if you continue to drag the first control downward, the position of the first control remains unchanged at the lower boundary and does not exceed the lower boundary. Therefore, the lowest position that the anchor point of the first control can reach (for example Fig.17 The distance between point B in the middle and the bottom edge of the screen is MEC height +DUI height , Fig.17 The upper left corner of the screen is the coordinate origin, the positive direction of the X axis is along the right edge of the screen, and the positive direction of the Y axis is along the downward direction of the left edge of the screen, so Pos dragui Y satisfies the following formula (37):

[0226] MEC height ≤ Pos dragui Y ≤ UI height -MEC height -DUI height Formula (37)

[0227] Based on formula (37) and the above embodiments 3.1 to 3.4, Pos dragui Y can be calculated by the following formula (38):

[0228]

[0229] When the user drags the first control on the screen of the mobile terminal, the Y value Pos in the screen coordinates of different touch positions is screen Y, the Y value Pos of the actual position of the first control corresponding to the touch position can be determined by formula (38) dragui Y.

[0230] The following is an explanation with reference to specific examples.

[0231] The actual pixel resolution of the mobile terminal is: resolution: 2688*1216, the size of the UI layout designed by UMG is: 2532*1170, the size of the draggable UI is: 236*140, EC width 132,EC height is 36, and the current finger drags the draggable UI to the screen coordinate position (600, 400). Then the x value Pos of the first target coordinate of the first control in the UI layout is dragui It can be calculated by the above formula (36), that is, MEC width Equal to 124.34, UI width Equal to 2532, S width Equal to 2688, DUI width Equal to 236, Pos screen X is equal to 600. Substitute it into the above formula (36) and we get Pos dragui X = 683.18; MEC height Equal to 34.64, UI height Equal to 1170, S height Equal to 1216, DUI height Equal to 140, Pos screen Y is equal to 400. Substitute it into the above formula (38) and we get Pos dragui Y=314.87.

[0232] In the fourth case, the anchor point of the first control is in the middle of the left edge of the first control

[0233] like Fig.18In the mobile boundary diagram shown, the outermost largest rectangular box represents the spare screen of the mobile terminal, the second larger rectangular box represents the draggable area, that is, the mobile boundary, the two smallest rectangular boxes represent the first control, that is, the draggable UI, and the triangle on the smallest rectangular box represents the anchor point of the first control.

[0234] The x value of the first control in the first target coordinates of the UI layout is recorded as Pos dragui The x, y coordinates are marked as Pos dragui Y.

[0235] The user drags the first control on the screen of the mobile terminal. Due to the limitation of the moving boundary, when the first control is dragged to the left to reach Fig.18 When the left boundary of the moving boundary where the smallest rectangular box on the left is located, if the user continues to drag the first control to the left, the position of the first control remains at the left boundary and does not exceed the left boundary. Therefore, the leftmost position that the anchor point of the first control can reach (for example Fig.18 Point A in the middle), which is the left boundary of the moving boundary, is at a distance of MEC from the left edge of the screen. width Similarly, when you drag the first control to the right and reach Fig.18 When the right boundary of the moving boundary where the smallest rectangular box on the right is located is reached, if the first control is continued to be dragged to the right, the position of the first control remains at the right boundary and does not exceed the right boundary. Therefore, the rightmost position that the anchor point of the first control can reach (for example Fig.18 The distance between point B in the middle and the right edge of the screen is MEC width +DUI width , Fig.18 The upper left corner of the screen is the coordinate origin, the positive direction of the X axis is along the right edge of the screen, and the positive direction of the Y axis is along the downward direction of the left edge of the screen, so Pos dragui X satisfies the following formula (38):

[0236] MEC width ≤ Pos dragui X ≤ UI width -MEC width -DUI width Formula (39)

[0237] Based on formula (39) and the above embodiments 3.1 to 3.4, Pos dragui X can be calculated by the following formula (40):

[0238]

[0239] When the user drags the first control on the screen of the mobile terminal, the X value Pos in the screen coordinates based on different touch positions screen X, the X value Pos of the actual position of the first control corresponding to the touch position can be determined by formula (40) dragui X.

[0240] The user drags the first control on the screen of the mobile terminal with his finger and moves it. Due to the limitation of the moving boundary, when the first control is dragged upward to the position such as Fig.18 When the smallest rectangle in the upper middle part reaches the upper boundary of the moving boundary, if the user continues to drag the first control upward, the position of the first control remains at the upper boundary and does not exceed the upper boundary. Therefore, the uppermost position that the anchor point of the first control can reach (for example Fig.18 Point A in the middle), the distance from the upper edge of the screen is Similarly, when you drag the first control downward to Fig.18 When the smallest rectangle in the lower middle part reaches the lower boundary of the moving boundary, if you continue to drag the first control downward, the position of the first control remains unchanged at the lower boundary and does not exceed the lower boundary. Therefore, the lowest position that the anchor point of the first control can reach (for example Fig.18 The distance between point B in the middle and the bottom edge of the screen is Fig.18 The upper left corner of the screen is the coordinate origin, the positive direction of the X axis is along the right edge of the screen, and the positive direction of the Y axis is along the downward direction of the left edge of the screen, so Pos dragui Y satisfies the following formula (41):

[0241]

[0242] Based on formula (41) and the above embodiments 3.1 to 3.4, Pos dragui Y can be calculated by the following formula (42):

[0243]

[0244] When the user drags the first control on the screen of the mobile terminal, the Y value Pos in the screen coordinates of different touch positions is screen Y, the Y value Pos of the actual position of the first control corresponding to the touch position can be determined by formula (42) dragui Y.

[0245] The following is an explanation with reference to specific examples.

[0246] The actual pixel resolution of the mobile terminal is: resolution: 2688*1216, the size of the UI layout designed by UMG is: 2532*1170, the size of the draggable UI is: 236*140, EC width 132,EC height is 36, and the current finger drags the draggable UI to the screen coordinate position (600, 400). Then the x value Pos of the first target coordinate of the first control in the UI layout is dragui It can be calculated by the above formula (40), that is, MEC width Equal to 124.34, UI width Equal to 2532, S width Equal to 2688, DUI width Equal to 236, Pos screen X is equal to 600. Substitute it into the above formula (40) and we get Pos dragui X = 447.18; MEC height Equal to 34.64, UI height Equal to 1170, S height Equal to 1216, DUI height Equal to 140, Pos screen Y is equal to 400. Substitute it into the above formula (42) and we get Pos dragui Y=384.87.

[0247] In the fifth case, the anchor point of the first control is at the exact center of the first control.

[0248] like Fig.19 In the mobile boundary diagram shown, the outermost largest rectangular box represents the spare screen of the mobile terminal, the second larger rectangular box represents the draggable area, that is, the mobile boundary, the two smallest rectangular boxes represent the first control, that is, the draggable UI, and the triangle on the smallest rectangular box represents the anchor point of the first control.

[0249] The x value of the first control in the first target coordinates of the UI layout is recorded as Pos dragui The x, y coordinates are marked as Pos dragui Y.

[0250] Due to the limitation of the moving boundary, when you drag the first control to the left and reach Fig.19 When the left boundary of the moving boundary where the smallest rectangular box on the left is located, if the user continues to drag the first control to the left, the position of the first control remains at the left boundary and does not exceed the left boundary. Therefore, the leftmost position that the anchor point of the first control can reach (for example Fig.19 The distance between it and the left edge of the screen is When you drag the first control to the right and reach Fig.19When the right boundary of the moving boundary where the smallest rectangular box on the right is located is reached, if the first control is continued to be dragged to the right, the position of the first control remains at the right boundary and does not exceed the right boundary. Therefore, the rightmost position that the anchor point of the first control can reach (for example Fig.19 The distance between point B in the middle and the right edge of the screen is Fig.19 The upper left corner of the screen is the coordinate origin, the positive direction of the X axis is along the right edge of the screen, and the positive direction of the Y axis is along the downward direction of the left edge of the screen, so Pos dragui X satisfies the following formula (43):

[0251]

[0252] Based on formula (43) and the above embodiments 3.1 to 3.4, Pos dragui X can be calculated by the following formula (44):

[0253]

[0254] When the user drags the first control on the screen of the mobile terminal, the X value Pos in the screen coordinates based on different touch positions screen X, the X value Pos of the actual position of the first control corresponding to the touch position can be determined by formula (44) dragui X.

[0255] Due to the limitation of the moving boundary, when you drag the first control upward to Fig.19 When the smallest rectangle in the upper middle part reaches the upper boundary of the moving boundary, if the user continues to drag the first control upward, the position of the first control remains at the upper boundary and does not exceed the upper boundary. Therefore, the uppermost position that the anchor point of the first control can reach (for example Fig.19 Point A in the middle), its distance from the upper edge of the screen is Similarly, when you drag the first control downward to Fig.19 When the smallest rectangle in the lower middle part reaches the lower boundary of the moving boundary, if you continue to drag the first control downward, the position of the first control remains unchanged at the lower boundary and does not exceed the lower boundary. Therefore, the lowest position that the anchor point of the first control can reach (for example Fig.19 The distance between point B in the middle and the bottom edge of the screen is Fig.19 The upper left corner of the screen is the coordinate origin, the positive direction of the X axis is along the right edge of the screen, and the positive direction of the Y axis is along the downward direction of the left edge of the screen, so Pos dragui Y satisfies the following formula (45):

[0256]

[0257] Based on formula (45) and the above embodiments 3.1 to 3.4, Pos dragui Y can be calculated by the following formula (46):

[0258]

[0259]

[0260] When the user drags the first control on the screen of the mobile terminal, the Y value Pos in the screen coordinates of different touch positions is screen Y, the Y value Pos of the actual position of the first control corresponding to the touch position can be determined by formula (46) dragui Y.

[0261] The implementation method 2.1 is described below with reference to a specific example.

[0262] The actual pixel resolution of the mobile terminal is: resolution: 2688*1216, the size of the UI layout designed by UMG is: 2532*1170, the size of the draggable UI is: 236*140, EC width 132,EC height is 36, and the current finger drags the draggable UI to the screen coordinate position (600, 400). Then the x value Pos of the first target coordinate of the first control in the UI layout is dragui It can be calculated by the above formula (44), that is, MEC width Equal to 124.34, UI width Equal to 2532, S width Equal to 2688, DUI width Equal to 236, Pos screen X is equal to 600. Substitute it into the above formula (44) and we get Pos dragui X = 565.18; MEC height Equal to 34.64, UI height Equal to 1170, S height Equal to 1216, DUI height Equal to 140, Pos screen Y is equal to 400. Substitute it into the above formula (46) and we get Pos dragui Y=384.87.

[0263] In the sixth case, the anchor point of the first control is in the middle of the right edge of the first control.

[0264] like Fig. 20In the mobile boundary diagram shown, the outermost largest rectangular box represents the spare screen of the mobile terminal, the second larger rectangular box represents the draggable area, that is, the mobile boundary, the two smallest rectangular boxes represent the first control, that is, the draggable UI, and the triangle on the smallest rectangular box represents the anchor point of the first control.

[0265] The x value of the first control in the first target coordinates of the UI layout is recorded as Pos dragui The x, y coordinates are marked as Pos dragui Y.

[0266] The user drags the first control on the screen of the mobile terminal. Due to the limitation of the moving boundary, when the first control is dragged to the left to reach Fig. 20 When the left boundary of the moving boundary where the smallest rectangular box on the left is located, if the user continues to drag the first control to the left, the position of the first control remains at the left boundary and does not exceed the left boundary. Therefore, the leftmost position that the anchor point of the first control can reach (for example Fig. 20 The distance between the left edge of the screen and the screen is MEC width +DUI width Similarly, when you drag the first control to the right and reach Fig. 20 When the right boundary of the moving boundary where the smallest rectangular box on the right is located is reached, if the first control is continued to be dragged to the right, the position of the first control remains at the right boundary and does not exceed the right boundary. Therefore, the rightmost position that the anchor point of the first control can reach (for example Fig. 20 Point B), which is the right boundary of the moving boundary, is at a distance of MEC from the right edge of the screen. width , Fig. 20 The upper left corner of the screen is the coordinate origin, the positive direction of the X axis is along the right edge of the screen, and the positive direction of the Y axis is along the downward direction of the left edge of the screen, so Pos dragui X satisfies the following formula (47):

[0267] MEC width + DUI width ≤ Pos dragui X ≤ UI width -MEC width Formula(47)

[0268] Based on formula (47) and the above embodiments 3.1 to 3.4, Pos dragui X can be calculated by the following formula (48):

[0269]

[0270] When the user drags the first control on the screen of the mobile terminal, the X value Pos in the screen coordinates based on different touch positions screen X, the X value Pos of the actual position of the first control corresponding to the touch position can be determined by formula (48) dragui X.

[0271] The user drags the first control on the screen of the mobile terminal with his finger and moves it. Due to the limitation of the moving boundary, when the first control is dragged upward to the position such as Fig. 20 When the smallest rectangle in the upper middle part reaches the upper boundary of the moving boundary, if the user continues to drag the first control upward, the position of the first control remains at the upper boundary and does not exceed the upper boundary. Therefore, the uppermost position that the anchor point of the first control can reach (for example Fig. 20 Point A in the middle), its distance from the upper edge of the screen is Similarly, when you drag the first control downward to Fig. 20 When the smallest rectangle in the lower middle part reaches the lower boundary of the moving boundary, if you continue to drag the first control downward, the position of the first control remains unchanged at the lower boundary and does not exceed the lower boundary. Therefore, the lowest position that the anchor point of the first control can reach (for example Fig. 20 The distance between point B in the middle and the bottom edge of the screen is Fig. 20 The upper left corner of the screen is the coordinate origin, the positive direction of the X axis is along the right edge of the screen, and the positive direction of the Y axis is along the downward direction of the left edge of the screen, so Pos dragui Y satisfies the following formula (49):

[0272]

[0273] Based on formula (49) and the above embodiments 3.1 to 3.4, Pos dragui Y can be calculated by the following formula (50):

[0274]

[0275] When the user drags the first control on the screen of the mobile terminal, the Y value Pos in the screen coordinates of different touch positions is screen Y, the Y value Pos of the actual position of the first control corresponding to the touch position can be determined by formula (50) dragui Y.

[0276] The following is an explanation with reference to specific examples.

[0277] The actual pixel resolution of the mobile terminal is: resolution: 2688*1216, the size of the UI layout designed by UMG is: 2532*1170, the size of the draggable UI is: 236*140, EC width 132,EC height is 36, and the current finger drags the draggable UI to the screen coordinate position (600, 400). Then the x value Pos of the first target coordinate of the first control in the UI layout is dragui It can be calculated by the above formula (48), that is, MEC width Equal to 124.34, UI width Equal to 2532, S width Equal to 2688, DUI width Equal to 236, Pos screen X is equal to 600. Substitute it into the above formula (48) and we get Pos dragui X = 683.18; MEC height Equal to 34.64, UI height Equal to 1170, S height Equal to 1216, DUI height Equal to 140, Pos screen Y is equal to 400. Substitute it into the above formula (50) and we get Pos dragui Y=384.87.

[0278] In the seventh case, the anchor point of the first control is at the lower left corner of the first control

[0279] like Fig.21 In the mobile boundary diagram shown, the outermost largest rectangular box represents the spare screen of the mobile terminal, the second larger rectangular box represents the draggable area, that is, the mobile boundary, the two smallest rectangular boxes represent the first control, that is, the draggable UI, and the triangle on the smallest rectangular box represents the anchor point of the first control.

[0280] The x value of the first control in the first target coordinates of the UI layout is recorded as Pos dragui The x, y coordinates are marked as Pos dragui Y.

[0281] The user drags the first control on the screen of the mobile terminal. Due to the limitation of the moving boundary, when the first control is dragged to the left to reach Fig.21 When the left boundary of the moving boundary where the smallest rectangular box on the left is located, if the user continues to drag the first control to the left, the position of the first control remains at the left boundary and does not exceed the left boundary. Therefore, the leftmost position that the anchor point of the first control can reach (for example Fig.21 Point A in the middle), which is the left boundary of the moving boundary, is at a distance of MEC from the left edge of the screen.width Similarly, when you drag the first control to the right and reach Fig.21 When the right boundary of the moving boundary where the smallest rectangular box on the right is located is reached, if the first control is continued to be dragged to the right, the position of the first control remains at the right boundary and does not exceed the right boundary. Therefore, the rightmost position that the anchor point of the first control can reach (for example Fig.21 The distance between point B in the middle and the right edge of the screen is MEC width -DUI width , Fig.21 The upper left corner of the screen is the coordinate origin, the positive direction of the X axis is along the right edge of the screen, and the positive direction of the Y axis is along the downward direction of the left edge of the screen, so Pos dragui X satisfies the following formula (51):

[0282] MEC width ≤ Pos dragui X ≤ UI width -MEC width -DUI width Formula (51)

[0283] Based on formula (51) and the above embodiments 3.1 to 3.4, Pos dragui X can be calculated by the following formula (52):

[0284]

[0285] Similarly, due to the limitation of the moving boundary, when you drag the first control upward to Fig.21 When the smallest rectangle in the upper middle part reaches the upper boundary of the moving boundary, if the user continues to drag the first control upward, the position of the first control remains at the upper boundary and does not exceed the upper boundary. Therefore, the uppermost position that the anchor point of the first control can reach (for example Fig.21 The distance between the upper edge of the screen and the screen is MEC height +DUI height Similarly, when you drag the first control downward to Fig.21 When the smallest rectangle in the lower middle part reaches the lower boundary of the moving boundary, if you continue to drag the first control downward, the position of the first control remains unchanged at the lower boundary and does not exceed the lower boundary. Therefore, the lowest position that the anchor point of the first control can reach (for example Fig.21 The distance between point B in the middle and the bottom edge of the screen is MEC height , Fig.21 The upper left corner of the screen is the coordinate origin, the positive direction of the X axis is along the right edge of the screen, and the positive direction of the Y axis is along the downward direction of the left edge of the screen, so Pos dragui Y satisfies the following formula (53):

[0286] MEC height + DUI height ≤ Pos dragui Y ≤ UI height -MEC height Formula(53)

[0287] Based on formula (53) and the above embodiments 3.1 to 3.4, Pos dragui Y can be calculated by the following formula (54):

[0288]

[0289] When the user drags the first control on the screen of the mobile terminal, the Y value Pos in the screen coordinates of different touch positions is screen Y, the Y value Pos of the actual position of the first control corresponding to the touch position can be determined by formula (54) dragui Y.

[0290] The following is an explanation with reference to specific examples.

[0291] The actual pixel resolution of the mobile terminal is: resolution: 2688*1216, the size of the UI layout designed by UMG is: 2532*1170, the size of the draggable UI is: 236*140, EC width 132,EC height is 36, and the current finger drags the draggable UI to the screen coordinate position (600, 400). Then the x value Pos of the first target coordinate of the first control in the UI layout is dragui It can be calculated by the above formula (52), that is, MEC width Equal to 124.34, UI width Equal to 2532, S width Equal to 2688, DUI width Equal to 236, Pos screen X is equal to 600. Substitute it into the above formula (52) and we get Pos dragui X = 447.18; MEC height Equal to 34.64, UI height Equal to 1170, S height Equal to 1216, DUI height Equal to 140, Pos screen Y is equal to 400. Substitute it into the above formula (54) and we get Pos dragui Y=454.87.

[0292] In the eighth case, the anchor point of the first control is in the middle of the bottom edge of the first control.

[0293] like Fig. 22 In the mobile boundary diagram shown, the outermost largest rectangular box represents the spare screen of the mobile terminal, the second larger rectangular box represents the draggable area, that is, the mobile boundary, the two smallest rectangular boxes represent the first control, that is, the draggable UI, and the triangle on the smallest rectangular box represents the anchor point of the first control.

[0294] The x value of the first control in the first target coordinates of the UI layout is recorded as Pos dragui The x, y coordinates are marked as Pos dragui Y.

[0295] The user drags the first control on the screen of the mobile terminal. Due to the limitation of the moving boundary, when the first control is dragged to the left to reach Fig. 22 When the left boundary of the moving boundary where the smallest rectangular box on the left is located, if the user continues to drag the first control to the left, the position of the first control remains at the left boundary and does not exceed the left boundary. Therefore, the leftmost position that the anchor point of the first control can reach (for example Fig. 22 The distance between it and the left edge of the screen is Similarly, when you drag the first control to the right to reach Fig. 22 When the right boundary of the moving boundary where the smallest rectangular box on the right is located is reached, if the first control is continued to be dragged to the right, the position of the first control remains at the right boundary and does not exceed the right boundary. Therefore, the rightmost position that the anchor point of the first control can reach (for example Fig. 22 The distance between point B in the middle and the right edge of the screen is Fig. 22 The upper left corner of the screen is the coordinate origin, the positive direction of the X axis is along the right edge of the screen, and the positive direction of the Y axis is along the downward direction of the left edge of the screen, so Pos dragui X satisfies the following formula (55):

[0296]

[0297] Based on formula (55) and the above embodiments 3.1 to 3.4, Pos dragui X can be calculated by the following formula (56):

[0298]

[0299] When the user drags the first control on the screen of the mobile terminal, the X value Pos in the screen coordinates based on different touch positions screenX, the X value Pos of the actual position of the first control corresponding to the touch position can be determined by formula (56) dragui X.

[0300] The user drags the first control on the screen of the mobile terminal with his finger and moves it. Due to the limitation of the moving boundary, when the first control is dragged upward to the position such as Fig. 22 When the smallest rectangle in the upper middle part reaches the upper boundary of the moving boundary, if the user continues to drag the first control upward, the position of the first control remains at the upper boundary and does not exceed the upper boundary. Therefore, the uppermost position that the anchor point of the first control can reach (for example Fig. 22 The distance between the upper edge of the screen and the screen is MEC height +DUI height Similarly, when you drag the first control downward to Fig. 22 When the smallest rectangle in the lower middle part reaches the lower boundary of the moving boundary, if you continue to drag the first control downward, the position of the first control remains unchanged at the lower boundary and does not exceed the lower boundary. Therefore, the lowest position that the anchor point of the first control can reach (for example Fig. 22 Point B in the middle), which is the lower boundary of the moving boundary, is at a distance of MEC from the lower edge of the screen. height , Fig. 22 The upper left corner of the screen is the coordinate origin, the positive direction of the X axis is along the right edge of the screen, and the positive direction of the Y axis is along the downward direction of the left edge of the screen, so Pos dragui Y satisfies the following formula (57):

[0301] MEC height + DUI height ≤ Pos dragui Y ≤ UI height -MEC height Formula (57)

[0302] Based on formula (57) and the above embodiments 3.1 to 3.4, Pos dragui Y can be calculated by the following formula (58):

[0303]

[0304] When the user drags the first control on the screen of the mobile terminal, the Y value Pos in the screen coordinates of different touch positions is screen Y, the Y value Pos of the actual position of the first control corresponding to the touch position can be determined by formula (58) dragui Y.

[0305] The following is an explanation with reference to specific examples.

[0306] The actual pixel resolution of the mobile terminal is: resolution: 2688*1216, the size of the UI layout designed by UMG is: 2532*1170, the size of the draggable UI is: 236*140, EC width 132,EC height is 36, and the current finger drags the draggable UI to the screen coordinate position (600, 400). Then the x value Pos of the first target coordinate of the first control in the UI layout is dragui It can be calculated by the above formula (56), that is, MEC width Equal to 124.34, UI width Equal to 2532, S width Equal to 2688, DUI width Equal to 236, Pos screen X is equal to 600. Substitute it into the above formula (56) and we get Pos dragui X = 565.18; MEC height Equal to 34.64, UI height Equal to 1170, S height Equal to 1216, DUI height Equal to 140, Pos screen Y is equal to 400. Substitute it into the above formula (58) and we get Pos dragui Y=454.87.

[0307] In the ninth case, the anchor point of the first control is at the lower right corner of the first control

[0308] like Fig.23 In the mobile boundary diagram shown, the outermost largest rectangular box represents the spare screen of the mobile terminal, the second larger rectangular box represents the draggable area, that is, the mobile boundary, the two smallest rectangular boxes represent the first control, that is, the draggable UI, and the triangle on the smallest rectangular box represents the anchor point of the first control.

[0309] The x value of the first control in the first target coordinates of the UI layout is recorded as Pos dragui The x, y coordinates are marked as Pos dragui Y.

[0310] The user drags the first control on the screen of the mobile terminal. Due to the limitation of the moving boundary, when the first control is dragged to the left to reach Fig.23 When the left boundary of the moving boundary where the smallest rectangular box on the left is located, if the user continues to drag the first control to the left, the position of the first control remains at the left boundary and does not exceed the left boundary. Therefore, the leftmost position that the anchor point of the first control can reach (for example Fig.23 The distance between the left edge of the screen and the screen is MECwidth +DUI width Similarly, when you drag the first control to the right and reach Fig.23 When the right boundary of the moving boundary where the smallest rectangular box on the right is located is reached, if the first control is continued to be dragged to the right, the position of the first control remains at the right boundary and does not exceed the right boundary. Therefore, the rightmost position that the anchor point of the first control can reach (for example Fig.23 Point B), which is the left edge of the moving boundary, is at a distance of MEC from the right edge of the screen. width , Fig.23 The upper left corner of the screen is the coordinate origin, the positive direction of the X axis is along the right edge of the screen, and the positive direction of the Y axis is along the downward direction of the left edge of the screen, so Pos dragui X satisfies the following formula (59):

[0311] MEC width + DUI width ≤ Pos dragui X ≤ UI width -MEC width Formula (59)

[0312] Based on formula (59) and the above embodiments 3.1 to 3.4, Pos dragui X can be calculated by the following formula (60):

[0313]

[0314] When the user drags the first control on the screen of the mobile terminal, based on the X value PosscreenX in the screen coordinates of different touch positions, the X value PosdraguiX of the actual position of the first control corresponding to the touch position can be determined by formula (60).

[0315] Similarly, due to the limitation of the moving boundary, when you drag the first control upward to Fig.23 When the smallest rectangle in the upper middle part reaches the upper boundary of the moving boundary, if the user continues to drag the first control upward, the position of the first control remains at the upper boundary and does not exceed the upper boundary. Therefore, the uppermost position that the anchor point of the first control can reach (for example Fig.23 The distance between the upper edge of the screen and the screen is MEC height +DUI height Similarly, when you drag the first control downward to Fig.23 When the smallest rectangle in the lower middle part reaches the lower boundary of the moving boundary, if you continue to drag the first control downward, the position of the first control remains unchanged at the lower boundary and does not exceed the lower boundary. Therefore, the lowest position that the anchor point of the first control can reach (for example Fig.23 Point B), which is the lower boundary of the moving boundary, is at a distance of MEC from the lower edge of the screen. height , Fig.23 The upper left corner of the screen is the coordinate origin, the positive direction of the X axis is along the right edge of the screen, and the positive direction of the Y axis is along the downward direction of the left edge of the screen, so Pos dragui Y satisfies the following formula (61):

[0316] MEC height + DUI height ≤ Pos dragui Y ≤ UI height -MEC height Formula (61)

[0317] Then Pos dragui Y can be calculated by the following formula (62):

[0318]

[0319] The following is an explanation with reference to specific examples.

[0320] The actual pixel resolution of the mobile terminal is: resolution: 2688*1216, the size of the UI layout designed by UMG is: 2532*1170, the size of the draggable UI is: 236*140, EC width 132,EC height is 36, and the current finger drags the draggable UI to the screen coordinate position (600, 400). Then the x value Pos of the first target coordinate of the first control in the UI layout is dragui It can be calculated by the above formula (60), that is, MEC width Equal to 124.34, UI width Equal to 2532, S width Equal to 2688, DUI width Equal to 236, Pos screen X is equal to 600. Substitute it into the above formula (60) and we get Pos dragui X = 683.18; MEC height Equal to 34.64, UI height Equal to 1170, S height Equal to 1216, DUI height Equal to 140, Pos screen Y is equal to 400. Substitute it into the above formula (62) and we get Pos dragui Y=454.87.

[0321] Based on the same technical concept, Fig.24An exemplary UI dragging device 2400 on a mobile terminal provided by an embodiment of the present invention is shown. The device 2400 can execute the process of the UI dragging method on the mobile terminal.

[0322] like Fig.24 As shown, the device 2400 includes:

[0323] The acquisition unit 2401 is used to acquire the screen coordinates of the touch positions corresponding to the frames displayed on the mobile terminal within the life cycle of the drag operation when a drag operation acting on the first control displayed on the mobile terminal is detected; wherein the first control is a draggable control, and the life cycle is the process from the beginning of the drag operation contacting the screen of the mobile terminal to the leaving the screen of the mobile terminal;

[0324] The processing unit 2402 is configured to execute, for each screen coordinate of the touch position corresponding to each frame displayed on the mobile terminal:

[0325] Convert the screen coordinates of the touch position corresponding to the frame to the first UI coordinates of the touch position corresponding to the frame under the UI layout in the UE engine;

[0326] Determine a first target coordinate of the first control in the UI layout according to the position of the anchor point of the first control on the first control and the first UI coordinate;

[0327] According to the first target coordinates, the position coordinates of the first control in the frame displayed on the mobile terminal are set.

[0328] Optionally, the processing unit 2402 is specifically used to: set the position coordinates of the anchor point of the first control in the UI layout as the first UI coordinates, and use the position coordinates of the anchor point of the first control in the UI layout as the first target coordinates of the first control in the UI layout.

[0329] Optionally, the processing unit 2402 is specifically used to: set the coordinates of the center position of the first control as the first UI coordinates; determine the position coordinates of the anchor point of the first control in the UI layout according to the position of the anchor point of the first control on the first control and the coordinates of the center position of the first control, and use the position coordinates of the anchor point of the first control in the UI layout as the first target coordinates of the first control in the UI layout.

[0330] Optionally, the processing unit 2402 is specifically configured to:

[0331] If the anchor point of the first control is at the upper left corner of the first control, the x value of the first target coordinates of the first control in the UI layout is the difference between the x value of the first target coordinates and half the width of the first control, and the y value of the first target coordinates is the difference between the y value of the first target coordinates and half the height of the first control; or,

[0332] If the anchor point of the first control is in the middle of the upper edge of the first control, the x value of the first target coordinates of the first control in the UI layout is the x value of the first target coordinates, and the y value of the first target coordinates is the difference between the y value of the first target coordinates and half the height of the first control; or,

[0333] If the anchor point of the first control is at the upper right corner of the first control, the x value of the first target coordinates of the first control in the UI layout is the sum of the x value of the first target coordinates and half of the width of the first control, and the y value of the first target coordinates is the difference between the y value of the first target coordinates and half of the height of the first control; or,

[0334] If the anchor point of the first control is in the middle of the left edge of the first control, the x value of the first target coordinates of the first control in the UI layout is the difference between the x value of the first target coordinates and half the width of the first control, and the y value of the first target coordinates is the y value of the first target coordinates; or,

[0335] If the anchor point of the first control is at the exact center of the first control, the x value of the first target coordinates of the first control in the UI layout is the x value of the first target coordinates, and the y value of the first target coordinates is the y value of the first target coordinates; or,

[0336] If the anchor point of the first control is in the middle of the right edge of the first control, the x value of the first target coordinates of the first control in the UI layout is the sum of the x value of the first target coordinates and half the width of the first control, and the y value of the first target coordinates is the y value of the first target coordinates; or,

[0337] If the anchor point of the first control is at the lower left corner of the first control, the x value of the first target coordinates of the first control in the UI layout is the difference between the x value of the first target coordinates and half the width of the first control, and the y value of the first target coordinates is the sum of the y value of the first target coordinates and half the height of the first control; or,

[0338] If the anchor point of the first control is in the middle of the lower edge of the first control, the x value of the first target coordinates of the first control in the UI layout is the x value of the first target coordinates, and the y value of the first target coordinates is the sum of the y value of the first target coordinates and half the height of the first control; or,

[0339] If the anchor point of the first control is in the lower right corner of the first control, the x value of the first target coordinates of the first control in the UI layout is the sum of the x value of the first target coordinates and half the width of the first control, and the y value of the first target coordinates is the sum of the y value of the first target coordinates and half the height of the first control.

[0340] Optionally, the processing unit 2402 is further used to: determine the moving boundary range of the first control in the UI layout; determine the first target coordinates of the first control in the UI layout based on the position of the anchor point of the first control on the first control, the moving boundary range of the first control in the UI layout, and the first UI coordinates.

[0341] Optionally, the processing unit 2402 is specifically configured to:

[0342] If the x value and the y value of the first UI coordinate are both within the moving boundary, then the first target coordinate of the first control in the UI layout is determined according to the position of the anchor point of the first control on the first control and the first UI coordinate; or,

[0343] If the x value of the first UI coordinate is outside the moving boundary range and the y value of the first UI coordinate is within the moving boundary range, the x value of the first target coordinate of the first control in the UI layout is determined according to the boundary x value in the moving boundary range that is closest to the x value of the first UI coordinate, and the y value of the first target coordinate of the first control in the UI layout is determined according to the position of the anchor point of the first control on the first control and the y value of the first UI coordinate;

[0344] If the y value of the first UI coordinate is outside the moving boundary range and the x value of the first UI coordinate is within the moving boundary range, the x value of the first target coordinate of the first control in the UI layout is determined according to the position of the anchor point of the first control on the first control and the x value of the first UI coordinate, and the y value of the first target coordinate of the first control in the UI layout is determined according to the boundary y value closest to the y value of the first UI coordinate in the moving boundary range;

[0345] If the x value and y value of the first UI coordinate are both outside the moving boundary range, the x value of the first target coordinate of the first control in the UI layout is determined according to the boundary x value closest to the x value of the first UI coordinate in the moving boundary range, and the x value of the first target coordinate of the first control in the UI layout is determined according to the boundary y value closest to the y value of the first UI coordinate in the moving boundary range.

[0346] Optionally, the processing unit 2402 is specifically used to: convert the screen coordinates of the touch position corresponding to the frame into viewport coordinates according to the conversion relationship between the screen coordinate system of the mobile terminal and the viewport coordinate system; convert the viewport coordinates of the touch position corresponding to the frame into the first UI coordinates according to the conversion relationship between the viewport coordinate system and the UI coordinate system corresponding to the UI layout in the UE engine.

[0347] Based on the same technical concept, an embodiment of the present invention provides a computing device, including:

[0348] A memory for storing program instructions;

[0349] The processor is used to call the program instructions stored in the memory and execute the UI dragging method on the mobile terminal according to the obtained program.

[0350] Based on the same technical concept, an embodiment of the present invention provides a computer-readable storage medium, wherein the computer-readable storage medium stores computer-executable instructions, and the computer-executable instructions are used to enable a computer to execute a UI dragging method on a mobile terminal.

[0351] Those skilled in the art will appreciate that embodiments of the present invention may be provided as methods, systems, or computer program products. Therefore, the present invention may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Moreover, the present invention may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0352] The present invention is described with reference to flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to the present invention. It should be understood that each process and / or block in the flowchart and / or block diagram, as well as the combination of processes and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0353] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0354] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0355] Although the preferred embodiments of the present invention have been described, those skilled in the art may make other changes and modifications to these embodiments once they have learned the basic creative concept. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments and all changes and modifications that fall within the scope of the present invention.

[0356] Obviously, those skilled in the art can make various changes and modifications to the present invention without departing from the spirit and scope of the present invention. Thus, if these modifications and variations of the present invention fall within the scope of the claims of this application and their equivalents, the present invention is also intended to include these modifications and variations.

Claims

1. A UI dragging method on a mobile terminal, characterized in that: include: When a drag operation acting on a first control displayed on a mobile terminal is detected, the screen coordinates of the touch positions corresponding to each frame displayed on the mobile terminal are obtained within the life cycle of the drag operation; wherein the first control is a draggable control, and the life cycle is the process from the beginning of the drag operation contacting the screen of the mobile terminal to the leaving of the screen of the mobile terminal; For the screen coordinates of the touch position corresponding to each frame in each frame displayed by the mobile terminal, execute: Convert the screen coordinates of the touch position corresponding to the frame into the first UI coordinates of the touch position corresponding to the frame under the UI layout in the UE engine; Determine, according to the position of the anchor point of the first control on the first control and the first UI coordinates, a first target coordinate of the first control in the UI layout; According to the first target coordinates, the position coordinates of the first control in the frame displayed by the mobile terminal are set.

2. The method according to claim 1, characterized in that The determining, according to the position of the anchor point of the first control on the first control and the first UI coordinate, the first target coordinate of the first control in the UI layout includes: The position coordinates of the anchor point of the first control in the UI layout are set as the first UI coordinates, and the position coordinates of the anchor point of the first control in the UI layout are used as the first target coordinates of the first control in the UI layout.

3. The method according to claim 1, characterized in that The determining, according to the position of the anchor point of the first control on the first control and the first UI coordinate, the first target coordinate of the first control in the UI layout includes: Setting the coordinates of the center position of the first control as the first UI coordinates; According to the position of the anchor point of the first control on the first control and the coordinates of the center position of the first control, the position coordinates of the anchor point of the first control in the UI layout are determined, and the position coordinates of the anchor point of the first control in the UI layout are used as the first target coordinates of the first control in the UI layout.

4. The method according to claim 3, characterized in that The determining, according to the position of the anchor point of the first control on the first control and the coordinates of the center position of the first control, the position coordinates of the anchor point of the first control in the UI layout includes: If the anchor point of the first control is at the upper left corner of the first control, the x value of the first target coordinate of the first control in the UI layout is the difference between the x value of the first target coordinate and half of the width of the first control, and the y value of the first target coordinate is the difference between the y value of the first target coordinate and half of the height of the first control; or, If the anchor point of the first control is in the middle of the upper edge of the first control, the x value of the first target coordinate of the first control in the UI layout is the x value of the first target coordinate, and the y value of the first target coordinate is the difference between the y value of the first target coordinate and half the height of the first control; or, If the anchor point of the first control is at the upper right corner of the first control, the x value of the first target coordinate of the first control in the UI layout is the sum of the x value of the first target coordinate and half of the width of the first control, and the y value of the first target coordinate is the difference between the y value of the first target coordinate and half of the height of the first control; or, If the anchor point of the first control is in the middle of the left edge of the first control, the x value of the first target coordinate of the first control in the UI layout is the difference between the x value of the first target coordinate and half the width of the first control, and the y value of the first target coordinate is the y value of the first target coordinate; or, If the anchor point of the first control is at the exact center of the first control, the x value of the first target coordinates of the first control in the UI layout is the x value of the first target coordinates, and the y value of the first target coordinates is the y value of the first target coordinates; or, If the anchor point of the first control is in the middle of the right edge of the first control, the x value of the first target coordinate of the first control in the UI layout is the sum of the x value of the first target coordinate and half of the width of the first control, and the y value of the first target coordinate is the y value of the first target coordinate; or, If the anchor point of the first control is at the lower left corner of the first control, the x value of the first target coordinate of the first control in the UI layout is the difference between the x value of the first target coordinate and half the width of the first control, and the y value of the first target coordinate is the sum of the y value of the first target coordinate and half the height of the first control; or, If the anchor point of the first control is in the middle of the lower edge of the first control, the x value of the first target coordinate of the first control in the UI layout is the x value of the first target coordinate, and the y value of the first target coordinate is the sum of the y value of the first target coordinate and half of the height of the first control; or, If the anchor point of the first control is at the lower right corner of the first control, the x value of the first target coordinate of the first control in the UI layout is the sum of the x value of the first target coordinate and half of the width of the first control, and the y value of the first target coordinate is the sum of the y value of the first target coordinate and half of the height of the first control.

5. The method according to claim 1, characterized in that Before determining the first target coordinates of the first control in the UI layout according to the position of the anchor point of the first control on the first control and the first UI coordinates, the method further includes: Determine a moving boundary range of the first control in the UI layout; The determining, according to the position of the anchor point of the first control on the first control and the first UI coordinate, the first target coordinate of the first control in the UI layout includes: The first target coordinates of the first control in the UI layout are determined according to the position of the anchor point of the first control on the first control, the moving boundary range of the first control in the UI layout, and the first UI coordinates.

6. The method according to claim 5, characterized in that Determining a first target coordinate of the first control in the UI layout according to a position of an anchor point of the first control on the first control, a moving boundary range of the first control in the UI layout, and the first UI coordinate includes: If the x value and the y value of the first UI coordinate are both within the moving boundary range, determining the first target coordinate of the first control in the UI layout according to the position of the anchor point of the first control on the first control and the first UI coordinate; or If the x value of the first UI coordinate is outside the moving boundary range and the y value of the first UI coordinate is within the moving boundary range, determining the x value of the first target coordinate of the first control in the UI layout according to the boundary x value closest to the x value of the first UI coordinate in the moving boundary range, and determining the y value of the first target coordinate of the first control in the UI layout according to the position of the anchor point of the first control on the first control and the y value of the first UI coordinate; If the y value of the first UI coordinate is outside the moving boundary range and the x value of the first UI coordinate is within the moving boundary range, the x value of the first target coordinate of the first control in the UI layout is determined according to the position of the anchor point of the first control on the first control and the x value of the first UI coordinate, and the y value of the first target coordinate of the first control in the UI layout is determined according to the boundary y value closest to the y value of the first UI coordinate in the moving boundary range; If the x value and y value of the first UI coordinate are both outside the moving boundary range, the x value of the first target coordinate of the first control in the UI layout is determined according to the boundary x value closest to the x value of the first UI coordinate in the moving boundary range, and the x value of the first target coordinate of the first control in the UI layout is determined according to the boundary y value closest to the y value of the first UI coordinate in the moving boundary range.

7. The method according to any one of claims 1 to 6, characterized in that: The converting the screen coordinates of the touch position corresponding to the frame into the first UI coordinates of the touch position corresponding to the frame under the UI layout in the UE engine includes: Converting the screen coordinates of the touch position corresponding to the frame into viewport coordinates according to a conversion relationship between the screen coordinate system of the mobile terminal and the viewport coordinate system; The viewport coordinates of the touch position corresponding to the frame are converted into the first UI coordinates according to a conversion relationship between the viewport coordinate system and a UI coordinate system corresponding to the UI layout in the UE engine.

8. A UI dragging device on a mobile terminal, characterized in that: include: an acquisition unit, configured to, when a drag operation acting on a first control displayed on a mobile terminal is detected, acquire the screen coordinates of the touch positions corresponding to the frames displayed on the mobile terminal within a life cycle of the drag operation; wherein the first control is a draggable control, and the life cycle is a process from the drag operation starting to contact the screen of the mobile terminal to leaving the screen of the mobile terminal; The processing unit is configured to execute, for each screen coordinate of a touch position corresponding to each frame displayed by the mobile terminal: Convert the screen coordinates of the touch position corresponding to the frame into the first UI coordinates of the touch position corresponding to the frame under the UI layout in the UE engine; Determine, according to the position of the anchor point of the first control on the first control and the first UI coordinates, a first target coordinate of the first control in the UI layout; According to the first target coordinates, the position coordinates of the first control in the frame displayed by the mobile terminal are set.

9. A computing device, characterized in that include: A memory for storing program instructions; A processor, configured to call the program instructions stored in the memory, and execute the method according to any one of claims 1 to 7 according to the obtained program.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer-executable instructions, and the computer-executable instructions are used to enable a computer to execute the method according to any one of claims 1 to 7.

Images