Qt中国象棋一—— Qt 2D 绘图入门

最近想用Qt写一个中国象棋的项目，在网上找了几个例子后，发现关于绘图部分基础为0 ，于是根据项目需要学习一下。查了一些网上的资料，在此总结一下；我比较喜欢的方式是用到什么学什么，或者自己想做一个东西，这样学习起来目的性比较强，可以快速进入。

Qt的2D绘图是基于QPainter类的。QPainter既可以绘制几何图形(点、线、矩形、椭圆、弧形、饼状图、多边形和贝塞尔曲线等)也可以绘制像素映射、图像和文字。

QPainter可以画在“绘图设备”上，如QWidget、QPixmap、QImage等。

重新实现QWidget::paintEvent() 可用于订制窗口部件，并且可以设计出自己想要的风格。

一个常见的需求是在二维画板上显示大量的、轻量级的并且可与用户交互的项。Qt中围绕着QGraphicsView、QGraphicsScene、QGraphicsItem类引入了一种全新的“图形视图”体系【了解概念即可，不作详细介绍】。——摘自C++ GUI Qt4编程。

一、坐标系统

在了解如何画出一个图形前，需要知道窗口部件的坐标系统。如图，左上角顶点是坐标原点(0,0)，X轴向右为正，Y轴向下为正，默认每个像素占1×1大小的像素。视口、窗口、世界矩阵等概念有兴趣的同志们可以深入了解下。

二、画一条线段

在绘图设备上(一般是窗口部件上)绘图，需要重新实现Qt的绘图事件——paintEvent。

什么情况下会产一个绘图事件呢？

1)当窗口部件第一次显示时，系统会自动产生一个绘图事件

2)重新调整窗口部件大小

3)当窗口部件被其他部件遮挡，然后又再次显示出来时，就会对隐藏的区域产生一个重绘事件

void Widget::paintEvent(QPaintEvent *event){Q_UNUSED(event);

    QPainter painter(this);    // 反走样 ,如果不设置，会有肉眼可见的锯齿    painter.setRenderHint(QPainter::Antialiasing);    // 设置画笔颜色    painter.setPen(QColor(0, 160, 230));    // 绘制直线    painter.drawLine(QPointF(0 ,0), QPointF(width() / 2, height() / 2));
}

在重新实现的事件函数中，先定义一个QPainter并传入this，之后设置画笔属性，最后调用drawLine()接口，一个画线段的动作就完成了。其中drawLine()传入的参数是线段的起点和终点，所以该线段是可以随着窗口的变化而变化的。效果如图：

三、画文本与画矩形

这次是绘图逻辑分离出来，然后在paintEvent(QPaintEvent *event)中调用。

void Widget::draw(QRect &rect){    QPainter painter(this);    // 反走样    painter.setRenderHint(QPainter::Antialiasing, true);    // 设置画笔颜色、宽度painter.setPen(QPen(Qt::magenta,3));    painter.drawText(rect, Qt::AlignCenter,"Hello World");    painter.drawRect(rect);}
void Widget::paintEvent(QPaintEvent *event){    Q_UNUSED(event);
    QRect rect = event->rect();    draw(rect);
}

四、画一个点

最后一个，在原点画了一个小黑点：

能看清么？老铁们？