十八、Qt 2D绘图(八)涂鸦板

上面一节我们深入分析了一下Qt的坐标系统,这一节我们在前面程序的基础上稍加改动,设计一个涂鸦板程序。

简单的涂鸦板:

1.我们再在程序中添加函数。

我们在dialog.h里的public中再添加鼠标移动事件和鼠标释放事件的函数声明:

void mouseMoveEvent(QMouseEvent *);
void mouseReleaseEvent(QMouseEvent *);

private中添加变量声明:

QPixmap pix;
QPoint lastPoint;
QPoint endPoint;

因为在函数里声明的QPixmap类对象是临时变量,不能存储以前的值,所以为了实现保留上次的绘画结果,我们需要将其设为全局变量。

后两个QPoint变量存储鼠标指针的两个坐标值,我们需要用这两个坐标值完成绘图。

2.dialog.cpp中进行修改。

在构造函数里进行变量初始化。

resize(600,500);    //窗口大小设置为600*500
pix = QPixmap(200,200);
pix.fill(Qt::white);

然后进行其他几个函数的定义:

void Dialog::paintEvent(QPaintEvent *)
{  
   
QPainter pp(&pix);
    pp.drawLine(lastPoint,endPoint);  
//根据鼠标指针前后两个位置就行绘制直线
    lastPoint = endPoint;   //让前一个坐标值等于后一个坐标值,这样就能实现画出连续的线

    QPainter painter(this);
    painter.drawPixmap(0,0,pix);
}

void Dialog::mousePressEvent(QMouseEvent *event)
{
   
if(event->button()==Qt::LeftButton) //鼠标左键按下
        lastPoint = event->pos();
}

void Dialog::mouseMoveEvent(QMouseEvent *event)
{
   
if(event->buttons()&Qt::LeftButton) //鼠标左键按下的同时移动鼠标
    {
        endPoint = event->pos();
        update();
    }

}
void Dialog::mouseReleaseEvent(QMouseEvent *event)
{
   
if(event->button() == Qt::LeftButton) //鼠标左键释放
    {
        endPoint = event->pos();
        update();
    }

}

这里的update()函数,是进行界面重绘,执行该函数时就会执行那个重绘事件函数。

3.这时运行程序,效果如下。点击图片可将其放大

http://www.yafeilinux.com/wp-content/uploads/2010/04/0117-300x263.jpg 

 

这样简单的涂鸦板程序就完成了。下面我们进行放大后的涂鸦。

放大后再进行涂鸦:

1.添加放大按钮。

dialog.h中添加头文件声明: #include <QPushButton>

private中添加变量声明:

int scale;
QPushButton *pushBtn;

然后再在下面写上按钮的槽函数声明:

private slots:
    void zoomIn();

2.dialog.cpp中进行更改。

在构造函数里添加如下代码:

scale =1;   //设置初始放大倍数为1,即不放大
pushBtn = new QPushButton(this); //新建按钮对象
pushBtn->setText(tr(“zoomIn”));   //设置按钮显示文本
pushBtn->move(500,450);    //设置按钮放置位置
connect(pushBtn,SIGNAL(clicked()),this,SLOT(zoomIn())); //对按钮的单击事件和其槽函数进行关联

这里我们利用代码添加了一个按钮对象,用它来实现放大操作。

再在构造函数以外进行zoomIn()函数的定义:

void Dialog::zoomIn() //按钮单击事件的槽函数
{
    scale *=2;
    update();

}

3.通过上一节的学习,我们应该已经知道想让画布的内容放大有两个办法,一个是直接放大画布的坐标,一个是放大窗口的坐标。

我们主要讲解放大窗口坐标。

void Dialog::paintEvent(QPaintEvent *)
{  
    QPainter pp(&pix);
    pp.drawLine(lastPoint,endPoint);   //
根据鼠标指针前后两个位置就行绘制直线
    lastPoint = endPoint;   //
让前一个坐标值等于后一个坐标值,这样就能实现画出连续的线

    QPainter painter(this);
   
painter.scale(scale,scale); //进行放大操作
    painter.drawPixmap(0,0,pix);
}

这时运行程序。

先随意画一个图形,如下图。

http://www.yafeilinux.com/wp-content/uploads/2010/04/0217-300x263.jpg

再按下“zoomIn”按钮,进行放大两倍。可以看到图片放大了,效果如下。

http://www.yafeilinux.com/wp-content/uploads/2010/04/0317-300x263.jpg

这时我们再进行绘图,绘制出的线条已经不能和鼠标指针的轨迹重合了。效果如下图。

http://www.yafeilinux.com/wp-content/uploads/2010/04/0415-300x263.jpg

有了前面一节的知识,我们就不难理解出现这个问题的原因了。窗口的坐标扩大了,但是画布的坐标并没有扩大,而我们画图用的坐标值是鼠标指针的,鼠标指针又是获取的窗口的坐标值。现在窗口和画布的同一点的坐标并不相等,所以就出现了这样的问题。

 

 

其实解决办法很简单,窗口放大了多少倍,就将获得的鼠标指针的坐标值缩小多少倍就行了。

void Dialog::paintEvent(QPaintEvent *)
{  
    QPainter pp(&pix);
    pp.drawLine(lastPoint/scale,endPoint/scale);
    lastPoint = endPoint;

    QPainter painter(this);
    painter.scale(scale,scale); //
进行放大操作
    painter.drawPixmap(0,0,pix);
}

运行程序,效果如下:

http://www.yafeilinux.com/wp-content/uploads/2010/04/0515-300x263.jpg

此时已经能进行正常绘图了。

 

 

这种用改变窗口坐标大小来改变画布面积的方法,实际上是有损图片质量的。就像将一张位图放大一样,越放大越不清晰。原因就是,它的像素的个数没有变,如果将可视面积放大,那么单位面积里的像素个数就变少了,所以画质就差了。

下面我们简单说说另一种方法。

放大画布坐标。

void Dialog::paintEvent(QPaintEvent *)
{  
    QPainter pp(&pix);
   
pp.scale(scale,scale);
    pp.drawLine(lastPoint/scale,endPoint/scale);

    lastPoint = endPoint;

    QPainter painter(this);
    painter.drawPixmap(0,0,pix);
}

效果如下:

http://www.yafeilinux.com/wp-content/uploads/2010/04/0613-300x263.jpg

此时,画布中的内容并没有放大,而且画布也没有变大,不是我们想要的,所以我们再更改一下函数。

void Dialog::paintEvent(QPaintEvent *)
{  
   
if(scale!=1) //如果进行放大操作
    {
        QPixmap copyPix(pix.size()*scale);
//临时画布,大小变化了scale
        QPainter pter(&copyPix);
        pter.scale(scale,scale);
        pter.drawPixmap(0,0,pix);  
//将以前画布上的内容复制到现在的画布上
        pix = copyPix;     //将放大后的内容再复制回原来的画布上,这样只传递内容,不传递坐标系
        scale =1; //scale重新置1
    }
    QPainter pp(&pix);
    pp.scale(scale,scale);
    pp.drawLine(lastPoint/scale,endPoint/scale);
    lastPoint = endPoint;

    QPainter painter(this);
    painter.drawPixmap(0,0,pix);
}

此时运行效果如下:

http://www.yafeilinux.com/wp-content/uploads/2010/04/0713-300x263.jpg

这样就好了。可以看到,这样放大后再进行绘制,出来的效果是不同的。

我们就讲到这里,如果你有兴趣,可以接着研究!

怎么应用上面讲到的内容,你可以查看Qt涂鸦板程序图文详细教程