1.画关闭按钮
拖动图片的功能放后面说,先把关闭按钮给画出来。
现在很多软件,类似QQ,360,91助手......等等软件,界面上都有很多很漂亮的按钮,当鼠标移上去,按钮变为高亮,当鼠标点击下去,按钮变为暗色凹下,当鼠标移开,按钮又恢复原来的样子。
这效果都是由多张图片切换而来的。
涉及到函数:eventFilter, installEventFilter.
几种按钮的enum:
2.窗体的移动
3.图片的移动
在操作上,有3个涉及到图片的移动:
(1).鼠标拖动图片
(2).鼠标拖动图片后,释放鼠标,图片恢复原位
(3).右键鼠标,图片右移
(4).键盘方向键控制图片的移动
(5).点击界面的4个按钮,分别移动到按钮对应的界面
4.关于鼠标控制的移动
这些主要是涉及到一些逻辑的代码,直接贴出:
5.点击界面4个按钮进行移动
6.键盘方向键的控制
捕捉对应的按键事件,只需重新实现键盘事件:
void keyPressEvent(QKeyEvent *);
左上键:图片右移
右下键:图片左移
7.图片移动的关键函数
移动图片的具体函数,要缓慢的移动图片,也就是在循环里面延迟一下,并响应UI事件,防止界面冻结(未响应)。
在程序中,出现setLabelMove和getLabelMove函数,这两个函数主要是用来防止多个事件同时移动界面,导致错误。所以这里相当于给图片的移动加锁,保证移动操作的唯一性。
qApp->processEvents(QEventLoop::AllEvents);
该函数用来处理所有事件,保证了界面的正常运行。
源码下载地址:360新版特性界面
作者 : gzshun.
E-Mail: gzshuns#163.com (@)
转载请注明出处:http://blog.csdn.net/gzshun/article/details/7626756
拖动图片的功能放后面说,先把关闭按钮给画出来。
现在很多软件,类似QQ,360,91助手......等等软件,界面上都有很多很漂亮的按钮,当鼠标移上去,按钮变为高亮,当鼠标点击下去,按钮变为暗色凹下,当鼠标移开,按钮又恢复原来的样子。
这效果都是由多张图片切换而来的。
new出一个QToolButton,设置关闭按钮图标。按钮图片一般都以4种状态提供,将4张图片拼成1张png。所以每次只需取出图片中的1/4就行,然后将关闭按钮移动到右上角。
想在Qt中实现这3种效果,很简单,只需在窗体中安装事件过滤器即可。涉及到函数:eventFilter, installEventFilter.
几种按钮的enum:
enum EButtonMouseState
{
EButtonMouseDefault = 0,
EButtonMouseEnter,
EButtonMousePress,
EButtonMouseNone
};
void Preview360::createEventFilter()
{
//安装事件过滤器
m_pButtonClose->installEventFilter(this);
}
//设置按钮图标
void Preview360::setButtonIcon(QToolButton *btn, EButtonMouseState state)
{
QPixmap pixmap(":/images/btn_close.png");
int nWidth = pixmap.width()/4;
int nHeight = pixmap.height();
btn->setIcon(QIcon(pixmap.copy(QRect(state * nWidth, 0, nWidth, nHeight))));
btn->setIconSize(QSize(nWidth, nHeight));
}
bool Preview360::eventFilter(QObject *target, QEvent *event)
{
EButtonMouseState state = EButtonMouseNone;
//对几种事件进行处理,这下载对Qt的事件过滤器,很清楚了,实践结合理论=...
if (target == m_pButtonClose)
{
if (event->type() == QEvent::Enter)
{
state = EButtonMouseEnter;
}
else if (event->type() == QEvent::Leave)
{
state = EButtonMouseDefault;
}
else if (((QMouseEvent *)event)->button() == Qt::LeftButton)
{
if (event->type() == QEvent::MouseButtonPress)
{
state = EButtonMousePress;
//若点击在关闭按钮上,不拖动图像
m_mousePressFlag = false;
}
else if (event->type() == QEvent::MouseButtonRelease)
{
state = EButtonMouseDefault;
}
}
if (state != EButtonMouseNone)
{
setButtonIcon((QToolButton *)target, state);
}
}
//处理完自定义拦截的事件,还要调用一次QWidget默认的事件过滤函数
return QWidget::eventFilter(target, event);
}
2.窗体的移动
窗体和图片的移动涉及到鼠标事件,只需事件鼠标的一些事件就可以达到预期的效果,主要的事件是:
void mousePressEvent(QMouseEvent *);
void mouseReleaseEvent(QMouseEvent *);
void mouseMoveEvent(QMouseEvent *);
3.图片的移动
在操作上,有3个涉及到图片的移动:
(1).鼠标拖动图片
(2).鼠标拖动图片后,释放鼠标,图片恢复原位
(3).右键鼠标,图片右移
(4).键盘方向键控制图片的移动
(5).点击界面的4个按钮,分别移动到按钮对应的界面
4.关于鼠标控制的移动
这些主要是涉及到一些逻辑的代码,直接贴出:
void Preview360::mousePressEvent(QMouseEvent *e)
{
if (e->button() == Qt::LeftButton)
{
m_mouseSrcPos = e->pos();
//在y坐标小于40的区域,鼠标拖动使窗体移动
if (m_mouseSrcPos.y() <= 40)
{
m_mouseMoveWindowFlag = true;
}
else
{
//大于40的区域,鼠标拖动使图片移动
m_currentFgXpos = m_pLabelFgTotal->x();
m_mousePressFlag = true;
}
}
//右键鼠标,右移图片
else if (e->button() == Qt::RightButton)
{
if (getLabelMove())
{
if (m_currentFgIndex > 0)
{
m_currentFgIndex--;
moveCurrentPage(false); //右移
}
}
}
}
void Preview360::mouseReleaseEvent(QMouseEvent *e)
{
int xpos = 0;
if (m_mousePressFlag)
{
if (getLabelMove())
{
m_mouseDstPos = e->pos();
xpos = m_mouseDstPos.x() - m_mouseSrcPos.x();
if (xpos > 0)//右移
{
if (xpos >= WINDOW_ONEBUTTON_WIDTH)
{
if (m_currentFgIndex > 0)
{
m_currentFgIndex--;
moveCurrentPage(false); //右移
}
else
{
moveCurrentPage(true); //左移
}
}
else
{
moveCurrentPage(true); //左移
}
}
else //左移
{
if (xpos <= -WINDOW_ONEBUTTON_WIDTH)
{
if (m_currentFgIndex < WINDOW_PAGE_COUNT-1)
{
m_currentFgIndex++;
moveCurrentPage(true); //左移
}
else
{
moveCurrentPage(false); //右移
}
}
else
{
moveCurrentPage(false); //右移
}
}
m_mousePressFlag = false;
}
}
else if (m_mouseMoveWindowFlag)
{
m_mouseMoveWindowFlag = false;
}
}
void Preview360::mouseMoveEvent(QMouseEvent *e)
{
int x = 0;
if (m_mousePressFlag)
{
if (getLabelMove())
{
m_mouseDstPos = e->pos();
x = m_mouseDstPos.x() - m_mouseSrcPos.x();
setLabelMove(false);
m_pLabelFgTotal->move(m_currentFgXpos + x, WINDOW_START_Y);
setLabelMove(true);
}
}
else if (m_mouseMoveWindowFlag)
{
m_mouseDstPos = e->pos();
this->move(this->pos() + m_mouseDstPos - m_mouseSrcPos);
}
}
5.点击界面4个按钮进行移动
void Preview360::slotChangeCurrentPage(CLabel *label)
{
int index = 0;
for (int i = 0; i < WINDOW_PAGE_COUNT; i++)
{
if (label == m_pLabelBtnArray[i])
{
//找出当前按钮的序号
index = i;
break;
}
}
//移动的几种可能性,对于x坐标
//index=0, 将label移动到-680*0
//index=1, 将label移动到-680*1
//index=2, 将label移动到-680*2
//index=3, 将label移动到-680*3
//点击左边的按钮 右移
if (index < m_currentFgIndex)
{
while(index != m_currentFgIndex)
{
m_currentFgIndex--;
moveCurrentPage(false);
}
}
else if (index > m_currentFgIndex) //点击右边的按钮 左移
{
while(index != m_currentFgIndex)
{
m_currentFgIndex++;
moveCurrentPage(true);
}
}
else
{
//...
}
}
6.键盘方向键的控制
捕捉对应的按键事件,只需重新实现键盘事件:
void keyPressEvent(QKeyEvent *);
左上键:图片右移
右下键:图片左移
void Preview360::keyPressEvent(QKeyEvent *e)
{
if (getLabelMove())
{
switch(e->key())
{
case Qt::Key_Left:
case Qt::Key_Up:
if (m_currentFgIndex > 0)
{
m_currentFgIndex--;
moveCurrentPage(false); //右移
}
break;
case Qt::Key_Right:
case Qt::Key_Down:
if (m_currentFgIndex < WINDOW_PAGE_COUNT-1)
{
m_currentFgIndex++;
moveCurrentPage(true); //左移
}
break;
default:
break;
}
}
}
7.图片移动的关键函数
移动图片的具体函数,要缓慢的移动图片,也就是在循环里面延迟一下,并响应UI事件,防止界面冻结(未响应)。
在程序中,出现setLabelMove和getLabelMove函数,这两个函数主要是用来防止多个事件同时移动界面,导致错误。所以这里相当于给图片的移动加锁,保证移动操作的唯一性。
void Preview360::moveCurrentPage(bool direction)
{
int currentXpos = 0;//当前label的x坐标
int destXpos = 0;//目标x坐标
//改变当前页面对应的按钮
changeCurrentButton();
//图片的几个分割点
//0-680, 680-1360, 1360-2040, 2040-2720
//真:向左移; 假:向右移
if (direction)
{
//左移的几种可能性,对于x坐标
//index=0, 将label移动到-680*0
//index=1, 将label移动到-680*1
//index=2, 将label移动到-680*2
//index=3, 将label移动到-680*3
setLabelMove(false);
currentXpos = m_pLabelFgTotal->x();
destXpos = -WINDOW_WIDTH * m_currentFgIndex;
while(currentXpos > destXpos)
{
m_pLabelFgTotal->move(currentXpos-WINDOW_PAGE_MOVE, WINDOW_START_Y);
currentXpos = m_pLabelFgTotal->x();
qApp->processEvents(QEventLoop::AllEvents);
}
m_pLabelFgTotal->move(destXpos, WINDOW_START_Y);
setLabelMove(true);
}
else
{
//右移的几种可能性,对于x坐标,与左移一致
//index=0, 将label移动到-680*0
//index=1, 将label移动到-680*1
//index=2, 将label移动到-680*2
//index=3, 将label移动到-680*3
setLabelMove(false);
currentXpos = m_pLabelFgTotal->x();
destXpos = -WINDOW_WIDTH * m_currentFgIndex;
while(currentXpos < destXpos)
{
m_pLabelFgTotal->move(currentXpos+WINDOW_PAGE_MOVE, WINDOW_START_Y);
currentXpos = m_pLabelFgTotal->x();
qApp->processEvents(QEventLoop::AllEvents);
}
m_pLabelFgTotal->move(destXpos, WINDOW_START_Y);
setLabelMove(true);
}
}
防止界面冻结:qApp->processEvents(QEventLoop::AllEvents);
该函数用来处理所有事件,保证了界面的正常运行。
8.将控件置顶
在最后补充下,要将需要的控件raise到栈顶:
//raise these widget
m_pLabelBg1->raise();
m_pButtonClose->raise();
for (int i = 0; i < WINDOW_BUTTON_COUNT; i++)
{
m_pLabelBtnArray[i]->raise();
}
多个控件涉及到重叠的问题,只有这样重新调整栈顺序才能达到需要的效果。
源码下载地址:360新版特性界面
作者 : gzshun.
E-Mail: gzshuns#163.com (@)
转载请注明出处:http://blog.csdn.net/gzshun/article/details/7626756