CN113821137A - 基于触控位置的控件显示方法、系统、设备及存储介质 - Google Patents

基于触控位置的控件显示方法、系统、设备及存储介质 Download PDF

Info

Publication number
CN113821137A
CN113821137A CN202111108801.6A CN202111108801A CN113821137A CN 113821137 A CN113821137 A CN 113821137A CN 202111108801 A CN202111108801 A CN 202111108801A CN 113821137 A CN113821137 A CN 113821137A
Authority
CN
China
Prior art keywords
control
virtual
area
touch
virtual control
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.)
Pending
Application number
CN202111108801.6A
Other languages
English (en)
Inventor
付禹陶
顾佳璐
左邦阳
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Ctrip Computer Technology Shanghai Co Ltd
Original Assignee
Ctrip Computer Technology Shanghai Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Ctrip Computer Technology Shanghai Co Ltd filed Critical Ctrip Computer Technology Shanghai Co Ltd
Priority to CN202111108801.6A priority Critical patent/CN113821137A/zh
Publication of CN113821137A publication Critical patent/CN113821137A/zh
Pending legal-status Critical Current

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
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04847—Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0485—Scrolling or panning
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明提供了基于触控位置的控件显示方法、系统、设备及存储介质，该方法包括：检测用户的操作动作移动终端的屏幕生成的至少一触控区域；获得触控区域的中心，生成一环绕触控区域的环形区域作为虚拟控件区域；根据触控区域所覆盖的所有控件图标在虚拟控件区域生成一悬浮层，悬浮层设有至少一虚拟控件，虚拟控件沿虚拟控件区域的延展方向间隔排列，建立虚拟控件与控件图标的映射关系；以及当检测到用户的后续操作动作是否触发虚拟控件，则触发虚拟控件对应的控件图标的对应指令。本发明能够优化移动端的网页浏览体验，避免网页原始按键过小而造成触控错误的情况，提高用户操作的准确性。

Description

