Qt之描绘轮廓

简介: 简述前面提到过 QPainterPath(绘图路径),除了创建和重用图形形状以外,还可以进行一些高级操作,例如:填充、描绘轮廓、裁剪。 轮廓,是指边缘 - 物体的外周或图形的外框要为一个指定的绘图路径生成可填充的轮廓,离不开 QPainterPathStroker。简述QPainterPathStroker绘制轮廓深入理解版权所有:

简述

前面提到过 QPainterPath(绘图路径),除了创建和重用图形形状以外,还可以进行一些高级操作,例如:填充、描绘轮廓、裁剪。

轮廓,是指边缘 - 物体的外周或图形的外框

要为一个指定的绘图路径生成可填充的轮廓,离不开 QPainterPathStroker。

版权所有:一去丶二三里,转载请注明出处:http://blog.csdn.net/liang19890820

QPainterPathStroker

要生成可填充的轮廓,一般分为两步:

  1. 定义原始绘图路径 QPainterPath path,调用 QPainterPathStroker::createStroke(path),以 path 为样本创建一个新的绘图路径 QPainterPath outlinePath,outlinePath 表示 path 的可填充的轮廓。
  2. 填充 outlinePath,绘制出原始绘图路径 path 的轮廓。

除此之外,还可以使用以下函数来控制轮廓的各种样式:

  • setWidth():宽度
  • setCapStyle():端点风格
  • setJoinStyle():连接样式
  • setDashPattern():虚线图案

注意: 由 createStroke() 生成的新绘图路径(outlinePath)应仅用于指定的绘图路径(path)的轮廓,否则,可能会引发意外行为。

绘制轮廓

以矩形为例,先上轮廓的效果图:

这里写图片描述

自定义 paintEvent(),生成一个 300 * 200 的矩形路径:

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

    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing, true);

    // 矩形 300 * 200
    QRectF rect(50, 50, 300, 200);
    QPainterPath path;
    path.addRect(rect);

    // 绘制原始路径
    drawPath(&painter, path);

    // 绘制轮廓
    drawOutline(&painter, path);
}

重点关注 drawOutline(),它是一个自定义函数,主要用于绘制指定路径的轮廓:

// 绘制轮廓
void MainWindow::drawOutline(QPainter *painter, QPainterPath path)
{
    // 生成可填充的轮廓
    QPainterPathStroker stroker;
    stroker.setCapStyle(Qt::RoundCap);  // 端点风格
    stroker.setJoinStyle(Qt::RoundJoin);  // 连接样式
    stroker.setDashPattern(Qt::DashLine);  // 虚线图案
    stroker.setWidth(10);  // 宽度

    // 生成一个新路径(可填充区域),表示原始路径 path 的轮廓
    QPainterPath outlinePath = stroker.createStroke(path);

    // 绘制轮廓时所用的画笔(轮廓外边框灰色部分)
    QPen pen = painter->pen();
    pen.setColor(QColor(0, 160, 230));
    pen.setWidth(10);

    // 用指定的画笔 pen 绘制 outlinePath
    // painter->strokePath(outlinePath, pen);
    painter->setPen(pen);
    painter->drawPath(outlinePath);

    // 用指定的画刷 brush 填充路径 outlinePath
    painter->fillPath(outlinePath, QBrush(Qt::yellow));
}

轮廓有了,来看看原始路径的绘制:

void MainWindow::drawPath(QPainter *painter, QPainterPath path)
{
    QPen pen = painter->pen();
    pen.setWidth(1);

    // 设置画笔、画刷
    painter->setPen(pen);
    painter->setBrush(QColor(35, 175, 75));

    // 绘制路径
    painter->drawPath(path);
}

深入理解

回到 paintEvent(),如果将 drawPath() 和 drawOutline() 的位置颠倒过来,就会产生下面的效果:

这里写图片描述

很显然,原始路径会将轮廓遮挡住一部分,这是为什么呢?

关于 QPainterPathStroker::setWidth(),助手中有这么一句话:

The generated outlines will extend approximately 50% of width to each side of the given input path’s original outline.

意思是说:生成的轮廓将扩展大约 width 的 50% 到原始路径原来轮廓的每侧。

既然如此,再对照下上图,没有疑问了吧!

目录
相关文章
|
1月前
|
存储
QT图形视图框架绘制曲线图和Smith图
QT图形视图框架绘制曲线图和Smith图
18 0
|
4月前
|
计算机视觉
OpenCV(十三):图像中绘制直线、圆形、椭圆形、矩形、多边形和文字
OpenCV(十三):图像中绘制直线、圆形、椭圆形、矩形、多边形和文字
44 0
|
7月前
|
C++ Python
C++ VTK鼠标网格表面绘制曲线
C++ VTK鼠标网格表面绘制曲线
200 0
C++ VTK鼠标网格表面绘制曲线
|
8月前
|
前端开发 定位技术
QT使用QML实现地图绘制虚线
QML提供了MapPolyline用于在地图上绘制线段,该线段是实线,因此我使用Canvas自定义绘制的方式在地图上绘制线段
130 0
|
9月前
Photoshop使用钢笔路径绘制网状条纹
Photoshop使用钢笔路径绘制网状条纹
52 0
|
计算机视觉
五、OpenCV绘制线、矩形、圆等基本几何形状
通过javaOpenCV中的Imgproc函数进行简单几何图形的绘制
99 0
五、OpenCV绘制线、矩形、圆等基本几何形状
|
前端开发
Delphi绘图功能[1] —— 入门(绘制直线和矩形)
Delphi绘图功能[1] —— 入门(绘制直线和矩形)
349 0
Delphi绘图功能[1] —— 入门(绘制直线和矩形)
|
算法 API 计算机视觉
OpenCV 轮廓周围绘制矩形框和圆形框
OpenCV 轮廓周围绘制矩形框和圆形框
182 0
OpenCV 轮廓周围绘制矩形框和圆形框
|
计算机视觉
Qt实用技巧:图形视图框架中图元将矩形边界改为不规则边界(用于选取和碰撞)
Qt实用技巧:图形视图框架中图元将矩形边界改为不规则边界(用于选取和碰撞)
Qt实用技巧:图形视图框架中图元将矩形边界改为不规则边界(用于选取和碰撞)