CN102541537B - 一种具有环绕效果的菜单容器控件的实现方法及装置 - Google Patents
一种具有环绕效果的菜单容器控件的实现方法及装置 Download PDFInfo
- Publication number
- CN102541537B CN102541537B CN201110393479.6A CN201110393479A CN102541537B CN 102541537 B CN102541537 B CN 102541537B CN 201110393479 A CN201110393479 A CN 201110393479A CN 102541537 B CN102541537 B CN 102541537B
- Authority
- CN
- China
- Prior art keywords
- menu
- control
- gesture
- parameter
- menu 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.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 27
- 230000000694 effects Effects 0.000 title claims abstract description 25
- 238000004364 calculation method Methods 0.000 claims description 7
- 238000006243 chemical reaction Methods 0.000 claims description 7
- 230000008859 change Effects 0.000 claims description 4
- 230000009191 jumping Effects 0.000 claims description 4
- 230000001133 acceleration Effects 0.000 claims description 3
- 230000000007 visual effect Effects 0.000 claims description 3
- 230000008569 process Effects 0.000 description 10
- 238000010586 diagram Methods 0.000 description 4
- 230000003993 interaction Effects 0.000 description 4
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000007423 decrease Effects 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 230000001788 irregular Effects 0.000 description 1
- 230000004044 response Effects 0.000 description 1
- 230000035945 sensitivity Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
Landscapes
- User Interface Of Digital Computer (AREA)
- Processing Or Creating Images (AREA)
Abstract
本发明公开了一种具有环绕效果的菜单容器控件实现方法,包括,在容器界面内建立直角坐标系,并以闭合曲线的参数方程作为绘制菜单控件环绕轨迹的依据;根据一定的时间阀值和触控屏输入信号,判断用户的手势类型,并采集手势的相关参数;将上述手势识别采集的参数转化为菜单控件布局所需的参数增量;根据上述参数增量和参数方程计算各个菜单控件在环绕轨迹上环绕移动后的位置坐标;根据菜单控件沿环绕轨迹移动后的位置坐标,对各个菜单控件重新进行布局。采用上述技术方案,能够将多个菜单控件按照一定规律的环绕轨迹布局,模拟立体的纵深效果将当前选中的控件呈现在屏幕最前端,其它控件由近到远的依次环绕排列。
Description
技术领域
本发明涉及一种智能终端的菜单容器控件的实现方法及其装置,特别涉及一种具有环绕效果的菜单容器控件的实现方法及装置。
背景技术
随着移动互联网终端设备的不断发展,硬件平台及操作系统的不断强大,用户对与终端应用程序的需求,不再仅仅满足于简单的功能实现,丰富生动的人机交互体验及新颖的操作方式将直接影响用户的使用感受。对于移动终端设备上常见的功能菜单界面,如何在有限的屏幕显示区域将多个菜单控件进行呈现,并能够提供良好的人机交互体验,往往能使用户对产品的好感度大大提升。
通常情况下菜单控件集合的布局排列是在布局容器中实现,其主要分为两大类,一种是静态的布局,容器中的各控件位置及显示属性已规定在布局文件或程序代码中,一般情况下子控件的位置是相对固定;另一种是动态的布局,容器中的各控件按一定规律排列,但其位置可以根据交互界面的响应而改变,如用户触摸拖动、上翻下翻等。按照布局的结构形式,又有线性布局、表格布局、标签布局、网格视图、列表视图、画廊视图等。
虽然多种适应不同需求的布局容器,能够满足一般的人机交互界面应用。但现有的布局容器在使用过程中只能以线性的移动方式进行拖动,交互形式过于单一。简单的界面控件形式缺乏新意、操作方式死板,用户的对软件的好感自然不会提升,甚至可能转用其它产品。因此实现一种更为丰富生动的菜单布局形式,且能够准确感知用户操作的控件容器就非常重要。
发明内容
为解决现有技术中存在的技术问题,本发明提供了一种具有环绕效果的菜单容器控件实现方法及装置,可以实现多个菜单控件按照一定规律的环绕轨迹布局,模拟立体的纵深效果将当前选中的控件呈现在屏幕最前端,其它控件由近到远的依次环绕排列。
本发明解决上述技术问题,所采用的技术方案是:提供一种具有环绕效果的菜单容器控件实现方法,包括以下步骤,步骤100,初始布局,即在容器界面内建立直角坐标系,并以闭合曲线的参数方程作为绘制菜单控件环绕轨迹的依据;步骤200,手势识别,即根据一定的时间阀值和触控屏输入信号,判断用户的手势类型,并采集手势的相关参数;步骤300,参数转化,即将上述手势识别采集的参数转化为菜单控件布局所需的参数增量;步骤400,布局计算,即根据上述参数增量和参数方程计算各个菜单控件在环绕轨迹上环绕移动后的位置坐标;步骤500,重新布局,即根据菜单控件沿环绕轨迹移动后的位置坐标,对各个菜单控件重新进行布局。
作为本发明的优选方案,菜单控件在容器界面内的区域范围采用中心点坐标(xo,yo)和菜单控件宽度w、高度h确定,菜单控件在X轴上的范围为[xo-w/2,xo+w/2],Y轴上的范围为[yo-h/2,yo+h/2]。
作为本发明的优选方案,所述步骤100进一步包括以下步骤,步骤110,在容器界面内建立直角坐标系,其原点位于容器界面的左上角,X轴与Y轴分别为窗体界面的上边缘和左边缘,并将容器界面的可视区域设在第一象限;步骤120,将上述环绕轨迹的坐标方程G(x,y)采用参数方程G(X(θ),Y(θ))表示,其中x=a+mcosθ,y=b+nsinθ,θ为参数且在[0,2π]之间,(a,b)为中心点坐标,m、n分别为中心点至环绕轨迹沿Y轴、X轴方向的长度;步骤130,根据菜单控件的数量N与参数θ的取值范围,对各菜单控件在闭合曲线上进行初始布局。
作为本发明的优选方案,所述步骤130进一步包括以下步骤:步骤131,经过闭合曲线中心点延伸出与Y轴平行的平行线,该平行线与闭合曲线相交于两点,取其中y坐标值较大的点C(xc,yc)为控件菜单布局的起点;步骤132,相临两个菜单控件中心点坐标之间参数差值△θ=2π/N,根据参数方程X(θ),得出点C(xc,yc)参数为θc;步骤133,根据θc和△θ确定下一个菜单控件的初始布局坐标(x1,y1),其中x1=X(θc-△θ)或x1=X(θc+△θ),y1=Y(θc+△θ)或y1=Y(θc-△θ),由此各个菜单控件在环绕轨迹上均匀分布。
作为本发明的优选方案,在完成步骤133之后,继续包括以下步骤,步骤134,根据菜单控件的缩放算法S(y)=1/(1+|y-yc|/yc),计算出缩放后的控件宽度wn=ws*S(y),其中ws为控件初始宽度;缩放后的控件高度hn=hs*S(y),其中hs为控件初始高度;步骤135,根据菜单控件的层叠算法I(o),当o>=(N-1)/2时,I(o)=(ic+1+o)%N;当o<(N-1)/2时,I(o)=(ic+(N-1)/2-o)%N,ic为位于最高层的控件序号,o为绘制层次,N为控件个数;o的值越小所得的控件序号对应的菜单控件就越先绘制,按o由0增至n-1代入I(o),得到层叠顺序从最底层到最高层的菜单控件序号。
作为本发明的优选方案,所述闭合曲线是圆形曲线或椭圆形曲线。
作为本发明的优选方案,步骤200进一步包括以下步骤,步骤210,触控屏感应到手势并开始计时,将从计时开始至收到手势弹起信号之间的时间间隔记为△t;步骤220,时间间隔△t是否大于预定的第一时间阀值ts且接触点坐标变化,如果是,则将该手势判定为拖动手势;否则,进入步骤230;步骤230,时间间隔△t是否大于预定的第二时间阀值tf并小于第一时间阀值ts,tf<ts,且接触点坐标变化,如果是,则将该手势判定为滑动手势;否则,进入步骤240;步骤240,将该手势判定为轻触手势。
作为本发明的优选方案,步骤300进一步包括以下步骤,步骤310,如果手势被判定为拖动手势,则进入步骤320;否则跳入步骤330;步骤320,在每一预定的时间间隔内采集相邻两个手势触点坐标连线在直角坐标系中的距离△l,将上述△l等同于环绕轨迹上的一段曲线长度,根据曲线弧长公式参数表达式L(θ),便可得出这段距离△l对应的参数增量△θ;步骤330,如果手势被判定为滑动手势,则进入步骤340;否则跳入步骤350;步骤340,根据手势滑动的初始速度v0和加速度a,根据公式S(t)=v0*t-a*t^2/2,其中a为预定值,求出手势滑动的距离△s,将距离△s等同于环绕轨迹上的一段曲线长度,根据曲线弧长公式参数表达式L(θ),便可得出这段距离△l对应的参数增量△θ;步骤350,提供轻触菜单控件的序号,从而获取当前位置的参数θt,并与位于当前最前端中心的菜单控件位置参数θc进行比较,则轻触控件移动至前端中心所需的参数增量为△θ=θc-θt。
作为本发明的优选方案,步骤400进一步包括以下步骤,步骤410,手势操作完成后,根据手势操作的方向及参数增量△θ大小,将各菜单控件沿环绕轨迹进行环绕移动;步骤420,根据菜单控件的缩放算法S(y)=1/(1+|y-yc|/yc),计算出缩放后的控件宽度wn=ws*S(y),其中ws为控件初始宽度;缩放后的控件高度hn=hs*S(y),其中hs为控件初始高度;步骤430,根据菜单控件的层叠算法I(o),当o>=(N-1)/2时,I(o)=(ic+1+o)%N;当o<(N-1)/2时,I(o)=(ic+(N-1)/2-o)%N,ic为位于最高层的控件序号,o为绘制层次,N为控件个数;o的值越小所得的控件序号对应的菜单控件就越先绘制,按o由0增至n-1代入I(o),得到层叠顺序从最底层到最高层的菜单控件序号。
为解决本发明的技术方案,本发明提供另一种具有环绕效果的菜单容器控件的装置,包括,菜单绘制模块、手势识别模块、参数转化模块以及布局计算模块;其中,菜单绘制模块,用于在容器界面内建立直角坐标系,根据菜单控件绘制层次和区域范围进行菜单绘制,并以闭合曲线作为绘制菜单控件的环绕轨迹;手势识别模块,用于根据一定的时间阀值和触控屏输入信号,判断用户的手势类型,并采集手势的相关参数;参数转化模块,用于将手势识别采集的参数转化为菜单控件布局所需的参数增量;布局计算模块,用于根据参数增量和参数方程计算菜单控件的环绕位置,并结合缩放和叠加算法确定菜单绘制的区域范围及绘制层次。
作为本发明的优选方案,菜单控件在容器界面内的区域范围采用中心点坐标(xo,yo)和菜单控件宽度w、高度h确定,菜单控件在X轴上的范围为[xo-w/2,xo+w/2],Y轴上的范围为[yo-h/2,yo+h/2]。
作为本发明的优选方案,在容器界面内设有直角坐标系,其原点位于容器界面的左上角,X轴与Y轴分别为窗体界面的上边缘和左边缘,并将容器界面的可视区域设在第一象限。
作为本发明的优选方案,上述环绕轨迹的坐标方程G(x,y)采用参数方程G(X(θ),Y(θ))表示,其中x=a+mcosθ,y=b+nsinθ,θ为参数且在[0,2π]之间,(a,b)为中心点坐标,m、n分别为中心点至环绕轨迹沿Y轴、X轴方向的长度。
作为本发明的优选方案,所述闭合曲线是圆形曲线或椭圆形曲线。
上述技术方案相对于现有技术,取得的有益效果是:本发明所述的具有环绕效果的菜单容器控件实现方法及装置,能够将多个菜单控件按照一定规律的环绕轨迹布局,模拟立体的纵深效果将当前选中的控件呈现在屏幕最前端,其它控件由近到远的依次环绕排列。用户在拖动菜单的过程中,位于布局的下一个菜单就能沿着环绕轨迹从屏幕后端切换至前端,而用户快速滑动屏幕时,菜单又能跟据滑动的速度进行一定的连续旋转,直至用户选定或旋转自行停止。
附图说明
此处所说明的附图用来提供对本发明的进一步理解,构成本发明的一部分,本发明的示意性实施例及其说明用于解释本发明,并不构成对本发明的不当限定。在附图中:
图1是本发明所述的具有环绕效果的菜单容器控件的实现方法流程图;
图2是本发明所述的初始布局过程的流程图;
图3是本发明所述的初始布局过程中产生均匀且层叠效果的流程图;
图4是本发明所述的手势判定流程图;
图5是本发明所述的具有环绕效果的菜单容器控件的装置框图。
图6是本发明所述的具有环绕效果的菜单容器控件的示意图;
图7是本发明所述的菜单容器控件在容器界面内的布局示意图。
具体实施方式
为了使本发明所要解决的技术问题、技术方案及有益效果更加清楚、明白,以下结合附图和实施例,对本发明进行进一步详细说明。应当理解,此处所描述的具体实施例仅用以解释本发明,并不用于限定本发明。
如图1所示,本发明所述的具有环绕效果的菜单容器控件的实现方法,具体包括以下步骤,步骤100,初始布局,即在容器界面内建立直角坐标系,并以闭合曲线的参数方程作为绘制菜单控件环绕轨迹的依据;步骤200,手势识别,即根据一定的时间阀值和触控屏输入信号,判断用户的手势类型,并采集手势的相关参数;步骤300,参数转化,即将上述手势识别采集的参数转化为菜单控件布局所需的参数增量;步骤400,布局计算,即根据上述参数增量和参数方程计算各个菜单控件在环绕轨迹上环绕移动后的位置坐标;步骤500,重新布局,即根据菜单控件沿环绕轨迹移动后的位置坐标,对各个菜单控件重新进行布局。
上述菜单容器控件可以是配置在任何可以配有触控屏的设备上,如智能手机、ATM机、PC机等。采用上述技术方案,可以将触控屏上的菜单控件按照预先设定的闭合曲线轨迹进行环绕滑动,从而使触控屏的操作更加人性化、智能性,增强人们使用这些智能终端的操作趣味。菜单控件的形状可以是多种,如矩形、长方形、圆形等,本发明不限定。如图7所示,图7A部分内的正方形是各个菜单控件,图7B部分的黑圆代表正方形菜单控件的圆心,图7C部分中的曲线代表部分闭合曲线(以圆为例),图7D的圆代表闭合曲线,(a,b)代表圆心。为更好地解释本发明的技术方案,本发明采用矩形作为示例,菜单控件在容器界面内的显示范围采用中心点坐标(xo,yo)和菜单控件宽度w、高度h确定,菜单控件在X轴上的范围为[xo-w/2,xo+w/2],在Y轴上的范围为[yo-h/2,yo+h/2]。
如图2所示,上述步骤100中初始布局的过程,可以进一步包括以下步骤,步骤110,在容器界面内建立直角坐标系,其原点位于容器界面的左上角,X轴与Y轴分别为窗体界面的上边缘和左边缘,并将容器界面的可视区域设在第一象限;步骤120,将上述环绕轨迹的坐标方程G(x,y)采用参数方程G(X(θ),Y(θ))表示,其中x=a+mcosθ,y=b+nsinθ,θ为参数且在[0,2π]之间,(a,b)为中心点坐标,m、n分别为中心点至环绕轨迹沿Y轴、X轴方向的长度;步骤130,根据菜单控件的数量N与参数θ的取值范围,对各菜单控件在闭合曲线上进行初始布局。
如图7所示,为了便于计算出各个菜单控件的位置坐标及其参数,将容器界面的可视区域设置在在直角坐标系的第一象限。当环绕轨迹是一圆形时,则在步骤120中的x=a+mcosθ,y=b+nsinθ,(a,b)即是圆心,m=n且m、n是圆的半径;当环绕轨迹是一椭圆形时,则在步骤120中的x=a+mcosθ,y=b+nsinθ,m为长半轴长,n为短半轴长,(a,b)为椭圆中心点。由于圆与椭圆是规则的形状,所以在用参数方程表达时比较便捷,但本发明并不排除其他规则或不规则的形状,只要该形状可以有一个相对应的参数方程表达即可。
菜单控件在环绕轨迹进行初始布局时,可以将菜单控件均匀布设,并且可以设置成层次感。实现均匀或层次设置的步骤如图3所示,其具体步骤包括:步骤131,经过闭合曲线中心点延伸出与Y轴平行的平行线,该平行线与闭合曲线相交汇于两点,取其中y坐标值较大的点C(xc,yc)为控件菜单布局的起点;步骤132,相临两个菜单控件中心点坐标之间参数差值△θ=2π/N,根据参数方程X(θ),得点C(xc,yc)参数θc;步骤133,根据θc和△θ确定下一个菜单控件的初始布局坐标(x1,y1),其中x1=X(θc-△θ)或x1=X(θc+△θ),y1=Y(θc+△θ)或y1=Y(θc-△θ),由此各个菜单控件在环绕轨迹上均匀分布。
在上述步骤131中,如果闭合曲线为椭圆,则是椭圆短轴与椭圆相交且位于下半曲线y坐标值较大的交点为布局起点C(xc,yc);如闭合曲线为圆,则其确定方式类似。为了将各菜单近控件在中心点在闭合曲线上均匀设置,则△θ取相等值;当△θ的取值在一方向上逐渐增大或减少,也是本发明的保护范围。
如图6、图7所示,为了使各菜单按件在可视区域内具有层次感,在完成上述步骤131-133后,可继续以下步骤实现:步骤134,根据菜单控件的缩放算法S(y)=1/(1+|y-yc|/yc),计算出缩放后的控件宽度wn=ws*S(y),其中ws为控件初始宽度;缩放后的控件高度hn=hs*S(y),其中hs为控件初始高度;步骤135,根据菜单控件的层叠算法I(o),当o>=(N-1)/2时,I(o)=(ic+1+o)%N;当o<(N-1)/2时,I(o)=(ic+(N-1)/2-o)%N,ic为位于最高层的控件序号,o为绘制层次,N为控件个数;o的值越小所得的控件序号对应的菜单控件就越先绘制,按o由0增至n-1代入I(o),得到层叠顺序从最底层到最高层的菜单控件序号。
如此,如图6、图7所示,菜单在容器区域内,越靠近布局起点C(xc,yc)的控件其绘制层次也就越高,且序号为ic的菜单控件其中心与点C重合,绘制层次最高,区域范围也就最大。反之,在轨迹上离点C越远的控件其绘制层次和区域范围也就越小,且部分区域会被上层控件层叠。这就实现了各菜单控件在容器区域内的层级排布,并产生纵深环绕的效果。
如图4所示,步骤200,即手势识别过程具体来说,可以按以下过程实现:步骤210,触控屏感应到手势并开始计时,将从计时开始至收到手势弹起信号之间的时间间隔记为△t;步骤220,时间间隔△t是否大于预定的第一时间阀值ts且接触点坐标不断变化,如果是,则将该手势判定为拖动手势;否则,进入步骤230;步骤230,时间间隔△t是否大于预定的第二时间阀值tf并小于第一时间阀值ts,tf<ts,且接触点坐标不断变化,如果是,则将该手势判定为滑动手势;否则,进入步骤240;步骤240,将该手势判定为轻触手势。
通过以上过程,将手势接触触控屏分成三种情况,即拖动手势、滑动手势、轻触手势,并将不同的手势对应不同的菜单控件的运动方式。如图5所示,当接触手势是拖动手势时,在每一预定的时间间隔内采集相邻两个手势触点坐标连线在直角坐标系中的距离△l,将上述△l等同于环绕轨迹上的一段曲线长度,根据曲线弧长公式参数表达式L(θ),便可得出这段距离△l对应的参数增量△θ;当接触手势是移动手势时,根据手势滑动的初始速度v0和加速度a,根据公式S(t)=v0*t-a*t^2/2,其中a为预定值,求出手势滑动的距离△s,将将距离△s等同于环绕轨迹上的一段曲线长度,根据曲线弧长公式参数表达式L(θ),便可得出这段距离△l对应的参数增量△θ;当接触手势是点触手势时,提供轻触菜单控件的序号,从而获取当前位置的参变量θt,并与位于当前最前端中心的菜单控件位置参数θc进行比较,则轻触控件移动至前端中心所需的参数增量为△θ=θc-θt。
因此,上述过程实现了步骤300的参数转化过程,即将上述手势识别采集的参数转化为菜单控件布局所需的参数增量。
下面进入步骤400,布局计算,即根据上述离心增量计算各个菜单控件在环绕轨迹上环绕移动后的位置参数。具体来说,步骤400包括以下步骤,步骤410,手势操作完成后,根据手势操作的方向及参数增量△θ大小,将各菜单控件沿环绕轨迹进行环绕移动;步骤420,根据菜单控件的缩放算法S(y)=1/(1+|y-yc|/yc),计算出缩放后的控件宽度wn=ws*S(y),其中ws为控件初始宽度;缩放后的控件高度hn=hs*S(y),其中hs为控件初始高度;步骤430,根据菜单控件的层叠算法I(o),当o>=(N-1)/2时,I(o)=(ic+1+o)%N;当o<(N-1)/2时,I(o)=(ic+(N-1)/2-o)%N,ic为位于最高层的控件序号,o为绘制层次,N为控件个数;o的值越小所得的控件序号对应的菜单控件就越先绘制,按o由0增至n-1代入I(o),得到层叠顺序从最底层到最高层的菜单控件序号。
最后,根据步骤400中获得的位置参数实现步骤500的步重新布局过程,即根据菜单控件沿环绕轨迹移动后的位置参数,对各个菜单控件重新进行布局。
本发明解决上述技术问题还提供了另一技术方案,如图5所示,即提供了一种具有环绕效果的菜单容器控件的装置,包括菜单绘制模块、手势识别模块、参数转化模块以及布局计算模块;其中,菜单绘制模块,用于在容器界面内建立直角坐标系,根据菜单控件绘制层次和区域范围进行菜单绘制,并与闭合曲线作为绘制菜单控件的环绕轨迹;手势识别模块,用于根据一定的时间阀值和触控屏输入信号,判断用户的手势类型,并采集手势的相关参数;参数转化模块,用于将手势识别采集的参数转化为菜单控件布局所需的参数增量;布局计算模块,用于根据参数增量和参数方程计算菜单控件的环绕位置,并结合缩放和叠加算法确定菜单绘制的区域范围及绘制层次。
菜单控件在容器界面内的显示范围采用中心点坐标(xo,yo)和菜单控件宽度w、高度h确定,菜单控件在X轴上的范围为[xo-w/2,xo+w/2],Y轴上的范围为[yo-h/2,yo+h/2]。在容器界面内设有直角坐标系,其原点位于容器界面的左上角,X轴与Y轴分别为窗体界面的上边缘和左边缘,并将容器界面的可视区域设在第一象限。上述环绕轨迹的坐标方程G(x,y)采用参数方程G(X(θ),Y(θ))表示,其中x=a+mcosθ,y=b+nsinθ,θ为参数且在[0,2π]之间,(a,b)为中心点坐标,m、n分别为中心点至环绕轨迹沿Y轴、X轴方向的长度。
上述说明示出并描述了本发明的优选实施例,如前所述,应当理解本发明并非局限于本文所披露的形式,不应看作是对其他实施例的排除,而可用于各种其他组合、修改和环境,并能够在本文所述发明构想范围内,通过上述教导或相关领域的技术或知识进行改动。而本领域人员所进行的改动和变化不脱离本发明的精神和范围,则都应在本发明所附权利要求的保护范围内。
Claims (9)
1.一种具有环绕效果的菜单容器控件实现方法,其特征在于,包括以下步骤,
步骤100,初始布局,即在容器界面内建立直角坐标系,并以闭合曲线的参数方程作为绘制菜单控件环绕轨迹的依据;
步骤200,手势识别,即根据一定的时间阀值和触控屏输入信号,判断用户的手势类型,并采集手势的相关参数;
步骤300,参数转化,即将上述手势识别采集的参数转化为菜单控件布局所需的参数增量;
步骤400,布局计算,即根据上述参数增量和参数方程计算各个菜单控件在环绕轨迹上环绕移动后的位置坐标;
步骤500,重新布局,即根据菜单控件沿环绕轨迹移动后的位置坐标,对各个菜单控件重新进行布局;
菜单控件在容器界面内的区域范围采用中心点坐标(xo,yo)和菜单控件宽度w、高度h确定,菜单控件在X轴上的范围为[xo-w/2,xo+w/2],Y轴上的范围为[yo-h/2,yo+h/2];
所述步骤100进一步包括以下步骤,
步骤110,在容器界面内建立直角坐标系,其原点位于容器界面的左上角,X轴与Y轴分别为窗体界面的上边缘和左边缘,并将容器界面的可视区域设在第一象限;
步骤120,将上述环绕轨迹的坐标方程G(x,y)采用参数方程G(X(θ),Y(θ))表示,其中x=a+mcosθ,y=b+nsinθ,θ为参数且在[0,2π]之间,(a,b)为中心点坐标,m、n分别为中心点至环绕轨迹沿Y轴、X轴方向的长度;
步骤130,根据菜单控件的数量N与参数θ的取值范围,对各菜单控件在闭合曲线上进行初始布局;
所述步骤130进一步包括以下步骤:
步骤131,经过闭合曲线中心点延伸出与Y轴平行的平行线,该平行线与闭合曲线相交于两点,取其中y坐标值较大的点C(xc,yc)为控件菜单布局的起点;
步骤132,相临两个菜单控件中心点坐标之间参数差值△θ=2π/N,根据参数方程X(θ),得出点C(xc,yc)参数为θc;
步骤133,根据θc和△θ确定下一个菜单控件的初始布局坐标(x1,y1),其中x1=X(θc-△θ)或x1=X(θc+△θ),y1=Y(θc+△θ)或y1=Y(θc-△θ),由此各个菜单控件在环绕轨迹上均匀分布;
步骤134,根据菜单控件的缩放算法S(y)=1/(1+|y-yc|/yc),计算出缩放后的控件宽度wn=ws*S(y),其中ws为控件初始宽度;缩放后的控件高度hn=hs*S(y),其中hs为控件初始高度;
步骤135,根据菜单控件的层叠算法I(o),当o>=(N-1)/2时,I(o)=(ic+1+o)%N;当o<(N-1)/2时,I(o)=(ic+(N-1)/2-o)%N,ic为位于最高层的控件序号,o为绘制层次,N为控件个数;o的值越小所得的控件序号对应的菜单控件就越先绘制,按o由0增至n-1代入I(o),得到层叠顺序从最底层到最高层的菜单控件序号。
2.根据权利要求1所述的具有环绕效果的菜单容器控件实现方法,其特征在于,所述闭合曲线是圆形曲线或椭圆形曲线。
3.根据权利要求1所述的具有环绕效果的菜单容器控件实现方法,其特征在于,步骤200进一步包括以下步骤,
步骤210,触控屏感应到手势并开始计时,将从计时开始至收到手势弹起信号之间的时间间隔记为△t;
步骤220,时间间隔△t是否大于预定的第一时间阀值ts且接触点坐标变化,如果是,则将该手势判定为拖动手势;否则,进入步骤230;
步骤230,时间间隔△t是否大于预定的第二时间阀值tf并小于第一时间阀值ts,tf<ts,且接触点坐标变化,如果是,则将该手势判定为滑动手势;否则,进入步骤240;
步骤240,将该手势判定为轻触手势。
4.根据权利要求3所述的具有环绕效果的菜单容器控件实现方法,其特征在于,步骤300进一步包括以下步骤,
步骤310,如果手势被判定为拖动手势,则进入步骤320;否则跳入步骤330;
步骤320,在每一预定的时间间隔内采集相邻两个手势触点坐标连线在直角坐标系中的距离△l,将上述△l等同于环绕轨迹上的一段曲线长度,根据曲线弧长公式参数表达式L(θ),便可得出这段距离△l对应的参数增量△θ;
步骤330,如果手势被判定为滑动手势,则进入步骤340;否则跳入步骤350;
步骤340,根据手势滑动的初始速度v0和加速度a,根据公式S(t)=v0*t-a*t^2/2,其中a为预定值,求出手势滑动的距离△s,将距离△s等同于环绕轨迹上的一段曲线长度,根据曲线弧长公式参数表达式L(θ),便可得出这段距离△l对应的参数增量△θ;
步骤350,提供轻触菜单控件的序号,从而获取当前位置的参数θt,并与位于当前最前端中心的菜单控件位置参数θc进行比较,则轻触控件移动至前端中心所需的参数增量为△θ=θc-θt。
5.根据权利要求1所述的具有环绕效果的菜单容器控件实现方法,其特征在于,步骤400进一步包括以下步骤,
步骤410,手势操作完成后,根据手势操作的方向及参数增量△θ大小,将各菜单控件沿环绕轨迹进行环绕移动;
步骤420,根据菜单控件的缩放算法S(y)=1/(1+|y-yc|/yc),计算出缩放后的控件宽度wn=ws*S(y),其中ws为控件初始宽度;缩放后的控件高度hn=hs*S(y),其中hs为控件初始高度;
步骤430,根据菜单控件的层叠算法I(o),当o>=(N-1)/2时,I(o)=(ic+1+o)%N;当o<(N-1)/2时,I(o)=(ic+(N-1)/2-o)%N,ic为位于最高层的控件序号,o为绘制层次,N为控件个数;o的值越小所得的控件序号对应的菜单控件就越先绘制,按o由0增至n-1代入I(o),得到层叠顺序从最底层到最高层的菜单控件序号。
6.一种具有环绕效果的菜单容器控件的装置,其特征在于,包括,菜单绘制模块、手势识别模块、参数转化模块以及布局计算模块;其中,
菜单绘制模块,用于在容器界面内建立直角坐标系,根据菜单控件绘制层次和区域范围进行菜单绘制,并以闭合曲线作为绘制菜单控件的环绕轨迹,闭合曲线通过如权利要求1所述的方法进行绘制;
手势识别模块,用于根据一定的时间阀值和触控屏输入信号,判断用户的手势类型,并采集手势的相关参数;
参数转化模块,用于将手势识别采集的参数转化为菜单控件布局所需的参数增量;
布局计算模块,用于根据参数增量和参数方程计算菜单控件的环绕位置,并结合缩放和叠加算法确定菜单绘制的区域范围及绘制层次;
菜单控件在容器界面内的区域范围采用中心点坐标(xo,yo)和菜单控件宽度w、高度h确定,菜单控件在X轴上的范围为[xo-w/2,xo+w/2],Y轴上的范围为[yo-h/2,yo+h/2]。
7.根据权利要求6所述的具有环绕效果的菜单容器控件的装置,其特征在于,在容器界面内设有直角坐标系,其原点位于容器界面的左上角,X轴与Y轴分别为窗体界面的上边缘和左边缘,并将容器界面的可视区域设在第一象限。
8.根据权利要求6所述的具有环绕效果的菜单容器控件的装置,其特征在于,上述环绕轨迹的坐标方程G(x,y)采用参数方程G(X(θ),Y(θ))表示,其中x=a+mcosθ,y=b+nsinθ,θ为参数且在[0,2π]之间,(a,b)为中心点坐标,m、n分别为中心点至环绕轨迹沿Y轴、X轴方向的长度。
9.根据权利要求6所述的具有环绕效果的菜单容器控件的装置,其特征在于,所述闭合曲线是圆形曲线或椭圆形曲线。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201110393479.6A CN102541537B (zh) | 2011-12-01 | 2011-12-01 | 一种具有环绕效果的菜单容器控件的实现方法及装置 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201110393479.6A CN102541537B (zh) | 2011-12-01 | 2011-12-01 | 一种具有环绕效果的菜单容器控件的实现方法及装置 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN102541537A CN102541537A (zh) | 2012-07-04 |
CN102541537B true CN102541537B (zh) | 2014-12-31 |
Family
ID=46348514
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201110393479.6A Active CN102541537B (zh) | 2011-12-01 | 2011-12-01 | 一种具有环绕效果的菜单容器控件的实现方法及装置 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN102541537B (zh) |
Families Citing this family (13)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102841749A (zh) * | 2012-07-16 | 2012-12-26 | 宇龙计算机通信科技(深圳)有限公司 | 终端和集成操作区域控制方法 |
CN102799435B (zh) * | 2012-07-16 | 2016-07-13 | Tcl集团股份有限公司 | 一种3d控件交互方法及系统 |
CN103226452B (zh) * | 2013-02-28 | 2016-03-30 | 天脉聚源(北京)传媒科技有限公司 | 一种多媒体文件的展示方法及装置 |
CN103279357A (zh) * | 2013-06-05 | 2013-09-04 | 四目信息科技(上海)有限公司 | 计算机图形界面中实现滑动轮盘控件功能的系统及其方法 |
WO2016101160A1 (en) * | 2014-12-24 | 2016-06-30 | Intel Corporation | User interface for liquid container |
US9854156B1 (en) | 2016-06-12 | 2017-12-26 | Apple Inc. | User interface for camera effects |
CN107980121A (zh) * | 2017-03-20 | 2018-05-01 | 深圳大趋智能科技有限公司 | 圆形自定义控件执行动画的方法及装置 |
DK180859B1 (en) * | 2017-06-04 | 2022-05-23 | Apple Inc | USER INTERFACE CAMERA EFFECTS |
CN109426495A (zh) * | 2017-08-24 | 2019-03-05 | 阿里巴巴集团控股有限公司 | 一种视图组件的布局方法及设备 |
CN111142870B (zh) * | 2019-12-20 | 2022-11-15 | 建信金融科技有限责任公司 | web界面定制方法、装置、电子设备及存储介质 |
CN111045569A (zh) * | 2019-12-25 | 2020-04-21 | 上海融客软件科技有限公司 | 控件显示方法、装置、计算机设备及存储介质 |
US11778339B2 (en) | 2021-04-30 | 2023-10-03 | Apple Inc. | User interfaces for altering visual media |
CN113867856A (zh) * | 2021-08-30 | 2021-12-31 | 惠州华阳通用电子有限公司 | 一种卡片隐喻式界面实现方法 |
Citations (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN1797295A (zh) * | 2004-12-25 | 2006-07-05 | 鸿富锦精密工业(深圳)有限公司 | 一种用于选择动态选项的图形用户界面 |
CN101727325A (zh) * | 2009-12-30 | 2010-06-09 | 中国电信股份有限公司 | 一种具有凸镜效果的图像容器控件实现方法和装置 |
Family Cites Families (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
WO2003062976A1 (fr) * | 2002-01-22 | 2003-07-31 | Fujitsu Limited | Dispositif et procede pour la selection d'element de menu |
CN100405267C (zh) * | 2004-06-26 | 2008-07-23 | 鸿富锦精密工业(深圳)有限公司 | 环状屏幕显示菜单的选择方式及显示装置 |
-
2011
- 2011-12-01 CN CN201110393479.6A patent/CN102541537B/zh active Active
Patent Citations (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN1797295A (zh) * | 2004-12-25 | 2006-07-05 | 鸿富锦精密工业(深圳)有限公司 | 一种用于选择动态选项的图形用户界面 |
CN101727325A (zh) * | 2009-12-30 | 2010-06-09 | 中国电信股份有限公司 | 一种具有凸镜效果的图像容器控件实现方法和装置 |
Also Published As
Publication number | Publication date |
---|---|
CN102541537A (zh) | 2012-07-04 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN102541537B (zh) | 一种具有环绕效果的菜单容器控件的实现方法及装置 | |
EP3404520B1 (en) | Method of displaying information by using touch input in mobile terminal | |
CN103116432B (zh) | 一种触摸屏的三维操作控制方法、装置及其移动终端 | |
US20170293361A1 (en) | Mobile terminal and method for controlling haptic feedback | |
CN110727496B (zh) | 图形用户界面的布局方法、装置、电子设备及存储介质 | |
CN102929556B (zh) | 一种基于触摸屏的交互控制方法及设备 | |
CN103488413B (zh) | 触控设备及在触控设备上显示3d界面的控制方法和装置 | |
JP2015504565A (ja) | 描画制御方法、装置、およびモバイル端末 | |
CN103150093B (zh) | 一种操作提示标识符移动的方法、装置及终端 | |
KR20150025635A (ko) | 스크린을 제어하는 전자 장치 및 방법 | |
CN108279848B (zh) | 一种显示方法及电子设备 | |
CN106909246B (zh) | 一种电子书写擦除方法及智能触摸电视 | |
CN105242776A (zh) | 一种智能眼镜的控制方法及智能眼镜 | |
KR20150043109A (ko) | 오브젝트 디스플레이를 제어하는 전자 장치 및 방법 | |
CN103116446B (zh) | 一种触控便捷式设备列表交互方法 | |
CN105204754B (zh) | 触摸屏的单手操作方法及装置 | |
CN112328158A (zh) | 交互方法、显示装置、发射装置、交互系统及存储介质 | |
KR102389782B1 (ko) | 멀티 터치 패턴을 이용한 유저 인터페이스 메뉴 디스플레이 장치 및 방법 | |
CN103164057A (zh) | 一种显示信息的方法和装置 | |
CN109858000A (zh) | 表格处理方法、装置、系统、存储介质及交互智能平板 | |
CN105511764A (zh) | 一种终端的页面移动方法、装置及终端 | |
CN103809912A (zh) | 基于多点触控触摸屏的平板电脑 | |
CN111367455A (zh) | 一种触控屏人机交互精确定位和测量方法 | |
CN102298456B (zh) | 分析二维轨迹以产生至少一非线性指标的方法及触控模组 | |
CN113485590A (zh) | 触控操作方法及装置 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
C06 | Publication | ||
PB01 | Publication | ||
C10 | Entry into substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
C14 | Grant of patent or utility model | ||
GR01 | Patent grant | ||
CP03 | Change of name, title or address |
Address after: 303-e, Zone C, innovation building, software park, Xiamen Torch hi tech Zone, Xiamen, Fujian, 361000 Patentee after: Xiamen Yaxun Zhilian Technology Co.,Ltd. Country or region after: China Address before: No. 46 Guanri Road, Huli District, Xiamen City, Fujian Province 361000 Patentee before: XIAMEN YAXON NETWORK Co.,Ltd. Country or region before: China |
|
CP03 | Change of name, title or address |