基于Qt的多媒体综合应用程序设计（3）

具体设计方法及步骤

窗口界面设计
1.多媒体应用程序
1）新建项目：
新建Qt Widgets Application，项目名称为“Media”，选择基类并为需要使用的类名命名，取消“创建界面”复选框的选中状态。单击“下一步”按钮，最后单击“完成”按钮，完成该项目工程的建立。
2）新建头文件、源文件和ui界面。
3）ui设计：
在ui页面中添加6个pushButton按钮作为后续各项功能的跳转渠道，在头文件中完成类、函数及变量的设置，在程序窗口中添加相应的控件，利用控件的属性和方法分别实现文字处理程序跳转、绘图程序跳转、图像处理程序跳转、音频播放器跳转、视频播放器跳转和动画播放器跳转功能。
多媒体应用程序的主页面如图3-1所示：

图3-1 多媒体应用程序

2.文字处理程序
设计过程如下：
1）新建Qt Widgets Application，项目名称为“ImageProcessor”，基类选择“QMainWindow”，类名命名为“ImgProcessor”，取消“创建界面”复选框的选中状态。单击“下一步”按钮，最后单击“完成”按钮，完成该项目工程的建立。
2）添加该工程的提供主要显示文本编辑框函数所在的文件，在“ImageProcessor”项目名上单击鼠标右键，在弹出的快捷菜单中选择“添加新文件…”菜单项，在弹出的对话框中选择“C++ Class”选项，单击“Choose…”按钮，弹出对话框，在“Base class”后面的下拉列表框中选择基类名“QWidget”，在“Class name”后面的文本框中输入类的名称“ShowWidget”。程序代码如下：

setWindowTitle(tr("文字处理软件"));			//设置窗体标题
    showWidget =new ShowWidget(this);		
    setCentralWidget(showWidget);

3）单击“下一步”按钮，单击“完成”按钮，添加“showwidget.h”头文件和“showwidget.cpp”源文件，添加相应代码实现文字处理程序的功能。
“showwidget.cpp”程序代码如下：

#include "showwidget.h"
#include <QHBoxLayout>
ShowWidget::ShowWidget(QWidget *parent) : QWidget(parent)
{
   
    imageLabel =new QLabel;
    imageLabel->setScaledContents(true);
    text =new QTextEdit;
    QHBoxLayout *mainLayout =new QHBoxLayout(this);
    mainLayout->addWidget(imageLabel);
    mainLayout->addWidget(text);
}

4）打开“showwidget.h”头文件，具体代码如下：

#include <QWidget>
#include <QLabel>
#include <QTextEdit>
#include <QImage>
class ShowWidget : public QWidget
{
       
    Q_OBJECT
public:
    explicit ShowWidget(QWidget *parent = 0);     
    QImage img;
    QLabel *imageLabel;
    QTextEdit *text;
signals:
public slots:
};

5）打开“showwidget.cpp”文件，添加如下代码：

#include "showwidget.h"
#include <QHBoxLayout>
ShowWidget::ShowWidget(QWidget *parent):QWidget(parent)
{
   
    imageLabel =new QLabel;
    imageLabel->setScaledContents(true);
    text =new QTextEdit;
    QHBoxLayout *mainLayout =new QHBoxLayout(this);
    mainLayout->addWidget(imageLabel);
    mainLayout->addWidget(text);
}

5）主函数ImgProcessor类声明中createActions()函数用于创建所有的动作、createMenus()函数用于创建菜单、createToolBars()函数用于创建工具栏；接着声明实现主窗口所需的各个元素，包括菜单、工具栏及各个动作等；最后声明用到的槽函数，打开“imgprocessor.h”文件，添加相应代码。部分程序代码如下：

/* 创建动作、菜单、工具栏的函数 */
createActions();
createMenus();
createToolBars();
connect(fontComboBox,SIGNAL(activated(QString)),
        this,SLOT(ShowFontComboBox(QString)));
connect(sizeComboBox,SIGNAL(activated(QString)),
        this,SLOT(ShowSizeSpinBox(QString)));
