当前位置:首页 >> 能源/化工 >>

18-Qt 2D绘图(八)涂鸦板


十八、Qt 2D 绘图(八)涂鸦板
上面一节我们深入分析了一下 Qt 的坐标系统,这一节我们在前面程序的基础上 稍加改动,设计一个涂鸦板程序。 简单的涂鸦板: 1.我们再在程序中添加函数。 我们在 dialog.h 里的 public 中再添加鼠标移动事件和鼠标释放事件的函数声 明: void mouseMoveEvent(QMouseEvent *); void mo

useReleaseEvent(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(&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); } 此时运行效果如下:

这样就好了。可以看到,这样放大后再进行绘制,出来的效果是不同的。 我们就讲到这里,如果你有兴趣,可以接着研究! 怎么应用上面讲到的内容,你可以查看 Qt 涂鸦板程序图文详细教程。


相关文章:
十八、Qt 2D绘图(八)涂鸦板(2011-4-6)
十八、 绘图( 十八Qt 2D 绘图(八)涂鸦板 的坐标系统, 上面一节我们深入分析了一下 Qt 的坐标系统,这一节我们在前面程 序的基础上稍加改动,设计一个涂鸦...
涂鸦板程序设计
8、Qt 2D 绘图 双缓冲绘图简介 上面一节我们实现了涂鸦板的功能,但是如果我们想在涂鸦板上绘制矩形,并 且可以动态地绘制这个矩形,也就是说我们可以用鼠标画出...
第二章 基本2D绘图
8. [ 62 ] 等长: 若两线段几近等长,则视为等长 相同半径﹕两圆或弧若大致等半径,则视为等半径 第二章 基本 2D 绘图 Same Points Horizontal Vertical ...
2D绘图基础
Qt 2D绘图 40页 1下载券 QT 2D绘图 18页 1下载券 Asymptote绘图第二章2D绘... 43页 免费 喜欢此文档的还喜欢 2D绘图 8页 免费 建筑识图_详图介绍 50页...
2D绘图
<?xml version="1.0" encoding="utf-8"?> <...18页 免费 SWT 2D绘图 27页 免费 Asymptote绘图第...十六、Qt 2D绘图(六)坐标... 9页 免费 第03章...
Qt 2D绘图
(0.8,Qt::green); linearGradient.setColorAt(1,Qt::blue); //将直线...绘图( Qt 2D 绘图(九)双缓冲绘图简介上面一节我们实现了涂鸦板的功能,但是...
2D绘图坐标变换
8、 坐标原点(不论是视口还是窗口)不等于坐标零点(必需明白)。 9、视口的坐标...第01章-Maple的2D绘图基... 18页 1下载券 十九、Qt 2D绘图(九)双缓.....
十四、Qt 2D绘图(四)绘制路径(2011-4-6)
十四、Qt 2D绘图(四)绘制路径(2011-4-6)_IT/计算机_专业资料。十四、 绘图...十七、Qt 2D绘图(七)Qt坐... 十八Qt 2D绘图(八)涂鸦... 十九、Qt 2D...
23-Qt数据库(三)利用QSqlQuery类执行SQL语句(一)
23-Qt数据库(三)利用QSqlQuery类执行SQL语句(一)_IT/计算机_专业资料。今日...16-Qt 2D绘图(六)坐标系... 18-Qt 2D绘图(八)涂鸦板1/2 相关文档推荐 ...
05-Qt Creator布局管理器的使用
16-Qt 2D绘图(六)坐标系统 18-Qt 2D绘图(八)涂鸦板 19-Qt 2D绘图(九)双...8页 免费如要投诉违规内容,请到百度文库投诉中心;如要提出功能问题或意见建议,请...
更多相关标签:
qt 2d绘图 | qt涂鸦板 | qt 绘图 | qt双缓冲绘图 | qt 3d绘图 | java 2d绘图 | android 2d绘图 | opengl 2d绘图 |