CN103345354B

CN103345354B - 一种图形界面焦点形状处理的方法及系统

Info

Publication number: CN103345354B
Application number: CN201310265218.5A
Authority: CN
Inventors: 卢伟超; 姬锐锋
Original assignee: Shenzhen TCL Industry Research Institute Co Ltd
Current assignee: Shenzhen TCL Industry Research Institute Co Ltd
Priority date: 2013-06-27
Filing date: 2013-06-27
Publication date: 2017-07-18
Anticipated expiration: 2033-06-27
Also published as: CN103345354A

Abstract

本发明属于图像处理技术领域，尤其涉及一种图形界面焦点形状处理的方法及系统，所述方法包括下述步骤：检测图形界面上的焦点位置变化情况；当检测焦点位置发生变化时，获取起点焦点和落点焦点所在位置的坐标值、图形形状及大小；根据起点焦点和落点焦点所在位置的坐标值、图形形状及大小，确定焦点图形形状渐变方案，根据焦点图形形状渐变方案生成焦点渐变动画并播放，待焦点渐变动画播放结束后，在图形界面上绘制出落点焦点图形形状和大小。本发明旨在解决现有技术中在一般人机交互界面中存在不同形状和大小的焦点图形，在焦点图形移动时生硬的从一种形状突变到另一种形状的问题。

Description

一种图形界面焦点形状处理的方法及系统

技术领域

本发明属于图像处理技术领域，尤其涉及一种图形界面焦点形状处理的方法及系统。

背景技术

人机交互界面的焦点移动，是用户体验的重要部分。焦点能够流畅的移动，且焦点移动满足用户预期，会带来良好的用户感受。在一般人机交互界面中焦点起落点的形状大小是固定的。例如：一般的焦点系统，所有焦点都是矩形，或者所有焦点都是圆形，这样就限制并束缚了设计者的发挥，此时焦点移动时焦点形状是无需变化的。

在现有的人机交互界面中还存在不同形状和大小的焦点，在焦点移动时，焦点生硬的从一种形状突变到另一种形状，略显枯燥、不够自然。

发明内容

本发明实施例的目的在于提供一种图形界面焦点形状处理的方法和系统，旨在解决现有技术中在一般人机交互界面中存在不同形状和大小的焦点图形，在焦点图形移动时生硬的从一种形状突变到另一种形状的问题。

本发明实施例提供了一种图形界面焦点形状处理的方法，所述方法包括下述步骤：

检测图形界面上的焦点位置变化情况；

当检测所述焦点位置发生变化时，获取起点焦点和落点焦点所在位置的坐标值、图形形状及大小；

根据所述起点焦点和落点焦点所在位置的坐标值、图形形状及大小，确定焦点图形形状渐变方案；

根据所述焦点图形形状渐变方案生成焦点渐变动画并播放，待所述焦点渐变动画播放结束后，在所述图形界面上绘制出所述落点焦点图形形状和大小。

本发明实施例还提供了一种图形界面焦点形状处理的系统，所述系统包括：

检测单元，用于检测图形界面上的焦点位置变化情况；

获取单元，用于当检测所述焦点位置发生变化时，获取起点焦点和落点焦点所在位置的坐标值、所述起点焦点和所述落点焦点的图形形状及大小；

图形渐变单元，用于根据所述起点焦点和落点焦点所在位置的坐标值、图形形状及大小，确定焦点图形形状渐变方案，根据所述焦点图形形状渐变方案生成焦点渐变动画并播放，待所述焦点渐变动画播放结束后，在所述图形界面上绘制出所述落点焦点图形形状和大小。

在本发明实施例中，检测图形界面上的焦点位置变化情况，当检测焦点位置发生变化时，获取起点焦点和落点焦点所在位置的坐标值、起点焦点和落点焦点的图形形状及大小，再根据起点焦点和落点焦点所在位置的坐标值、起点焦点和落点焦点的图形形状及大小，确定焦点图形形状渐变方案并执行，根据焦点图形形状渐变方案生成焦点渐变动画并播放，待焦点渐变动画播放结束后，将落点焦点图形形状和大小绘制在图形界面上。从而实现当焦点在起落点位置的坐标值不相同且形状大小不一样或形状相同大小不一样时，当焦点移动时，焦点的形状和大小是平滑渐变的，因此会给用户带来更流畅的使用体验。

附图说明

图1是本发明实施例一提供的图形界面焦点形状处理的方法的流程图。

图2是本发明实施例一提供的图形界面焦点形状处理的方法中，根据所述起点焦点和落点焦点分别所在位置的坐标值、图形形状及大小，确定焦点图形形状渐变方案的步骤的流程图。

图3是本发明实施例二提供的图形界面焦点形状处理的方法中的焦点图形形状渐变方案为正多边形到圆形间或圆形到正多边形间的平滑渐变方案的流程图。

图4是本发明实施例一、二提供的随时间变化的倒角曲线公式的倒角半径r、正多边形倒角弧心O_i以及正多边形倒角曲线之间的关系示意图。

图5是本发明实施例二提供的正方形平滑渐变为圆形的渐变示意图。

