qt 卡拉OK 歌词效果


image


// 思路:一、先绘制全部歌词 二、设置裁剪区域 三、绘制已经唱的歌词

void Widget::paintEvent(QPaintEvent *event)
{
    QLineF line(10.0, 80.0, 90.0, 20.0);

    QPainter painter(this);

    QString m_sText = "测试文本 test";
    // 设置抗锯齿
    painter.setRenderHint(QPainter::Antialiasing);

    // 设置字体
    QFont font = painter.font();
    font.setPixelSize(240);
    painter.setFont(font);

    // 确定位置
    QFontMetrics metrics = painter.fontMetrics();
    int width = metrics.width(m_sText);
    int height = metrics.height();
    int xPt = (this->rect().width() - width) / 2;
    int yPt = (this->rect().height() - height) / 2 + height;

    // 设置绘制路径
    QPainterPath path;
    path.addText(xPt, yPt, font, m_sText);//文字
//    path.addRect(QRect(xPt, yPt - height, width, height));

    // 一、绘制全部歌词
    // 1、绘制轮廓
    QPen pen;
    pen.setWidth(8);//轮廓粗细8
    pen.setColor(QColor(0, 0, 0));
    painter.strokePath(path, pen);

    // 2、绘制中间文字
//    pen.setWidth(1);
    pen.setColor(QColor(255, 255, 255));
    painter.setPen(pen);
    painter.drawText(QPoint(xPt, yPt), m_sText);//The y-position is used as the baseline of the font.


    // 二、绘制演唱进度

    //1、设置裁剪区域,超出区域就不画
    painter.setClipRect(QRect(xPt, yPt-height+metrics.descent(), width/2, height));

    //2、绘制轮廓
    pen.setColor(QColor(255, 255, 255));
    painter.strokePath(path, pen);

    //3、绘制演唱进度文字
    pen.setColor(QColor(0, 0, 255));
    painter.setPen(pen);
    painter.drawText(QRect(xPt, yPt-height+metrics.descent(), width/2, height),  Qt::AlignLeft, m_sText);
//    painter.drawRect(QRect(xPt, yPt-height+metrics.descent(), width/2, height));

}

posted @ 2023-02-10 17:07  katago  阅读(124)  评论(0)    收藏  举报