基于触控位置的控件显示方法、系统、设备及存储介质
技术领域
本发明涉及用户交互领域，具体地说，涉及基于触控位置的控件显示方法、系统、设备及存储介质。
背景技术
在日常前端活动页面的开发过程中，会遇到一些场景，需要基于用户的主动操作来向用户反馈一个带有相应文案的展示区域。在现有的生成展示区域的功能中，展示区域上可替换文案的绘制方法可分为两种：
第一种是分类收口式文案绘制，预先设定有限数量的类别并将每种类别最终反馈给用户的展示区域样式及内容唯一化，针对每种类别设计对应的展示区域并将内容信息静态嵌入到展示区域中，设定映射关系，将用户的无限种不同的操作最终收口到有限数量的展示区域中。
第二种是基于直线轨迹进行绘制，不需要提前约定文案的字数，可将无限种文案按照直线轨迹绘制在展示区域上，同时可以针对整体文案进行旋转角度的操作，以适应一些不同场景的需要。
在上述两种方法中：
第一种方法几乎不具有多样性且普适性较差，将展示区域局限在图片格式，所能反馈给用户的展示区域只能匹配很有限的几种情况，需要提前准备大量的图片备用，而这些图片的相似度很高，且每张图所能起到的作用也非常有限，只能针对某一个特定的情况下使用，不具有普适性，且在设计和生成这些图片时需要消耗大量的人力，同时，在图片与场景做匹配时，也需要消耗很多人力去做匹配和校对。
第二种方法具有比较广泛的普适，即使文案的文字数量不同也可以使用同一套绘制方法，但其多样性依然受到了较大的限制，仅能实现直线轨迹的文案展示，在向用户反馈展示区域这类主体性强、样式复杂且灵活多变的功能中，仅直线绘制文案无法很好地匹配展示区域的特性，往往会束缚设计者对展示区域样式和内容的灵感输出，有可能在一定程度上限制展示区域主题的体现，并最终影响用户体验。
而且，在目前网页基本是基于PC端进行开发的，在移动终端上显示网页时，如果该网页(大公司的网页)已经经过了移动端版本的优化，则都可以合适地显示于移动终端；而遇得没有进行优化的网页时，则会因为格式、比例等问题出现布局混乱的情况，尤其是网页的控件位置会因为占据的像素范围过小、相邻控件之间的间距过小而难以准确操作。
因此，本发明提供了一种基于触控位置的控件显示方法、系统、设备及存储介质。
发明内容
针对现有技术中的问题，本发明的目的在于提供基于触控位置的控件显示方法、系统、设备及存储介质，克服了现有技术的困难，能够优化移动端的网页浏览体验，避免网页原始按键过小而造成触控错误的情况，提高用户操作的准确性。
本发明的实施例提供一种基于触控位置的控件显示方法，包括以下步骤：
检测用户的操作动作移动终端的屏幕生成的至少一触控区域；
获得所述触控区域的中心，生成一环绕所述触控区域的环形区域作为虚拟控件区域；
根据所述触控区域所覆盖的所有控件图标在所述虚拟控件区域生成一悬浮层，所述悬浮层设有至少一虚拟控件，所述虚拟控件沿所述虚拟控件区域的延展方向间隔排列，建立所述虚拟控件与所述控件图标的映射关系；以及
当检测到用户的后续操作动作是否触发所述虚拟控件，则触发所述虚拟控件对应的控件图标的对应指令。
优选地，所述获得所述触控区域的中心，生成一环绕所述触控区域的环形区域作为虚拟控件区域之后、所述根据所述触控区域所覆盖的所有控件图标在所述虚拟控件区域生成一悬浮层，所述悬浮层设有至少一虚拟控件，所述虚拟控件沿所述虚拟控件区域的延展方向间隔排列，建立所述虚拟控件与所述控件图标的映射关系之前还包括以下步骤：
自所述环形区域中保留与屏幕显示区域相互重叠的部分作为虚拟控件区域。
优选地，所述获得所述触控区域的中心，生成一环绕所述触控区域的环形区域作为虚拟控件区域，包括以下步骤：
根据所述触控区域生成一个外接圆；
获得的所述外接圆的圆心作为所述触控区域的中心；
基于所述触控区域的中心生成一个环形区域作为虚拟控件区域，所述环形区域的内径R1大于等于所述外接圆的半径Rc，所述环形区域的外径R2为所述环形区域的内径R1与预设半径差R△的和。
优选地，所述根据所述触控区域所覆盖的所有控件图标在所述虚拟控件区域生成一悬浮层，所述悬浮层设有至少一虚拟控件，所述虚拟控件沿所述虚拟控件区域的延展方向间隔排列，建立所述虚拟控件与所述控件图标的映射关系，包括以下步骤：
根据所述触控区域所覆盖的所有控件图标在所述虚拟控件区域生成一悬浮层；
所述悬浮层设有至少一虚拟控件，所述虚拟控件沿所述虚拟控件区域的延展方向间隔排列，所述悬浮层中的虚拟控件的数量与所述悬浮层对应的所述触控区域所覆盖的所述控件图标的数量相同，所述控件图标的图标图案作为与所述控件图标相对应的所述虚拟控件的图标图片；以及
建立所述虚拟控件与所述控件图标的映射关系。
优选地，所述虚拟控件的弧形外周与所述环形区域的外周的局部重合，所述虚拟控件的弧形内周与所述环形区域的内周的局部重合，相近的所述虚拟控件之间的间距相等。
优选地，所述检测用户的操作动作移动终端的屏幕生成的至少一触控区域中，所述用户的操作动作为以下中的一种：
持续按压；
单次点击；
双击。
优选地，所述当检测到用户的后续操作动作是否触发所述虚拟控件，则触发所述虚拟控件对应的控件图标的对应指令中，所述用户的后续操作动作为以下中的一种：
自所述触控区域向沿径向滑动至一所述虚拟控件；
自所述触控区域向沿径向滑动至一所述虚拟控件后释放；
单次点击一所述虚拟控件；
持续按压一所述虚拟控件；以及
双击一所述虚拟控件。
优选地，检测用户按压力度，随按压力度的增加，所述虚拟控件区域以及所述虚拟控件所占的显示区域增大。
本发明的实施例还提供一种基于触控位置的控件显示系统，用于实现上述的基于触控位置的控件显示方法，所述基于触控位置的控件显示系统包括：
区域检测模块，检测用户的操作动作移动终端的屏幕生成的至少一触控区域；
控件区域模块，获得所述触控区域的中心，生成一环绕所述触控区域的环形区域作为虚拟控件区域；
虚拟空间模块，根据所述触控区域所覆盖的所有控件图标在所述虚拟控件区域生成一悬浮层，所述悬浮层设有至少一虚拟控件，所述虚拟控件沿所述虚拟控件区域的延展方向间隔排列，建立所述虚拟控件与所述控件图标的映射关系；以及
指令触发模块，当检测到用户的后续操作动作是否触发所述虚拟控件，则触发所述虚拟控件对应的控件图标的对应指令。
本发明的实施例还提供一种基于触控位置的控件显示设备，包括：
处理器；
存储器，其中存储有所述处理器的可执行指令；
其中，所述处理器配置为经由执行所述可执行指令来执行上述基于触控位置的控件显示方法的步骤。
本发明的实施例还提供一种计算机可读存储介质，用于存储程序，所述程序被执行时实现上述基于触控位置的控件显示方法的步骤。
本发明的目的在于提供基于触控位置的控件显示方法、系统、设备及存储介质，能够优化移动端的网页浏览体验，避免网页原始按键过小而造成触控错误的情况，提高用户操作的准确性。
附图说明
通过阅读参照以下附图对非限制性实施例所作的详细描述，本发明的其它特征、目的和优点将会变得更明显。
图1是本发明的基于触控位置的控件显示方法的流程图。
图2至7是本发明的基于触控位置的控件显示方法实施过程的界面示意图。
图8是本发明的基于触控位置的控件显示系统的模块示意图。
图9是本发明的基于触控位置的控件显示设备的结构示意图。
图10是本发明一实施例的计算机可读存储介质的结构示意图。
具体实施方式
以下通过特定的具体实例说明本申请的实施方式，本领域技术人员可由本申请所揭露的内容轻易地了解本申请的其他优点与功效。本申请还可以通过另外不同的具体实施方式加以实施或应用系统，本申请中的各项细节也可以根据不同观点与应用系统，在没有背离本申请的精神下进行各种修饰或改变。需说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。
下面以附图为参考，针对本申请的实施例进行详细说明，以便本申请所属技术领域的技术人员能够容易地实施。本申请可以以多种不同形态体现，并不限定于此处说明的实施例。
在本申请的表示中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的表示意指结合该实施例或示例表示的具体特征、结构、材料或者特点包括于本申请的至少一个实施例或示例中。而且，表示的具体特征、结构、材料或者特点可以在任一个或多个实施例或示例中以合适的方式结合。此外，在不相互矛盾的情况下，本领域的技术人员可以将本申请中表示的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。
此外，术语“第一”、“第二”仅用于表示目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或隐含地包括至少一个该特征。在本申请的表示中，“多个”的含义是两个或两个以上，除非另有明确具体的限定。
为了明确说明本申请，省略与说明无关的器件，对于通篇说明书中相同或类似的构成要素，赋予了相同的参照符号。
在通篇说明书中，当说某器件与另一器件“连接”时，这不仅包括“直接连接”的情形，也包括在其中间把其它元件置于其间而“间接连接”的情形。另外，当说某种器件“包括”某种构成要素时，只要没有特别相反的记载，则并非将其它构成要素排除在外，而是意味着可以还包括其它构成要素。
当说某器件在另一器件“之上”时，这可以是直接在另一器件之上，但也可以在其之间伴随着其它器件。当对照地说某器件“直接”在另一器件“之上”时，其之间不伴随其它器件。
虽然在一些实例中术语第一、第二等在本文中用来表示各种元件，但是这些元件不应当被这些术语限制。这些术语仅用来将一个元件与另一个元件进行区分。例如，第一接口及第二接口等表示。再者，如同在本文中所使用的，单数形式“一”、“一个”和“该”旨在也包括复数形式，除非上下文中有相反的指示。应当进一步理解，术语“包含”、“包括”表明存在的特征、步骤、操作、元件、组件、项目、种类、和/或组，但不排除一个或多个其他特征、步骤、操作、元件、组件、项目、种类、和/或组的存在、出现或添加。此处使用的术语“或”和“和/或”被解释为包括性的，或意味着任一个或任何组合。因此，“A、B或C”或者“A、B和/或C”意味着“以下任一个：A；B；C；A和B；A和C；B和C；A、B和C”。仅当元件、功能、步骤或操作的组合在某些方式下内在地互相排斥时，才会出现该定义的例外。
此处使用的专业术语只用于言及特定实施例，并非意在限定本申请。此处使用的单数形态，只要语句未明确表示出与之相反的意义，那么还包括复数形态。在说明书中使用的“包括”的意义是把特定特性、区域、整数、步骤、作业、要素及/或成份具体化，并非排除其它特性、区域、整数、步骤、作业、要素及/或成份的存在或附加。
虽然未不同地定义，但包括此处使用的技术术语及科学术语，所有术语均具有与本申请所属技术领域的技术人员一般理解的意义相同的意义。普通使用的字典中定义的术语追加解释为具有与相关技术文献和当前提示的内容相符的意义，只要未进行定义，不得过度解释为理想的或非常公式性的意义。
图1是本发明的基于触控位置的控件显示方法的流程图。如图1所示，本发明的实施例提供一种基于触控位置的控件显示方法，包括以下步骤：
S110、检测用户的操作动作移动终端的屏幕生成的至少一触控区域。
S120、获得触控区域的中心，生成一环绕触控区域的环形区域作为虚拟控件区域。
S140、根据触控区域所覆盖的所有控件图标在虚拟控件区域生成一悬浮层，悬浮层设有至少一虚拟控件，虚拟控件沿虚拟控件区域的延展方向间隔排列，建立虚拟控件与控件图标的映射关系。以及
S150、当检测到用户的后续操作动作是否触发虚拟控件，则触发虚拟控件对应的控件图标的对应指令。
在一个优选实施例中，步骤S120之后、步骤S140之前还包括以下步骤：S130、自环形区域中保留与屏幕显示区域相互重叠的部分作为虚拟控件区域，但不以此为限。
在一个优选实施例中，步骤S120中，包括以下步骤：
S121、根据触控区域生成一个外接圆。
S122、获得的外接圆的圆心作为触控区域的中心。
S123、基于触控区域的中心生成一个环形区域作为虚拟控件区域，环形区域的内径R1大于等于外接圆的半径Rc，环形区域的外径R2为环形区域的内径R1与预设半径差R△的和(R1+R△)，但不以此为限。
在一个优选实施例中，步骤S140中，包括以下步骤：
S141、根据触控区域所覆盖的所有控件图标在虚拟控件区域生成一悬浮层。
S142、悬浮层设有至少一虚拟控件，虚拟控件沿虚拟控件区域的延展方向间隔排列，悬浮层中的虚拟控件的数量与悬浮层对应的触控区域所覆盖的控件图标的数量相同，控件图标的图标图案作为与控件图标相对应的虚拟控件的图标图片。以及
S143、建立虚拟控件与控件图标的映射关系，但不以此为限。
在一个优选实施例中，步骤S142中，虚拟控件的弧形外周与环形区域的外周的局部重合，虚拟控件的弧形内周与环形区域的内周的局部重合，相近的虚拟控件之间的间距相等，但不以此为限。
在一个优选实施例中，步骤S110中，用户的操作动作为以下中的一种：
(1)持续按压。
(2)单次点击。
(3)双击，但不以此为限。
在一个优选实施例中，步骤S150中，用户的后续操作动作为以下中的一种：
(1)自触控区域向沿径向滑动至一虚拟控件。
(2)自触控区域向沿径向滑动至一虚拟控件后释放。
(3)单次点击一虚拟控件。
(4)持续按压一虚拟控件。以及
(5)双击一虚拟控件，但不以此为限。
在一个优选实施例中，检测用户按压力度，随按压力度的增加，虚拟控件区域以及虚拟控件所占的显示区域增大。
图2至7是本发明的基于触控位置的控件显示方法实施过程的界面示意图。如图2所示，在移动终端1显示的原始网页中，右上角有三个很小的控件按钮15、16、17。由于，控件按钮15、16、17所占的区域非常小，远远小于常规触控操作下手指与屏幕接触的面积，所以，用户很难通过手指准确的点击其中的一个件按钮(例如：控件按钮17)。
如图3所示，检测用户的持续按压移动终端的屏幕生成的至少一触控区域12。获得触控区域12的中心，生成一环绕触控区域12的环形区域作为虚拟控件区域。根据触控区域12生成一个外接圆(图中未示出)，获得的外接圆的圆心作为触控区域12的中心，基于触控区域12的中心生成一个环形区域作为虚拟控件区域，环形区域具有外周25和内周26，环形区域的内径R1大于等于外接圆的半径Rc，环形区域的外径R2为环形区域的内径R1与预设半径差R△的和(R1+R△)。自环形区域中保留与屏幕显示区域相互重叠的部分作为虚拟控件区域。由于触控区域12位于屏幕边缘，去除不在屏幕范围内的环形区域，所以通过区域检测后，仅保留屏幕上位于外周25和内周26之间的区域作为虚拟控件区域。
如图4所示，根据触控区域12所覆盖的所有控件图标在虚拟控件区域生成一悬浮层。悬浮层设有三个虚拟控件21、22、23，虚拟控件沿虚拟控件区域的延展方向13间隔排列，悬浮层中的虚拟控件的数量与悬浮层对应的触控区域12所覆盖的控件图标的数量相同。其中，虚拟控件21对应原始网页中的控件按钮15(即虚拟控件21被操作则触发控件按钮15的指令)，虚拟控件22对应原始网页中的控件按钮16(即虚拟控件22被操作则触发控件按钮16的指令)，虚拟控件23对应原始网页中的控件按钮17(即虚拟控件23被操作则触发控件按钮17的指令)。在一个优选例中，虚拟控件21、22、23的弧形外周与环形区域的外周25的局部重合，虚拟控件的弧形内周与环形区域的内周26的局部重合，相近的虚拟控件之间的间距相等，但不以此为限。
在一个优选例中，移动终端的屏幕不仅仅可以检测触控动作还就有力反馈检测功能，能够实时检测用户按压屏幕的力量。此时，如果用户还是觉得虚拟控件21、22、23过小，不易精确触控，则用户可以增大按压屏幕的力度，则虚拟控件区域相背离触控区域12的方向扩展面积，虚拟控件区域以及虚拟控件21、22、23所占的显示区域随之增大。直到用户维持按压力量不变，不在增加按压力量时，虚拟控件区域以及虚拟控件21、22、23所占的显示区域不再增大。
在外周25和内周26之间的虚拟控件区域内分布虚拟控件21、22、23的排布过程可以采用现有的或是未来发明的图形排布方式，此处不再赘述。
并且，在一个变形例中，设置在悬浮层设置虚拟控件具体位置的过程包括：
首先，根据悬浮层对应的触控区域所覆盖的控件图标的数量获得虚拟控件的数量n、触控区域的中心坐标(x0,y0)、虚拟控件的宽高尺寸W和H，以及圆弧轨迹的半径R＝0.5(R1+R1+R△)。
然后，根据圆弧的几何特性对每个虚拟控件的旋转角度和绘制的位置进行求解,如图5所示，以A点为绘图中心参考点，坐标为(x0,y0)，设O点为圆弧轨迹的圆心，B点为第i个虚拟控件的中心点，那么可根据绘制虚拟控件的数量，求出BO的偏转角度α，并计算出B点与A点在x轴和y轴上的差，得出B点的坐标。设C1、C2点分别为第i个虚拟控件的左上角参考点和左下角参考点，那么，可根据虚拟控件的宽W和高H，利用三角函数的特性，计算出C1、C2点分别与B点在x轴和y轴上的差，进而得出C1、C2点的坐标。
求解结果可用如下公式进行表示：
第i个虚拟控件的旋转角度的计算公式为：
Figure BDA0003273363420000101
并且，第i个虚拟控件绘制的位置的计算分为三种情况：
若以虚拟控件的中心为基准，则第i个虚拟控件的中心位置的计算公式为：
Figure BDA0003273363420000102
但不以此为限。
若以虚拟控件的左上角为基准，则第i个虚拟控件的位置的计算公式为
Figure BDA0003273363420000103
但不以此为限。
若以虚拟控件的左下角为基准，则第i个虚拟控件的位置的计算公式为
Figure BDA0003273363420000111
但不以此为限。
上述公式中，αi为当前所绘虚拟控件的旋转角度，以图5中y轴负方向为基准0度角，顺时针角度为正，逆时针角度为负。
根据求解结果依次生成虚拟控件，形成最终的展示区域反馈给用户。
如图6所示，将控件图标15的图标图案作为与控件图标相对应的虚拟控件21的图标图片，并且虚拟控件21所占的显示区域远大于控件图标15的图标图案所占的显示区域，便于用户准确触控。将控件图标16的图标图案作为与控件图标相对应的虚拟控件22的图标图片，并且虚拟控件22所占的显示区域远大于控件图标16的图标图案所占的显示区域，便于用户准确触控。将控件图标17的图标图案作为与控件图标相对应的虚拟控件23的图标图片，并且虚拟控件23所占的显示区域远大于控件图标17的图标图案所占的显示区域(本实施例中，虚拟控件23所占的显示区域的面积是原始网页中控件图标17的图标图案所占的显示区域的面积的6倍，并且虚拟控件21、22、23之间的间距控件按钮15、16、17之间的间距)，便于用户能够准确触控。
如图7所示，当检测到用户的自触控区域12向沿径向滑动至触控区域12’后释放，在这个过程中滑动动作单独经过了虚拟控件23，则触发虚拟控件23(也就是控件图标17)对应的控件图标的对应指令，并在用户释放持续按压动作后，虚拟控件区域和虚拟控件21、22、23自动消失消除。
图8是本发明的基于触控位置的控件显示系统的模块示意图。如图8所示，本发明的基于触控位置的控件显示系统5包括：
区域检测模块51，检测用户的操作动作移动终端的屏幕生成的至少一触控区域。
控件区域模块52，获得触控区域的中心，生成一环绕触控区域的环形区域作为虚拟控件区域。
区域重构模块53，自环形区域中保留与屏幕显示区域相互重叠的部分作为虚拟控件区域。
虚拟空间模块54，根据触控区域所覆盖的所有控件图标在虚拟控件区域生成一悬浮层，悬浮层设有至少一虚拟控件，虚拟控件沿虚拟控件区域的延展方向间隔排列，建立虚拟控件与控件图标的映射关系。以及
指令触发模块55，当检测到用户的后续操作动作是否触发虚拟控件，则触发虚拟控件对应的控件图标的对应指令。
在一个优选实施例中，控件区域模块52根据触控区域生成一个外接圆。获得的外接圆的圆心作为触控区域的中心，基于触控区域的中心生成一个环形区域作为虚拟控件区域。环形区域的内径R1大于等于外接圆的半径Rc，环形区域的外径R2为环形区域的内径R1与预设半径差R△的和(R1+R△)，但不以此为限。
在一个优选实施例中，虚拟空间模块54根据触控区域所覆盖的所有控件图标在虚拟控件区域生成一悬浮层。悬浮层设有至少一虚拟控件，虚拟控件沿虚拟控件区域的延展方向间隔排列，悬浮层中的虚拟控件的数量与悬浮层对应的触控区域所覆盖的控件图标的数量相同，控件图标的图标图案作为与控件图标相对应的虚拟控件的图标图片。建立虚拟控件与控件图标的映射关系，但不以此为限。其中，虚拟控件的弧形外周与环形区域的外周的局部重合，虚拟控件的弧形内周与环形区域的内周的局部重合，相近的虚拟控件之间的间距相等，但不以此为限。
在一个优选实施例中，用户的操作动作为以下中的一种：
(1)持续按压。
(2)单次点击。
(3)双击，但不以此为限。
在一个优选实施例中，用户的后续操作动作为以下中的一种：
(1)自触控区域向沿径向滑动至一虚拟控件。
(2)自触控区域向沿径向滑动至一虚拟控件后释放。
(3)单次点击一虚拟控件。
(4)持续按压一虚拟控件。以及
(5)双击一虚拟控件，但不以此为限。
本发明的基于触控位置的控件显示系统能够优化移动端的网页浏览体验，避免网页原始按键过小而造成触控错误的情况，提高用户操作的准确性。
上述实施例仅为本发明的优选例，并不用来限制本发明，凡在本发明的原则之内，所做的任何等同替代、修改和变化，均在本发明的保护范围之内。
本发明实施例还提供一种基于触控位置的控件显示设备，包括处理器。存储器，其中存储有处理器的可执行指令。其中，处理器配置为经由执行可执行指令来执行的基于触控位置的控件显示方法的步骤。
如上所示，该实施例本发明的基于触控位置的控件显示系统能够优化移动端的网页浏览体验，避免网页原始按键过小而造成触控错误的情况，提高用户操作的准确性。
所属技术领域的技术人员能够理解，本发明的各个方面可以实现为系统、方法或程序产品。因此，本发明的各个方面可以具体实现为以下形式，即：完全的硬件实施方式、完全的软件实施方式(包括固件、微代码等)，或硬件和软件方面结合的实施方式，这里可以统称为“电路”、“模块”或“平台”。
图9是本发明的基于触控位置的控件显示设备的结构示意图。下面参照图9来描述根据本发明的这种实施方式的电子设备600。图9显示的电子设备600仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。
如图9所示，电子设备600以通用计算设备的形式表现。电子设备600的组件可以包括但不限于：至少一个处理单元610、至少一个存储单元620、连接不同平台组件(包括存储单元620和处理单元610)的总线630、显示单元640等。
其中，存储单元存储有程序代码，程序代码可以被处理单元610执行，使得处理单元610执行本说明书上述电子处方流转处理方法部分中描述的根据本发明各种示例性实施方式的步骤。例如，处理单元610可以执行如图1中所示的步骤。
存储单元620可以包括易失性存储单元形式的可读介质，例如随机存取存储单元(RAM)6201和/或高速缓存存储单元6202，还可以进一步包括只读存储单元(ROM)6203。
存储单元620还可以包括具有一组(至少一个)程序模块6205的程序/实用工具6204，这样的程序模块6205包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。
总线630可以为表示几类总线结构中的一种或多种，包括存储单元总线或者存储单元控制器、外围总线、图形加速端口、处理单元或者使用多种总线结构中的任意总线结构的局域总线。
电子设备600也可以与一个或多个外部设备700(例如键盘、指向设备、蓝牙设备等)通信，还可与一个或者多个使得用户能与该电子设备600交互的设备通信，和/或与使得该电子设备600能与一个或多个其它计算设备进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口650进行。并且，电子设备600还可以通过网络适配器660与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。网络适配器660可以通过总线630与电子设备600的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备600使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储平台等。
本发明实施例还提供一种计算机可读存储介质，用于存储程序，程序被执行时实现的基于触控位置的控件显示方法的步骤。在一些可能的实施方式中，本发明的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当程序产品在终端设备上运行时，程序代码用于使终端设备执行本说明书上述电子处方流转处理方法部分中描述的根据本发明各种示例性实施方式的步骤。
如上所示，该实施例本发明的基于触控位置的控件显示系统能够优化移动端的网页浏览体验，避免网页原始按键过小而造成触控错误的情况，提高用户操作的准确性。
图10是本发明的计算机可读存储介质的结构示意图。参考图10所示，描述了根据本发明的实施方式的用于实现上述方法的程序产品800，其可以采用便携式紧凑盘只读存储器(CD-ROM)并包括程序代码，并可以在终端设备，例如个人电脑上运行。然而，本发明的程序产品不限于此，在本文件中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。
程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以为但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。
计算机可读存储介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读存储介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。可读存储介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等等，或者上述的任意合适的组合。
可以以一种或多种程序设计语言的任意组合来编写用于执行本发明操作的程序代码，程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。
综上，本发明的目的在于提供基于触控位置的控件显示方法、系统、设备及存储介质，能够优化移动端的网页浏览体验，避免网页原始按键过小而造成触控错误的情况，提高用户操作的准确性。
以上内容是结合具体的优选实施方式对本发明所作的进一步详细说明，不能认定本发明的具体实施只局限于这些说明。对于本发明所属技术领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干简单推演或替换，都应当视为属于本发明的保护范围。

