CN113805746B - Method and device for displaying cursor - Google Patents
Method and device for displaying cursorDownload PDFInfo
- Publication number
- CN113805746B CN113805746BCN202110927098.5ACN202110927098ACN113805746BCN 113805746 BCN113805746 BCN 113805746BCN 202110927098 ACN202110927098 ACN 202110927098ACN 113805746 BCN113805746 BCN 113805746B
- Authority
- CN
- China
- Prior art keywords
- cursor
- shape
- hot zone
- initial shape
- center position
- 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 OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/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 OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
- G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
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
Description
Translated fromChinese技术领域technical field
本申请涉及终端领域，具体涉及一种显示光标的方法和装置。The present application relates to the field of terminals, and in particular, to a method and apparatus for displaying a cursor.
背景技术Background technique
光标(cursor)是用户界面(user interface，UI)上的一种图标，用于指示用户当前关注的焦点。例如，当用户希望启动应用程序(application，APP)时，可以控制光标移动到该APP的图标上，随后进行双击操作，从而完成APP的启动。A cursor is an icon on a user interface (UI), which is used to indicate the current focus of the user. For example, when a user wishes to start an application (application, APP), the user can control the cursor to move on the icon of the APP, and then perform a double-click operation, thereby completing the startup of the APP.
发明内容SUMMARY OF THE INVENTION
本申请提供了一种显示光标的方法、装置、计算机可读存储介质和计算机程序产品，以提高光标变形显示效果，提升电子设备的交互体验。The present application provides a method, an apparatus, a computer-readable storage medium and a computer program product for displaying a cursor, so as to improve the display effect of cursor deformation and improve the interactive experience of an electronic device.
光标的形状多种多样，如箭头形、圆形、沙漏形、手指形等等。光标进入APP图标所在区域(即，热区)后，可以发生变形，提高用户的视觉体验。然而，变形后的光标如何显示是一个影响用户体验的问题，若在热区内随机显示变形后的光标，则可能造成光标卡顿的视觉假象。Cursors come in various shapes, such as arrows, circles, hourglasses, fingers, and more. After the cursor enters the area where the APP icon is located (ie, the hot zone), it can be deformed to improve the user's visual experience. However, how to display the deformed cursor is a problem that affects the user experience. If the deformed cursor is randomly displayed in the hot zone, it may cause a visual illusion that the cursor is stuck.
第一方面，提供了一种显示光标的方法，包括：获取光标的初始形状的中心位置；当所述初始形状的中心位置位于控件的热区内时，获取所述热区的中心位置；根据所述初始形状的中心位置和所述热区的中心位置显示所述光标的目标形状，其中，所述目标形状的中心位置和所述热区的中心位置的距离与所述初始形状的中心位置和所述热区的中心位置的距离正相关，并且，所述目标形状的中心位置位于所述初始形状的中心位置和所述热区的中心位置的连线上。In a first aspect, a method for displaying a cursor is provided, comprising: obtaining a center position of an initial shape of a cursor; when the center position of the initial shape is located within a hot zone of a control, obtaining the center position of the hot zone; according to The central position of the initial shape and the central position of the hot zone display the target shape of the cursor, wherein the distance between the central position of the target shape and the central position of the hot zone and the central position of the initial shape It is positively related to the distance from the center of the hot zone, and the center of the target shape is located on the line connecting the center of the initial shape and the center of the hot zone.
光标进入热区后，光标的形状会发生变化，由初始形状变为目标形状。虽然光标的初始形状消失，但光标的初始形状的中心位置始终存在，并且随着用户的控制不断移动。若初始形状的中心位置距离热区的中心位置较远，则终端设备可以在距离热区的中心位置较远的区域显示光标的目标形状；若初始形状的中心位置距离热区的中心位置较近，则终端设备可以在距离热区的中心位置较近的区域显示光标的目标形状。这样，光标在进入热区前与进入热区后的实际显示位置均以初始形状的中心位置为基准移动，能够避免变形带来的卡顿视觉假象，为用户提供丝滑的光标变形显示效果。After the cursor enters the hot zone, the shape of the cursor will change 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 is always there and is constantly moving with the user's control. If the center of the initial shape is far away from the center of the hotspot, the terminal device can display the target shape of the cursor in an area farther from the center of the hotspot; if the center of the initial shape is closer to the center of the hotspot , the terminal device can display the target shape of the cursor in an area closer to the center of the hot zone. In this way, the actual display position of the cursor before entering the hot zone and after entering the hot zone is moved based on the center position of the initial shape, which can avoid visual artifacts caused by deformation and provide users with a smooth cursor deformation display effect.
在一种实现方式中，所述根据所述初始形状的中心位置和所述热区的中心位置显示所述光标的目标形状，包括：根据display(x)＝center(x)+{[current(x)-center(x)]/(L/2)}*A确定所述目标形状的中心位置的横坐标，其中，所述display(x)为所述目标形状的中心位置的横坐标，所述center(x)为所述热区的中心位置的横坐标，所述current(x)为所述初始形状的中心位置的横坐标，所述L为所述热区的长度，所述A为预设值；根据display(y)＝center(y)+{[current(y)-center(y)]/(W/2)}*B确定所述目标形状的中心位置的纵坐标，其中，所述display(y)为所述目标形状的中心位置的纵坐标，所述center(y)为所述热区的中心位置的纵坐标，所述current(x)为所述初始形状的中心位置的纵坐标，所述W为所述热区的宽度，所述B为预设值；根据所述目标形状的中心位置的横坐标和所述目标形状的中心位置的纵坐标显示所述光标的目标形状。In an implementation manner, 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: according to display(x)=center(x)+{[current( x)-center(x)]/(L/2)}*A determines the abscissa of the center position of the target shape, wherein the display(x) is the abscissa of the center position of the target shape, so 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 the length of the hot zone, and the A is Default value; determine the ordinate of the 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, and the current(x) is the center position of the initial shape , the W is the width of the hot zone, and the B is a preset value; according to the abscissa of the center position of the target shape and the ordinate of the center position of the target shape, the position of the cursor is displayed target shape.
A限定了目标形状的中心位置在x轴上的移动范围，B限定了目标形状的中心位置在y轴上的移动范围，{[current(x)-center(x)]/(L/2)}*A和{[current(y)-center(y)]/(W/2)}*B共同限定了光标的目标形状的中心位置随着初始形状的中心位置与热区的中心位置的差距线性变化，从而为用户提供丝滑的光标变形显示效果。A defines the movement range of the center position of the target shape on the x-axis, B defines the movement range of the center position of the target shape on the y-axis, {[current(x)-center(x)]/(L/2) }*A and {[current(y)-center(y)]/(W/2)}*B together define the difference between the center position of the target shape of the cursor and the center position of the initial shape and the center position of the hot zone Linear changes, thus providing users with a smooth cursor deformation display effect.
在一种实现方式中，所述A和所述B的单位为设备独立像素(device independentpixels，dip)。In one implementation, the units of the A and the B are device independent pixels (dip).
dip也称为dp，是一种物理测量单位，能够使不同分辨率的屏幕显示的界面元素的尺寸保持一致。因此，使用dp定义目标形状的中心位置的移动范围，能够光标变形显示效果在不同分辨率的设备上保持一致。dip, also known as dp, is a physical unit of measurement that enables consistent dimensions of interface elements displayed on screens of different resolutions. Therefore, using dp to define the moving range of the center position of the target shape can keep the cursor deformation display effect consistent on devices with different resolutions.
在一种实现方式中，所述A和所述B的值均为4。In one implementation, the values of A and B are both 4.
长宽均为4dp的预设区域(目标形状的中心位置的移动范围)是一个面积较小的区域，能够使得热区内的光标在移动时产生轻微晃动效果，通过轻微的晃动效果提醒用户当前光标的焦点所在位置，同时避免剧烈晃动带来的较差的视觉体验。The preset area with a length and width of 4dp (the movement range of the center position of the target shape) is a small area, which can make the cursor in the hot zone shake slightly when moving, and remind the user of the current The focus position of the cursor, while avoiding the poor visual experience caused by violent shaking.
在一种实现方式中，所述初始形状为与所述热区的形状不同的形状，所述目标形状为所述热区的形状。In one implementation, the initial shape is a different shape from 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 hot zone, it is difficult for the user to distinguish the hot zone icon blocked by the cursor. Therefore, the shape of the target in this embodiment is consistent with the shape of the hot zone, which can avoid the degradation of user experience caused by the icon of the hot zone being blocked by the cursor.
在一种实现方式中，还包括：当所述初始形状的中心位置位于所述热区的边缘时，根据缩放因子、所述初始形状和所述目标形状绘制变形动画，其中，当所述初始形状的中心位置位于所述热区的外侧边缘时，所述变形动画的起始帧为所述初始形状，所述变形动画的结束帧为所述目标形状，所述缩放因子为所述初始形状和所述目标形状的尺寸比例；当所述初始形状的中心位置位于所述热区的内侧边缘时，所述变形动画的起始帧为所述目标形状，所述变形动画的结束帧为所述初始形状，所述缩放因子为所述目标形状和所述初始形状的尺寸比例；沿着所述初始形状的中心位置的移动轨迹播放所述变形动画。In an implementation manner, the method further includes: when the center position of the initial shape is located at the edge of the hot zone, drawing a deformation animation according to the scaling factor, the initial shape and the target shape, wherein when the initial shape is When the center of the shape is located at the outer edge of the hot zone, the starting frame of the deformation animation is the initial shape, the ending frame of the deformation animation is the target shape, and the scaling factor is the initial shape and the size ratio of the target shape; when the center position of the initial shape is located at the inner edge of the hot zone, the starting frame of the deformation animation is the target shape, and the end frame of the deformation animation is the the initial shape, the scaling factor is the size ratio of the target shape and the initial shape; the deformation animation is played along the movement track of the center position of the initial shape.
变形动画的起始帧与光标的位置存在关联关系，使得变形动画的起始帧始终与光标的当前形状保持一致，然后逐渐过渡到结束帧所对应的形状，从而带来丝滑的光标变形显示效果。The starting frame of the deformation animation is related to the position of the cursor, so that the starting frame of the deformation animation is always consistent with the current shape of the cursor, and then gradually transitions to the shape corresponding to the end frame, resulting in a smooth cursor deformation display Effect.
在一种实现方式中，所述绘制变形动画之前，所述方法还包括：通过光标事件处理模块从光标事件采集模块获取所述初始形状的中心位置；通过所述光标事件处理模块从可见窗口UI控件管理模块获取所述热区的位置、大小和形状；根据所述热区的位置、大小和形状确定所述初始形状的中心位置是否位于所述热区的边缘。In an implementation manner, before the drawing of the deformation animation, the method further includes: obtaining the center position of the initial shape from the cursor event acquisition module through the cursor event processing module; obtaining the center position of the initial shape from the visible window UI through the cursor event processing module The control management module obtains the position, size and shape of the hot zone; and determines whether the center position of the initial shape is located at the edge of the hot zone according to the position, size and shape of the hot zone.
可以根据热区的边缘与初始形状的中心位置是否重合确定初始形状的中心位置是否位于热区的边缘。若基于热区的位置、大小和形状确定初始形状的中心位置位于热区的边缘，则触发变形动画的绘制；若基于热区的位置、大小和形状确定初始形状的中心位置不在热区的边缘，则不触发变形动画的绘制。因此，本实施例可以使得光标的形状变化与功能(启动热区对应的控件的功能)变化保持一致，提高用户的体验。Whether the central 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 central position of the initial shape. If the center position of the initial shape is determined to be at the edge of the hot zone based on the position, size and shape of the hot zone, the drawing of the deformation animation is triggered; if the position, size and shape of the hot zone determine that the center of the initial shape is not at the edge of the hot zone , the drawing of the deformation animation is not triggered. Therefore, in this embodiment, the change of the shape of the cursor and the change of the function (the function of the control corresponding to the activation hot zone) can be kept consistent, thereby improving the user experience.
在一种实现方式中，所述可见窗口UI控件管理模块为输入管理服务(inputmanager service，IMS)中的模块，所述热区的位置、大小和形状为所述可见窗口UI控件管理模块从窗口管理服务(window manager service，WMS)中的窗口管理模块获取的。In an implementation manner, the visible window UI control management module is a module in an input management service (input manager service, IMS), and the location, size and shape of the hot zone are obtained from the visible window UI control management module from the window Obtained by the window management module in the window manager service (WMS).
在一种实现方式中，所述光标处理模块为IMS中的模块，或者，所述光标处理模块为所述控件所属的APP中的模块。In an implementation manner, the cursor processing module is a module in the IMS, or the cursor processing module is a module in the APP to which the control belongs.
在一种实现方式中，所述绘制变形动画，包括：通过光标事件处理模块调用光标变形绘制模块绘制所述变形动画；在播放所述变形动画之前，所述方法还包括：通过所述光标事件处理模块调用光标可见性控制模块隐藏所述光标的初始形状。In an implementation manner, the drawing deformation animation includes: calling a cursor deformation drawing module through a cursor event processing module to draw the deformation animation; before playing the deformation animation, the method further includes: using the cursor event The processing module invokes the cursor visibility control module to hide the initial shape of the cursor.
隐藏初始形状能够体现出光标形状渐变的效果，从而提高了用户体验。Hiding the initial shape can reflect the effect of the cursor shape gradient, thereby improving the user experience.
在一种实现方式中，所述光标变形绘制模块为IMS中的模块，或者，所述光标变形绘制模块为所述控件所属的APP中的模块。In an implementation manner, the cursor deformation drawing module is a module in the IMS, or the cursor deformation drawing module is a module in the APP to which the control belongs.
第二方面，提供了一种显示光标的装置，包括用于执行第一方面中任一种方法的单元。该装置可以是终端设备，也可以是终端设备内的芯片。该装置可以包括输入单元和处理单元。In a second aspect, there is provided an apparatus for displaying a cursor, comprising a unit for performing any one of the methods in the first aspect. The apparatus may 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 include a memory for storing computer program codes, and when the processor executes the memory stored in the memory When the computer program code is used, the terminal device is caused to execute any one of the methods in the first aspect.
当该装置是终端设备内的芯片时，该处理单元可以是芯片内部的处理单元，该输入单元可以是输出接口、管脚或电路等；该芯片还可以包括存储器，该存储器可以是该芯片内的存储器(例如，寄存器、缓存等)，也可以是位于该芯片外部的存储器(例如，只读存储器、随机存取存储器等)；该存储器用于存储计算机程序代码，当该处理器执行该存储器所存储的计算机程序代码时，使得该芯片执行第一方面的任一种方法。When the device 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 or a circuit, etc.; the chip may also include a memory, and the memory may be an internal memory of the chip. memory (for example, registers, cache, etc.), or memory located outside the chip (for example, read-only memory, random access memory, etc.); the memory is used to store computer program code, when the processor executes the memory The stored computer program code causes the chip to perform any one of the methods of the first aspect.
第三方面，提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序代码，当所述计算机程序代码被显示光标的装置运行时，使得该装置执行第一方面中的任一种方法。In a third aspect, a computer-readable storage medium is provided, and the computer-readable storage medium stores computer program codes, when the computer program codes are executed by an apparatus for displaying a cursor, the apparatus causes the apparatus to execute the method in the first aspect. either method.
第四方面，提供了一种计算机程序产品，所述计算机程序产品包括：计算机程序代码，当所述计算机程序代码被显示光标的装置运行时，使得该装置执行第一方面中的任一种方法。In a fourth aspect, a computer program product is provided, the computer program product comprising: computer program code, when the computer program code is executed by an apparatus for displaying a cursor, the apparatus causes the apparatus to perform any one of the methods in the first aspect .
附图说明Description of drawings
图1是一种适用于本申请的装置的硬件系统的示意图；1 is a schematic diagram of a hardware system suitable for the device of the present application;
图2是一种适用于本申请的装置的软件系统的示意图；2 is a schematic diagram of a software system suitable for the device of the present application;
图3是本申请提供的一种在笔记本电脑上显示光标的示意图；3 is a schematic diagram of displaying a cursor on a notebook computer provided by the present application;
图4是本申请提供的一种光标变形的示意图；4 is a schematic diagram of a cursor deformation provided by the present application;
图5是本申请提供的一种确定光标与热区的位置关系的系统的示意图；5 is a schematic diagram of a system for determining the positional relationship between a cursor and a hot zone provided by the present application;
图6是本申请提供的另一种确定光标与热区的位置关系的系统的示意图；6 is a schematic diagram of another system for determining the positional relationship between a cursor and a hot zone provided by the present application;
图7是本申请提供的一种在热区内的显示光标的方法的示意图；7 is a schematic diagram of a method for displaying a cursor in a hot zone provided by the present application;
图8是本申请提供的另一种在热区内的显示光标的方法的示意图；8 is a schematic diagram of another method for displaying a cursor in a hot zone provided by the present application;
图9是本申请提供的另一种在热区内的显示光标的方法的示意图；9 is a schematic diagram of another method for displaying a cursor in a hot zone provided by the present application;
图10是本申请提供的一种光标的目标形状的中心位置的可移动范围的示意图。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 ways
下面将结合附图，对本申请实施例中的技术方案进行描述。The technical solutions in the embodiments of the present application will be described below with reference to the accompanying drawings.
图1示出了一种适用于本申请的装置的硬件结构。FIG. 1 shows a hardware structure of a device suitable for this application.
装置100可以是手机、智慧屏、平板电脑、可穿戴电子设备、车载电子设备、增强现实(augmented reality，AR)设备、虚拟现实(virtual reality，VR)设备、笔记本电脑、超级移动个人计算机(ultra-mobile personal computer，UMPC)、上网本、个人数字助理(personal digital assistant，PDA)、投影仪等等，本申请实施例对装置100的具体类型不作任何限制。The device 100 can 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 (ultra mobile computer) -mobile personal computer, UMPC), netbook, personal digital assistant (personal digital assistant, PDA), projector, etc. The embodiment of the present application does not impose any limitation on the specific type of the device 100.
装置100可以包括处理器110，内部存储器121，传感器模块180，显示屏194等。其中传感器模块180可以包括触摸传感器180K等。The apparatus 100 may include a
需要说明的是，图1所示的结构并不构成对装置100的具体限定。在本申请另一些实施例中，装置100可以包括比图1所示的部件更多或更少的部件，或者，装置100可以包括图1所示的部件中某些部件的组合，或者，装置100可以包括图1所示的部件中某些部件的子部件。图1示的部件可以以硬件、软件、或软件和硬件的组合实现。It should be noted that the structure shown in FIG. 1 does not constitute a specific limitation on the device 100 . In other embodiments of the present application, the device 100 may include more or less components than those shown in FIG. 1 , or the device 100 may include a combination of some of the components shown in FIG. 1 , or the device 100 may include subcomponents 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.
处理器110可以包括一个或多个处理单元。例如，处理器110可以包括以下处理单元中的至少一个：应用处理器(application processor，AP)、调制解调处理器、图形处理器(graphics processing unit，GPU)、图像信号处理器(image signal processor，ISP)、控制器、视频编解码器、数字信号处理器(digital signal processor，DSP)、基带处理器、神经网络处理器(neural-network processing unit，NPU)。其中，不同的处理单元可以是独立的器件，也可以是集成的器件。
图1所示的各模块间的连接关系只是示意性说明，并不构成对装置100的各模块间的连接关系的限定。可选地，装置100的各模块也可以采用上述实施例中多种连接方式的组合。The connection relationship between the modules shown in FIG. 1 is only a schematic illustration, and does not constitute a limitation on the connection relationship between the modules of the device 100 . Optionally, each module of the apparatus 100 may also adopt a combination of various connection manners in the foregoing embodiments.
装置100可以通过GPU、显示屏194以及应用处理器实现显示功能。GPU为图像处理的微处理器，连接显示屏194和应用处理器。GPU用于执行数学和几何计算，用于图形渲染。处理器110可包括一个或多个GPU，其执行程序指令以生成或改变显示信息。The device 100 may implement a display function through the GPU, the display screen 194 and the application processor. The GPU is a microprocessor for image processing, and is connected to the display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering.
显示屏194可以用于显示图像或视频。显示屏194包括显示面板。显示面板可以采用液晶显示屏(liquid crystal display，LCD)、有机发光二极管(organic light-emitting diode，OLED)、有源矩阵有机发光二极体(active-matrix organic light-emitting diode，AMOLED)、柔性发光二极管(flex light-emitting diode，FLED)、迷你发光二极管(mini light-emitting diode，Mini LED)、微型发光二极管(micro light-emitting diode，Micro LED)、微型OLED(Micro OLED)或量子点发光二极管(quantum dotlight emitting diodes，QLED)。在一些实施例中，装置100可以包括1个或N个显示屏194，N为大于1的正整数。Display screen 194 may be used to display images or video. Display screen 194 includes a display panel. The display panel may adopt a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode (AMOLED), a flexible Light-emitting diode (flex light-emitting diode, FLED), mini light-emitting diode (mini light-emitting diode, Mini LED), micro light-emitting diode (micro light-emitting diode, Micro LED), micro OLED (Micro OLED) or quantum dot light-emitting Diodes (quantum dotlight emitting diodes, QLED). In some embodiments, the apparatus 100 may include 1 or N display screens 194, where N is a positive integer greater than 1.
触摸传感器180K，也称为触控器件。触摸传感器180K可以设置于显示屏194，由触摸传感器180K与显示屏194组成触摸屏，触摸屏也称为触控屏。触摸传感器180K用于检测作用于其上或其附近的触摸操作。触摸传感器180K可以将检测到的触摸操作传递给应用处理器，以确定触摸事件类型。可以通过显示屏194提供与触摸操作相关的视觉输出。在另一些实施例中，触摸传感器180K也可以设置于装置100的表面，并且与显示屏194设置于不同的位置。The touch sensor 180K is also called a touch device. The touch sensor 180K may be disposed on the display screen 194 , and a touch screen is formed by the touch sensor 180K and the display screen 194 , and the touch screen is also called a touch screen. The touch sensor 180K is used to detect a touch operation on or near it. The touch sensor 180K may pass the detected touch operation to the application processor to determine the type of touch event. Visual output related to touch operations may be provided through display screen 194 . In other embodiments, the touch sensor 180K may also be disposed on the surface of the device 100 and disposed at a different location from the display screen 194 .
上文详细描述了装置100的硬件系统，下面介绍装置100的软件系统。软件系统可以采用分层架构、事件驱动架构、微核架构、微服务架构或云架构，本申请实施例以分层架构为例，示例性地描述装置100的软件系统。The hardware system of the apparatus 100 is described in detail above, and the software system of the apparatus 100 is introduced below. The software system may adopt a layered architecture, an event-driven architecture, a microkernel architecture, a microservice architecture, or a cloud architecture. The embodiments of the present application take the layered architecture as an example to exemplarily describe the software system of the apparatus 100 .
如图2所示，采用分层架构的软件系统分成若干个层，每一层都有清晰的角色和分工。层与层之间通过软件接口通信。在一些实施例中，软件系统可以分为四层，从上至下分别为应用程序层、应用程序框架层、安卓运行时(Android Runtime)和系统库、以及内核层。As shown in Figure 2, a software system using a layered architecture is divided into several layers, and each layer has a clear role and division of labor. Layers communicate with each other through software interfaces. In some embodiments, the software system may be divided into four layers, which are, from top to bottom, an application layer, an application framework layer, an Android runtime (Android Runtime) and system libraries, and a kernel layer.
应用程序层可以包括相机、图库、日历、通话、地图、导航、WLAN、蓝牙、音乐、视频、闹钟等应用程序。The application layer can include applications such as camera, gallery, calendar, calling, maps, navigation, WLAN, Bluetooth, music, video, alarm clock, etc.
应用程序框架层为应用程序层的应用程序提供应用程序编程接口(applicationprogramming interface，API)和编程框架。应用程序框架层可以包括一些预定义的函数。The application framework layer provides an application programming interface (application programming interface, API) and a programming framework for the applications of the application layer. The application framework layer can include some predefined functions.
例如，应用程序框架层包括窗口管理器、活动管理器、输入管理器、资源管理器、通知管理器、视图系统和包管理器。For example, the application framework layer includes the window manager, activity manager, input manager, resource manager, notification manager, view system, and package manager.
窗口管理器提供窗口管理服务(window manager service，WMS)，WMS可以用于窗口管理、窗口动画管理、surface管理以及作为输入系统的中转站。窗口管理器还可以获取显示屏大小，判断是否有状态栏、锁定屏幕和截取屏幕。The window manager provides a window manager service (WMS), which can be used for window management, window animation management, surface management, and as a transit point for the input system. The window manager can also get the display size, determine whether there is a status bar, lock screen and screen capture.
活动管理器可以提供活动管理服务(activity manager service，AMS)，AMS可以用于系统组件(例如活动、服务、内容提供者、广播接收器)的启动、切换、调度以及应用进程的管理和调度工作。The activity manager can provide activity management services (activity manager service, AMS), AMS can be used for system components (such as activities, services, content providers, broadcast receivers) startup, switching, scheduling and application process management and scheduling work .
输入管理器可以提供输入管理服务(input manager service，IMS)，IMS可以用于管理系统的输入，例如触摸屏输入、按键输入、传感器输入等。IMS从输入设备节点取出事件，通过和WMS的交互，将事件分配至合适的窗口。The input manager may provide an input management service (input manager service, IMS), and the IMS may be used to manage the input of the system, such as touch screen input, key input, sensor input, and the like. IMS fetches events from input device nodes, and distributes events to appropriate windows through interaction with WMS.
资源管理器为应用程序提供各种资源，比如本地化字符串、图标、图片、布局文件和视频文件。The resource manager provides various resources for the application, such as localization strings, icons, pictures, layout files and video files.
通知管理器使应用程序可以在状态栏中显示通知消息，可以用于传达告知类型的消息，可以短暂停留后自动消失，无需用户交互。比如通知管理器被用于下载完成告知和消息提醒。通知管理器还可以管理以图表或者滚动条文本形式出现在系统顶部状态栏的通知，例如后台运行的应用程序的通知。通知管理器还可以管理以对话窗口形式出现在屏幕上的通知，例如在状态栏提示文本信息、发出提示音、电子设备振动以及指示灯闪烁。The notification manager enables applications to display notification messages in the status bar, which can be used to convey notification-type messages, and can disappear automatically after a brief pause without user interaction. For example, the notification manager is used for download completion notifications and message alerts. Notification Manager can also manage notifications that appear in the status bar at the top of the system as a graph or scroll bar text, such as notifications from applications running in the background. Notification Manager can also manage notifications that appear on the screen in the form of dialog windows, such as text messages in the status bar, beeps, vibrations of electronic devices, and blinking lights.
视图系统包括可视控件，例如显示文字的控件和显示图片的控件。视图系统可用于构建应用程序。显示界面可以由一个或多个视图组成，例如，包括短信通知图标的显示界面，可以包括显示文字的视图以及显示图片的视图。The view system includes visual controls, such as controls that display text and controls that display pictures. View systems can be used to build applications. The display interface may be composed of one or more views, for example, the display interface including the short message notification icon may include a view for displaying text and a view for displaying pictures.
系统库可以包括多个功能模块，例如：表面管理器(surface manager)，媒体库(Media Libraries)，三维图形处理库(例如：针对嵌入式系统的开放图形库(opengraphics library for embedded systems，OpenGL ES)和2D图形引擎(例如：skia图形库(skia graphics library，SGL))。The system library can include multiple functional modules, such as: surface manager (surface manager), media library (Media Libraries), three-dimensional graphics processing library (for example: opengraphics library for embedded systems (opengraphics library for embedded systems, OpenGL ES) ) and a 2D graphics engine (eg: skia graphics library (SGL)).
表面管理器用于对显示子系统进行管理，并且为多个应用程序提供了2D图层和3D图层的融合。The Surface Manager is used to manage the display subsystem and provides a fusion of 2D and 3D layers for multiple applications.
媒体库支持多种音频格式的回放和录制、多种视频格式回放和录制以及静态图像文件。媒体库可以支持多种音视频编码格式，例如:MPEG4、H.264、动态图像专家组音频层面3(moving picture experts group audio layer III，MP3)、高级音频编码(advancedaudio coding，AAC)、自适应多码率(adaptive multi-rate，AMR)、联合图像专家组(jointphotographic experts group，JPG)和便携式网络图形(portable network graphics，PNG)。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 can support a variety of audio and video coding formats, such as: MPEG4, H.264, moving picture experts group audio layer III (MP3), advanced audio coding (AAC), adaptive Multi-bit rate (adaptive multi-rate, AMR), joint photographic experts group (jointphotographic experts group, JPG) and portable network graphics (portable network graphics, PNG).
三维图形处理库可以用于实现三维图形绘图、图像渲染、合成和图层处理。The 3D graphics processing library can be used to implement 3D graphics drawing, image rendering, compositing and layer processing.
二维图形引擎是2D绘图的绘图引擎。A 2D graphics engine is a drawing engine for 2D drawing.
Android Runtime包括核心库和虚拟机。Android runtime负责安卓系统的调度和管理。Android Runtime includes core libraries and a virtual machine. The Android runtime is responsible for the scheduling and management of the Android system.
核心库包含两部分：一部分是java语言需要调用的功能函数，另一部分是安卓的核心库。The core library consists of two parts: one is the function functions that the java language needs to call, and the other is the core library of Android.
应用程序层和应用程序框架层运行在虚拟机中。虚拟机将应用程序层和应用程序框架层的java文件执行为二进制文件。虚拟机用于执行对象生命周期的管理、堆栈管理、线程管理、安全和异常的管理、以及垃圾回收等功能。The application layer and the application framework layer run in virtual machines. The virtual machine executes the java files of the application layer and the application framework layer as binary files. The virtual machine is used to perform functions such as object lifecycle management, stack management, thread management, safety and exception management, and garbage collection.
内核层是硬件和软件之间的层。内核层可以包括显示驱动、摄像头驱动、音频驱动、传感器驱动和定位驱动等驱动模块。The kernel layer is the layer between hardware and software. The kernel layer can include driver modules such as display driver, camera driver, audio driver, sensor driver and positioning driver.
下面结合显示界面场景，示例性说明装置100的软件系统和硬件系统的工作流程。The workflow of the software system and the hardware system of the apparatus 100 is exemplarily described below with reference to the display interface scenario.
当用户在触摸传感器180K上进行触摸操作时，相应的硬件中断被发送至内核层，内核层将触摸操作加工成原始输入事件，原始输入事件例如包括触摸坐标和触摸操作的时间戳等信息。原始输入事件被存储在内核层，应用程序框架层从内核层获取原始输入事件，识别出原始输入事件对应的控件，并通知该控件对应的应用程序(application，APP)。例如，上述触摸操作为单击操作，上述控件对应的APP为图库APP，图库APP被单击操作唤醒后，可以通过API调用内核层的显示驱动，通过显示驱动控制显示屏194显示图库APP的界面。When the 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 a raw input event. The raw input event includes, for example, touch coordinates and a timestamp of the touch operation. The original input event is stored in the kernel layer, and the application framework layer obtains the original input event from the kernel layer, identifies the control corresponding to the original input event, and notifies the application (application, APP) corresponding to the control. For example, the above-mentioned touch operation is a single-click operation, and the APP corresponding to the above-mentioned control is a gallery APP. After the gallery APP is awakened by the click operation, the display driver of the kernel layer can be called through the API, and the display screen 194 can be controlled to display the interface of the gallery APP through the display driver. .
图3是本申请提供的一种在笔记本电脑(装置100的一个示例)上显示光标和图库APP的示意图。笔记本电脑的屏幕上显示的内容包括图片、前进键图标和后退键图标，还包括一些系统图标，如左下角作的关机键图标。这些图标与各自的控件存在关联关系，用户通过鼠标或者触摸板控制光标移动到这些图标上之后，可以通过单击等操作触发图标对应的控件的功能。FIG. 3 is a schematic diagram of displaying a cursor and a gallery APP on a notebook computer (an example of the device 100 ) provided by the present application. The contents displayed on the screen of the notebook computer include pictures, icons of the forward and backward keys, and some system icons, such as the power-off button icon in the lower left corner. These icons are associated with their respective controls. After the user controls the cursor to move on these icons through a mouse or a touchpad, the functions of the controls corresponding to the icons can be triggered by operations such as clicking.
例如，当用户将光标移动到前进键图标上并执行单击操作时，触发前进控件执行前进处理，将当前图片切换为下一张图片；当用户将光标移动到后退键图标上并执行单击操作时，触发后退控件执行后退处理，将当前图片切换为前一张图片；当用户将光标移动到关机键图标上并执行单击操作时，触发关机控件执行关机。For example, when the user moves the cursor to the forward button icon and performs a click operation, the forward control is triggered to perform forward processing, switching the current picture to the next picture; when the user moves the cursor to the back button icon and performs a click During operation, trigger the back control to perform back processing, and switch the current picture to the previous picture; when the user moves the cursor to the shutdown button icon and performs a click operation, the shutdown control is triggered to perform shutdown.
上述示例中，每个控件均有一个对应的区域，称为热区，如图3中的虚线所示。前文所述的用户将光标移动到图标上即用户将光标移动到控件的热区内。In the above example, each control has a corresponding area, called a hot zone, as shown by the dotted line in Figure 3. As mentioned above, the user moves the cursor to the icon, that is, the user moves the cursor to the hot area of the control.
图3所示的热区形状随控件图标的形状变化而变化，如矩形控件图标的热区为矩形，圆形控件图标的热区为圆形，但适用于本申请的热区形状不限于此，矩形控件图标的热区也可以是圆形或其他形状，圆形控件图标的热区也可以是矩阵或其他形状。本申请对热区的形状不做限定。The shape of the hot zone shown in FIG. 3 changes with the shape of the control icon. For example, the hot zone of a rectangular control icon is a rectangle, and the hot zone of a circular control icon is a circle, but the shape of the hot zone applicable to the present application is not limited to this. , the hot area of the rectangular control icon can also be a circle or other shapes, and the hot area of the circular control icon can also be a matrix or other shapes. The present application does not limit the shape of the hot zone.
此外，本申请对热区的大小也不做限定，热区的面积可以大于控件图标的面积，也可以小于或者等于控件图标的面积。In addition, the application does not limit the size of the hot zone, and the area of the hot zone may be larger than the area of the control icon, and may also be smaller than or equal to the area of the control icon.
在光标从热区外部向热区内部移动的过程中，光标的形状可以发生变化，从而为用户提供丰富的视觉体验。As the cursor moves from outside the hot zone to inside the hot zone, the shape of the cursor can change to provide users with a rich visual experience.
图4示出了本申请提供的一种光标变形示意图。当光标位于热区左侧时，光标的形状为圆形；光标进入热区后，由圆形(初始形状)变为矩阵(目标形状)；当光标从热区退出时，又从矩形变为圆形。其中，光标的变形可以通过动画播放实现，动画由多个帧组成，相比于单帧变形过程的生硬，动画播放使得光标的变形过程更加流畅。FIG. 4 shows a schematic diagram of a cursor deformation provided by the present application. When the cursor is on the left side of the hot zone, the shape of the cursor is a circle; after the cursor enters the hot zone, it changes from a circle (initial shape) to a matrix (target shape); when the cursor exits from the hot zone, it changes from a rectangle to a matrix (target shape). round. Among them, the deformation of the cursor can be achieved through animation playback, and the animation is composed of multiple frames. Compared with the rigid deformation process of a single frame, animation playback makes the deformation process of the cursor smoother.
下面介绍本申请提供的光标变形的过程。The following describes the cursor deformation process provided by the present application.
笔记本电脑需要获取光标的当前位置和热区的位置、大小和形状，以便于确定光标与热区的相对位置。The laptop needs to obtain the current position of the cursor and the position, size and shape of the hotspot in order to determine the relative position of the cursor to the hotspot.
笔记本电脑可以通过图5所示的系统获取光标的当前位置和热区的位置、大小和形状。WMS中的窗口管理模块能够获取当前UI的布局信息，如热区的位置、大小和形状。窗口管理模块获取UI的布局信息后将该信息传递给IMS中的可见窗口UI控件管理模块，可见窗口UI控件管理模块将该信息缓存起来，供光标事件处理模块使用。The notebook computer can obtain 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 WMS can obtain the layout information of the current UI, such as the location, size and shape of the hotspot. After acquiring the UI layout information, the window management module transmits the information to the visible window UI control management module in the IMS, and the visible window UI control management module caches the information for use by the cursor event processing module.
当用户移动光标时，触发笔记本电脑生成光标移动事件，光标事件采集模块基于光标移动事件采集光标的当前位置，并将光标的当前位置传递给光标事件处理模块。光标事件处理模块收到光标的当前位置后，从可见窗口UI控件管理模块获取当前UI的布局信息，并根据光标的当前位置和当前UI的布局信息确定是否调用光标变形绘制模块绘制变形后的光标。When the user moves the cursor, the notebook computer is triggered to generate a cursor movement event, and the cursor event collection module collects 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. After the cursor event processing module receives the current position of the cursor, it obtains 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. .
例如，当光标的当前位置位于热区的外侧边缘时，光标事件处理模块确定光标即将进入热区，则光标事件处理模块调用光标变形绘制模块绘制图4所示的进入(HOVEREnter)动画；当光标的当前位置位于热区的内侧边缘时，光标事件处理模块确定光标即将移出热区，则光标事件处理模块调用光标变形绘制模块绘制图4所示的退出(HOVER Exit)动画。For example, when the current position of the cursor is at the outer edge of the hot zone, the cursor event processing module determines that the cursor is about to enter the hot zone, then the cursor event processing module calls the cursor deformation drawing module to draw the HOVEREnter animation shown in Figure 4; When the current position of the cursor is located at the inner edge of the hot zone, the cursor event processing module determines that the cursor is about to move out of the hot zone, and the cursor event processing module calls the cursor deformation drawing module to draw the HOVER Exit animation shown in Figure 4.
此外，光标事件处理模块还可以调用光标可见性控制模块，隐藏光标的初始形状(即，圆形)。In addition, the cursor event handling module can also call the cursor visibility control module to hide the initial shape (ie, circle) of the cursor.
笔记本电脑还可以通过图6所示的系统获取光标的当前位置和热区的位置、大小和形状。控件包含光标事件处理模块和光标变形绘制模块，光标事件处理模块能够从控件的缓存信息中获取该控件的热区的位置、大小和形状。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 includes a cursor event processing module and a cursor deformation drawing module, and the cursor event processing module can obtain the position, size and 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, and the cursor event collection module collects 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. After the cursor event processing module receives the current position of the cursor, it obtains the position, size and shape of the hot zone of the control from the cache information of the control, and determines it according to the current position of the cursor and the position, size and shape of the hot zone of the control Whether to call the cursor deformation drawing module to draw the deformed cursor.
例如，当光标的当前位置位于热区的外侧边缘时，光标事件处理模块确定光标即将进入热区，则光标事件处理模块调用光标变形绘制模块绘制图4所示的进入(HOVEREnter)动画；当光标的当前位置位于热区的内侧边缘时，光标事件处理模块确定光标即将移出热区，则光标事件处理模块调用光标变形绘制模块绘制图4所示的退出(HOVER Exit)动画。For example, when the current position of the cursor is at the outer edge of the hot zone, the cursor event processing module determines that the cursor is about to enter the hot zone, then the cursor event processing module calls the cursor deformation drawing module to draw the HOVEREnter animation shown in Figure 4; When the current position of the cursor is located at the inner edge of the hot zone, the cursor event processing module determines that the cursor is about to move out of the hot zone, and the cursor event processing module calls the cursor deformation drawing module to draw the HOVER Exit animation shown in Figure 4.
此外，光标事件处理模块还可以调用光标可见性控制模块，隐藏光标的初始形状(即，圆形)。图6所示的光标变形绘制模块也可以位于IMS中。In addition, the cursor event handling module can also call the cursor visibility control module to hide the initial shape (ie, circle) of the cursor. The cursor deformation drawing module shown in FIG. 6 may also be located in the IMS.
在图5和图6所示的光标变形过程中，光标事件处理模块可以在光标的边缘与热区的边缘重合时确定确定光标即将进入热区或即将移出热区，光标事件处理模块也可以在光标的中心位置距离热区的边缘小于或等于距离阈值时确定确定确定光标即将进入热区或即将移出热区。本申请对确定光标即将进入热区或即将移出热区的具体方式不做限定。In the cursor deformation process shown in FIG. 5 and FIG. 6 , the cursor event processing module can determine that the cursor is about to enter or move out of the hot zone when the edge of the cursor coincides with the edge of the hot zone, and the cursor event processing module can also When the center position of the cursor is less than or equal to the distance threshold from the edge of the hot zone, it is determined that the cursor is about to enter or move out of the hot zone. The present application does not limit the specific manner of determining that the cursor is about to enter or move out of the hot zone.
作为一个可选的示例，光标变形绘制模块可以根据公式(1)绘制光标的变形动画。As an optional example, the cursor deformation drawing module can draw the deformation animation of the cursor according to formula (1).
result＝from+((to-from)*scale) (1)；result=from+((to-from)*scale) (1);
其中，result表示光标的当前形状，from表示光标的起始帧的形状，to表示光标的结束帧的形状，scale表示缩放因子，即，起始帧的形状和结束帧的形状的尺寸比例。Among them, 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, that is, the size ratio of the shape of the starting frame and the shape of the ending frame.
上文详细介绍了光标进入和退出热区时的光标变形实施例，下面介绍光标进入热区后的显示方法。The cursor deformation embodiments when the cursor enters and exits the hot zone are described in detail above, and the display method after the cursor enters the hot zone is described below.
如图7所示，光标进入热区后，光标的形状会发生变化，由初始形状(圆形)变为目标形状(矩形或其他形状)。虽然光标的初始形状消失，但光标的初始形状的中心位置始终存在，并且随着用户的控制不断移动。图7中，坐标轴、虚线、中心位置和附图标记相关的内容均不会在屏幕上显示，光标的目标形状会在显示在屏幕上，在一些实施例中，热区的形状(如控件图标的形状)也会显示在屏幕上。As shown in Figure 7, after the cursor enters the hot zone, the shape of the cursor will change from the initial shape (circle) to the target shape (rectangle or other shapes). Although the initial shape of the cursor disappears, the center position of the initial shape of the cursor is always there and is constantly moving with the user's control. In FIG. 7, the content related to the coordinate axis, dotted line, center position and reference mark will not be displayed on the screen, and the target shape of the cursor will be displayed on the screen. In some embodiments, the shape of the hot zone (such as the control icon shape) is also displayed on the screen.
笔记本电脑可以先获取光标的初始形状的中心位置；当初始形状的中心位置位于控件的热区内时，再获取热区的中心位置；随后，根据初始形状的中心位置和热区的中心位置显示光标的目标形状。The notebook computer can first obtain the center position of the initial shape of the cursor; when the center position of the initial shape is located in the hot zone of the control, then obtain the central position of the hot zone; then, according to the central position of the initial shape and the central position of the hot zone, display The target shape of the cursor.
若初始形状的中心位置距离热区的中心位置较远，则笔记本电脑可以在距离热区的中心位置较远的区域显示光标的目标形状；若初始形状的中心位置距离热区的中心位置较近，则笔记本电脑可以在距离热区的中心位置较近的区域显示光标的目标形状。即，目标形状的中心位置和热区的中心位置的距离与初始形状的中心位置和热区的中心位置的距离正相关。If the center of the initial shape is farther from the center of the hotspot, the laptop can display the target shape of the cursor in an area farther from the center of the hotspot; if the center of the initial shape is closer to the center of the hotspot , the laptop can display the target shape of the cursor in an area closer to the center of the hotspot. 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 original shape and the center position of the hot zone.
此外，目标形状的中心位置位于初始形状的中心位置和热区的中心位置的连线上，这样，光标在进入热区前与进入热区后的实际显示位置均以初始形状的中心位置为基准移动，能够避免变形带来的卡顿视觉假象，为用户提供丝滑的光标变形显示效果。In addition, the center position of the target shape is located on the connecting line between the center position of the initial shape and the center position of the hot zone. In this way, the actual display position of the cursor before and after entering the hot zone is based on the central position of the initial shape. Moving, it can avoid the visual illusion caused by deformation, and provide users with a smooth cursor deformation display effect.
图8和图9示出了光标进入热区后的另外两种显示状态。Figures 8 and 9 show two other display states after the cursor enters the hot zone.
图8中，光标初始形状的中心位置和热区的中心位置重合，则光标目标形状的中心位置也与热区的中心位置重合。图9中，光标初始形状的中心位置位于热区的中心位置右侧，则光标目标形状的中心位置也位于热区的中心位置右侧，且位于初始形状的中心位置和热区的中心位置的连线上。光标的目标形状可以是与热区形状相同的形状，也可以是与热区形状不同的形状，本申请对光标的目标形状不做限定。In FIG. 8 , the center position of the initial shape of the cursor coincides with the center position of the hot area, and the center position of the target shape of the cursor also coincides with the center position of the hot area. In Figure 9, the center position of the initial shape of the cursor is located to the right of the center position of the hot zone, then the center position of the cursor target shape is also located to the right of the center position of the hot zone, and is located between the center position of the initial shape and the center position of the hot zone. online. The target shape of the cursor may be the same shape as the shape of the hot zone, or a shape different from the shape of the hot zone, and the present application does not limit the target shape of the cursor.
在一种可选的实现方式中，笔记本电脑可以根据公式(2)和公式(3)确定目标形状的中心位置，显示光标的目标形状。In an optional implementation manner, the notebook computer can 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(x)=center(x)+{[current(x)-center(x)]/(L/2)}*A (2);
display(y)＝center(y)+{[current(y)-center(y)]/(W/2)}*B (3)；display(y)=center(y)+{[current(y)-center(y)]/(W/2)}*B (3);
其中，display(x)为目标形状的中心位置的横坐标，center(x)为热区的中心位置的横坐标，current(x)为初始形状的中心位置的横坐标，L为所述热区的长度，A为预设值；display(y)为目标形状的中心位置的纵坐标，center(y)为热区的中心位置的纵坐标，current(x)为初始形状的中心位置的纵坐标，W为热区的宽度，B为预设值。Among them, 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 spot, current(x) is the abscissa of the center position of the initial shape, and L is the hot spot , A is the default 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, and current(x) is the ordinate of the center position of the initial shape , W is the width of the hot zone, and B is the preset value.
A限定了目标形状的中心位置在x轴上的移动范围，B限定了目标形状的中心位置在y轴上的移动范围，如图10所示。{[current(x)-center(x)]/(L/2)}*A和{[current(y)-center(y)]/(W/2)}*B共同限定了光标的目标形状的中心位置随着初始形状的中心位置与热区的中心位置的差距线性变化，从而为用户提供丝滑的光标变形显示效果。A defines the movement range of the center position of the target shape on the x-axis, and B defines the movement 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 together define the target shape of the cursor The center position of , changes linearly with the difference between the center position of the initial shape and the center position of the hot zone, thereby providing users with a smooth cursor deformation display effect.
在一种可选的实现方式中，A和B的单位为设备独立像素(device independentpixels，dip)。dip也称为dp，是一种物理测量单位，能够使不同分辨率的屏幕显示的界面元素的尺寸保持一致。因此，使用dp定义预设区域(目标形状的中心位置的移动范围)，能够光标变形显示效果在不同分辨率的设备上保持一致。In an optional implementation, the units of A and B are device independent pixels (dip). dip, also known as dp, is a physical unit of measurement that enables consistent dimensions of interface elements displayed on screens of different resolutions. Therefore, using dp to define the preset area (the moving range of the center position of the target shape), the cursor deformation display effect can be kept consistent on devices with different resolutions.
笔记本电脑可以根据dp和像素(pixel，px)的对照表确定该笔记本电脑对应的px值，例如，当笔记本电脑的屏幕分辨率为240×320时，1dp＝0.75px；当笔记本电脑的屏幕分辨率为320×480时，1dp＝1px；当笔记本电脑的屏幕分辨率为480×800时，1dp＝1.5px。The notebook computer can determine the px value corresponding to the notebook computer according to the comparison table of dp and pixels (pixel, px). For example, when the screen resolution of the notebook computer is 240×320, 1dp=0.75px; When the ratio is 320×480, 1dp=1px; when the screen resolution of the laptop is 480×800, 1dp=1.5px.
在一种可选的实现方式中，A和B的值均为4。长宽均为8dp的预设区域是一个面积较小的区域，能够使得热区内的光标在移动时产生轻微晃动效果，通过轻微的晃动效果提醒用户当前光标的焦点所在位置，同时避免剧烈晃动带来的较差的视觉体验。In an optional implementation, both A and B have a value of 4. The preset area with a length and width of 8dp is a small area, which can make the cursor in the hot zone shake slightly when moving, remind the user of the current focus of the cursor through the slight shaking effect, and avoid violent shaking. resulting in a poor visual experience.
本申请还提供了一种计算机程序产品，该计算机程序产品被处理器执行时实现本申请中任一方法实施例所述的方法。The present application also provides a computer program product, which implements the method described in any of the method embodiments in the present application when the computer program product is executed by the processor.
该计算机程序产品可以存储在存储器中，经过预处理、编译、汇编和链接等处理过程最终被转换为能够被处理器执行的可执行目标文件。The computer program product can be stored in the memory, and is finally converted into an executable object file that can be executed by the processor through processing processes such as preprocessing, compilation, assembly, and linking.
本申请还提供了一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被计算机执行时实现本申请中任一方法实施例所述的方法。该计算机程序可以是高级语言程序，也可以是可执行目标程序。The present application also provides a computer-readable storage medium on which a computer program is stored, and when the computer program is executed by a computer, implements the method described in any method embodiment of the present application. The computer program can be a high-level language program or an executable object program.
该计算机可读存储介质可以是易失性存储器或非易失性存储器，或者，可以同时包括易失性存储器和非易失性存储器。其中，非易失性存储器可以是只读存储器(read-only memory，ROM)、可编程只读存储器(programmable ROM，PROM)、可擦除可编程只读存储器(erasable PROM，EPROM)、电可擦除可编程只读存储器(electrically EPROM，EEPROM)或闪存。易失性存储器可以是随机存取存储器(random access memory，RAM)，其用作外部高速缓存。通过示例性但不是限制性说明，许多形式的RAM可用，例如静态随机存取存储器(static RAM，SRAM)、动态随机存取存储器(dynamic RAM，DRAM)、同步动态随机存取存储器(synchronous DRAM，SDRAM)、双倍数据速率同步动态随机存取存储器(double data rateSDRAM，DDR SDRAM)、增强型同步动态随机存取存储器(enhanced SDRAM，ESDRAM)、同步连接动态随机存取存储器(synchlink DRAM，SLDRAM)和直接内存总线随机存取存储器(directrambus RAM，DR RAM)。The computer-readable storage medium may be volatile memory or non-volatile memory, or may include both volatile memory and non-volatile memory. The non-volatile memory may be read-only memory (ROM), programmable read-only memory (PROM), erasable programmable read-only memory (EPROM), electrically programmable Erase programmable read-only memory (electrically EPROM, EEPROM) or flash memory. Volatile memory may be random access memory (RAM), which acts as an external cache. By way of example and not limitation, many forms of RAM are available, such as static random access memory (SRAM), dynamic random access memory (DRAM), synchronous DRAM, SDRAM), double data rate synchronous dynamic random access memory (double data rate SDRAM, DDR SDRAM), enhanced synchronous dynamic random access memory (enhanced SDRAM, ESDRAM), synchronous link dynamic random access memory (synchlink DRAM, SLDRAM) And direct memory bus random access memory (directrambus RAM, DR RAM).
本领域的技术人员可以清楚地了解到，为了描述的方便和简洁，上述描述的装置和设备的具体工作过程以及产生的技术效果，可以参考前述方法实施例中对应的过程和技术效果，在此不再赘述。Those skilled in the art can clearly understand that, for the convenience and brevity of the description, the specific working process of the above-described devices and equipment and the resulting technical effects can refer to the corresponding processes and technical effects in the foregoing method embodiments. No longer.
在本申请所提供的几个实施例中，所揭露的系统、装置和方法，可以通过其它的方式实现。例如，以上所描述的方法实施例的一些特征可以忽略，或不执行。以上所描述的装置实施例仅仅是示意性的，单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，多个单元或组件可以结合或者可以集成到另一个系统。另外，各单元之间的耦合或各个组件之间的耦合可以是直接耦合，也可以是间接耦合，上述耦合包括电的、机械的或其它形式的连接。In the several embodiments provided in this application, the disclosed systems, devices and methods may be implemented in other manners. For example, some features of the method embodiments described above may be omitted, or not implemented. The apparatus embodiments described above are only illustrative, and the division of units is only a logical function division. In actual implementation, there may be other division methods, and multiple units or components may be combined or integrated into another system. In addition, the coupling between the various units or the coupling between the various components may be direct coupling or indirect coupling, and the above-mentioned coupling includes electrical, mechanical or other forms of connection.
应理解，在本申请的各种实施例中，各过程的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本申请的实施例的实施过程构成任何限定。It should be understood that, in the various embodiments of the present application, the size of the sequence numbers of each process does not mean the sequence of execution, and the execution sequence of each process should be determined by its functions and inherent logic, rather than the embodiments of the present application. implementation constitutes any limitation.
另外，本文中术语“系统”和“网络”在本文中常被可互换使用。本文中的术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中字符“/”，一般表示前后关联对象是一种“或”的关系。Additionally, the terms "system" and "network" are often used interchangeably herein. The term "and/or" in this article is only an association relationship to describe the associated objects, indicating that there can be three kinds of relationships, for example, A and/or B, it can mean that A exists alone, A and B exist at the same time, independently There are three cases of B. In addition, the character "/" in this document generally indicates that the related objects are an "or" relationship.
总之，以上所述仅为本申请技术方案的较佳实施例而已，并非用于限定本申请的保护范围。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。In a word, the above descriptions are only preferred embodiments of the technical solutions of the present application, and are not intended to limit the protection scope of the present application. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of this application shall be included within the protection scope of this application.
Claims (11)
Translated fromChinesePriority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110927098.5ACN113805746B (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.5ACN113805746B (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 |
| CN113805746Btrue CN113805746B (en) | 2022-09-23 |
Family
ID=78893565
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110927098.5AActiveCN113805746B (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 | 英业达股份有限公司 | The method of using area judgment to process the effect of button highlight |
| 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 based on android platform and image display method thereof |
| CN109901902A (en)* | 2019-02-19 | 2019-06-18 | 广州视源电子科技股份有限公司 | Interface display method and 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-12CNCN202110927098.5Apatent/CN113805746B/enactiveActive
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1187652A (en)* | 1998-01-15 | 1998-07-15 | 英业达股份有限公司 | The method of using area judgment to process the effect of button highlight |
| 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 based on android platform and image display method thereof |
| CN109901902A (en)* | 2019-02-19 | 2019-06-18 | 广州视源电子科技股份有限公司 | Interface display method and device, computer equipment and storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113805746A (en) | 2021-12-17 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US20240220080A1 (en) | User interface for third party use of software development kit | |
| US10592090B2 (en) | Animations for scroll and zoom | |
| US11698822B2 (en) | Software development kit for image processing | |
| EP3111318B1 (en) | Cross-platform rendering engine | |
| US9317175B1 (en) | Integration of an independent three-dimensional rendering engine | |
| US8984448B2 (en) | Method of rendering a user interface | |
| US9196075B2 (en) | Animation of computer-generated display components of user interfaces and content items | |
| CN111625179A (en) | Graph drawing method, electronic device, and computer storage medium | |
| US10628909B2 (en) | Graphics processing unit resource dependency viewer | |
| CN108255546A (en) | A kind of implementation method and device of data loading animation | |
| US20250231531A1 (en) | Displaying background regions for time user interfaces | |
| WO2019052412A1 (en) | Method, device, and client for watermark-adding processing | |
| CN116051387A (en) | Dynamic image blurring method, terminal device, and computer-readable storage medium | |
| CN117724783A (en) | Dynamic effect display method and electronic equipment | |
| CN113805746B (en) | Method and device for displaying cursor | |
| CN115018692A (en) | Image rendering method and electronic equipment | |
| EP4332744A1 (en) | Control method and electronic device | |
| CN116719459A (en) | Display method of comment box, electronic device and readable storage medium | |
| US20180190004A1 (en) | Interactive and dynamically animated 3d fonts | |
| CN117915020A (en) | Method and device for video cropping | |
| CN119645282B (en) | Note content moving method, electronic device, storage medium and program product | |
| CN116974446B (en) | Animation effect display method and device | |
| US20250291469A1 (en) | Devices, systems, and methods for content board applications | |
| CN119556821A (en) | Display method, electronic device and storage medium | |
| CN116700535A (en) | Method for displaying floating bar based on note application, electronic device and 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 | ||
| CP03 | Change of name, title or address | Address after:Unit 3401, unit a, building 6, Shenye Zhongcheng, No. 8089, Hongli West Road, Donghai community, Xiangmihu street, Futian District, Shenzhen, Guangdong 518040 Patentee after:Honor Terminal Co.,Ltd. Country or region after:China Address before:3401, unit a, building 6, Shenye Zhongcheng, No. 8089, Hongli West Road, Donghai community, Xiangmihu street, Futian District, Shenzhen, Guangdong Patentee before:Honor Device Co.,Ltd. Country or region before:China | |
| CP03 | Change of name, title or address |