图6是本发明实施例二提供的正三角形平滑渐变为圆形的渐变示意图。

图7是本发明实施例三提供的图形界面焦点形状处理的方法中的焦点图形形状渐变方案为焦点图形平滑缩放方案的流程图.

图8是本发明实施例三提供的正多边形和圆形平滑缩放的渐变示意图。

图9是本发明实施例四提供的图形界面焦点形状处理的方法中的焦点图形形状渐变方案为正多边形间的平滑渐变方案的流程图。

图10是本发明实施例四提供的正方形平滑渐变为正三角形的渐变示意图。

图11是本发明实施例五提供的图形界面焦点形状处理的系统的组成结构图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

实施例一

请参阅图1，本发明实施例一提供的图形界面焦点形状处理的方法的流程图，该方法包括具体如下步骤：

步骤S101、检测图形界面上的焦点位置变化情况；

本发明实施例中，检测焦点位置是否发生变化通过起点焦点和落点焦点的水平位置和垂直位置的坐标值对比来判断，当检测到起点焦点和落点焦点的水平位置的坐标值不同或垂直位置的坐标值不同或水平位置和垂直位置的坐标值都不同时，说明起落点焦点的位置发生了变化。

本发明实施例中，在步骤S101检测图形界面上的焦点位置变化情况之前，还包括步骤：用户触发逻辑。用户触发逻辑是指用户按键等，触发焦点移动的输入。最常见的是按键操作，也包括触屏、手势、空间动作、语音操作等输入方式。

步骤S102、当检测到所述焦点位置发生变化时，获取起点焦点和落点焦点所在位置的坐标值、所述起点焦点和所述落点焦点的图形形状及大小；

本发明实施例中，起点焦点和落点焦点所在位置的坐标值和图形形状、大小在图形界面系统中已经均被设计师初始化，其中焦点图形形状包括但不限于正多边形和圆形，其中正多边形为正三角形、正方形、正五边形、正N边形等等。

步骤S103、根据所述起点焦点和落点焦点所在位置的坐标值、图形形状及大小，确定焦点图形形状渐变方案。

需要说明的是，所述焦点图形形状渐变方案为：分别确定好起点焦点的坐标值和落点焦点的坐标值，以确定从起点焦点到落点焦点的运动轨迹线，根据起点焦点的图形形状及大小和落点焦点的图形形状及大小的比较结果，确定从起点焦点的图形形状及大小，经过运动轨迹线，渐变到落点焦点的图形形状及大小的渐变方案。

步骤S104、根据所述焦点图形形状渐变方案生成焦点渐变动画并播放，待所述焦点渐变动画播放结束后，在所述图形界面上绘制出所述落点焦点图形形状和大小。

由于图形形状渐变方案包括了在运动轨迹线上，从起点焦点的图形形状和大小渐变到落点焦点的图形形状和大小的渐变过程中的图形形状和大小；按照时间顺序，绘制出相应时间的焦点图形形状和大小（包括从起点焦点的图形形状和大小渐变到落点焦点的图形形状和大小的渐变过程中所有的图形形状和大小），以生成焦点渐变动画。

待焦点渐变动画播放结束后，在所述图形界面上绘制出所述落点焦点图形形状和大小。

在本实施例中，在人机交互界面中用户触发逻辑（例如：按键操作、语音操作、触屏操作等方式操作），检测图形界面上的焦点位置变化情况，当检测焦点位置发生变化时，获取起点焦点和落点焦点所在位置的坐标值、起点焦点和落点焦点的图形形状及大小，再根据起点焦点和落点焦点所在位置的坐标值、起点焦点和落点焦点的图形形状及大小，确定焦点图形形状渐变方案，根据焦点图形形状渐变方案生成焦点渐变动画并播放，待焦点渐变动画播放结束后，将落点焦点图形形状和大小绘制在图形界面上。从而实现当焦点在起落点位置的坐标值不相同且形状大小不一样或形状相同大小不一样时，当焦点移动时，焦点的形状和大小是平滑渐变的，因此会给用户带来更流畅的使用体验。

请参阅图2，本发明实施例一提供的图形界面焦点形状处理中的方法的步骤S103的具体流程图，该方法包括具体如下步骤：

需要说明的是，已预先获取到在起点焦点位置绘制的图形形状和大小，以及需要在落点焦点位置绘制的图形形状和大小。

步骤S201、判断起落点焦点的图形形状是否为相同的图形形状，如果是，则执行步骤S202，如果否，则执行步骤S204；

具体地，焦点的图形形状相同是指：起点焦点图形形状和落点焦点图形形状均为正多边形或圆形等图形形状，该正多边形包括被拉伸或缩小后的长多边形；比如：正方形被拉伸或缩放前后的图形均为长方形，长N边形与长N边形被拉伸或缩小为另一长N边形也为相同图形形状，圆形与圆形被拉伸或缩小成椭圆也为相同图形形状，椭圆与椭圆被拉伸或缩小成另一椭圆也为相同图形形状。

步骤S202、判断起落点焦点的图形大小是否相等，如果是，则执行步骤S207，如果否，则执行步骤S203；

步骤S203、执行焦点图形平滑缩放方案，生成焦点渐变动画并播放，该方案为焦点的图形形状进行拉伸或缩小处理；

具体地，所述焦点图形平滑缩放方案包括了起点焦点到落点焦点的渐变动画中的每一幅画的拉伸比例或缩小比例；从而，播放执行焦点图形平滑缩放方案生成焦点渐变动画时，产生从起点焦点的图形形状到落点焦点的图形形状的过程中产生拉伸或缩小的渐变效果。

步骤S204、判断起点焦点或落点焦点的图形形状是否为圆形形状，如果是，则执行步骤S205，如果否，则执行步骤S206；

步骤S205、执行圆形到正多边形间的平滑渐变方案，生成焦点渐变动画并播放，该方案为当起点焦点的图形形状为圆形时，起落点焦点图形形状由圆形到正多边形渐变，或执行正多边形到圆形间的平滑渐变方案，当落点焦点的图形形状为圆形时，起落点焦点图形形状由正多边形到圆形渐变；

步骤S206、执行正多边形间的平滑渐变方案，生成焦点渐变动画并播放，该方案为起点焦点的图形形状慢慢渐变成圆形，圆形慢慢渐变成落点焦点的图形形状；

步骤S207、当焦点渐变动画结束后，在图形界面上绘制落点焦点的图形形状和大小。

本发明实施例提供的图形界面焦点形状处理的方法适用于带有焦点移动的人机交互界面，需要焦点在正多边形、圆形（及这两种形状的x，y轴缩放变形）或其他形状间渐变的情况。例如，手机、电脑、电视等显示界面，焦点形状从长方形渐变为圆形等。

本发明实施例中，首先通过判断起落点焦点的图形形状是否相同来确定起落点焦点形状平滑渐变方案，当起落点焦点的图形形状相同时，再判断起落点焦点的图形大小是否相等，如果图形形状相同大小相等，则直接绘制等同的图形在图形界面上，不需要播放起落点焦点图形形状渐变动画，如果图形形状相同但大小不相等，则对图形进行拉伸或缩小并播放起落点焦点图形形状渐变动画；其次，当起落点焦点的图形形状不相同时，再判断起落点焦点中起点焦点或落点焦点的图形形状是否是圆形，如果是，则根据起落点焦点图形形状完成多边形到圆形的渐变或者圆形到多边形的渐变并播放相应的起落点焦点图形形状渐变动画，当起落点焦点中任何一个焦点图形形状都不是圆形时，此时采用多边形到多边形的渐变方案，起点焦点的图形形状随时间先渐变成圆形，再从圆形渐变成落点焦点的图形形状并播放起落点焦点图形形状渐变动画。

本发明实施例可以实现焦点在起落点位置的坐标值不相同且形状大小不一样或形状相同大小不一样时，焦点移动时焦点的形状和大小是平滑渐变的，因此会给用户带来更流畅的使用体验。

例如：在人机交互界面中有四张图片，A、B图片的图形形状为正方形，大小相等，C图片的图形形状为长方形，D图片的图形形状为正三角形。当用户选择A图片时，起点焦点所在位置和图形形状已经给出，即已经得到起点焦点的位置（A图片中心点的水平和垂直坐标值）和图形形状（正方形）；待起点焦点选中A图片之后，移动焦点，当焦点到达“确定”按钮时，该按钮的位置即为落点焦点所在位置，若按钮的图形形状为圆形，则该落点焦点的图形形状为圆形，选中“确定”按钮后，开始确定焦点需从A图片位置移动到“确定”按钮的位置，并且从正方形到圆形渐变的方案，启动动画开始执行该随时间变化的方案，比如2秒、5秒等一定时间内，将出现正方形向圆形渐变的动画过程，动画结束后在“确定”按钮上绘制出圆形焦点。

或者当用户从A图片移动到B张图片，起落点焦点所在位置发生了变化即A图片中心的位置为起点焦点位置，B图片中心的位置为落点焦点位置，起落点焦点的图形形状都为正方形，大小相等。当B图片被选中时，直接在B图片上绘制出正方形焦点。

或者当用户从A图片或B图片移动到C图片时，起落点焦点所在位置发生了变化即A或B图片中心的位置为起点焦点位置，C图片中心的位置为落点焦点位置，起点焦点的图形形状为正方形，落点焦点的图形形状为长方形，当C图片被选中时，开始确定焦点需从A或B图片位置移动到C图片位置，并且从正方形到长方形渐变的方案，启动动画开始执行该随时间变化的方案，比如2秒、5秒等一定时间，此时起点焦点移动到落点焦点时出现正方形进行拉伸向长方形渐变的动画，动画结束后在C图片上绘制出长方形焦点。

或者当用户从C图片移动到D图片时，起落点焦点所在位置发生了变化即C图片中心的位置为起点焦点位置，D图片中心的位置为落点焦点位置，起点焦点的图形形状为长方形，落点焦点的图形形状为正三角形，当D图片被选中时，开始确定焦点需从A或B图片位置移动到C图片位置，并且从长方形到正三角形渐变的方案，启动动画开始执行该随时间变化的方案，比如2秒、5秒等一定时间，此时起点焦点移动到落点焦点时出现长方形向圆形渐变之后再渐变成正三角形的动画，动画结束后在D图片上绘制出正三角形焦点。

实施例二

作为本发明另一实施例，若本发明实施例一提供的图形界面焦点形状处理中的方法的步骤S103中的焦点图形形状渐变方案为正多边形到圆形间或圆形到正多边形间的平滑渐变方案时，图3示出了正多边形到圆形间或圆形到正多边形间的平滑渐变方案的方法的流程，具体步骤如下：

步骤S301、计算随时间变化的倒角半径r；

其中r为倒角弧的半径，r初始化数值为0。r计算公式为：

其中R为多边形外接圆半径，焦点飞行总时间为t_a，当前时间为t，n为正多边形的边的数量，r随时间均匀增长而变化。需要说明的是，多边形外接圆半径R为多边形的外接圆的半径；焦点飞行总时间t_a为预设时间，该预设时间可以根据渐变的快慢需要而做相应调整，在此不做限定调整的方式及方法。

步骤S302、计算正多边形的倒角弧心O_i（x_Oi，y_Oi）所在位置的坐标值；

其中O_i（x_Oi，y_Oi）为倒角弧的圆心，β为第一个顶点的角度。正多边形倒角弧心O_i计算公式为：

倒角弧心O_i随倒角半径变化而变化。

步骤S303、计算正多边形的倒角曲线（x，y）；

其中正多边形的倒角曲线的计算公式为：

倒角曲线随倒角半径变化而变化；

其中β根据正多边形的摆放位置取值。例如：若正多边形，左右对称摆放。当最高处为一条边时，取当最高处为一个顶点时，取

步骤S304、根据倒角半径、倒角弧心所在位置的坐标值和倒角曲线，绘制出相应时间位置的焦点图形形状和大小；

步骤S305、在图形界面上显示该时间位置对应的焦点图形形状。

在本发明实施例中，图4示出了本实施例提供的随时间变化的倒角曲线公式的倒角半径r、正多边形倒角弧心O_i以及正多边形倒角曲线之间的关系示意图。当起点焦点图形形状为正多边形，落点焦点图形形状为圆形时，起落点焦点移动时，计算出随时间变化的倒角半径r，计算出正多边形倒角弧心O_i（x_Oi，y_Oi）和正多边形倒角曲线（x，y），根据倒角半径r，倒角弧心O_i（x_Oi，y_Oi）和倒角曲线（x，y），绘制出在相应时间位置的焦点图形形状和大小，并在图形界面上显示该时间位置对应的焦点图形形状，即绘制出对应时间位置的焦点图形形状和大小并显示在图形界面上；根据各对应时间位置的焦点图形形状和大小，组成正多边形向圆形渐变的动画。从而，根据所述焦点图形形状渐变方案生成正多边形向圆形渐变的动画并播放，动画结束后，在图形界面上绘制出圆形。

例如：在起点焦点A位置时是长方形，落点焦点B位置时是圆形。当前焦点在A位置，仅绘制静态的长方形焦点A，当用户按键后，图形界面焦点形状处理的系统确定焦点需要从A位置移动到B位置，并且从长方形渐变到圆形。图形界面焦点形状处理的系统绘制移动且形状渐变的焦点，启动焦点移动动画，同时启动焦点形变动画，长方形渐变为圆形。图形界面焦点形状处理的系统会将这段动画绘制在用户界面上，展示出焦点一边飞行一边形状渐变的动画，焦点移动结束后，最后仅绘制静态的圆形焦点B。

本发明实施例中，当焦点图形形状渐变方案为正多边形到圆形间的平滑渐变方案时，所生成的动画为正多边形到圆形渐变的动画。起点焦点的图形形状为正多边形，动画开始时，起点焦点的正多边形的倒角半径为0，当起点焦点的正多边形的倒角半径逐渐增大时，起点焦点的正多边形的倒角曲线的弧线部分长度越来越大，直线部分长度越来越短，结束时，起点焦点的正多边形的倒角半径达到所述起点焦点的正多边形内切圆的半径，此时落点焦点的图形形状为圆形。

正多边形渐变为圆形，就是逐步改变内切倒角的半径，从0渐变到内切圆（圆形）半径。开始时，倒角半径为0，就是正多边形；当倒角半径逐渐增大，倒角曲线的弧线部分长度越来越大，直线部分长度越来越短；结束时，倒角半径达到其内切圆半径时，就形成了一个圆形。如图5所示，本发明实施例提供的正方形平滑渐变为圆形的渐变示意图，如图6所示，本发明实施例提供的正三角形平滑渐变为圆形的渐变示意图。

