一种实现3D UI中圆角图标焦点套合方法及系统

摘要

本发明公开一种实现3D？UI中圆角图标焦点套合方法及系统，所述方法包括步骤：A、预先建立圆角矩形焦点模型，以模型中心为原点建立平面直角坐标系，将位于平面直角坐标系各象限的模型区域分别对应映射预设的1/4的焦点图片形成1/4的焦点图；B、将所映射的1/4的焦点图在保持圆角不变的情况下分别套合至需要获得焦点的圆角图标的对应位置上，并对所映射的1/4的焦点图之间的区域进行插值实现圆角图标焦点套合效果。本发明实现圆角图标焦点套合系统基于纹理映射的实现方案，能够实现精准套合不同宽高比的圆角矩形，同时可以动态控制焦点边框宽度以及显示范围。解决了由于3D？UI中图标进行任意比例的拉伸时，焦点不能与其匹配套合的问题。

说明书

技术领域

本发明涉及计算机软件技术领域，尤其涉及一种实现3DUI中圆角图标焦点套合方法及系统。

背景技术

在3DUI中有时需要显示不同宽高比的圆角矩形图标（例如图标由于被拉伸，宽高比可能是1：1也可能是2：1或3：1等等），如图1和图2均为圆角矩形图标，其中图1的宽高比为3：1，图2的宽高比为1：1。圆角矩形图标包括图标和套合在图标上的边框，其边框称为焦点（更直观地，如图3所示的方格边框为焦点），焦点通常包括矩形部分和圆角部分。若对图标进行拉伸，焦点也需进行拉伸以与图标套合，但是对焦点进行拉伸的结果往往是矩形部分仍能套合在图标上，而圆角部分却很可能发生扭曲而无法套合在图标上，从整体而言，也即焦点无法套合在图标上。因此，在3DUI中应用圆角矩形图标时，焦点如何恰如其分的套合在图标上，是一个面临的问题。

在基于Android系统的2DUI处理中，若需要对图标进行拉伸，可以通过点9的图(andriod平台的应用软件开发里的一种特殊的图片形式，文件扩展名为：.9.png)进行拉伸，以保证焦点的矩形部分和圆角部分均与图标的拉伸保持一致性，而3DUI中图标都是通过图片转换为纹理，纹理再渲染到屏幕上实现的，故不能采用点9的2D方案实现。

现有技术解决3DUI中图标拉伸时焦点的套合问题通常是：预先制作许多不同宽高比的焦点来根据图标的宽高比进行匹配套合。这样当图标进行拉伸时，虽然其宽高比也会发现变化，但可以根据变化后的宽高比选择合适的焦点进行匹配套合。但这种方案仍然存在较大缺点：首先是需要预先制作大量的焦点；其次是制作了大量的焦点还不一定能满足图标以任意比例拉伸的需求，也即不能保证图标以任意比例进行拉伸时一定能找到与其匹配的焦点；因此这种方案同样存在焦点与图标无法匹配套合的问题。

因此，现有技术还有待于改进和发展。

发明内容

鉴于上述现有技术的不足，本发明的目的在于提供一种实现3DUI中圆角图标焦点套合方法及系统，旨在解决目前3DUI中图标进行任意比例的拉伸时，焦点不能与其匹配套合的问题。

本发明的技术方案如下：

一种实现3DUI中圆角图标焦点套合方法，其中，所述方法包括以下步骤：

A、预先建立圆角矩形焦点模型，以模型中心为原点，以模型圆角对应分布于各象限区域中为原则建立平面直角坐标系，将位于平面直角坐标系各象限的模型区域分别对应映射预设的1/4的焦点图片形成1/4的焦点图；

B、将所映射的1/4的焦点图在保持圆角不变的情况下分别套合至需要获得焦点的圆角图标的对应位置上，并对所映射的1/4的焦点图之间的区域进行插值，实现3DUI中圆角图标焦点套合效果。

所述的实现3DUI中圆角图标焦点套合方法，其中，所述圆角矩形焦点模型是以平面直角坐标系的x轴和y轴作为对称轴的轴对称图形。

所述的实现3DUI中圆角图标焦点套合方法，其中，所述步骤B具体为：

B1、接收用户图标选择指令，计算需要获得焦点的圆角图标的渲染区域尺寸；

B2、根据所计算出的圆角图标的渲染区域尺寸设置1/4的焦点图对应的纹理的放缩比例；

B3、设置焦点图对应的纹理的坐标映射方式为纹理图像边缘拉伸填充的纹理环绕模式，对所映射的1/4的焦点图对应的纹理之间的区域进行插值；

B4、按照预设比例调整并计算整个焦点图片显示的范围，并计算整个焦点图对应的纹理坐标的偏移量；

B5、利用所计算出的偏移量及放缩比例更新整个焦点图的纹理矩阵，并利用新的纹理矩阵进行渲染，显示3DUI中圆角图标焦点套合效果。

所述的3DUI中实现圆角图标焦点套合方法，其中，所述计算需要获得焦点的圆角图标的渲染区域尺寸具体为：

