【技术实现步骤摘要】
本专利技术涉及焦点控制领域，特别涉及一种基于前端框架的焦点控制方法、系统及应用。
技术介绍
1、在人机交互中，焦点控制是指通过用户与计算机界面之间的交互来控制注意力的定向和集中，以便有效地与计算机系统进行沟通和操作。焦点控制在用户界面设计中起着重要的作用，帮助用户处理复杂的信息和任务，提高交互效率和用户体验。
2、焦点表示当前用户关注的界面元素或交互对象。焦点可以是一个可点击的按键、一个输入框、一个菜单项等。用户通过键盘、鼠标或触摸等方式与焦点进行交互。在显示界面中，通常会利用视觉设计来引导用户的注意力。例如，使用高亮、颜色变化、动画效果等方法来突出显示当前焦点、交互元素的状态或重要信息，帮助用户更快速地识别和定位焦点。
3、然而，现有方案中缺乏成熟的焦点控制方案。
技术实现思路
1、有鉴于此，本专利技术提出了一种基于前端框架的焦点控制方法、系统及应用，具体方案如下：
2、一种基于前端框架的焦点控制方法，在基于前端框架下，具体包括：
3、遍历区域内属于当前层级并且可被焦点聚集的各控制元件，设定焦点在该区域的可移动方向，并定义当前焦点聚集的控制元件为焦点元件；
4、解析所述焦点元件的形状以选定所述焦点元件的几何中心，标记出所述焦点元件在各可移动方向上距离所述几何中心最远的末端位置；
5、当接收到关于当前焦点下一步移动方向的指令后，在所述移动方向的垂直方向上选定能在该移动方向上完整囊括所述焦点元件的两个末端位置，以
6、以所述边缘位置为起点分别朝所述移动方向构建出平行于所述移动方向的边界线，使两条边界线与所述焦点元件共同构成焦点区域；
7、查找所述焦点区域中是否存在全部或部分区域落入所述焦点区域内的控制元件，并在存在的情况下将该类控制元件作为准焦点元件；
8、计算出所述焦点元件与每一准焦点元件之间的最小距离，并综合包括最小距离和落入所述焦点区域的区域面积在内的元件参数选定一个准焦点元件作为下一焦点聚集的控制元件。
9、在一个具体实施例中，若所述焦点区域中不存在全部或部分区域落入所述焦点区域内的控制元件，则：
10、在所述移动方向上靠近所述焦点区域的一侧选定一个距离所述几何中心最远的末端位置作为次边缘位置；
11、以所述次边缘位置为起点分别朝所述移动方向的垂直方向上构建出垂直于所述边界线的次边界线，使每个边界线与次边界线共同构成除焦点区域以外的次焦点区域；
12、查找次焦点区域中是否存在全部或部分区域落入所述次焦点区域内的控制元件，并在存在的情况下将该类控制元件作为准焦点元件。
13、在一个具体实施例中，若所述焦点区域中不存在全部或部分区域落入所述焦点区域内的控制元件，则：
14、以所述焦点元件上的末端位置为圆心、与预设角度为步长逐步旋转所述边界线，逐步查找在从所述移动方向逐渐向两侧偏转的边界线上是否存在符合预设距离的控制元件；在查找到符合预设距离的控制元件后，停止旋转并将该控制元件作为下一焦点聚集的控制元件。
15、在一个具体实施例中，先以所述边缘位置为圆心旋转所述边界线，
16、若在旋转到某一角度时，该边缘位置不再是该移动方向上距离所述几何中心最远的末端位置，则将当前的边界线平移至距离所述几何中心最远的末端位置，以选定该末端位置为圆心进行旋转。
17、在一个具体实施例中，对正文区域以及在正文区域出现的控制元件设定层级，当点击所述控制元件时无法在所述正文区域移动。
18、在一个具体实施例中，通过键盘或手柄逐步移动焦点。
19、一种基于前端框架的焦点控制系统，在基于前端框架下构架如下模块：
20、预选单元，用于遍历区域内属于当前层级并且可被焦点聚集的各控制元件，设定焦点在该区域的可移动方向，并定义当前焦点聚集的控制元件为焦点元件；
21、解析单元，用于解析所述焦点元件的形状以选定所述焦点元件的几何中心，标记出所述焦点元件在各可移动方向上距离所述几何中心最远的末端位置；
22、位置选定单元，用于当接收到关于当前焦点下一步移动方向的指令后，在所述移动方向的垂直方向上选定能在该移动方向上完整囊括所述焦点元件的两个末端位置，以得到两个边缘位置；
23、第一区域单元，用于以所述边缘位置为起点分别朝所述移动方向构建出平行于所述移动方向的边界线，使两条边界线与所述焦点元件共同构成焦点区域；
24、第一查找单元，用于查找所述焦点区域中是否存在全部或部分区域落入所述焦点区域内的控制元件，并在存在的情况下将该类控制元件作为准焦点元件；
25、计算单元，用于计算出所述焦点元件与每一准焦点元件之间的最小距离，并综合包括最小距离和落入所述焦点区域的区域面积在内的元件参数选定一个准焦点元件作为下一焦点聚集的控制元件。
26、在一个具体实施例中，若所述焦点区域中不存在全部或部分区域落入所述焦点区域内的控制元件，则：
27、在所述移动方向上靠近所述焦点区域的一侧选定一个距离所述几何中心最远的末端位置作为次边缘位置；
28、以所述次边缘位置为起点分别朝所述移动方向的垂直方向上构建出垂直于所述边界线的次边界线，使每个边界线与次边界线共同构成除焦点区域以外的次焦点区域；
29、查找次焦点区域中是否存在全部或部分区域落入所述次焦点区域内的控制元件，并在存在的情况下将该类控制元件作为准焦点元件。
30、在一个具体实施例中，若所述焦点区域中不存在全部或部分区域落入所述焦点区域内的控制元件，则：
31、以所述焦点元件上的末端位置为圆心、与预设角度为步长逐步旋转所述边界线，逐步查找在从所述移动方向逐渐向两侧偏转的边界线上是否存在符合预设距离的控制元件；
32、在查找到符合预设距离的控制元件后，停止旋转并将该控制元件作为下一焦点聚集的控制元件。
33、一种web界面，采用上述任一项所述的基于前端框架的焦点控制方法进行焦点控制。
34、有益效果：本专利技术提出了一种基于前端框架的焦点控制方法、系统及应用，在前端框架下，针对不同的焦点移动情况和元件分布情况采用不同的焦点控制设计，增强用户体验，减少认知负荷，提高交互效率和用户满意度，为主流前端开发框架下的生态构建成熟的焦点控制方案。通过分析当前焦点所处位置以及下一步焦点的移动方向确定下一步焦点所处的元件，通过合理的焦点控制设计，帮助用户快速定位界面元素。
本文档来自技高网...【技术保护点】
1.一种基于前端框架的焦点控制方法，其特征在于，在基于前端框架下，具体包括：
2.根据权利要求1所述的焦点控制方法，其特征在于，若所述焦点区域中不存在全部或部分区域落入所述焦点区域内的控制元件，则：
3.根据权利要求1所述的焦点控制方法，其特征在于，若所述焦点区域中不存在全部或部分区域落入所述焦点区域内的控制元件，则：
4.根据权利要求1所述的焦点控制方法，其特征在于，先以所述边缘位置为圆心旋转所述边界线，
5.根据权利要求1所述的焦点控制方法，其特征在于，对正文区域以及在正文区域出现的控制元件设定层级，当点击所述控制元件时无法在所述正文区域移动。
6.根据权利要求1所述的焦点控制方法，其特征在于，通过键盘或手柄逐步移动焦点。
7.一种基于前端框架的焦点控制系统，其特征在于，在基于前端框架下构架如下模块：
8.根据权利要求7所述的焦点控制系统，其特征在于，若所述焦点区域中不存在全部或部分区域落入所述焦点区域内的控制元件，则：
9.根据权利要求7所述的焦点控制系统，其特征在于，若所述焦点
10.一种web界面，其特征在于，采用权利要求1-6任一项所述的基于前端框架的焦点控制方法进行焦点控制。
...【技术特征摘要】
1.一种基于前端框架的焦点控制方法，其特征在于，在基于前端框架下，具体包括：
2.根据权利要求1所述的焦点控制方法，其特征在于，若所述焦点区域中不存在全部或部分区域落入所述焦点区域内的控制元件，则：
3.根据权利要求1所述的焦点控制方法，其特征在于，若所述焦点区域中不存在全部或部分区域落入所述焦点区域内的控制元件，则：
4.根据权利要求1所述的焦点控制方法，其特征在于，先以所述边缘位置为圆心旋转所述边界线，
5.根据权利要求1所述的焦点控制方法，其特征在于，对正文区域以及在正文区域出现的控制元件设定层级，当点击所述控制元件时无法在所...
【专利技术属性】
技术研发人员：周学辰，尹继圣，刘大照，李航，朱正伟，区信诚，
申请(专利权)人：深圳感臻智能股份有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。