Claims (10)

1.一种基于触控位置的控件显示方法，其特征在于，包括以下步骤：
检测用户的操作动作移动终端的屏幕生成的至少一触控区域；
获得所述触控区域的中心，生成一环绕所述触控区域的环形区域作为虚拟控件区域；
根据所述触控区域所覆盖的所有控件图标在所述虚拟控件区域生成一悬浮层，所述悬浮层设有至少一虚拟控件，所述虚拟控件沿所述虚拟控件区域的延展方向间隔排列，建立所述虚拟控件与所述控件图标的映射关系；以及
当检测到用户的后续操作动作是否触发所述虚拟控件，则触发所述虚拟控件对应的控件图标的对应指令。
2.根据权利要求1所述的基于触控位置的控件显示方法，其特征在于，所述获得所述触控区域的中心，生成一环绕所述触控区域的环形区域作为虚拟控件区域之后、所述根据所述触控区域所覆盖的所有控件图标在所述虚拟控件区域生成一悬浮层，所述悬浮层设有至少一虚拟控件，所述虚拟控件沿所述虚拟控件区域的延展方向间隔排列，建立所述虚拟控件与所述控件图标的映射关系之前还包括以下步骤：
自所述环形区域中保留与屏幕显示区域相互重叠的部分作为虚拟控件区域。
3.根据权利要求1所述的基于触控位置的控件显示方法，其特征在于，所述获得所述触控区域的中心，生成一环绕所述触控区域的环形区域作为虚拟控件区域，包括以下步骤：
根据所述触控区域生成一个外接圆；
获得的所述外接圆的圆心作为所述触控区域的中心；
基于所述触控区域的中心生成一个环形区域作为虚拟控件区域，所述环形区域的内径R1大于等于所述外接圆的半径Rc，所述环形区域的外径R2为所述环形区域的内径R1与预设半径差R△的和。
4.根据权利要求3所述的基于触控位置的控件显示方法，其特征在于，所述根据所述触控区域所覆盖的所有控件图标在所述虚拟控件区域生成一悬浮层，所述悬浮层设有至少一虚拟控件，所述虚拟控件沿所述虚拟控件区域的延展方向间隔排列，建立所述虚拟控件与所述控件图标的映射关系，包括以下步骤：
根据所述触控区域所覆盖的所有控件图标在所述虚拟控件区域生成一悬浮层；
所述悬浮层设有至少一虚拟控件，所述虚拟控件沿所述虚拟控件区域的延展方向间隔排列，所述悬浮层中的虚拟控件的数量与所述悬浮层对应的所述触控区域所覆盖的所述控件图标的数量相同，所述控件图标的图标图案作为与所述控件图标相对应的所述虚拟控件的图标图片；以及
建立所述虚拟控件与所述控件图标的映射关系。
5.根据权利要求4所述的基于触控位置的控件显示方法，其特征在于，所述虚拟控件的弧形外周与所述环形区域的外周的局部重合，所述虚拟控件的弧形内周与所述环形区域的内周的局部重合，相近的所述虚拟控件之间的间距相等。
6.根据权利要求1所述的基于触控位置的控件显示方法，其特征在于，所述检测用户的操作动作移动终端的屏幕生成的至少一触控区域中，所述用户的操作动作为以下中的一种：
持续按压；
单次点击；
双击。
7.根据权利要求1所述的基于触控位置的控件显示方法，其特征在于，所述当检测到用户的后续操作动作是否触发所述虚拟控件，则触发所述虚拟控件对应的控件图标的对应指令中，所述用户的后续操作动作为以下中的一种：
自所述触控区域向沿径向滑动至一所述虚拟控件；
自所述触控区域向沿径向滑动至一所述虚拟控件后释放；
单次点击一所述虚拟控件；
持续按压一所述虚拟控件；以及
双击一所述虚拟控件。
8.一种基于触控位置的控件显示系统，用于实现权利要求1所述的基于触控位置的控件显示方法，其特征在于，包括：
区域检测模块，检测用户的操作动作移动终端的屏幕生成的至少一触控区域；
控件区域模块，获得所述触控区域的中心，生成一环绕所述触控区域的环形区域作为虚拟控件区域；
虚拟空间模块，根据所述触控区域所覆盖的所有控件图标在所述虚拟控件区域生成一悬浮层，所述悬浮层设有至少一虚拟控件，所述虚拟控件沿所述虚拟控件区域的延展方向间隔排列，建立所述虚拟控件与所述控件图标的映射关系；以及
指令触发模块，当检测到用户的后续操作动作是否触发所述虚拟控件，则触发所述虚拟控件对应的控件图标的对应指令。
9.一种基于触控位置的控件显示设备，其特征在于，包括：
处理器；
存储器，其中存储有所述处理器的可执行指令；
其中，所述处理器配置为经由执行所述可执行指令来执行权利要求1至7任意一项所述基于触控位置的控件显示方法的步骤。
10.一种计算机可读存储介质，用于存储程序，其特征在于，所述程序被处理器执行时实现权利要求1至7任意一项所述基于触控位置的控件显示方法的步骤。
CN202111108801.6A 2021-09-22 2021-09-22 基于触控位置的控件显示方法、系统、设备及存储介质 Pending CN113821137A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111108801.6A CN113821137A (zh) 2021-09-22 2021-09-22 基于触控位置的控件显示方法、系统、设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111108801.6A CN113821137A (zh) 2021-09-22 2021-09-22 基于触控位置的控件显示方法、系统、设备及存储介质