本发明实施例中，当焦点图形形状渐变方案为圆形到正多边形间的平滑渐变方案时，该方案是正多边形到圆形间的平滑渐变方案的逆方案，所生成的动画为正多边形到圆形的渐变的逆动画，即圆形向正多边形渐变的动画。当起点焦点图形形状为圆形，落点焦点图形形状为正多边形时，起落点焦点移动时，计算出随时间变化的r，计算出正多边形倒角弧心O_i（x_Oi，y_Oi）和正多边形倒角曲线（x，y），根据倒角半径r，倒角弧心O_i（x_Oi，y_Oi）和倒角曲线（x，y），绘制出在相应时间位置的焦点图形形状和大小，并在图形界面上显示该时间位置对应的焦点图形形状，即绘制出对应时间位置的焦点图形形状和大小并显示在图形界面上；根据各对应时间位置的焦点图形形状和大小，组成圆形向正多边形的动画。从而，根据所述焦点图形形状渐变方案生成圆形向正多边形渐变的动画并播放，动画结束后，在图形界面上绘制出正多边形。

本发明实施例中，起点焦点的图形形状为圆形，开始时，将起点焦点的圆形的倒角半径设置为起点焦点的圆的半径，随着倒角半径逐渐减小，倒角曲线的弧线部分长度越来越短，直线部分长度越来越长，结束时，落点焦点的正多边形的倒角半径为0，此时得到的正多边形为落点焦点的图形形状。

其中，圆形渐变为正多边形，就是逐步改变外切倒角的半径，从内切圆（圆形）半径渐变到0。开始时，倒角半径为内切圆半径，就是圆形；当倒角半径逐渐减小，倒角曲线的弧线部分长度越来越短，直线部分长度越来越长；结束时，倒角半径为0时，就形成了一个正多边形。

实施例三

作为本发明另一实施例，若本发明实施例一提供的图形界面焦点形状处理中的方法的步骤S103中的焦点图形形状渐变方案为焦点图形平滑缩放方案时，图7示出了焦点图形平滑缩放方案的方法的流程，具体步骤如下：

步骤S701、计算起点焦点图形的坐标值（x，y）；

本发明实施例中，起点焦点的初始图形形状均为正多边形或圆形，其中起点焦点图形的坐标值定义为（x₀，y₀），起点焦点的缩放系数为（k_x0，k_y0），当缩放系数不为（1,1）时，说明起点焦点图形为多边形或者椭圆。起点焦点图形的坐标值的计算公式为x=x₀·k_x0，y=y₀·k_y0，其中k_x0是x方向缩放比例，k_y0是y方向缩放比例。

步骤S702、计算焦点图形的倒角曲线（x_kt，y_kt）；

焦点图形的倒角曲线的计算公式为：

其中焦点飞行总时间为t_a，当前时间为t，落点焦点图形的缩放系数为（k_x1，k_y1），k_x0、k_x1是x方向缩放比例，k_y0、k_y1是y方向缩放比例，倒角曲线随时间变化而变化。

步骤S703、根据倒角曲线，绘制出相应时间位置的焦点图形形状和大小；

步骤S704、在图形界面上显示该时间位置对应的焦点图形形状。

本发明实施例中，焦点图形形状相同是指：起点焦点图形形状和落点焦点图形形状均为正多边形或均为圆形，该正多边形包括被拉伸或缩小后的长多边形，比如：正方形与正方形被拉伸或缩放成的长方形为相同图形形状，长N边形与长N边形被拉伸或缩小成的另一长N边形也为相同图形形状，圆形与圆形被拉伸或缩小成的椭圆也为相同图形形状，椭圆与椭圆被拉伸或缩小成的另一椭圆也为相同图形形状。

本发明实施例中，起落点焦点图形形状可以是正多边形或圆形，也可以不是正多边形或圆形，而是正多边形或圆形缩放产生的形状，或者起落点焦点图形形状不是标准大小也需要缩放。因此需要给起落点焦点相应的坐标值乘上相应的缩放系数，确定焦点渐变的方案，从而实现起落点焦点图形形状的平滑渐变。

本发明实施例中，起点焦点的图形形状可以为正方形或圆形，起落点焦点相应的坐标值乘上相应的缩放系数，确定焦点渐变的方案，从而实现起落点焦点图形形状的平滑渐变。

例如：当落点焦点图形是长方形，需要给起点焦点的正方形的x，y坐标值乘以缩放系数（2.0,1.0），表示落点焦点图形的x轴比例相对于起点焦点图形的x轴比例放大2倍，落点焦点图形的y轴比例不变。当落点焦点图形是椭圆形，需要给起点焦点的圆形的x，y坐标值乘以缩放系数（2.0,1.0），表示落点焦点图形的x轴比例相对于起点焦点图形的x轴比例放大2倍，落点焦点图形的y轴比例不变。如图8所示，正方形乘以缩放系数，可以变形为长方形；圆形乘以缩放系数，可以变形为椭圆。