connect(boldBtn,SIGNAL(clicked()),this,SLOT(ShowBoldBtn()));
connect(italicBtn,SIGNAL(clicked()),this,SLOT(ShowItalicBtn()));
connect(underlineBtn,SIGNAL(clicked()),this,SLOT(ShowUnderlineBtn()));
connect(colorBtn,SIGNAL(clicked()),this,SLOT(ShowColorBtn()));
connect(showWidget->text,SIGNAL(currentCharFormatChanged(QTextCharFormat&)),this,SLOT(ShowCurrentFormatChanged(QTextCharFormat&)));
connect(listComboBox,SIGNAL(activated(int)),this,SLOT(ShowList(int)));
connect(showWidget->text->document(),SIGNAL(undoAvailable(bool)),redoAction,SLOT(setEnabled(bool)));
connect(showWidget->text->document(),SIGNAL(redoAvailable(bool)),redoAction,SLOT(setEnabled(bool)));
connect(showWidget->text,SIGNAL(cursorPositionChanged()),this,SLOT(ShowCursorPositionChanged()));

7）实现新建一个空白文件的功能。
a.打开“imgprocessor.h”头文件，添加“protected slots:”变量：

protected slots:    
 void ShowNewFile();

b.在createActions()函数的“"新建"动作”最后添加事件关联：
connect(NewFileAction,SIGNAL(triggered()),this,SLOT(ShowNewFile()));
c.实现新建文件功能的函数ShowNewFile()如下：

void ImgProcessor::ShowNewFile()
{
   
    ImgProcessor *newImgProcessor =new ImgProcessor;
    newImgProcessor->show();
}
 //“退出”动作
    exitAction =new QAction(tr("退出"),this);
    exitAction->setShortcut(tr("Ctrl+Q"));
    exitAction->setStatusTip(tr("退出程序"));
    connect(exitAction,SIGNAL(triggered()),this,SLOT(close()));

8)利用标准文件对话框QFileDialog打开一个已经存在的文件。若当前中央窗体中已有打开的文件，则在一个新的窗口中打开选定的文件；若当前中央窗体是空白的，则在当前窗体中打开。
a.在“imgprocessor.h”头文件中添加“protected slots:”变量：
void ShowOpenFile();
b.在createActions()函数的“"打开"动作”最后添加事件关联：
connect(openFileAction,SIGNAL(triggered()),this,SLOT(ShowOpenFile()));
c.实现打开文件功能的函数ShowOpenFile()如下：

void ImgProcessor::ShowOpenFile()
{
   
    fileName =QFileDialog::getOpenFileName(this);
    if(!fileName.isEmpty())
    {
   
        if(showWidget->text->document()->isEmpty())
        {
   
            loadFile(fileName);
        }
        else
        {
   
            ImgProcessor *newImgProcessor =new ImgProcessor;
            newImgProcessor->show();
            newImgProcessor->loadFile(fileName);
        }
    }
}

打开一个文档的效果如图3-2所示：

图3-2 打开一个文档

d.其中，loadFile()函数的实现如下，该函数利用QFile和QTextStream完成具体读取文件内容的工作：

void ImgProcessor::loadFile(QString filename)
{
   
    printf("file name:%s\n",filename.data());
    QFile file(filename);
    if(file.open(QIODevice::ReadOnly|QIODevice::Text))
    {
   
        QTextStream textStream(&file);
        while(!textStream.atEnd())
        {
   
            showWidget->text->append(textStream.readLine());
            printf("read line\n");
        }
        printf("end\n");
    }
}

“文件”下拉列表功能如图3-3所示：

图3-3 “文件”下拉列表功能
实现复制、剪切、粘贴部分程序代码如下：

