一种多锚点矩形混合坐标转换的方法及其系统技术方案

本发明专利技术提供了一种多锚点矩形混合坐标转换的方法及其系统，所述方法包括如下步骤：步骤S1、在界面场景上选择一个控件，获取该控件矩形的坐标模式；步骤S2、选择不同锚点的坐标转换模式，确定需要进行矩形坐标转换的方式；步骤S3、若是选择相对坐标转换模式，根据不同锚点，进行相对坐标模式转换为混合坐标模式；步骤S4、若是选择绝对坐标转换模式，根据不同锚点，进行绝对坐标模式转换为混合坐标模式；步骤S5、混合坐标模式转换完成后，保存该界面。方便对界面控件进行排列放置，有助于提高用户编辑界面的效率。编辑界面的效率。编辑界面的效率。

【技术实现步骤摘要】
一种多锚点矩形混合坐标转换的方法及其系统


[0001]本专利技术涉及计算机界面设计
，特别是一种多锚点矩形混合坐标转换的方法及其系统。

技术介绍

[0002]在用户界面编辑时，因为要适配不同的界面分辨率，所以界面控件的矩形坐标需要支持多种模式。主要是要支持相对坐标模式和绝对坐标模式，相对坐标模式指的是控件矩形坐标基于父控件节点或者场景分辨率的相对比例，具体的矩形坐标位置会根据其父控件节点或者场景分辨率进行同步改变；绝对坐标模式指的是矩形坐标是一个固定的数值，跟其父控件节点以及场景分辨率无关，矩形坐标位置时刻保持不变。但是有时候界面设计时需要根据场景分辨率或者父控件节点进行动态改变，并且存在一定数值的偏移，这时候就需要使用到混合坐标模式。混合坐标模式既存在相对比例，又存在偏移的固定值，需要根据相对比例和偏移的固定值计算最后的矩形位置。
[0003]现有技术主要是使用相对坐标模式和绝对坐标模式来进行界面场景的控件矩形坐标设置，但是有时候美术设计师设计界面的时候经常是基于锚点来确定界面控件矩形的位置，锚点主要有九个，分别是左上、左中、左下、中上、中间、中下、右上、右中和右下，这时候就需要使用混合模式，锚点作为控件坐标的相对比例，这样即使以后界面分辨率改变，对应控件矩形相对于锚点的偏移量始终保持不变，也可以使控件矩形适配多种分辨率。

技术实现思路