利用圆角图标的父节点坐标系以及自身保存的相对坐标系通过累乘计算得出圆角图标在屏幕渲染区域的尺寸。

所述的3DUI中实现圆角图标焦点套合方法，其中，所述纹理图像边缘拉伸填充的纹理环绕模式保证焦点图对应的纹理坐标范围在（0，0）到（1，1）的闭区间内。

所述的3DUI中实现圆角图标焦点套合方法，其中，利用所计算出的偏移量及放缩比例更新焦点图的纹理矩阵具体为：

利用所计算出的偏移量及放缩比例重新重合一个新的纹理矩阵。

所述的3DUI中实现圆角图标焦点套合方法，其中，采用以下公式计算焦点图对应的纹理坐标的偏移量：

TranslateX=（1/Size.X-1）*（Size.X）*0.5

TranslateY=（1/Size.Y-1）*（Size.Y）*0.5，

其中，所述TranslateX指X轴偏移量，所述TranslateY指Y轴偏移量，Size.X指焦点图对应纹理在X轴方向上的放缩比例，Size.Y指焦点图对应纹理在X轴方向上的放缩比例。

所述的3DUI中实现圆角图标焦点套合方法，其中，所述利用新的纹理矩阵进行渲染，显示3DUI中圆角图标焦点套合效果具体为：

利用新的纹理矩阵对纹理进行采样，并利用采样得到的数据渲染到屏幕上，实现3DUI中圆角图标焦点套合效果。

一种实现3DUI中圆角图标焦点套合系统，其中，所述系统包括：

模型建立及映射模块、用于预先建立圆角矩形焦点模型，以模型中心为原点，以模型圆角对应分布于各象限区域中为原则建立平面直角坐标系，将位于平面直角坐标系各象限的模型区域分别对应映射预设的1/4的焦点图片形成1/4的焦点图；

计算模块、用于将所映射的1/4的焦点图在保持圆角不变的情况下分别套合至需要获得焦点的圆角图标的对应位置上，并对所映射的1/4的焦点图之间的区域进行插值；

渲染模块，用于根据所述计算模块计算数据实现3DUI中圆角图标焦点套合效果。

有益效果：本发明提供一种实现3DUI中圆角图标焦点套合方法及系统，该系统基于纹理映射的实现方案，能够实现精准套合不同宽高比的圆角矩形，同时可以动态控制焦点边框宽度以及显示范围。解决了由于3DUI中图标进行任意比例的拉伸时，焦点不能与其匹配套合的问题。

附图说明

图1为现有的宽高比为3:1的的圆角矩形图标。

图2为现有的宽高比为1:1的圆角矩形图标。

图3为常见的圆角矩形图标中焦点套合在图标上的效果示意图（方格框为焦点框）。

图4为本发明具体实施例中实现3DUI中圆角图标焦点套合方法流程图。

图5为图4中步骤S100所建立的的圆角矩形焦点模型图。

图6为图5的圆角矩形焦点模型映射的1/4焦点图片形成的焦点图。

图7为由图6所示的圆角矩形焦点模型映射的1/4焦点图片拼接成的完整焦点图。

图8为3DUI中X方向产生拉伸的圆角矩形图标。

图9为3DUI中Y方向产生拉伸的圆角矩形图标。

图10为在圆角矩形焦点的圆角不变的情况下，插值像素值实现焦点套合拉伸的圆角矩形图标的示意图。

图11为具体实施例中圆角图标上的焦点宽边框的示意图。

图12为具体实施例中图11中的圆角图标上的焦点窄边框的示意图。

图13为图4步骤S200的具体方法流程图。

图14为本发明具体实施例中实现3DUI中圆角图标焦点套合系统的原理框图。

具体实施方式

本发明提供一种实现3DUI中圆角图标焦点套合方法及系统，为使本发明的目的、技术方案及效果更加清楚、明确，以下对本发明进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

如图4所示的一种实现3DUI中圆角图标焦点套合方法，其中，所述方法包括以下步骤：

S100、预先建立圆角矩形焦点模型，以模型中心为原点，以模型圆角对应分布于各象限区域中为原则建立平面直角坐标系，将位于平面直角坐标系各象限的模型区域分别对应映射预设的1/4的焦点图片形成1/4的焦点图。

所建立的圆角矩形焦点模型如图5所示，该圆角矩形焦点模型是以模型中心为原点（0,0）、模型分布在坐标系的四个象限中，并且其分布在各象限的上下左右四个区域分别映射一个1/4焦点图片，形成如图6所示的1/4焦点图。将所映射形成的1/4焦点图上下左右对称拼接成可形成如图7所示的一个完整的焦点图。

S200、将所映射的1/4的焦点图在保持圆角不变的情况下分别套合至需要获得焦点的圆角图标的对应位置上，并对所映射的1/4的焦点图之间区域进行插值，实现3DUI中圆角图标焦点套合效果。

