使用 QPen 的带有虚线图案的多色虚线

Question

我需要用 QPen 绘制一条多色线，该线最多可由虚线图案中的三种颜色组成。

不同的颜色应该在一条线上。

关于如何实现它有什么建议吗？

谢谢。

Answer 1

发展的想法，您可以这样做：

void drawWithManualDashedLine(QPainter& painter, const QLine& line) {
  const int scale = 10;

  QPen pen;
  pen.setWidth(3);

  pen.setColor(Qt::red);
  pen.setDashPattern({ 0.0, 1.0 * scale, 1.0 * scale, 7.0 * scale });
  painter.setPen(pen);
  painter.drawLine(line);

  pen.setColor(Qt::green);
  pen.setDashPattern({ 0.0, 4.0 * scale, 1.0 * scale, 4.0 * scale});
  painter.setPen(pen);
  painter.drawLine(line);

  pen.setColor(Qt::blue);
  pen.setDashPattern({ 0.0, 7.0 * scale, 1.0 * scale, 1.0 *scale });
  painter.setPen(pen);
  painter.drawLine(line);    
}

现在，n 颜色的更通用解决方案（我知道它有太多参数，这只是一个想法）。诀窍是创建一个破折号图案，然后移动它使用 QPen::setDashOffset 每种颜色：

void drawMultiColorDashedLine(QPainter& painter, const QLine& line,
    int length, int gap, int width,
    const QList<QColor>& colors, bool startWithGap = false) {
  const int n = colors.count();
  const int initialGap = startWithGap ? gap : 0;

  QPen pen;
  pen.setWidth(width);
  pen.setDashPattern({ (qreal)length, (qreal)(gap * n + length * (n - 1)) });
  for (int ii = 0; ii < n; ++ii) {
    pen.setColor(colors[ii]);
    pen.setDashOffset(-ii * (length + gap) - initialGap);
    painter.setPen(pen);
    painter.drawLine(line);
  }
}

所以他们可以被称为：

void Widget::paintEvent(QPaintEvent*)
{
  QPainter painter(this);

  const QLine line1(0, height() / 3, width(), height() / 3);
  drawMultiColorDashedLine(painter, line1, 10, 20, 3, { Qt::blue, Qt::yellow }, true);

  const QLine line2(0, height() / 2, width(), height() / 2);
  drawWithManualDashedLine(painter, line2);

  const QLine line3(0, 2 * height() / 3, width(), 2 * height() / 3);
  drawMultiColorDashedLine(painter, line3, 10, 20, 3, { Qt::red, Qt::black, Qt::blue, Qt::magenta }, false);
}

完整的工作示例可在 GitHub

获得

使用 QPen 的带有虚线图案的多色虚线

Multicolored dashed line with a dashed pattern using QPen

c++

qt

qpen