Publications (1)

Publication Number Publication Date
CN113821137A true CN113821137A (zh) 2021-12-21

Family

ID=78920853

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111108801.6A Pending CN113821137A (zh) 2021-09-22 2021-09-22 基于触控位置的控件显示方法、系统、设备及存储介质

Country Status (1)

Country Link
CN (1) CN113821137A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114721566A (zh) * 2022-04-11 2022-07-08 网易（杭州）网络有限公司 虚拟对象的控制方法及装置、存储介质、设备

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107329644A (zh) * 2016-04-29 2017-11-07 宇龙计算机通信科技(深圳)有限公司 一种图标移动方法以及装置
CN107390922A (zh) * 2017-06-30 2017-11-24 广东欧珀移动通信有限公司 虚拟触控方法、装置、存储介质及终端
CN107656620A (zh) * 2017-09-26 2018-02-02 网易（杭州）网络有限公司 虚拟对象控制方法、装置、电子设备及存储介质

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107329644A (zh) * 2016-04-29 2017-11-07 宇龙计算机通信科技(深圳)有限公司 一种图标移动方法以及装置
CN107390922A (zh) * 2017-06-30 2017-11-24 广东欧珀移动通信有限公司 虚拟触控方法、装置、存储介质及终端
CN107656620A (zh) * 2017-09-26 2018-02-02 网易（杭州）网络有限公司 虚拟对象控制方法、装置、电子设备及存储介质

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114721566A (zh) * 2022-04-11 2022-07-08 网易（杭州）网络有限公司 虚拟对象的控制方法及装置、存储介质、设备
CN114721566B (zh) * 2022-04-11 2023-09-29 网易(上海)网络有限公司 虚拟对象的控制方法及装置、存储介质、设备