在图标显示的3D坐标系下，保持焦点的圆角不拉伸，就要保证图标在屏幕上的最终显示区域的大小和原图片大小保持尺寸相同，但是因为图标往往不是正方形的，在X方向，Y方向都可能产生拉伸，产生如图8或9所示的图标，这样就需要在保持圆角矩形焦点的圆角不变的情况下，对1/4的焦点图之间的区域进行插值，如图10所示，虚线框部分是需要插值的区域，这样就可以保证圆角不变的情况下，对任意拉伸的图标均能进行套合。

为实现上述过程，所述步骤S200具体包括如图13所示的算法步骤。

S210、接收用户图标选择指令，计算需要获得焦点的圆角图标的渲染区域尺寸。即计算圆角图标最终在屏幕渲染区域的大小尺寸，具体可利用圆角图标的父节点坐标系以及自身保存的相对坐标系通过累乘计算得出圆角图标在屏幕渲染区域的尺寸。（累乘是在层次渲染结构模型下获取空间绝对位置的一种计算方式。空间绝对位置等于，父节点的空间相对坐标系乘以自身的相对坐标系，如果父节点上面还有父节点，则需要乘以父节点的父节点的相对坐标系）

S220、根据所计算出的圆角图标的渲染区域尺寸设置1/4的焦点图对应的纹理的放缩比例。

S230、设置焦点图对应的纹理坐标映射方式为纹理图像边缘拉伸填充的纹理环绕模式，对所映射的1/4的焦点图对应的纹理之间的区域进行插值。

其中，所述纹理图像边缘拉伸填充的纹理环绕模式即为GL_CLAMP模式，GL_CLAMP模式保证焦点图对应的纹理坐标范围在（0，0）到（1，1）的闭区间内。如果超出1和0，即截断为1和0。最后再用像素插值，即如图10所示的虚线边框部分。

S240、按照预设比例调整并计算整个焦点图片显示的范围，并计算焦点图对应的纹理坐标的偏移量。

通过Size*=adjust计算焦点图片显示的范围。该预设比例为用户自定义设置，调整焦点图显示范围就能实现焦点边框宽度的调整，如图11和图12所示，分别实现同一圆角图标10上焦点边框20的宽边框效果和窄边框效果。

采用以下公式计算焦点图对应的纹理坐标的偏移量：

TranslateX=（1/Size.X-1）*（Size.X）*0.5

TranslateY=（1/Size.Y-1）*（Size.Y）*0.5。

其中，所述TranslateX指X轴偏移量，所述TranslateY指Y轴偏移量，Size.X指焦点图对应纹理在X轴方向上的放缩比例，Size.Y指焦点图对应纹理在X轴方向上的放缩比例。此公式是根据纹理放缩原理推导得到，其所依据基本原理如下：纹理是依附节点的显示区域进行投射的，节点显示区域大则纹理显示大，显示区域小则纹理显示小，为适应不同宽高比的显示区域，需要对纹理进行缩放，保证纹理显示的区域与原本图片像素区域相同，即保持原本的大小。例如X轴的偏移量（1/Size.X-1）*（Size.X）*0.5

等于0.5–0.5*Size.X，由于纹理坐标的范围是0.0至1.0区域，0.5表示纹理坐标的中心位置，0.5*Size.X则表示纹理坐标X轴偏移量为焦点图X轴方向放缩比的0.5倍。

S250、利用所计算出的偏移量及放缩比例更新整个焦点图的纹理矩阵，并利用新的纹理矩阵进行渲染，显示3DUI中圆角图标焦点套合效果。

更新焦点图的纹理矩阵即利用所计算出的偏移量及放缩比例重新重合一个新的纹理矩阵。

利用新的纹理矩阵对纹理进行采样，并利用采样得到的数据渲染到屏幕上，实现圆角图标焦点套合效果。

如图14所示的一种实现3DUI中圆角图标焦点套合系统，其中，所述系统包括：

模型建立及映射模块100、用于预先建立圆角矩形焦点模型，以模型中心为原点，以模型圆角对应分布于各象限区域中为原则建立平面直角坐标系，将位于平面直角坐标系各象限的模型区域分别对应映射预设的1/4的焦点图片形成1/4的焦点图；

计算模块200、用于将所映射的1/4的焦点图在保持圆角不变的情况下分别套合至需要获得焦点的圆角图标的对应位置上，，并对所映射的1/4的焦点图之间的区域进行插值。

渲染模块300，用于根据所述计算模块计算数据实现3DUI中圆角图标焦点套合效果。

本发明提供一种实现3DUI中圆角图标焦点套合方法及系统，该系统基于纹理映射的实现方案，能够实现精准套合不同宽高比的圆角矩形，同时可以动态控制焦点边框宽度以及显示范围。解决了由于3DUI中图标进行任意比例的拉伸时，焦点不能与其匹配套合的问题。

应当理解的是，本发明的应用不限于上述的举例，对本领域普通技术人员来说，可以根据上述说明加以改进或变换，所有这些改进和变换都应属于本发明所附权利要求的保护范围。