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

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 涂鸦板程序图文详细教程。


相关文章:
实训十二 2D绘图
实训十二 2D绘图_工学_高等教育_教育专区。实训十二...1. 简易画图板 (1)在个人目录中新建 Qt 应用程序...9页 免费 绘图实训指导书 8页 免费 ©...
19-Qt 2D绘图(九)双缓冲绘图简介
19-Qt 2D绘图(九)双缓冲绘图简介_IT/计算机_专业资料。十九、 绘图( 十九、...16-Qt 2D绘图(六)坐标系... 18-Qt 2D绘图(八)涂鸦板1/2 相关文档推荐 ...
第二章 基本2D绘图
8. [ 62 ] 等长: 若两线段几近等长,则视为等长 相同半径﹕两圆或弧若大致等半径,则视为等半径 第二章 基本 2D 绘图 Same Points Horizontal Vertical ...
涂鸦板程序设计
8、Qt 2D 绘图 双缓冲绘图简介 上面一节我们实现了涂鸦板的功能,但是如果我们想在涂鸦板上绘制矩形,并 且可以动态地绘制这个矩形,也就是说我们可以用鼠标画出...
2D绘图基础
Qt 2D绘图 40页 1下载券 QT 2D绘图 18页 1下载券 Asymptote绘图第二章2D绘... 43页 免费 喜欢此文档的还喜欢 2D绘图 8页 免费 建筑识图_详图介绍 50页...
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...
05-Qt Creator布局管理器的使用
16-Qt 2D绘图(六)坐标系统 18-Qt 2D绘图(八)涂鸦板 19-Qt 2D绘图(九)双...8页 免费如要投诉违规内容,请到百度文库投诉中心;如要提出功能问题或意见建议,请...
03-Qt Creator登录对话框
16-Qt 2D绘图(六)坐标系统 18-Qt 2D绘图(八)涂鸦板 19-Qt 2D绘图(九)双...三、Qt Creator 登录对话框实现功能: 实现功能: 在弹出对话框中填写用户名和密码...
第01章-Maple的2D绘图基本功能
Maple 的 2D 绘图基本功能 ? x3 ? 8 ? ? x ? ? ? ? 5 ? ?x ≤ ...(i)],i=0..n)]],style=POINT,symbol=diamond,s ymbolsize=18); 13 第...
更多相关标签: