Qt如何绘制(简单深刻,fearlazy的系列文章)

我觉得绘制只需要考虑几个问题。简单地说就是谁在什么地方画什么? 在Qt中可以这么回答:QPainter在QPainterDevice中画想画的东西。

举个例子:用QtCreator向导新建一个项目,基类选择QWidget。我们重载paintEvent这个函数。

C++

void Widget::paintEvent(QPaintEvent *event)
{
    QPainter  painter(this);
    painter.drawRect(50,50,100,100);
}

QPainter在this(this指的这个QWidget,QWidget继承于QPainterDevice)上画了一个矩形。可以看到结果如下:

http://www.fearlazy.com/index.php/post/6.html

我们说Qt的绘制工作是由QPainter来完成的,但是它也不能空着手干活。通常情况下,它需要用到两样工具:一个是QPen(画笔),另一个则是QBrush(画刷)。

画笔是用来绘制轮廓的,画刷则是用来填充的。以矩形为例画笔控制的是矩形边框的绘制,画刷控制边框包围区域的绘制。我们接着上一篇的例子:

C++

void Widget::paintEvent(QPaintEvent *event)
{
    QPainter  painter(this);
    painter.setPen(QPen(Qt::red));   //设置画笔为红色
    painter.setBrush(QBrush(Qt::green));  //设置画刷为绿色
    painter.drawRect(50,50,100,100);
}

在例子中增加两行代码,设置了QPainter的画笔和画刷。效果如下:

那么问题来了,为什么什么上一篇的例子中我们没有设置画笔和画刷也可以绘制呢?

http://www.fearlazy.com/index.php/post/7.html

上一节留下一个问题,答案其实很简单。是默认值在工作。QPainter默认了一个画笔和画刷。说到这,我们就聊聊画笔这东西。上一节的例子中我们设置了画笔的颜色。当然画笔不止有这点本事。它拥有style、width、brush、capStyle和joinStyle这几个属性。

1.style定义了绘制的线的类型。指的是实线、虚线或是点线。Qt中有个枚举Qt::PenStyle定义了画笔的style。

归纳来说就是实线、虚线和点,其中Qt::CustomDashLine不是一种画笔类型而是一类,可以自定义实线长度、虚线长度。

2.width定义了画笔的宽度。

3.brush定义了画笔的填充颜色。

4.capStyle定义了线的末端的绘制样式。Qt中枚举Qt::PenCapStyle有如下三个值。

SquareCap 和 Flatcap的区别在于FlagCap的末端及点的位置,而SquareCap有再向外延伸了半个宽度。

5.joinStyle定义了两条线连接处的绘制定义。有枚举Qt::PenJoinStyle,具体值如下:

例:

http://www.fearlazy.com/index.php/post/8.html

说完画笔,接下来说说画刷。画刷(QBrush)包含了样式、颜色、渐变和材质(英文texture,材质是我翻译的)。 但是颜色、渐变和材质不会同时出现。这取决于样式。

Qt定义了很多画刷的样式:

其中Qt::LinearGradientPattern、Qt::RadialGradientPattern和Qt::ConicalGradientPattern是渐变类型的样式。Qt::TexturePattern是材质类型的画刷样式。

要使用渐变的样式需要在构造画刷时传入一个渐变对象,可以是QConicalGradient、QLinearGradient或QRadialGradient。

要使用材质类型的样式时可以在构造一个画刷时传入一个QPixmap或QImage对象。也可以在构造画刷对象后调用setTexture或setTextureImage。

例:

http://www.fearlazy.com/index.php/post/9.html

到目前为止我们已经画了好几个矩形了,但是如果你认为QPainter只会画矩形,那就太小看它了。QPainter会画的东西可多了。点、线、圆、弧形、图片、路径等等。

接下来画画简单的东西:

1.画点:

void drawPoint(const QPointF& position);

void drawPoint(const QPoint& position);

void drawPoint(int x, int y);

输入点的坐标即可。

2.画直线:

void drawLine(const QLineF& line);

void drawLine(const QLine& line);

void drawLine(int x1, int y1, int x2,int y2);

输入一个线对象,或者线的两个点。

3.画椭圆:

void drawEllipse(const QRectF& rectangle);

void drawEllipse(const QRect& rectangle);

void drawEllipse(int x, int y, int width, int height);

