|
|
声明：本文原创于yafeilinux的百度博客，http://hi.baidu.com/yafeilinux 转载请注明出处。 上面一节我们深入分析了一下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.这时运行程序，效果如下。（点击图片可将其放大）
这样简单的涂鸦板程序就完成了。下面我们进行放大后的涂鸦。 放大后再进行涂鸦： 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);
} 这时运行程序。 先随意画一个图形，如下图。 再按下“zoomIn”按钮，进行放大两倍。可以看到图片放大了，效果如下。 这时我们再进行绘图，绘制出的线条已经不能和鼠标指针的轨迹重合了。效果如下图。
有了前面一节的知识，我们就不难理解出现这个问题的原因了。窗口的坐标扩大了，但是画布的坐标并没有扩大，而我们画图用的坐标值是鼠标指针的，鼠标指针又是获取的窗口的坐标值。现在窗口和画布的同一点的坐标并不相等，所以就出现了这样的问题。 其实解决办法很简单，窗口放大了多少倍，就将获得的鼠标指针的坐标值缩小多少倍就行了。 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);
} 运行程序，效果如下：
此时已经能进行正常绘图了。 这种用改变窗口坐标大小来改变画布面积的方法，实际上是有损图片质量的。就像将一张位图放大一样，越放大越不清晰。原因就是，它的像素的个数没有变，如果将可视面积放大，那么单位面积里的像素个数就变少了，所以画质就差了。 下面我们简单说说另一种方法。 放大画布坐标。 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);
} 效果如下：
此时，画布中的内容并没有放大，而且画布也没有变大，不是我们想要的，所以我们再更改一下函数。 void Dialog::paintEvent(QPaintEvent *)
{
if(scale!=1) //如果进行放大操作
{
QPixmap copyPix(pix.size()*scale); //临时画布，大小变化了scale倍
QPainter pter(©Pix);
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);
} 此时运行效果如下： 这样就好了。可以看到，这样放大后再进行绘制，出来的效果是不同的。
我们就讲到这里，如果你有兴趣，可以接着研究！ 怎么应用上面讲到的内容，你可以查看绘图软件的教程（链接过去）。
|