Similar Documents

Publication Publication Date Title
US10671280B2 (en) User input apparatus, computer connected to user input apparatus, and control method for computer connected to user input apparatus, and storage medium
US8614682B2 (en) Touchscreen panel unit, scrolling control method, and recording medium
JP5922598B2 (ja) マルチタッチ利用、ジェスチャ及び実装
CN111353408B (zh) 使用合成指纹图像的注册和指纹感测系统
EP2252926B1 (en) Interpreting ambiguous inputs on a touch-screen
JP6038927B2 (ja) 指向的ユーザジェスチャに基づくコンテンツナビゲーション方向の確立
US20160342779A1 (en) System and method for universal user interface configurations
JP6807840B2 (ja) 幾何学的形状を認識するためのシステムおよび方法
EP3491506B1 (en) Systems and methods for a touchscreen user interface for a collaborative editing tool
US20150160779A1 (en) Controlling interactions based on touch screen contact area
CN105814531A (zh) 根据输入源标识符改变的用户界面适配
US20130027327A1 (en) Gesture recognition method and touch system incorporating the same
US20140304586A1 (en) Electronic device and data processing method
US20150160794A1 (en) Resolving ambiguous touches to a touch screen interface
CN103955339A (zh) 一种终端操作方法及终端设备
CN104024983B (zh) 用于间接交互设备的交互模型
US10359920B2 (en) Object management device, thinking assistance device, object management method, and computer-readable storage medium
CN104303145A (zh) 根据应用的转化配置文件将触摸输入转化成本地输入
KR20120040970A (ko) 디스플레이에서 제스쳐를 인식하는 방법 및 그 장치
JP2019514096A (ja) 文字列に文字を挿入するための方法およびシステム
US20150248215A1 (en) Display of Objects on a Touch Screen and Their Selection
CN103218162A (zh) 一种终端操作方法及装置
CN113821137A (zh) 基于触控位置的控件显示方法、系统、设备及存储介质
US10956663B2 (en) Controlling digital input
CN114296857A (zh) 界面的调整方法、装置、电子设备及可读介质

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