void drawEllipse(const QPointF& center, qreal rx, qreal ry);

void drawEllipse(const QPoint& center,int rx, int ry);

画椭圆有两种方式:

第一种是输入椭圆的外切矩形,可调用前三个接口。

第二种是输入圆心以及x半径和y半径,调用后两个接口。

4.画图片:

画图片的接口太多,只列举两个:

void drawPixmap(const QRectF& target, const QPixmap& pixmap, const QRectF& source);

void drawPixmap(const QPointF& point, const QPixmap& pixmap);

这两个接口的区别是第一种指定了绘制目标的一个区域,图片会缩放后画到该区域。第二种指定了绘制目标的一个位置。

第一个接口中的source指的是绘制图片的区域,通过这个参数可以设置你要绘制图片中的哪一部分。

http://www.fearlazy.com/index.php/post/10.html

QPainter是个多才多艺的家伙,除了会画画还会写字。而且写字的姿势还挺多。

这么多函数,看得人眼花缭乱。不过仔细观察一下会发现很多参数都是重复的。

text: 就是要写的文字。

position: 指定写的文字的位置。(x,y)同理。

rectangle:指定写的文字的矩形区域,这个和绘制图片的矩形不一样,它不会根据矩形缩放文字。(x,y,width,height)同理。

flag:指定绘制的标志,如左对齐、右对齐、居中等等。

boundingRect:指的是绘制的文字实际占用的矩形区域。是个返回值。

option: 描述了文字,例如对齐方式、文字方向等。

例:

例子指定在矩形(50,80,60,30)中以居中的位置绘制“这是文本”几个字。接着又绘制了这个矩形以及函数返回给我们的实际占用区域。可以看出文字没有占满指定矩形范围。实际上文字的大小取决于字体QFont。

我们设置字体看看效果:

文字字体设置太大已经超出了指定的绘制范围了。超出的部分则不会被绘制。

QPainter绘制文字除了指定绘制区域外,还可以指定位置进行绘制。这种方式不需要设置多余的参数,缺点就是使用时不太好控制。

例:

例子中除了绘制文本外,我们还这个位置用红点描出来了,可以看出所谓的位置指的是文本左下角的位置。

http://www.fearlazy.com/index.php/post/15.html

在这之前,我们用QPainter绘制了不少东西,这些东西都是规规矩矩很正经的玩意。其实QPainter也有着它不正经的一面。有时它不按套路出牌不在指定的位置画,有时画的大一点或小一点又或者画的东倒西歪的。但只要你掌握了它的变化的套路并加以利用,反而能为绘制创造出更多新意。接下来让我们认识一下他们。

    偏移(translate)

默认情况下,绘制的原点在设备的左上角。通过设置偏移原点发生变化,绘制的内容也会相对应变化。

例:

偏移前用黑色在(50,110)处绘制了几个字,并且绘制了原点到文本位置的直线。 在偏移(50,50)后用绿色绘制了同样的内容。可以看出偏移后相对于原来的位置整体偏移了(50,50)。我们可以这么去理解:translate改变了绘制的原点,而我们绘制时使用的坐标都是相对于原点而言的。

 旋转(rotate)

    旋转,顾名思义就是让绘制的东西旋转。它是相对于原点按顺时针进行旋转的。

例:

例子中我们先偏移了(100,100),因为旋转是相对于原点位置旋转的,如果不往右偏移点旋转后估计这就看不到了。

 缩放(scale)

scale可以对绘制的内容放大或缩小,它包含x轴和y轴两个方向。当输入的值大于1时放大,当输入的值小于1时则缩小。

例:

从图中可以看出不仅文字的大小变小了,连距离也被缩小了。缩放的计算也是相对于原点而言的。

http://www.fearlazy.com/index.php/post/18.html

时间: 2024-08-25 18:18:45

Qt如何绘制(简单深刻,fearlazy的系列文章)的相关文章

Qt线程的简单使用系列

Qt线程的简单使用(四)--QSemaphore的使用 Qt线程的简单使用(三)--通过一个实例理解QMutex的使用 Qt线程的简单使用(二)--通过继承QThread()创建线程 Qt线程的简单使用(一)--通过QObject::moveToThread()创建线程

OpenGL学习-------绘制简单的几何图形