本发明实施例中，可以通过调整缩放系数以使起点焦点图形形状变形成落点焦点图形形状（圆形或者不同比例的椭圆）；同理，起点焦点图形形状可以是多边形，通过缩放系数使起点焦点图形形状变形为正多边形或者不同比例的多边形。当落点焦点的图形形状为椭圆时，椭圆所在位置为该起点焦点的圆形坐标值乘上起点焦点的缩放系数（k_x0，k_y0），或落点焦点的图形形状为长方形时，长方形所在位置为该起点焦点的正方形坐标值乘上起点焦点的缩放系数（k_x0，k_y0）。在根据焦点图形形状渐变方案对椭圆或长方形进行拉伸或缩小以生成焦点渐变动画的过程中，起点焦点相应的坐标值再乘上相应的缩放系数（k_x1，k_y1），以确定对应时间位置的椭圆或长方形（包括椭圆或长方形的位置及大小）；从而，播放焦点渐变动画时，呈现从起点焦点的图形形状到落点焦点的图形形状渐变的效果。

例如：起点焦点和落点焦点图形均为椭圆，但是大小不相等，此时起点焦点的坐标值为圆形的坐标值乘上缩放系数（2.0，1.0），即起点焦点的椭圆为圆形在x轴的比例放大一倍；对起点焦点的椭圆进行拉伸变形为落点焦点的椭圆时，其中拉伸的系数为（1.0，2.0），表示为落点焦点的坐标值为起点焦点的坐标值乘上缩放系数（1.0，2.0），起点焦点的椭圆将变形为落点焦点的椭圆，落点焦点的椭圆相对于起点焦点的椭圆在x轴的比例不变，y轴的比例放大了一倍。

实施例四

作为本发明另一实施例，若本发明实施例一提供的图形界面焦点形状处理中的方法的步骤S103中的焦点图形形状渐变方案为正多边形间的平滑渐变方案时，图9示出了所述正多边形间的平滑渐变方案的方法的流程，具体步骤如下：

步骤S901、起点焦点的第一正多边形渐变为圆形，计算随时间变化的第一正多边形的倒角半径，计算第一正多边形的倒角弧心所在位置的坐标值和计算第一正多边形的倒角曲线；其中，所述第一正多边形为任一上述的正多边形。

其中倒角半径、倒角弧心所在位置的坐标值和倒角曲线的具体计算方法请参阅实施例二，在这里不再重复累述。

步骤S902、圆形渐变为落点焦点的第二正多边形，计算随时间变化的第二正多边形的倒角半径，计算第二正多边形的倒角弧心所在位置的坐标值和计算第二正多边形的倒角曲线；其中，所述第二正多边形为任一上述的正多边形；

需要说明的是，所述第一正多边形和所述第二正多边形不一定为大小相同的正多边形。

步骤S903、根据倒角半径、倒角弧心所在位置的坐标值和倒角曲线，绘制出相应时间位置的焦点图形形状和大小；

步骤S904、在图形界面上显示该时间位置对应的焦点图形形状。

本发明实施例中，当起点焦点图形形状为第一正多边形，落点焦点图形形状为第二正多边形时，起落点焦点移动时，首先由起点焦点的第一正多边形渐变为圆形，计算出随时间变化的倒角半径r，计算出起点焦点的第一正多边形的倒角弧心O_i（x_Oi，y_Oi）和起点焦点的第一正多边形的倒角曲线（x，y），当起点焦点的第一正多边形渐变为圆形时，再由圆形渐变为落点焦点的第二正多边形，计算出随时间变化的倒角半径r，计算出落点焦点的第二正多边形的倒角弧心O_i（x_Oi，y_Oi）和落点焦点的第二正多边形的倒角曲线（x，y），根据所述倒角半径r，倒角弧心O_i（x_Oi，y_Oi）和倒角曲线（x，y），绘制出在相应时间位置的焦点图形形状和大小，并在图形界面上显示该时间位置对应的焦点图形形状，即实时绘制出对应时间位置的焦点图形形状和大小并显示在图形界面上。

在本实施例中，将起点焦点图形形状根据确定的渐变方案进行变形，起点焦点的图形形状慢慢渐变成圆形，圆形慢慢渐变成落点焦点的图形形状，并同时播放焦点图形形状渐变动画，动画结束后，在图形界面上绘制出落点焦点的图形形状和大小。如图10所示，本发明实施例提供的正方形平滑渐变为正三角形的渐变示意图。

本发明实施例中，渐变开始时，起点焦点的正多边形的倒角半径为0，当起点焦点的正多边形的倒角半径逐渐增大时，起点焦点的正多边形的倒角曲线的弧线部分长度越来越大，直线部分长度越来越短，直到起点焦点的倒角半径达到起点焦点的正多边形内切圆的半径，此时焦点的图形形状为圆形。

当焦点的图形形状为圆形时，将落点焦点的正多边形的倒角半径设置为圆的半径，并将落点焦点图形的倒角半径逐渐减小，落点焦点的正多边形的倒角曲线的弧线部分长度越来越短，直线部分长度越来越长，结束时，落点焦点的正多边形的倒角半径为0，此时得到的正多边形为落点焦点的图形形状。

实施例五

请参阅图11，示出了本发明实施例五提供的图形界面焦点形状处理的系统的组成结构，所述的系统包括：检测单元111、获取单元112和图形渐变单元113。

检测单元111，用于检测图形界面上的焦点位置变化情况；

获取单元112，用于当检测所述焦点位置发生变化时，获取起点焦点和落点焦点所在位置的坐标值、所述起点焦点和所述落点焦点的图形形状及大小；

图形渐变单元113，用于根据所述起点焦点和落点焦点所在位置的坐标值、图形形状及大小，确定焦点图形形状渐变方案，根据所述焦点图形形状渐变方案生成焦点渐变动画并播放，待所述焦点渐变动画播放结束后，在所述图形界面上绘制出所述落点焦点图形形状和大小。

更进一步的，图形渐变单元113还包括：计算模块1131、第一判断模块1132、第二判断模块1133、第三判断模块1134和绘制模块1135。

计算模块1131、用于计算并确定焦点图形形状渐变方案；

第一判断模块1132、用于判断起点焦点和落点焦点的图形形状是否为相同的图形形状，如果是则执行第二判断模块1133，如果不是则执行第三判断模块1134；

第二判断模块1133、用于判断起点焦点和落点焦点的图形大小是否相等，如果是则执行绘制模块1135，如果不是则确定焦点图形形状渐变方案为焦点图形平滑缩放方案并同时播放焦点渐变动画；

第三判断模块1134、用于判断起点焦点或落点焦点的图形形状是否为圆形形状，如果是则确定焦点图形形状渐变方案为正多边形和圆形间的平滑渐变方案并同时播放焦点渐变动画，当起点焦点的图形形状为圆形时，焦点图形形状由圆形到正多边形渐变，当落点焦点的图形形状为圆形时，焦点图形形状由正多边形到圆形渐变，如果不是则确定焦点图形形状渐变方案为正多边形间的平滑渐变方案并同时播放焦点渐变动画，起点焦点的图形形状慢慢渐变成圆形，圆形慢慢渐变成落点焦点的图形形状；

绘制模块1135、用于所述焦点渐变动画播放结束后，在图形界面上绘制落点焦点的图形形状和大小。

本实施例提供的图形界面焦点形状处理的系统，通过检测单元111检测图形界面上的焦点位置变化情况；根据起落点焦点移动情况，通过获取单元112获取起点焦点和落点焦点所在位置的坐标值、所述起点焦点和所述落点焦点的图形形状及大小；在图形渐变单元113中确定焦点图形形状渐变方案，通过判断模块判断起落点焦点图形形状是否相同和大小是否相等，则确定不同的焦点图形形状渐变方案，根据所述焦点图形形状渐变方案生成焦点渐变动画并播放，待所述焦点渐变动画播放结束后，将所述落点焦点图形形状和大小绘制在所述图形界面上。从而，实现当焦点在起落点位置的坐标值不相同且形状大小不一样或形状相同大小不一样时，当焦点移动时，焦点的形状和大小是平滑渐变的，因此会给用户带来更流畅的使用体验。

值得注意的是，上述系统实施例中，所包括的各个单元只是按照功能逻辑进行划分的，但并不局限于上述的划分，只要能够实现相应的功能即可；另外，各功能单元的具体名称也只是为了便于相互区分，并不用于限制本发明的保护范围。

另外，本领域普通技术人员可以理解实现上述各实施例方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，相应的程序可以存储于一计算机可读取存储介质中，所述的存储介质，如ROM/RAM、磁盘或光盘等。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。

Claims

1.一种图形界面焦点形状处理的方法，其特征在于，所述方法包括下述步骤：

检测图形界面上的焦点位置变化情况；

根据所述焦点图形形状渐变方案生成焦点渐变动画并播放，待所述焦点渐变动画播放结束后，在所述图形界面上绘制出所述落点焦点图形形状和大小；

所述根据所述起点焦点和落点焦点所在位置的坐标值、图形形状及大小，确定焦点图形形状渐变方案包括：

判断起落点焦点的图形形状是否为相同的图形形状；

若为相同的图形形状时，判断起落点焦点的图形大小是否相等，如果不相等，则执行焦点图形平滑缩放方案；

若不为相同的图形形状时，判断起点焦点或落点焦点的图形形状是否为圆形形状；如果是圆形形状，则执行圆形到正多边形间的平滑渐变方案；如果不是圆形形状，则执行正多边形间的平滑渐变方案。

2.如权利要求1所述的方法，其特征在于，所述根据所述起点焦点和落点焦点所在位置的坐标值、图形形状及大小，确定焦点图形形状渐变方案具体为：

当起点焦点的图形形状为圆形，落点焦点的图形形状为正多边形时，将焦点图形形状渐变方案确定为圆形到正多边形间的平滑渐变方案，所述焦点图形形状由圆形到正多边形渐变。

3.如权利要求1所述的方法，其特征在于，所述根据所述起点焦点和落点焦点所在位置的坐标值、图形形状及大小，确定焦点图形形状渐变方案具体为：

当起点焦点的图形形状为正多边形，落点焦点的图形形状为圆形时，将焦点图形形状渐变方案确定为正多边形到圆形间的平滑渐变方案，所述焦点图形形状由正多边形到圆形渐变。