//“复制”动作
    copyAction =new QAction(QIcon("copy.png"),tr("复制"),this);
    copyAction->setShortcut(tr("Ctrl+C"));
    copyAction->setStatusTip(tr("复制文件"));
    connect(copyAction,SIGNAL(triggered()),showWidget->text,SLOT (copy()));
    //“剪切”动作
    cutAction =new QAction(QIcon("cut.png"),tr("剪切"),this);
    cutAction->setShortcut(tr("Ctrl+X"));
    cutAction->setStatusTip(tr("剪切文件"));
    connect(cutAction,SIGNAL(triggered()),showWidget->text,SLOT (cut()));
    //“粘贴”动作
    pasteAction =new QAction(QIcon("paste.png"),tr("粘贴"),this);
    pasteAction->setShortcut(tr("Ctrl+V"));
    pasteAction->setStatusTip(tr("粘贴文件"));
    connect(pasteAction,SIGNAL(triggered()),showWidget->text,SLOT (paste()));

“编辑”下拉列表功能如图3-4所示：

图3-4 “编辑”下拉列表功能
9）完成设置选定文字字体的函数ShowFontComboBox()代码如下：

void ImgProcessor::ShowFontComboBox(QString comboStr)	//设置字体
{
   
    QTextCharFormat fmt;		 //创建一个QTextCharFormat对象
    fmt.setFontFamily(comboStr); //选择的字体名设置给QTextCharFormat
    mergeFormat(fmt);     		 //将新的格式应用到光标选区内的字符
}

前面介绍过，所有对于QTextDocument进行的修改都通过QTextCursor类来完成，具体代码如下：

void ImgProcessor::mergeFormat(QTextCharFormat format)
{
   
    QTextCursor cursor =showWidget->text->textCursor();
//获得编辑框中的光标
    if(!cursor.hasSelection())  cursor.select(QTextCursor::WordUnderCursor);
    cursor.mergeCharFormat(format);						    showWidget->text->mergeCurrentCharFormat(format);	
}

字体设置功能实现效果如图3-5所示：

图3-5 设置字体
10）设置选定文字字号大小的ShowSizeSpinBox()函数代码如下：

void ImgProcessor::ShowSizeSpinBox(QString spinValue)	//设置字号
{
   
   QTextCharFormat fmt;
   fmt.setFontPointSize(spinValue.toFloat());
   showWidget->text->mergeCurrentCharFormat(fmt);
}

11）设置选定文字为加粗显示的ShowBoldBtn()函数代码如下：

void ImgProcessor::ShowBoldBtn() 		//设置文字显示加粗
{
   
    QTextCharFormat fmt;
    fmt.setFontWeight(boldBtn->isChecked()?QFont::Bold:QFont:: Normal);
    showWidget->text->mergeCurrentCharFormat(fmt);
}

12）设置选定文字为斜体显示的ShowItalicBtn()函数代码如下：

void ImgProcessor::ShowItalicBtn()		//设置文字显示斜体
{
   
    QTextCharFormat fmt;
    fmt.setFontItalic(italicBtn->isChecked());
    showWidget->text->mergeCurrentCharFormat(fmt);
}

13）在选定文字下方加下画线的ShowUnderlineBtn()函数代码如下：

void ImgProcessor::ShowUnderlineBtn()		//设置文字加下画线
{
   
    QTextCharFormat fmt;
    fmt.setFontUnderline(underlineBtn->isChecked());
    showWidget->text->mergeCurrentCharFormat(fmt);
}

15）其他功能的实现代码与前面所述类似，在此不再赘述。排序部分程序代码如下：

listLabel =new QLabel(tr("排序"));
    listComboBox =new QComboBox;
    listComboBox->addItem("Standard");
    listComboBox->addItem("QTextListFormat::ListDisc");
    listComboBox->addItem("QTextListFormat::ListCircle");
    listComboBox->addItem("QTextListFormat::ListSquare");
    listComboBox->addItem("QTextListFormat::ListDecimal");
    listComboBox->addItem("QTextListFormat::ListLowerAlpha");
    listComboBox->addItem("QTextListFormat::ListUpperAlpha");
    listComboBox->addItem("QTextListFormat::ListLowerRoman");
    listComboBox->addItem("QTextListFormat::ListUpperRoman");

“排序”下拉列表的效果如图3-6所示：

图3-6 “排序”下拉列表
16）实现文本打印功能：