本次课程所要讲的是绘制简单的几何图形,在实际绘制之前,让我们先熟悉一些概念. 一.点.直线和多边形我们知道数学(具体的说,是几何学)中有点.直线和多边形的概念,但这些概念在计算机中会有所不同.数学上的点,只有位置,没有大小.但在计算机中,无论计算精度如何提高,始终不能表示一个无穷小的点.另一方面,无论图形输出设备(例如,显示器)如何精确,始终不能输出一个无穷小的点.一般情况下,OpenGL中的点将被画成单个的像素(像素的概念,请自己搜索之~),虽然它可能足够小,但并不会是无穷小.同一像素上,Op

opengl使用现在比较常用的方法来绘制简单几何图元

上一篇文章中也使用了比较老的方法glBegin 和 glEnd的方法来绘制了简单的集合图元,现在使用比较新的而且更高效的方法来绘制简单的集合图元. 这种方法与以前方法的不同点在对数据的处理上,glBegin 和 glEnd是要给出数据,然后直接来进行绘制,然而新的方法是现将数据保存到显存中,然后直接一个绘制命令,就可以直接从显卡内存中直接读取数据进行绘制,效率更高而且更方便. #include <GL/glew.h> #include <GL/freeglut.h> #includ

shape-自绘制简单图形

shape 可以绘制简单的图形,颜色等.它主要就是应用于selector 的一些状态. 本文内容参考自http://www.cnblogs.com/cyanfei/archive/2012/07/27/2612023.html 自己验证了下,学习记录 它主要有以下几个部分,分别是 填充(solid):设置填充的颜色 间隔(padding):设置四个方向上的间隔 大小(size):设置大小 圆角(corners):设置图形圆角,默认是正方形的 渐变(gradient):当设置填充颜色后,无渐变效果

学习笔记:HTML5 Canvas绘制简单图形

HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" width="1024" style="border:1px solid #aaa;text-align:center;"> 你的浏览器不支持Canvas,请更新浏览器再试!!! </canvas> 在canvas标签之间应该做浏览器是否支持的检测,

Java入门:绘制简单图形

在上一节,我们学习了如何使用swing和awt工具创建一个空的窗口,本节学习如何绘制简单图形. 基本绘图介绍 Java中绘制基本图形,可以使用Java类库中的Graphics类,此类位于java.awt包中.在我们自己的java程序文件中,要使用Graphics类就需要使用import java.awt.Graphics语句将Graphics类导入进来. Graphics类提供基本的几何图形绘制方法,主要有:画线段.画矩形.画圆.画带颜色的图形.画椭圆.画圆弧.画多边形等.本项目仅用到画直线的功

QT 选择对话框简单示例

QT 选择对话框简单示例 部分代码: pDialog->addSeparator(); QAction *pmb2 = pDialog->addAction(QString::fromLocal8Bit("选择对话框")); connect(pmb2, &QAction::triggered, [this](){ QMessageBox * mBox = new QMessageBox(this); mBox->setWindowTitle(QString::

Net设计模式实例系列文章总结

1 什么是设计模式 设计模式是对在软件设计过程中重复出现的问题提出了一种比较好的解决方案.正如一位专家所说:设计模式是对程序设计人员经常遇到的设计问题的可再现的解决方案(The Smalltalk Companion).GOF设计模式通常被认为是其他设计模式的基础,随着业务复杂度的增大,会不断涌现新的设计模式,而这些新的设计模式一般会以GOF模式理论为参照. 2 为什么要学习设计模式 从个人职业规划来考虑.一位软件开发工程师随着编码量的增加,开发经验的增加,软件理论理解的加深,会不由自主地想一些

产品设计步骤 - 产品管理系列文章

笔者做产品经理职位还不久,但是也积累了一些经验,本文就讲讲产品经理对产品的设计步骤,与大家共同交流学习,共同提高. 产品经理现在要求的更多的是需求分析.原型设计和后期的运营三方面重点内容.其中,需求分析这块如果团队人员比较全的话就要求产品经理对需求这块进行把控,项目经理对需求进行整理总结,系统分析师对需求进行分析:原型设计这块是产品经理的一大工作部分,就是在经过了需求分析之后,对产品的界面和用户体验等进行设计,形成基本的操作模式,同时也能够让团队或客户对产品本身的特色做了解和及时的反馈,对产品的