Qt

Question

のアプリチュートリアルを表示Qtアプリケーションがあり、初めてユーザーがアプリケーションにアクセスしたときに少しチュートリアルを表示します。このような何か：

どのように私はQtの上でこのような何かを行うことができますか？

私はWindowsでQt 5.4を使用しています。

Answer 1

このタスクを実行するには、半透明の背景を作成し、属性Qt::WA_TranslucentBackgroundをアクティブにしてから、それからQPainterPathを使用して透明円を引いた長方形を描画します。

次に、サイズや位置を変更すると、eventFilterを使用して、表示されたときのようなイベントを知ることができます。

次に、データ（この場合は円の中心、半径、テキストの位置およびテキスト自体）を格納する構造体が作成されます。

次に、次のボタンと戻りボタンが追加され、ページの変更のロジックがスロットで処理されます。

tutowidget.h

#ifndef TUTOWIDGET_H 
#define TUTOWIDGET_H 

#include <QWidget> 
class QButtonGroup; 

class TutoWidget : public QWidget 
{ 
    Q_OBJECT 
    struct Pages{ 
     QPoint center; 
     int radius; 
     QPoint pText; 
     QString text; 
    }; 
public: 
    TutoWidget(QWidget *parent); 
    void addPage(const QPoint &center, int radius, const QPoint &pText, const QString & text); 
    bool eventFilter(QObject *watched, QEvent *event); 
protected: 
    void paintEvent(QPaintEvent *); 
private slots: 
    void onClicked(int id); 
private: 
    QWidget *mParent; 
    QButtonGroup *group; 
    QVector<Pages> pages; 
    int currentIndex = -1; 
}; 

#endif // TUTOWIDGET_H 

tutowidget.cpp

#include "tutowidget.h" 

#include <QVBoxLayout> 
#include <QButtonGroup> 
#include <QPushButton> 
#include <QEvent> 
#include <QTimer> 
#include <QPainter> 

TutoWidget::TutoWidget(QWidget *parent):QWidget(0) 
{ 
    setWindowFlags(Qt::FramelessWindowHint|Qt::Popup); 
    setAttribute(Qt::WA_TranslucentBackground, true); 
    mParent = parent; 
    mParent->installEventFilter(this); 

    QVBoxLayout *vlay = new QVBoxLayout(this); 
    vlay->addItem(new QSpacerItem(20, 243, QSizePolicy::Minimum, QSizePolicy::Expanding)); 
    QHBoxLayout *hlay = new QHBoxLayout; 
    vlay->addLayout(hlay); 
    group = new QButtonGroup(this); 
    const QStringList nameBtns{"Return", "Next"}; 
    for(int i=0; i < nameBtns.length(); i++){ 
     QPushButton* btn = new QPushButton(nameBtns[i]); 
     btn->setFlat(true); 
     group->addButton(btn, i); 
     hlay->addWidget(btn); 
    } 
    connect(group, static_cast<void (QButtonGroup::*)(int)>(&QButtonGroup::buttonClicked), 
      this, static_cast<void (TutoWidget::*)(int)>(&TutoWidget::onClicked)); 
    hlay->addItem(new QSpacerItem(40, 20, QSizePolicy::Expanding, QSizePolicy::Minimum)); 
    group->button(0)->hide(); 
} 

void TutoWidget::addPage(const QPoint &center, int radius, const QPoint &pText, const QString &text) 
{ 
    pages << Pages{center, radius, pText, text}; 
    if(currentIndex == -1){ 
     currentIndex = 0; 
     update(); 
    } 
} 

bool TutoWidget::eventFilter(QObject *watched, QEvent *event){ 
    if(watched == mParent){ 

     switch (event->type()) { 
     case QEvent::Show: 
      QTimer::singleShot(10, this, &QWidget::show); 
      break; 
     case QEvent::Close: 
      close(); 
      break; 
     case QEvent::Move: 
      move(mParent->mapToGlobal(QPoint(0, 0))); 
      break; 
     case QEvent::Resize: 
      resize(mParent->size()); 
      break; 
     default: 
      break; 
     } 
    } 
    return QWidget::eventFilter(watched, event); 
} 

void TutoWidget::paintEvent(QPaintEvent *){ 
    QPainter painter(this); 
    painter.setPen(Qt::NoPen); 
    painter.setRenderHint(QPainter::Antialiasing); 
    painter.setBrush(QColor(100, 100, 100, 200)); 
    QPainterPath path; 
    if(currentIndex != -1){ 
     QPoint center = pages[currentIndex].center; 
     int radius = pages[currentIndex].radius; 
     QString text = pages[currentIndex].text; 
     QPoint pText = pages[currentIndex].pText; 
     path.moveTo(center + radius/2*QPoint(1, 0)); 
     path.arcTo(QRect(center-radius/2*QPoint(1, 1),radius*QSize(1, 1)), 0, 360); 
     path.addText(pText, font(), text); 
    } 
    path.addRect(rect()); 
    painter.drawPath(path); 
} 

void TutoWidget::onClicked(int id) 
{ 
    if(id == 0){ 
     if(currentIndex > 0) 
      currentIndex--; 
    } 
    else if(id == 1){ 
     if(currentIndex < pages.count()-1) 
      currentIndex++; 
    } 
    update(); 
    group->button(0)->setVisible(currentIndex!=0); 
    group->button(1)->setVisible(currentIndex!=(pages.count()-1)); 
} 

例：

tuto = new TutoWidget(this); // this is the widget 
tuto->addPage(QPoint(200, 200), 40, QPoint(100, 100), "some text1"); 
tuto->addPage(QPoint(300, 300), 60, QPoint(200, 100), "some text2"); 
tuto->addPage(QPoint(100, 200), 100, QPoint(200, 50), "some text3"); 
tuto->addPage(QPoint(200, 100), 80, QPoint(100, 200), "some text4"); 

完全な例では、それは全体のウィジェットを埋め、上になるように、中央のウィジェットの子としてQLabelを追加します（あなたはおそらくそれを置くことをしたくない、次のlink

Answer 2

これを実行するのに役立つものは何もありません。

通常は非表示になり、「チュートリアル」モードでのみ表示されるオーバーレイウィジェットを使用できます。 QPainterPathを使用して簡単に穴を開けることができます。まず、ウィジェット全体の矩形を追加してから、穴を描く場所に円を追加して、その結果のパスを塗りつぶします。

gui要素の絶対位置を取得するには、チュートリアルオーバーレイウィジェットにマッピングします。

私は、あなたがチュートリアルをしたいそれぞれのウィジェットに実装するポインタ/テキストペアの抽象的なリストまたは少なくとも基本的なリストを実装し、そのウィジェットの各要素をチュートリアルに登録することをお勧めします要素とチュートリアルのテキストです。その後、そのウィジェットのチュートリアルが呼び出されると、オーバーレイウィジェットが表示され、関連付けられた情報を持つウィジェットの特定の要素を反復することができ、反復で再描画して円とテキストを表示できます。