[0004]为克服上述问题，本专利技术的目的是提供一种多锚点矩形混合坐标转换的方法，通过锚点作为控件坐标的相对比例，这样即使以后界面分辨率改变，对应控件矩形相对于锚点的偏移量始终保持不变，也可以使控件矩形适配多种分辨率，有助于提高用户编辑界面的效率。
[0005]本专利技术采用以下方案实现：一种多锚点矩形混合坐标转换的方法，其特征在于：所述方法包括如下步骤：
[0006]步骤S1、在界面场景上选择一个控件，获取该控件矩形的坐标模式；
[0007]步骤S2、选择不同锚点的坐标转换模式，确定需要进行矩形坐标转换的方式；
[0008]步骤S3、若是选择相对坐标转换模式，根据不同锚点，进行相对坐标模式转换为混合坐标模式；
[0009]步骤S4、若是选择绝对坐标转换模式，根据不同锚点，进行绝对坐标模式转换为混合坐标模式；
[0010]步骤S5、混合坐标模式转换完成后，保存该界面。
[0011]进一步的，所述步骤S1进一步具体为：
[0012]在界面上选择一个控件，获取该控件的坐标模式，判断是否是相对坐标模式或者绝对坐标模式；控件矩形坐标是通过控件四个方位的值来确定控件矩形在界面的位置和大
小，分别是控件左边坐标值、控件上边坐标值、控件右边坐标值、控件下边坐标值；通过解析控件矩形的坐标模式标志来判断是相对坐标模式还是绝对坐标模式，如果模式标志是UnifiedMode，则该控件矩形为相对坐标模式，如果模式标志是AbsoluteMode，则该控件矩形为绝对坐标模式。
[0013]进一步的，所述步骤S2进一步具体为：在一个控件矩形中，锚点有九个，分别是左上、左中、左下、中上、中间、中下、右上、右中和右下；对于每个锚点，矩形坐标的相对比例值scale是固定的，然后需要根据不同的坐标模式，进行偏移量的值offset的获取，选择不同锚点的坐标转换模式，确定需要使用的相对比例值；从而确定需要进行矩形坐标转换的方式。
[0014]本专利技术还提供了一种多锚点矩形混合坐标转换的系统，所述系统包括坐标模式获取模块、坐标转换模式选定模块、相对坐标模式转换模块、绝对坐标模式转换模块、以及数据保存模块；
[0015]所述坐标模式获取模块，在界面场景上选择一个控件，获取该控件矩形的坐标模式；
[0016]所述坐标转换模式选定模块，选择不同锚点的坐标转换模式，确定需要进行矩形坐标转换的方式；
[0017]所述相对坐标模式转换模块，若是选择相对坐标转换模式，根据不同锚点，进行相对坐标模式转换为混合坐标模式；
[0018]所述绝对坐标模式转换模块，若是选择绝对坐标转换模式，根据不同锚点，进行绝对坐标模式转换为混合坐标模式；
[0019]所述数据保存模块，在混合坐标模式转换完成后，保存该界面。
[0020]进一步的，所述坐标模式获取模块的实现方式进一步具体为：
[0021]在界面上选择一个控件，获取该控件的坐标模式，判断是否是相对坐标模式或者绝对坐标模式；控件矩形坐标是通过控件四个方位的值来确定控件矩形在界面的位置和大小，分别是控件左边坐标值、控件上边坐标值、控件右边坐标值、控件下边坐标值；通过解析控件矩形的坐标模式标志来判断是相对坐标模式还是绝对坐标模式，如果模
[0022]式标志是UnifiedMode，则该控件矩形为相对坐标模式，如果模式标志是AbsoluteMode，则该控件矩形为绝对坐标模式。
[0023]进一步的，所述坐标转换模式选定模块的实现方式进一步具体为：在一个控件矩形中，锚点有九个，分别是左上、左中、左下、中上、中间、中下、右上、右中和右下；对于每个锚点，矩形坐标的相对比例值scale是固定的，然后需要根据不同的坐标模式，进行偏移量的值offset的获取，选择不同锚点的坐标转换模式，确定需要使用的相对比例值；从而确定需要进行矩形坐标转换的方式。
[0024]本专利技术的有益效果在于：通过锚点作为控件坐标的相对比例，这样即使以后界面分辨率改变，对应控件矩形相对于锚点的偏移量始终保持不变，也可以使控件矩形适配多种分辨率，可以对用户界面上的控件进行多锚点混合坐标的转换，方便对界面控件进行排列放置，有助于提高用户编辑界面的效率。
附图说明
[0025]图1是本专利技术的方法流程示意图。
[0026]图2是本专利技术一实施例的控件矩形示意图。
[0027]图3是本专利技术一实施例的锚点示意图。
[0028]图4是本专利技术的系统原理框图。
具体实施方式
[0029]下面结合附图对本专利技术做进一步说明。
[0030]请参阅图1所示，本专利技术的一种多锚点矩形混合坐标转换的方法，所述方法包括如下步骤：
[0031]步骤S1、在界面场景上选择一个控件，获取该控件矩形的坐标模式；
[0032]步骤S2、选择不同锚点的坐标转换模式，确定需要进行矩形坐标转换的方式；
[0033]步骤S3、若是选择相对坐标转换模式，根据不同锚点，进行相对坐标模式转换为混合坐标模式；
[0034]步骤S4、若是选择绝对坐标转换模式，根据不同锚点，进行绝对坐标模式转换为混合坐标模式；
[0035]步骤S5、混合坐标模式转换完成后，保存该界面。
[0036]下面结合一具体实施例对本专利技术作进一步说明：
[0037]本专利技术方案，主要是通过获取界面控件矩形的坐标模式，根据不同的坐标模式和九个锚点的不同相对比例值，计算出该坐标模式下对应锚点的偏移量，实现将控件相对坐标或者绝对坐标转换为基于锚点的混合坐标模式，进而可以更高效本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种多锚点矩形混合坐标转换的方法，其特征在于：所述方法包括如下步骤：步骤S1、在界面场景上选择一个控件，获取该控件矩形的坐标模式；步骤S2、选择不同锚点的坐标转换模式，确定需要进行矩形坐标转换的方式；步骤S3、若是选择相对坐标转换模式，根据不同锚点，进行相对坐标模式转换为混合坐标模式；步骤S4、若是选择绝对坐标转换模式，根据不同锚点，进行绝对坐标模式转换为混合坐标模式；步骤S5、混合坐标模式转换完成后，保存该界面。2.根据权利要求1所述的一种多锚点矩形混合坐标转换的方法，其特征在于：所述步骤S1进一步具体为：在界面上选择一个控件，获取该控件的坐标模式，判断是否是相对坐标模式或者绝对坐标模式；控件矩形坐标是通过控件四个方位的值来确定控件矩形在界面的位置和大小，分别是控件左边坐标值、控件上边坐标值、控件右边坐标值、控件下边坐标值；通过解析控件矩形的坐标模式标志来判断是相对坐标模式还是绝对坐标模式，如果模式标志是UnifiedMode，则该控件矩形为相对坐标模式，如果模式标志是AbsoluteMode，则该控件矩形为绝对坐标模式。3.根据权利要求1所述的一种多锚点矩形混合坐标转换的方法，其特征在于：所述步骤S2进一步具体为：在一个控件矩形中，锚点有九个，分别是左上、左中、左下、中上、中间、中下、右上、右中和右下；对于每个锚点，矩形坐标的相对比例值scale是固定的，然后需要根据不同的坐标模式，进行偏移量的值offset的获取，选择不同锚点的坐标转换模式，确定需要使用的相对比例值；从而确定需要进行矩形坐标转换的方式。4.根据权利要求1所述的一种多锚点矩形混合坐标转换的方法，其特征在于：所述步骤S3进一步具体为：设置每个锚点位置的控件矩形坐标的相对比例值scale；
设置LeftUnifiedScale为左边相对坐标模式的相对比例值；RightUnifiedScale为右边相对坐标模式的相对比例值；TopUnifiedScale为上边相对坐标模式的相对比例值；BottomUnifiedScale为下边相对坐标模式的相对比例值；ParentWidth为父控件的宽度值；ParentHeight为父控件的高度值；MixedScale为混合坐标模式下的锚点比例值；MixedOffset为混合坐标模式下的偏移量值；则偏移量计算方式如下所示：矩形坐标左边的偏移量值计算公式为：MixedOffset＝(LeftUnifiedScale
‑
MixedScale)*ParentWidth矩形坐标上边的偏移量值计算公式为：MixedOffset＝(TopUnifiedScale
‑
MixedScale)*ParentHeight矩形坐标右边的偏移量值计算公式为：MixedOffset＝(RightUnifiedScale
‑
MixedScale)*ParentWidth矩形坐标下边的偏移量值计算公式为：MixedOffset＝(BottomUnifiedScale
‑
MixedScale)*ParentHeight则各个锚点的四边计算方式如下：左上锚点：左边坐标值LeftEdge：MixedOffset＝(LeftUnifiedScale
‑
0)*ParentWidth上边坐标值TopEdge：MixedOffset＝(TopUnifiedScale
‑
0)*ParentHeight右边坐标值RightEdge：MixedOffset＝(RightUnifiedScale
‑
0)*ParentWidth
下边坐标值BottomEdge：MixedOffset＝(BottomUnifiedScale
‑
0)*ParentHeight左中锚点：左边坐标值LeftEdge：MixedOffset＝(LeftUnifiedScale
‑
0)*ParentWidth上边坐标值TopEdge：MixedOffset＝(TopUnifiedScale
‑
0.5)*ParentHeight右边坐标值RightEdge：MixedOffset＝(RightUnifiedScale
‑
0)*ParentWidth下边坐标值BottomEdge：MixedOffset＝(BottomUnifiedScale
‑
0.5)*ParentHeight左下锚点：左边坐标值LeftEdge：MixedOffset＝(LeftUnifiedScale
‑
0)*ParentWidth上边坐标值TopEdge：MixedOffset＝(TopUnifiedScale
‑
1)*ParentHeight右边坐标值RightEdge：MixedOffset＝(RightUnifiedScale
‑
0)*ParentWidth下边坐标值BottomEdge：MixedOffset＝(BottomUnifiedScale
‑
1)*ParentHeight中上锚点：左边坐标值LeftEdge：MixedOffset＝(LeftUnifiedScale
‑
0.5)*ParentWidth上边坐标值TopEdge：MixedOffset＝(TopUnifiedScale
‑
0)*ParentHeight右边坐标值RightEdge：MixedOffset＝(RightUnifiedScale
‑
0.5)*ParentWidth下边坐标值BottomEdge：MixedOffset＝(BottomUnifiedScale
‑
0)*ParentHeight中间锚点：左边坐标值LeftEdge：MixedOffset＝(LeftUnifiedScale
‑
0.5)*ParentWidth上边坐标值TopEdge：MixedOffset＝(TopUnifiedScale
‑
0.5)*ParentHeight右边坐标值RightEdge：MixedOffset＝(RightUnifiedScale
‑
0.5)*ParentWidth下边坐标值BottomEdge：MixedOffset＝(BottomUnifiedScale
‑
0.5)*ParentHeight中下锚点：左边坐标值LeftEdge：MixedOffset＝(LeftUnifiedScale
‑
0.5)*ParentWidth上边坐标值TopEdge：MixedOffset＝(TopUnifiedScale
‑
1)*ParentHeight右边坐标值RightEdge：MixedOffset＝(RightUnifiedScale
‑
0.5)*ParentWidth下边坐标值BottomEdge：MixedOffset＝(BottomUnifiedScale
‑
1)*ParentHeight右上锚点：左边坐标值LeftEdge：MixedOffset＝(LeftUnifiedScale
‑
1)*ParentWidth上边坐标值TopEdge：MixedOffset＝(TopUnifiedScale
‑
0)*ParentHeight右边坐标值RightEdge：MixedOffset＝(RightUnifiedScale
‑
1)*ParentWidth下边坐标值BottomEdge：MixedOffset＝(BottomUnifiedScale
‑
0)*ParentHeight右中锚点：左边坐标值LeftEdge：MixedOffset＝(LeftUnifiedScale
‑
1)*ParentWidth上边坐标值TopEdge：MixedOffset＝(TopUnifiedScale
‑
0.5)*ParentHeight右边坐标值RightEdge：MixedOffset＝(RightUnifiedScale
‑
1)*ParentWidth下边坐标值BottomEdge：MixedOffset＝(BottomUnifiedScale
‑
0.5)*ParentHeight右下锚点：左边坐标值LeftEdge：MixedOffset＝(LeftUnifiedScale
‑
1)*ParentWidth上边坐标值TopEdge：MixedOffset＝(TopUnifiedScale
‑
1)*ParentHeight
右边坐标值RightEdge：MixedOffset＝(RightUnifiedScale
‑
1)*ParentWidth下边坐标值BottomEdge：MixedOffset＝(BottomUnifiedScale
‑
1)*ParentHeight。5.根据权利要求1所述的一种多锚点矩形混合坐标转换的方法，其特征在于：所述步骤S4进一步具体为：设置每个锚点位置的控件矩形坐标的相对比例值scale；设置LeftAbsoluteValue为左边绝对坐标模式的固定偏移值；RightAbsoluteValue为右边绝对坐标模式的固定偏移值；TopAbsoluteValue为上边绝对坐标模式的固定偏移值；BottomAbsoluteValue为下边绝对坐标模式的固定偏移值；ParentWidth为父控件的宽度值；ParentHeight为父控件的高度值；MixedScale为混合坐标模式下的锚点比例值；MixedOffset为混合坐标模式下的偏移量值；则偏移量计算方式如下所示：矩形坐标左边的偏移量值计算公式为：MixedOffset＝LeftAbsoluteValue
‑
MixedScale*ParentWidth矩形坐标上边的偏移量值计算公式为：MixedOffset＝TopAbsoluteValue
‑
MixedScale*ParentHeight矩形坐标右边的偏移量值计算公式为：MixedOffset＝RightAbsoluteValue
‑
MixedScale*ParentWidth矩形坐标下边的偏移量值计算公式为：MixedOffset＝BottomAbsoluteValue
‑
MixedScale*ParentHeight则各个锚点的四边计算方式如下：
左上锚点：左边坐标值LeftEdge：MixedOffset＝LeftAbsoluteValue上边坐标值TopEdge：MixedOffset＝TopAbsoluteValue右边坐标值RightEdge：MixedOffset＝RightAbsoluteValue下边坐标值BottomEdge：MixedOffset＝BottomAbsoluteValue左中锚点：左边坐标值LeftEdge：MixedOffset＝LeftAbsoluteValue上边坐标值TopEdge：MixedOffset＝TopAbsoluteValue
‑
0.5*ParentHeight右边坐标值RightEdge：MixedOffset＝RightAbsoluteValue下边坐标值BottomEdge：MixedOffset＝BottomAbsoluteValue
‑
0.5*ParentHeight左下锚点：左边坐标值LeftEdge：MixedOffset＝LeftAbsoluteValue上边坐标值TopEdge：MixedOffset＝TopAbsoluteValue
‑
1*ParentHeight右边坐标值RightEdge：MixedOffset＝RightAbsoluteValue下边坐标值BottomEdge：MixedOffset＝BottomAbsoluteValue
‑
1*ParentHeight中上锚点：左边坐标值LeftEdge：MixedOffset＝LeftAbsoluteValue
‑
0.5*ParentWidth上边坐标值TopEdge：MixedOffset＝TopAbsoluteValue右边坐标值RightEdge：MixedOffset＝RightAbsoluteValue
‑
0.5*ParentWidth下边坐标值BottomEdge：MixedOffset＝BottomAbsoluteValue中间锚点：左边坐标值LeftEdge：MixedOffset＝LeftAbsoluteValue
‑
0.5*ParentWidth上边坐标值TopEdge：MixedOffset＝TopAbsoluteValue
‑
0.5*ParentHeight右边坐标值RightEdge：MixedOffset＝RightAbsoluteValue
‑
0.5*ParentWidth下边坐标值BottomEdge：MixedOffset＝BottomAbsoluteValue
‑
0.5*ParentHeight中下锚点：左边坐标值LeftEdge：MixedOffset＝LeftAbsoluteValue
‑
0.5*ParentWidth上边坐标值TopEdge：MixedOffset＝TopAbsoluteValue
‑
1*ParentHeight右边坐标值RightEdge：MixedOffset＝RightAbsoluteValue
‑
0.5*ParentWidth下边坐标值BottomEdge：MixedOffset＝BottomAbsoluteValue
‑
1*ParentHeight右上锚点：左边坐标值LeftEdge：MixedOffset＝LeftAbsoluteValue
‑
1*ParentWidth上边坐标值TopEdge：MixedOffset＝TopAbsoluteValue右边坐标值RightEdge：MixedOffset＝RightAbsoluteValue
‑
1*ParentWidth下边坐标值BottomEdge：MixedOffset＝BottomAbsoluteValue右中锚点：左边坐标值LeftEdge：MixedOffset＝LeftAbsoluteValue
‑
1*ParentWidth上边坐标值TopEdge：MixedOffset＝TopAbsoluteValue
‑
0.5*ParentHeight右边坐标值RightEdge：MixedOffset＝RightAbsoluteValue
‑
1*ParentWidth
下边坐标值BottomEdge：MixedOffset＝BottomAbsoluteValue
‑
0.5*ParentHeight右下锚点：左边坐标值LeftEdge：MixedOffset＝LeftAbsoluteValue
‑
1*ParentWidth上边坐标值TopEdge：MixedOffset＝TopAbsoluteValue
‑
1*ParentHeight右边坐标值RightEdge：MixedOffset＝RightAbsoluteValue
‑
1*ParentWidth下边坐标值BottomEdge：MixedOffset＝BottomAbsoluteValue
‑
1*ParentHeight。6.根据权利要求1所述的一种多锚点矩形混合坐标转换的方法，其特征在于：所述步骤S5进一步具体为：混合模式转换完成后，保存该界面，由于使用根据锚点进行转换的混合模式坐标，即使以后界面分辨率改变，对应控件矩形相对于锚点的偏移量始终保持不变，能使控件矩形适配多种分辨率。7.一种多锚点矩形混合坐标转换的系统，其特征在于：所述系统包括坐标模式获取模块、坐标转换模式选定模块、相对坐标模式转换模块、绝对坐标模式转换模块、以...

【专利技术属性】
技术研发人员：刘德建，柳旭辉，张延锋，李佳，
申请(专利权)人：福建天晴在线互动科技有限公司，
类型：发明
国别省市：