这个例子是官方对Qt state machine 和 the animation framework 结合的例子的第二例
跟前例使用的方式大致一样。
惯例先上动图
做出来的效果大致就是位于四边形四个角的图标,选中后在中间略微放大显示的效果,还有就是图标飞行轨迹有放大缩小的动画效果,具体看上图。
直接上代码
class Pixmap : public QGraphicsWidget
{
Q_OBJECT
public:
Pixmap(const QPixmap &pix, QGraphicsItem *parent = 0)
: QGraphicsWidget(parent), orig(pix), p(pix)
{
}
void paint(QPainter *painter, const QStyleOptionGraphicsItem *, QWidget *)
{
painter->drawPixmap(QPointF(), p);
}
virtual void mousePressEvent(QGraphicsSceneMouseEvent * )
{
emit clicked();
}
virtual void setGeometry(const QRectF &rect)
{
QGraphicsWidget::setGeometry(rect);
if (rect.size().width() > orig.size().width())
p = orig.scaled(rect.size().toSize());
else
p = orig;
}
Q_SIGNALS:
void clicked();
private:
QPixmap orig;
QPixmap p;
};
定义了一个Pixmap类,产生鼠标点击事件时发出clicked消息,对界面进行重绘
QPixmap orig; //主要保存原始图片
QPixmap p; // rect.size().width() > orig.size().width() 根据绘图区域大小,放大原始图片后的图片
void createStates(const QObjectList &objects,
const QRect &selectedRect, QState *parent)
{
for (int i = 0; i < objects.size(); ++i) {
QState *state = new QState(parent);
//添加子状态
state->assignProperty(objects.at(i), "geometry", selectedRect);
//把子状态添加到父状态组中
parent->addTransition(objects.at(i), SIGNAL(clicked()), state);
}
}
void createAnimations(const QObjectList &objects, QStateMachine *machine)
{
for (int i=0; i<objects.size(); ++i)
//对状态切换添加动画效果
machine->addDefaultAnimation(new QPropertyAnimation(objects.at(i), "geometry"));
}
上面的代码就不细说了
int main(int argc, char **argv)
{
Q_INIT_RESOURCE(appchooser);
QApplication app(argc, argv);
//创建4个Pixmap;
Pixmap *p1 = new Pixmap(QPixmap(":/digikam.png"));
Pixmap *p2 = new Pixmap(QPixmap(":/akregator.png"));
Pixmap *p3 = new Pixmap(QPixmap(":/accessories-dictionary.png"));
Pixmap *p4 = new Pixmap(QPixmap(":/k3b.png"));
p1->setObjectName("p1");
p2->setObjectName("p2");
p3->setObjectName("p3");
p4->setObjectName("p4");
//设置图片的原始位置
p1->setGeometry(QRectF( 0.0, 0.0, 64.0, 64.0));
p2->setGeometry(QRectF(236.0, 0.0, 64.0, 64.0));
p3->setGeometry(QRectF(236.0, 236.0, 64.0, 64.0));
p4->setGeometry(QRectF( 0.0, 236.0, 64.0, 64.0));
//"画布"的大小
QGraphicsScene scene(0, 0, 300, 300);
scene.setBackgroundBrush(Qt::white);
scene.addItem(p1);
scene.addItem(p2);
scene.addItem(p3);
scene.addItem(p4);
GraphicsView window(&scene);
window.setFrameStyle(0);
window.setAlignment(Qt::AlignLeft | Qt::AlignTop);
window.setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
window.setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
//状态机策略是设置为恢复策略
QStateMachine machine;
machine.setGlobalRestorePolicy(QStateMachine::RestoreProperties);
QState *group = new QState(&machine);
group->setObjectName("group");
//这块区域就是图片飞行到中间后最终显示的区域
QRect selectedRect(86, 86, 128, 128);
group初始状态为空状态
QState *idleState = new QState(group);
group->setInitialState(idleState);
QObjectList objects;
objects << p1 << p2 << p3 << p4;
createStates(objects, selectedRect, group);
createAnimations(objects, &machine);
//machine初始状态为group状态
machine.setInitialState(group);
machine.start();
#if defined(Q_WS_S60) || defined(Q_WS_MAEMO_5)
window.showMaximized();
#else
window.resize(300, 300);
window.show();
#endif
return app.exec();
}
主要用到的下面几条语句
machine.setGlobalRestorePolicy(QStateMachine::RestoreProperties);
group->setInitialState(idleState);
machine.setInitialState(group);
为了呈现出例子中的动画效果setGlobalRestorePolicy 功不可没,每次状态机变更时,都会初始化状态机的原有值,如果是默认值DontRestoreProperties 就会产生中间图片堆叠的效果。
据我了解QGraphicsView的优势还是比较明显的,在多控件的场景下具有不错的性能,这个是QWidget无法比拟的,支持图元的缩放和旋转,比在QWidget自己重绘控件,大大减少了工作量,劣势也很明显,资料没有QWidget完备,还有一些莫名其妙的bug,都是我几次弃坑的原因。
今天水一章,应该挺简单的例子,但是可以看出官方工程师写代码深厚的功底,换成我写,完成同样的效果,估计代码量应该是其2倍,值得学习