CN113805746B - Method and device for displaying cursor - Google Patents
Method and device for displaying cursor Download PDFInfo
- Publication number
- CN113805746B CN113805746B CN202110927098.5A CN202110927098A CN113805746B CN 113805746 B CN113805746 B CN 113805746B CN 202110927098 A CN202110927098 A CN 202110927098A CN 113805746 B CN113805746 B CN 113805746B
- Authority
- CN
- China
- Prior art keywords
- cursor
- shape
- center position
- initial shape
- module
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/04812—Interaction techniques based on cursor appearance or behaviour, e.g. being affected by the presence of displayed objects
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
- G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The application provides a method and a device for displaying a cursor. The method comprises the following steps: acquiring the central position of the initial shape of the cursor; when the central position of the initial shape is positioned in a hot area of a control, acquiring the central position of the hot area; and displaying a target shape of the cursor according to the central position of the initial shape and the central position of the hot area, wherein the distance between the central position of the target shape and the central position of the hot area is positively correlated with the distance between the central position of the initial shape and the central position of the hot area, and the central position of the target shape is positioned on a connecting line of the central position of the initial shape and the central position of the hot area. In the method, the actual display position of the cursor before and after entering the hot area moves by taking the central position of the initial shape as a reference, so that the stuck visual artifact caused by deformation can be avoided, and a smooth cursor deformation display effect is provided for a user.
Description
Technical Field
The application relates to the field of terminals, in particular to a method and a device for displaying a cursor.
Background
A cursor (cursor) is an icon on a User Interface (UI) for indicating the focus of the user's current attention. For example, when a user wishes to start an Application (APP), the cursor may be controlled to move to an icon of the APP, and then a double-click operation is performed, thereby completing the start of the APP.
Disclosure of Invention
The application provides a method and a device for displaying a cursor, a computer readable storage medium and a computer program product, which are used for improving the cursor deformation display effect and improving the interaction experience of electronic equipment.
The cursor may have various shapes, such as arrow, circular, hourglass, finger, etc. After the cursor enters the area (namely, the hot area) where the APP icon is located, deformation can occur, and the visual experience of a user is improved. However, how the deformed cursor is displayed is a problem affecting the user experience, and if the deformed cursor is randomly displayed in the hot area, a visual artifact of the cursor stuck may be caused.
In a first aspect, a method for displaying a cursor is provided, including: acquiring the central position of the initial shape of the cursor; when the central position of the initial shape is positioned in a hot area of a control, acquiring the central position of the hot area; and displaying a target shape of the cursor according to the central position of the initial shape and the central position of the hot area, wherein the distance between the central position of the target shape and the central position of the hot area is positively correlated with the distance between the central position of the initial shape and the central position of the hot area, and the central position of the target shape is positioned on a connecting line of the central position of the initial shape and the central position of the hot area.
After the cursor enters the hot area, the shape of the cursor changes from the initial shape to the target shape. Although the initial shape of the cursor disappears, the center position of the initial shape of the cursor always exists and is continuously moved along with the control of the user. If the center position of the initial shape is far away from the center position of the hot area, the terminal device can display the target shape of the cursor in a region far away from the center position of the hot area; if the center position of the initial shape is closer to the center position of the hot zone, the terminal device may display the target shape of the cursor in a region closer to the center position of the hot zone. Therefore, the actual display position of the cursor before and after entering the hot area moves by taking the central position of the initial shape as a reference, the blocking visual artifact caused by deformation can be avoided, and the smooth cursor deformation display effect is provided for the user.
In one implementation, the displaying the target shape of the cursor according to the center position of the initial shape and the center position of the hot zone includes: determining an abscissa of a center position of the target shape according to display (x) ((x) + { [ current (x))/(x) } a, wherein the display (x) is the abscissa of the center position of the target shape, the center (x) is the abscissa of the center position of the hot zone, the current (x) is the abscissa of the center position of the initial shape, the L is a length of the hot zone, and the a is a preset value; determining an ordinate of a center position of the target shape according to display (y) center (y) + { [ current (y) -center (y) }/(W/2) } B, wherein the display (y) is the ordinate of the center position of the target shape, the center (y) is the ordinate of the center position of the hot zone, the current (x) is the ordinate of the center position of the initial shape, the W is a width of the hot zone, and the B is a preset value; and displaying the target shape of the cursor according to the abscissa of the central position of the target shape and the ordinate of the central position of the target shape.
A defines the moving range of the center position of the target shape on the x axis, B defines the moving range of the center position of the target shape on the y axis, and { [ current (x) -center (x) } L/2) } A and { [ current (y) -center (y) } W/2) } B jointly define that the center position of the target shape of the cursor linearly changes along with the difference between the center position of the initial shape and the center position of the hot zone, thereby providing the cursor deformation display effect of silking for the user.
In one implementation, the unit of a and B is a device independent pixels (dip).
dip, also known as dp, is a physical unit of measure that enables the sizes of the interface elements displayed on the screens of different resolutions to be kept consistent. Therefore, defining the moving range of the center position of the target shape using dp, it is possible to keep the cursor deformation display effect uniform on devices of different resolutions.
In one implementation, the values of a and B are both 4.
The preset area (the moving range of the central position of the target shape) with the length and the width of 4dp is an area with a small area, so that a cursor in a hot area can generate a slight shaking effect when moving, a user is reminded of the position of the current focus of the cursor through the slight shaking effect, and poor visual experience caused by severe shaking is avoided.
In one implementation, the initial shape is a different shape than the shape of the hot zone and the target shape is the shape of the hot zone.
If the target shape is different from the hotspot, it is difficult for the user to distinguish the hotspot icon that is obscured by the cursor. Therefore, the target shape in this embodiment is consistent with the hot zone shape, and the reduction of user experience caused by the hot zone icon being blocked by the cursor can be avoided.
In one implementation, the method further comprises: when the center position of the initial shape is positioned at the edge of the hot area, drawing a deformation animation according to a scaling factor, the initial shape and the target shape, wherein when the center position of the initial shape is positioned at the outer edge of the hot area, the initial frame of the deformation animation is the initial shape, the end frame of the deformation animation is the target shape, and the scaling factor is the size proportion of the initial shape and the target shape; when the center position of the initial shape is positioned at the inner side edge of the hot area, the starting frame of the deformation animation is the target shape, the ending frame of the deformation animation is the initial shape, and the scaling factor is the size ratio of the target shape to the initial shape; and playing the deformation animation along the movement track of the central position of the initial shape.
The initial frame of the deformation animation is in an incidence relation with the position of the cursor, so that the initial frame of the deformation animation is always consistent with the current shape of the cursor, and then the initial frame of the deformation animation is gradually transited to the shape corresponding to the ending frame, and therefore the smooth cursor deformation display effect is achieved.
In one implementation, before the drawing the morphing animation, the method further comprises: acquiring the central position of the initial shape from a cursor event acquisition module through a cursor event processing module; acquiring the position, size and shape of the hot area from a visible window UI control management module through the cursor event processing module; and determining whether the center position of the initial shape is positioned at the edge of the hot area according to the position, the size and the shape of the hot area.
Whether the center position of the initial shape is located at the edge of the hot zone may be determined according to whether the edge of the hot zone coincides with the center position of the initial shape. If the central position of the initial shape is determined to be positioned at the edge of the hot area based on the position, the size and the shape of the hot area, triggering the drawing of the deformation animation; if the center position of the initial shape is determined not to be at the edge of the hot region based on the position, the size and the shape of the hot region, the drawing of the deformation animation is not triggered. Therefore, the shape change of the cursor and the function (the function of starting the control corresponding to the hot zone) change can be kept consistent, and the user experience is improved.
In an implementation manner, the visible window UI control management module is a module in an Input Manager Service (IMS), and the position, size, and shape of the hot zone are obtained by the visible window UI control management module from a window management module in a Window Manager Service (WMS).
In an implementation manner, the cursor processing module is a module in an IMS, or the cursor processing module is a module in an APP to which the control belongs.
In one implementation, the drawing a morphing animation includes: calling a cursor deformation drawing module to draw the deformation animation through a cursor event processing module; before playing the morphing animation, the method further comprises: and calling a cursor visibility control module through the cursor event processing module to hide the initial shape of the cursor.
Hiding the initial shape can embody the effect of the gradual change of the cursor shape, thereby improving the user experience.
In an implementation manner, the cursor deformation rendering module is a module in an IMS, or the cursor deformation rendering module is a module in an APP to which the control belongs.
In a second aspect, there is provided an apparatus for displaying a cursor, comprising means for performing any of the methods of the first aspect. The device can be a terminal device or a chip in the terminal device. The apparatus may include an input unit and a processing unit.
When the apparatus is a terminal device, the processing unit may be a processor, and the input unit may be a communication interface; the terminal device may further comprise a memory for storing computer program code which, when executed by the processor, causes the terminal device to perform any of the methods of the first aspect.
When the apparatus is a chip in a terminal device, the processing unit may be a processing unit inside the chip, and the input unit may be an output interface, a pin, a circuit, or the like; the chip may also include a memory, which may be a memory within the chip (e.g., registers, cache, etc.) or a memory external to the chip (e.g., read-only memory, random access memory, etc.); the memory is adapted to store computer program code which, when executed by the processor, causes the chip to perform any of the methods of the first aspect.
In a third aspect, there is provided a computer readable storage medium having stored thereon computer program code which, when run by an apparatus for displaying a cursor, causes the apparatus to perform any one of the methods of the first aspect.
In a fourth aspect, there is provided a computer program product comprising: computer program code which, when run by an apparatus displaying a cursor, causes the apparatus to perform any of the methods of the first aspect.
Drawings
FIG. 1 is a schematic diagram of a hardware system suitable for use in the apparatus of the present application;
FIG. 2 is a schematic diagram of a software system suitable for use in the apparatus of the present application;
FIG. 3 is a schematic diagram of a cursor displayed on a notebook computer according to the present application;
FIG. 4 is a schematic diagram of a cursor deformation provided by the present application;
FIG. 5 is a schematic diagram of a system for determining a position relationship of a cursor to a hot zone provided herein;
FIG. 6 is a schematic diagram of another system for determining a position relationship of a cursor to a hotspot provided by the present application;
FIG. 7 is a schematic illustration of a method of displaying a cursor within a hot zone provided herein;
FIG. 8 is a schematic illustration of another method of displaying a cursor within a hot zone provided by the present application;
FIG. 9 is a schematic illustration of another method of displaying a cursor within a hot zone provided herein;
fig. 10 is a schematic diagram of a movable range of a center position of a target shape of a cursor provided by the present application.
Detailed Description
The technical solutions in the embodiments of the present application will be described below with reference to the accompanying drawings.
Fig. 1 shows a hardware structure of an apparatus suitable for the present application.
The apparatus 100 may be a mobile phone, a smart screen, a tablet computer, a wearable electronic device, an in-vehicle electronic device, an Augmented Reality (AR) device, a Virtual Reality (VR) device, a notebook computer, an ultra-mobile personal computer (UMPC), a netbook, a Personal Digital Assistant (PDA), a projector, and the like, and the embodiment of the present application does not limit the specific type of the apparatus 100.
The apparatus 100 may include a processor 110, an internal memory 121, a sensor module 180, a display screen 194, and the like. Wherein the sensor module 180 may include a touch sensor 180K, etc.
The configuration shown in fig. 1 is not intended to specifically limit the apparatus 100. In other embodiments of the present application, the apparatus 100 may include more or fewer components than those shown in FIG. 1, or the apparatus 100 may include a combination of some of the components shown in FIG. 1, or the apparatus 100 may include sub-components of some of the components shown in FIG. 1. The components shown in fig. 1 may be implemented in hardware, software, or a combination of software and hardware.
The connection relationship between the modules shown in fig. 1 is merely illustrative and does not limit the connection relationship between the modules of the apparatus 100. Alternatively, the modules of the apparatus 100 may also adopt a combination of the connection manners in the above embodiments.
The device 100 may implement display functionality through the GPU, the display screen 194, and the application processor. The GPU is a microprocessor for image processing, connected to the display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. The processor 110 may include one or more GPUs that execute program instructions to generate or alter display information.
The display screen 194 may be used to display images or video. The display screen 194 includes a display panel. The display panel may be a Liquid Crystal Display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode (AMOLED), a flexible light-emitting diode (FLED), a Mini light-emitting diode (Mini LED), a Micro light-emitting diode (Micro LED), a Micro OLED (Micro OLED), or a quantum dot light-emitting diode (QLED). In some embodiments, the apparatus 100 may include 1 or N display screens 194, N being a positive integer greater than 1.
The touch sensor 180K is also referred to as a touch device. The touch sensor 180K may be disposed on the display screen 194, and the touch sensor 180K and the display screen 194 form a touch screen, which is also referred to as a touch screen. The touch sensor 180K is used to detect a touch operation applied thereto or in the vicinity thereof. The touch sensor 180K may pass the detected touch operation to the application processor to determine the touch event type. Visual output associated with the touch operation may be provided through the display screen 194. In other embodiments, the touch sensor 180K may be disposed on a surface of the device 100 at a different location than the display screen 194.
The hardware system of the apparatus 100 is described in detail above, and the software system of the apparatus 100 is described below. The software system may adopt a layered architecture, an event-driven architecture, a micro-core architecture, a micro-service architecture or a cloud architecture, and the software system of the apparatus 100 is exemplarily described in the embodiment of the present application by taking the layered architecture as an example.
As shown in fig. 2, the software system adopting the layered architecture is divided into a plurality of layers, and each layer has a clear role and division of labor. The layers communicate with each other through a software interface. In some embodiments, the software system may be divided into four layers, an application layer, an application framework layer, an Android Runtime (Android Runtime) and system library, and a kernel layer from top to bottom, respectively.
The application layer may include applications such as camera, gallery, calendar, phone, map, navigation, WLAN, bluetooth, music, video, alarm, etc.
The application framework layer provides an Application Programming Interface (API) and a programming framework for the application of the application layer. The application framework layer may include some predefined functions.
For example, the application framework layers include a window manager, an activity manager, an input manager, a resource manager, a notification manager, a view system, and a package manager.
The window manager provides a Window Manager Service (WMS), which may be used for window management, window animation management, surface management, and as a relay for an input system. The window manager can also obtain the size of the display screen and judge whether a status bar, a lock screen and a capture screen exist.
The campaign manager may provide a campaign manager service (AMS), which may be used for the start-up, switching, scheduling of system components (e.g., campaigns, services, content providers, broadcast receivers), and management and scheduling of application processes.
The input manager may provide an Input Manager Service (IMS) that may be used to manage inputs to the system, such as touch screen inputs, key inputs, sensor inputs, and the like. The IMS takes the event from the input device node and assigns the event to the appropriate window by interacting with the WMS.
The resource manager provides various resources for the application, such as localized strings, icons, pictures, layout files, and video files.
The notification manager enables the application to display notification messages in the status bar, can be used to convey notification-type messages, can disappear automatically after a brief dwell, and does not require user interaction. Such as notification managers, are used for download completion notifications and message reminders. The notification manager may also manage notifications that appear in a chart or scrollbar text form in a status bar at the top of the system, such as notifications for applications running in the background. The notification manager may also manage notifications that appear on the screen in dialog windows, such as prompting for text messages in a status bar, sounding a prompt tone, vibrating the electronic device, and flashing an indicator light.
The view system includes visual controls such as controls to display text and controls to display pictures. The view system may be used to build applications. The display interface may be composed of one or more views, for example, a display interface including a short message notification icon, which may include a view displaying text and a view displaying pictures.
The system library may include a plurality of functional modules, such as: surface managers (surface managers), Media Libraries (Media Libraries), three-dimensional graphics processing Libraries (e.g., open graphics library for embedded systems, OpenGL ES) and 2D graphics engines (e.g., Skin Graphics Library (SGL)) for embedded systems.
The surface manager is used for managing the display subsystem and providing fusion of the 2D layer and the 3D layer for a plurality of application programs.
The media library supports playback and recording of multiple audio formats, playback and recording of multiple video formats, and still image files. The media library may support a variety of audiovisual coding formats, such as MPEG4, h.264, moving picture experts group audio layer 3 (MP 3), Advanced Audio Coding (AAC), adaptive multi-rate (AMR), joint picture experts group (JPG), and Portable Network Graphics (PNG).
The three-dimensional graphics processing library may be used to implement three-dimensional graphics drawing, image rendering, compositing, and layer processing.
The two-dimensional graphics engine is a drawing engine for 2D drawing.
The Android Runtime comprises a core library and a virtual machine. The Android runtime is responsible for scheduling and managing an Android system.
The core library comprises two parts: one part is a function which needs to be called by java language, and the other part is a core library of android.
The application layer and the application framework layer run in a virtual machine. The virtual machine executes java files of the application layer and the application framework layer as binary files. The virtual machine is used to perform the functions of object lifecycle management, stack management, thread management, security and exception management, and garbage collection.
The kernel layer is a layer between hardware and software. The kernel layer can comprise driving modules such as a display driver, a camera driver, an audio driver, a sensor driver and a positioning driver.
The workflow of the software system and the hardware system of the apparatus 100 is exemplarily described below in conjunction with the display interface scenario.
When a user performs a touch operation on the touch sensor 180K, a corresponding hardware interrupt is sent to the kernel layer, and the kernel layer processes the touch operation into an original input event, where the original input event includes information such as touch coordinates and a timestamp of the touch operation. The original input event is stored in the kernel layer, and the application framework layer acquires the original input event from the kernel layer, identifies a control corresponding to the original input event, and notifies an Application (APP) corresponding to the control. For example, the touch operation is a click operation, the APP corresponding to the control is a gallery APP, and after the gallery APP is awakened by the click operation, the display driver of the kernel layer may be called through the API, and the display driver controls the display screen 194 to display the interface of the gallery APP.
Fig. 3 is a schematic diagram of displaying a cursor and a gallery APP on a notebook computer (an example of the apparatus 100) according to the present application. The content displayed on the screen of the notebook computer comprises pictures, forward key icons and backward key icons, and also comprises a plurality of system icons, such as a shutdown key icon which is arranged at the lower left corner. The icons and the respective controls have an association relationship, and after a user controls a cursor to move to the icons through a mouse or a touch panel, the functions of the controls corresponding to the icons can be triggered through clicking and other operations.
For example, when a user moves a cursor to a forward key icon and performs a single-click operation, a forward control is triggered to perform forward processing, and a current picture is switched to a next picture; when a user moves a cursor to a back key icon and executes a clicking operation, triggering a back control to execute back processing, and switching a current picture into a previous picture; and when the user moves the cursor to the shutdown key icon and executes single-click operation, triggering the shutdown control to execute shutdown.
In the above example, each control has a corresponding region, referred to as a hotspot, as shown by the dashed line in fig. 3. As previously described, the user moves the cursor over the icon, i.e., the user moves the cursor into the hotspot of the control.
The shape of the hot zone shown in fig. 3 varies with the shape of the control icon, for example, the hot zone of the rectangular control icon is rectangular, and the hot zone of the circular control icon is circular, but the shape of the hot zone applicable to the present application is not limited thereto, the hot zone of the rectangular control icon may also be circular or other shapes, and the hot zone of the circular control icon may also be in a matrix or other shapes. The shape of the hot zone is not limited by this application.
In addition, the size of the hot zone is not limited, and the area of the hot zone can be larger than that of the control icon or smaller than or equal to that of the control icon.
The shape of the cursor may change during the movement of the cursor from outside the hot zone to inside the hot zone, thereby providing a rich visual experience for the user.
Fig. 4 shows a schematic diagram of cursor deformation provided by the present application. When the cursor is positioned at the left side of the hot area, the shape of the cursor is a circle; after the cursor enters the hot area, the circular shape (initial shape) is changed into the matrix (target shape); when the cursor exits from the hot zone, it changes from a rectangular shape to a circular shape again. The deformation of the cursor can be realized through animation playing, the animation is composed of a plurality of frames, and compared with the rigidity of a single-frame deformation process, the deformation process of the cursor is smoother through the animation playing.
The process of cursor deformation provided by the present application is described below.
The notebook computer needs to obtain the current position of the cursor and the position, size and shape of the hot area in order to determine the relative position of the cursor and the hot area.
The notebook computer can acquire the current position of the cursor and the position, size and shape of the hot zone through the system shown in fig. 5. The window management module in the WMS can acquire layout information of the current UI, such as the location, size, and shape of the hot zone. And the window management module acquires the layout information of the UI and then transmits the information to a visible window UI control management module in the IMS, and the visible window UI control management module caches the information for the cursor event processing module to use.
When the user moves the cursor, the notebook computer is triggered to generate a cursor movement event, the cursor event acquisition module acquires the current position of the cursor based on the cursor movement event, and transmits the current position of the cursor to the cursor event processing module. And after receiving the current position of the cursor, the cursor event processing module acquires the layout information of the current UI from the visible window UI control management module, and determines whether to call the cursor deformation drawing module to draw the deformed cursor according to the current position of the cursor and the layout information of the current UI.
For example, when the current position of the cursor is located on the outer edge of the hot region, the cursor event processing module determines that the cursor is about to Enter the hot region, and then the cursor event processing module calls the cursor deformation drawing module to draw the Enter (HOVER Enter) animation shown in fig. 4; when the current position of the cursor is located at the inner side edge of the hot region, the cursor event processing module determines that the cursor is about to move out of the hot region, and then the cursor event processing module calls the cursor deformation drawing module to draw the Exit (HOVER Exit) animation shown in FIG. 4.
In addition, the cursor event processing module may also invoke the cursor visibility control module to hide the initial shape of the cursor (i.e., the circle).
The notebook computer can also obtain the current position of the cursor and the position, size and shape of the hot zone through the system shown in fig. 6. The control comprises a cursor event processing module and a cursor deformation drawing module, and the cursor event processing module can acquire the position, the size and the shape of the hot area of the control from the cache information of the control.
When the user moves the cursor, the notebook computer is triggered to generate a cursor movement event, the cursor event acquisition module acquires the current position of the cursor based on the cursor movement event and transmits the current position of the cursor to the cursor event processing module through the cursor event delivery module. And after receiving the current position of the cursor, the cursor event processing module acquires the position, the size and the shape of the hot area of the control from the cache information of the control, and determines whether to call the cursor deformation drawing module to draw the deformed cursor according to the current position of the cursor and the position, the size and the shape of the hot area of the control.
For example, when the current position of the cursor is located on the outer edge of the hot region, the cursor event processing module determines that the cursor is about to Enter the hot region, and then the cursor event processing module calls the cursor deformation drawing module to draw the Enter (HOVER Enter) animation shown in fig. 4; when the current position of the cursor is located at the inner side edge of the hot region, the cursor event processing module determines that the cursor is about to move out of the hot region, and then the cursor event processing module calls the cursor deformation drawing module to draw the Exit (HOVER Exit) animation shown in FIG. 4.
In addition, the cursor event processing module may also invoke the cursor visibility control module to hide the initial shape of the cursor (i.e., the circle). The cursor morphing rendering module shown in fig. 6 may also be located in the IMS.
In the cursor deformation process shown in fig. 5 and 6, the cursor event processing module may determine that the cursor is about to enter the hot region or move out of the hot region when the edge of the cursor coincides with the edge of the hot region, and may also determine that the cursor is about to enter the hot region or move out of the hot region when the center position of the cursor is less than or equal to a distance threshold from the edge of the hot region. The specific manner in which the cursor is determined to be about to enter or move out of the hot zone is not limited in this application.
As an alternative example, the cursor morphing rendering module may render a morphing animation of the cursor according to equation (1).
result＝from+((to-from)*scale) (1)；
Where result represents the current shape of the cursor, from represents the shape of the starting frame of the cursor, to represents the shape of the ending frame of the cursor, and scale represents the scaling factor, i.e., the size ratio of the shape of the starting frame and the shape of the ending frame.
The above describes the cursor deformation embodiments when the cursor enters and exits the hot area in detail, and the following describes the display method after the cursor enters the hot area.
As shown in fig. 7, after the cursor enters the hot zone, the shape of the cursor changes from the original shape (circular) to the target shape (rectangular or other shape). Although the initial shape of the cursor disappears, the center position of the initial shape of the cursor always exists and is continuously moved along with the control of the user. In fig. 7, the coordinate axis, the dotted line, the center position, and the reference mark-related content are not displayed on the screen, the target shape of the cursor is displayed on the screen, and in some embodiments, the shape of the hotspot (e.g., the shape of the control icon) is also displayed on the screen.
The notebook computer can firstly acquire the central position of the initial shape of the cursor; when the central position of the initial shape is positioned in the hot area of the control, the central position of the hot area is obtained; subsequently, the target shape of the cursor is displayed according to the center position of the initial shape and the center position of the hot zone.
If the center position of the initial shape is far away from the center position of the hot area, the notebook computer can display the target shape of the cursor in a region far away from the center position of the hot area; if the center position of the initial shape is closer to the center position of the hot zone, the notebook computer may display the target shape of the cursor in a region closer to the center position of the hot zone. That is, the distance between the center position of the target shape and the center position of the hot zone is positively correlated with the distance between the center position of the initial shape and the center position of the hot zone.
In addition, the center position of the target shape is positioned on a connecting line of the center position of the initial shape and the center position of the hot area, so that the actual display position of the cursor before entering the hot area and after entering the hot area moves by taking the center position of the initial shape as a reference, the clicking visual artifact caused by deformation can be avoided, and the smooth cursor deformation display effect is provided for a user.
Fig. 8 and 9 show two other display states after the cursor enters the hot zone.
In fig. 8, when the center position of the cursor initial shape coincides with the center position of the hot area, the center position of the cursor target shape also coincides with the center position of the hot area. In fig. 9, the center position of the cursor initial shape is located on the right side of the center position of the hot area, and the center position of the cursor target shape is also located on the right side of the center position of the hot area and located on the line connecting the center position of the initial shape and the center position of the hot area. The target shape of the cursor may be the same shape as the hot zone shape or a shape different from the hot zone shape, and the target shape of the cursor is not limited in the present application.
In an alternative implementation manner, the notebook computer may determine the center position of the target shape according to formula (2) and formula (3), and display the target shape of the cursor.
display(x)＝center(x)+{[current(x)-center(x)]/(L/2)}*A (2)；
display(y)＝center(y)+{[current(y)-center(y)]/(W/2)}*B (3)；
Wherein display (x) is the abscissa of the center position of the target shape, center (x) is the abscissa of the center position of the hot zone, current (x) is the abscissa of the center position of the initial shape, L is the length of the hot zone, and a is a preset value; display (y) is the ordinate of the center position of the target shape, center (y) is the ordinate of the center position of the hot zone, current (x) is the ordinate of the center position of the initial shape, W is the width of the hot zone, and B is a preset value.
A defines a moving range of the center position of the target shape on the x-axis, and B defines a moving range of the center position of the target shape on the y-axis, as shown in fig. 10. { [ current (x) -center (x) ]/(L/2) } a and { [ current (y) -center (y) ]/(W/2) } B collectively define that the center position of the target shape of the cursor linearly changes with the difference between the center position of the initial shape and the center position of the hot zone, thereby providing the user with a cursor deformation display effect of silking.
In an alternative implementation, a and B are in units of device independent pixels (dip). dip, also known as dp, is a physical unit of measure that enables the sizes of the interface elements displayed on the screens of different resolutions to be kept consistent. Therefore, by defining a preset region (a movement range of the center position of the target shape) using dp, the cursor deformation display effect can be kept uniform on devices of different resolutions.
The notebook computer may determine a px value corresponding to the notebook computer according to a lookup table of dp and pixels (px), for example, when the screen resolution of the notebook computer is 240 × 320, 1dp is 0.75 px; when the screen resolution of the notebook computer is 320 × 480, 1dp is 1 px; when the screen resolution of the notebook computer is 480 × 800, 1dp is 1.5 px.
In an alternative implementation, both a and B have a value of 4. The preset area with the length and the width of 8dp is an area with a small area, so that a cursor in a hot area can generate a slight shaking effect when moving, a user is reminded of the position of a focus of the current cursor through the slight shaking effect, and poor visual experience caused by severe shaking is avoided.
The present application also provides a computer program product which, when executed by a processor, implements the method of any of the method embodiments of the present application.
The computer program product may be stored in a memory and eventually transformed into an executable object file that can be executed by a processor via preprocessing, compiling, assembling and linking.
The present application also provides a computer-readable storage medium having stored thereon a computer program which, when executed by a computer, implements the method of any of the method embodiments of the present application. The computer program may be a high-level language program or an executable object program.
The computer readable storage medium may be volatile memory or nonvolatile memory, or may include both volatile and nonvolatile memory. The non-volatile memory may be a read-only memory (ROM), a Programmable ROM (PROM), an Erasable PROM (EPROM), an Electrically Erasable PROM (EEPROM), or a flash memory. Volatile memory can be Random Access Memory (RAM), which acts as external cache memory. By way of example, but not limitation, many forms of RAM are available, such as Static Random Access Memory (SRAM), Dynamic Random Access Memory (DRAM), Synchronous Dynamic Random Access Memory (SDRAM), double data rate SDRAM, enhanced SDRAM, SLDRAM, Synchronous Link DRAM (SLDRAM), and direct rambus RAM (DR RAM).
It can be clearly understood by those skilled in the art that, for convenience and brevity of description, the specific working processes and the generated technical effects of the above-described apparatuses and devices may refer to the corresponding processes and technical effects in the foregoing method embodiments, and are not described herein again.
In the several embodiments provided in the present application, the disclosed system, apparatus and method may be implemented in other ways. For example, some features of the method embodiments described above may be omitted, or not performed. The above-described embodiments of the apparatus are merely exemplary, the division of the unit is only one logical function division, and there may be other division ways in actual implementation, and a plurality of units or components may be combined or integrated into another system. In addition, the coupling between the units or the coupling between the components may be direct coupling or indirect coupling, and the coupling includes electrical, mechanical or other connections.
It should be understood that, in the various embodiments of the present application, the sequence numbers of the processes do not mean the execution sequence, and the execution sequence of the processes should be determined by the functions and the inherent logic, and should not constitute any limitation to the implementation process of the embodiments of the present application.
Additionally, the terms "system" and "network" are often used interchangeably herein. The term "and/or" herein is merely an association relationship describing an associated object, meaning that three relationships may exist, e.g., a and/or B, may mean: a exists alone, A and B exist simultaneously, and B exists alone. In addition, the character "/" herein generally indicates that the former and latter related objects are in an "or" relationship.
In short, the above description is only a preferred embodiment of the present disclosure, and is not intended to limit the scope of the present disclosure. Any modification, equivalent replacement, or improvement made within the spirit and principle of the present application shall be included in the protection scope of the present application.
Claims (11)
1. A method of displaying a cursor, comprising:
acquiring the central position of the initial shape of the cursor;
when the central position of the initial shape is positioned in a hot area of a control, acquiring the central position of the hot area;
displaying a target shape of the cursor according to the center position of the initial shape and the center position of the hot zone, wherein the distance between the center position of the target shape and the center position of the hot zone is positively correlated with the distance between the center position of the initial shape and the center position of the hot zone, and the center position of the target shape is located on a connecting line between the center position of the initial shape and the center position of the hot zone;
when the center position of the initial shape is positioned at the edge of the hot area, drawing a deformation animation according to a scaling factor, the initial shape and the target shape, wherein when the center position of the initial shape is positioned at the outer edge of the hot area, the initial frame of the deformation animation is the initial shape, the end frame of the deformation animation is the target shape, and the scaling factor is the size proportion of the initial shape and the target shape; when the center position of the initial shape is positioned at the inner side edge of the hot area, the starting frame of the deformation animation is the target shape, the ending frame of the deformation animation is the initial shape, and the scaling factor is the size ratio of the target shape to the initial shape;
and playing the deformation animation along the movement track of the central position of the initial shape.
2. The method of claim 1, wherein the displaying the target shape of the cursor according to the center position of the initial shape and the center position of the hot zone comprises:
determining an abscissa of a center position of the target shape according to display (x) ((x) + { [ current (x))/(x) } a, wherein the display (x) is the abscissa of the center position of the target shape, the center (x) is the abscissa of the center position of the hot zone, the current (x) is the abscissa of the center position of the initial shape, the L is a length of the hot zone, and the a is a preset value;
determining an ordinate of a center position of the target shape according to display (y) center (y) + { [ current (y) -center (y) }/(W/2) } B, wherein the display (y) is the ordinate of the center position of the target shape, the center (y) is the ordinate of the center position of the hot zone, the current (x) is the ordinate of the center position of the initial shape, the W is a width of the hot zone, and the B is a preset value;
and displaying the target shape of the cursor according to the abscissa of the central position of the target shape and the ordinate of the central position of the target shape.
3. The method of claim 2, wherein the units of a and B are device independent pixels.
4. The method of claim 3, wherein said A and said B both have a value of 4.
5. The method according to any of the claims 1 to 4, characterized in that the initial shape is a different shape than the shape of the hot zone and the target shape is the shape of the hot zone.
6. The method of any of claims 1-4, wherein prior to said drawing a morphing animation, the method further comprises:
acquiring the central position of the initial shape from a cursor event acquisition module through a cursor event processing module;
acquiring the position, size and shape of the hot area from a visible window UI control management module through the cursor event processing module;
and determining whether the center position of the initial shape is positioned at the edge of the hot area according to the position, the size and the shape of the hot area.
7. The method of claim 6, wherein the visible window UI control management module is a module in IMS, and wherein the location, size, and shape of the hot zone are obtained by the visible window UI control management module from a window management module in WMS.
8. The method of claim 6, wherein the cursor processing module is a module in an IMS, or wherein the cursor processing module is a module in an APP to which the control belongs.
9. The method according to any one of claims 1 to 4,
the drawing deformation animation comprises the following steps:
calling a cursor deformation drawing module to draw the deformation animation through a cursor event processing module;
before playing the morphing animation, the method further comprises:
and calling a cursor visibility control module through the cursor event processing module to hide the initial shape of the cursor.
10. The method of claim 9, wherein the cursor morphing rendering module is a module in an IMS, or wherein the cursor morphing rendering module is a module in an APP to which the control belongs.
11. An apparatus for displaying a cursor, comprising a processor and a memory, the processor and the memory being coupled, the memory for storing a computer program which, when executed by the processor, causes the apparatus to perform the method of any one of claims 1 to 10.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110927098.5A CN113805746B (en) | 2021-08-12 | 2021-08-12 | Method and device for displaying cursor |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110927098.5A CN113805746B (en) | 2021-08-12 | 2021-08-12 | Method and device for displaying cursor |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113805746A CN113805746A (en) | 2021-12-17 |
| CN113805746B true CN113805746B (en) | 2022-09-23 |
Family
ID=78893565
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110927098.5A Active CN113805746B (en) | 2021-08-12 | 2021-08-12 | Method and device for displaying cursor |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113805746B (en) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115185414B (en) * | 2022-07-26 | 2024-04-19 | Vidaa国际控股(荷兰)公司 | Display device and cursor control method |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1187652A (en) * | 1998-01-15 | 1998-07-15 | 英业达股份有限公司 | Method for determining and treating key high-spot effect by area |
| CN103782252A (en) * | 2011-06-29 | 2014-05-07 | 谷歌公司 | Systems and methods for controlling a cursor on a display using a trackpad input device |
| CN107589989A (en) * | 2017-09-14 | 2018-01-16 | 晨星半导体股份有限公司 | Display device and its method for displaying image based on Android platform |
| CN109901902A (en) * | 2019-02-19 | 2019-06-18 | 广州视源电子科技股份有限公司 | Interface display method, device, computer equipment and storage medium |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US9213422B2 (en) * | 2012-08-13 | 2015-12-15 | Google Inc. | Method of automatically moving a cursor within a map viewport and a device incorporating the method |
-
2021
- 2021-08-12 CN CN202110927098.5A patent/CN113805746B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1187652A (en) * | 1998-01-15 | 1998-07-15 | 英业达股份有限公司 | Method for determining and treating key high-spot effect by area |
| CN103782252A (en) * | 2011-06-29 | 2014-05-07 | 谷歌公司 | Systems and methods for controlling a cursor on a display using a trackpad input device |
| CN107589989A (en) * | 2017-09-14 | 2018-01-16 | 晨星半导体股份有限公司 | Display device and its method for displaying image based on Android platform |
| CN109901902A (en) * | 2019-02-19 | 2019-06-18 | 广州视源电子科技股份有限公司 | Interface display method, device, computer equipment and storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113805746A (en) | 2021-12-17 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| JP7476292B2 (en) | Method and system for managing and displaying virtual content in a mixed reality system - Patents.com | |
| CN110703978B (en) | Information display method, reader, and computer storage medium | |
| US11972090B2 (en) | Interface carousel for use with image processing software development kit | |
| EP3111318B1 (en) | Cross-platform rendering engine | |
| US11698822B2 (en) | Software development kit for image processing | |
| US20200409518A1 (en) | Page switching method and apparatus, and storage medium | |
| US20140201656A1 (en) | User interfaces | |
| CN108255546B (en) | Method and device for realizing data loading animation | |
| CN111625179A (en) | Graph drawing method, electronic device, and computer storage medium | |
| CN113778273B (en) | Light spot display method, electronic device and computer readable storage medium | |
| CN113805746B (en) | Method and device for displaying cursor | |
| US20190370927A1 (en) | Graphics Processing Unit Resource Dependency Viewer | |
| CN114995929B (en) | Popup window display method and device | |
| CN115640083A (en) | Screen refreshing method and equipment capable of improving dynamic performance | |
| US9483171B1 (en) | Low latency touch input rendering | |
| CN113934340B (en) | Terminal equipment and progress bar display method | |
| CN112667410A (en) | Cross-process communication method, terminal and computer readable storage medium | |
| CN116095250B (en) | Method and device for video cropping | |
| CN115699097B (en) | Software development kit for image processing | |
| CN116974446A (en) | Animation effect display method and device | |
| WO2022252788A1 (en) | Control method and electronic device | |
| Randhawa | User Interaction Optimization | |
| CN115904142A (en) | Method and device for displaying instant communication message | |
| CN116450066A (en) | Split screen display method, electronic device and readable storage medium | |
| CN116051387A (en) | Dynamic image blurring method, terminal device, and computer-readable storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |