浅谈一个图片查看器的实现2(基于图形视图框架)

阿里云服务器一年之中最值得入手的机会。1核2G1M 85/年,2核4G3M 664/3年。 一起来拼团。
点击加入 点击加入 点击加入

imgviewer2.gif

        源码链接

一、前言

    之前使用QWidget写了一个图片查看器,有网友表示可以用图形视图框架来写。于是随便写一个玩玩。


二、思路

    1.图片查看器继承于QGraphicsView。

    2.使用QGraphicsPixmapItem来显示图片。

    3.图片的移动只需要设置QGraphicsPixmapItem的标志位可移动即可。

    4.图片的缩放使用QGraphicsPixmapItem的scale即可。


三、关键代码

   1.基本条件:创建view、scene、item。设置Item可移动。

ImageViewer::ImageViewer(QWidget *parent):QGraphicsView(parent)
{
    //场景
    m_scene = new QGraphicsScene();
    m_scene->setBackgroundBrush(QBrush(QColor(40,40,40)));
    setScene(m_scene);

    //item
    m_pixmapItem = new QGraphicsPixmapItem();
    m_pixmapItem->setFlag(QGraphicsItem::ItemIsMovable); //设置item可移动
    m_scene->addItem(m_pixmapItem);

    //隐藏滚动条
    setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
    setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
}

 2. 缩放,在滚轮事件中判断,需要注意的是要设置item的缩放原点为Item的中心点。默认是左上角的不好看。

void ImageViewer::wheelEvent(QWheelEvent *event)
{
    qreal fScale = m_pixmapItem->scale();
    if(event->delta() < 0){
        fScale *= 0.9;
    }else{
        fScale *= 1.1;
    }
    m_pixmapItem->setTransformOriginPoint(m_pixmapItem->boundingRect().center()); //设置缩放的原点为中心位置
    m_pixmapItem->setScale(fScale);
}


本例只是简单的实现图片的缩放和移动,其他细节没有深究,有兴趣的朋友可以研究一下。

腾讯云服务器双十一。1核2G1M 88/年,2核4G3M 698/3年。虽然比阿里的贵一点点,但比平时便宜了非常多。 看一看 看一看 看一看

演示站
上一篇:浅谈一个图片查看器的实现
下一篇:Qt实现图片翻转

发表评论