4.如权利要求2所述的方法，其特征在于，所述将焦点图形形状渐变方案确定为圆形到正多边形间的平滑渐变方案，焦点图形形状由圆形到正多边形渐变的具体步骤为：

计算正多边形的倒角半径，正多边形的倒角弧心所在位置的坐标值和正多边形的倒角曲线；

根据所述倒角半径、倒角弧心所在位置的坐标值和倒角曲线，实时绘制出对应时间位置的焦点图形形状和大小并显示在图形界面上；

所述倒角半径随时间匀速增长而变化；

所述倒角弧心所在位置的坐标值、倒角曲线随所述倒角半径变化而变化。

5.如权利要求4所述的方法，其特征在于，所述倒角半径具体为：

当起点焦点的图形形状为圆形，落点焦点的图形形状为正多边形时，初始倒角半径为所述圆形的半径。

6.如权利要求3所述的方法，其特征在于，所述将焦点图形形状渐变方案确定为正多边形到圆形间的平滑渐变方案，所述焦点图形形状由正多边形到圆形渐变的具体步骤为：

所述倒角半径随时间匀速增长而变化；

7.如权利要求6所述的方法，其特征在于，所述倒角半径具体为：

当所述起点焦点的图形形状为正多边形，所述落点焦点的图形形状为圆形时，初始所述倒角半径为0。

8.如权利要求1所述的方法，其特征在于，所述根据所述起点焦点和落点焦点所在位置的坐标值、图形形状及大小，确定焦点图形形状渐变方案具体为：

当起点焦点和落点焦点的图形形状相同时，并且大小不相等时，将焦点图形形状渐变方案确定为焦点图形平滑缩放方案，焦点的图形形状进行拉伸或缩小处理。

9.如权利要求8所述的方法，其特征在于，将焦点图形形状渐变方案确定为焦点图形平滑缩放方案，焦点的图形形状进行拉伸或缩小处理的具体步骤为：

计算起点焦点图形的坐标值，焦点图形的倒角曲线；

根据所述倒角曲线，实时绘制出对应时间位置的所述焦点图形形状和大小并显示在图形界面上；

所述倒角曲线随时间变化而变化。

10.如权利要求8所述的方法，其特征在于，所述起点焦点和落点焦点图形形状相同为正多边形或相同边数的长多边形的其中任一种图形形状。

11.如权利要求8所述的方法，其特征在于，所述起点焦点和落点焦点图形形状相同为圆形或椭圆的其中任一种图形形状。

12.如权利要求1所述的方法，其特征在于，所述根据所述起点焦点和落点焦点所在位置的坐标值、图形形状及大小，确定焦点图形形状渐变方案具体为：

当起点焦点的图形形状为正多边形，落点焦点的图形形状为正多边形时，将焦点图形形状渐变方案确定为正多边形间的平滑渐变方案，所述起点焦点的图形形状慢慢渐变成圆形，圆形慢慢渐变成所述落点焦点的图形形状。

13.如权利要求12所述的方法，其特征在于，所述将焦点图形形状渐变方案确定为正多边形间的平滑渐变方案，所述起点焦点的图形形状慢慢渐变成圆形，圆形慢慢渐变成所述落点焦点的图形形状的具体步骤为：

所述倒角半径随时间匀速增长而变化

14.如权利要求13所述的方法，其特征在于，所述倒角半径具体为：

渐变开始时，初始倒角半径为0；

检测焦点图形形状变化情况，当检测到焦点图形形状为圆形时，设置所述倒角半径为所述圆形的半径。

15.一种图形界面焦点形状处理的系统，其特征在于，所述系统包括：

检测单元，用于检测图形界面上的焦点位置变化情况；

获取单元，用于当检测所述焦点位置发生变化时，获取起点焦点和落点焦点所在位置的坐标值、图形形状及大小；

图形渐变单元，用于根据所述起点焦点和落点焦点所在位置的坐标值、图形形状及大小，确定焦点图形形状渐变方案，根据所述焦点图形形状渐变方案生成焦点渐变动画并播放，待所述焦点渐变动画播放结束后，在所述图形界面上绘制出所述落点焦点图形形状和大小；

其中，所述图形渐变单元具体包括：

计算模块，用于计算并确定焦点图形形状渐变方案；

第一判断模块，用于判断起点焦点和落点焦点的图形形状是否为相同的图形形状；

第二判断模块，用于判断起点焦点和落点焦点的图形大小是否相等，如果是则在图形界面上绘制落点焦点的图形形状和大小，如果不是，则确定焦点图形形状渐变方案为焦点图形平滑缩放方案并同时播放焦点渐变动画；

第三判断模块，用于判断起点焦点或落点焦点的图形形状是否为圆形形状，如果是则确定焦点图形形状渐变方案为正多边形到圆形间或圆形到正多边形间的平滑渐变方案并同时播放焦点渐变动画，如果不是，则确定焦点图形形状渐变方案为正多边形间的平滑渐变方案并同时播放焦点渐变动画；

绘制模块，用于所述焦点渐变动画播放结束后，在图形界面上绘制落点焦点的图形形状和大小。