八、系统托盘与配置面板

没有人会把你变得越来越好，时间和经历只是陪衬。

支撑你变得越来越好的，是你自己坚强的意志、修养、品行、以及不断的反思和经验。

人生最好的贵人，就是努力向上的自己。

一、系统托盘

1、资源文件夹

新建资源文件夹，我们需要把图片相关资源都放到这里，

这里我们新建一个 icon 文件夹，并且放入一个 cloud.png 图片作为系统托盘图标。

2、代码实现

我们使用 QMenu 来创建系统托盘菜单，使用 QAction 来定义菜单项，并且绑定对应的菜单触发事件，具体代码如下：

void MainWindow::initSysTrayIcon(){ptrSysTrayIcon = new QSystemTrayIcon(QIcon(":/icon/cloud.png"), this);// 创建托盘菜单QMenu *trayMenu = new QMenu();// 添加设置菜单项QAction *settingsAction = new QAction("设置", this);QObject::connect(settingsAction, &QAction::triggered, this, &MainWindow::openSettingsWindow);trayMenu->addAction(settingsAction);// 添加退出菜单项QAction *exitAction = new QAction("退出", this);QObject::connect(exitAction, &QAction::triggered, this, &QCoreApplication::quit);trayMenu->addAction(exitAction);// 将菜单关联到托盘图标ptrSysTrayIcon->setContextMenu(trayMenu);// 显示托盘图标ptrSysTrayIcon->show();
}

3、显示托盘

在主窗口构造方法设置系统托盘，

MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{ui->setupUi(this);initWindowSettings();initSysTrayIcon();
}void MainWindow::initSysTrayIcon(){ptrSysTrayIcon = new QSystemTrayIcon(QIcon(":/icon/cloud.png"), this);// 创建托盘菜单QMenu *trayMenu = new QMenu();// 添加设置菜单项QAction *settingsAction = new QAction("设置", this);QObject::connect(settingsAction, &QAction::triggered, this, &MainWindow::openSettingsWindow);trayMenu->addAction(settingsAction);// 添加退出菜单项QAction *exitAction = new QAction("退出", this);QObject::connect(exitAction, &QAction::triggered, this, &QCoreApplication::quit);trayMenu->addAction(exitAction);// 将菜单关联到托盘图标ptrSysTrayIcon->setContextMenu(trayMenu);// 显示托盘图标ptrSysTrayIcon->show();
}

运行之后，我们就可以在系统托盘中看到自定义的图标，并且右键后可以显示自定义的两个菜单。

二、配置面板

通过系统托盘菜单，我们需要跳转到对应的配置面板，对模型人物进行参数调整。

1、配置面板UI

UI 设计：添加角色下拉框，用来切换角色，添加三个滑动条分别控制 X 轴、Y 轴以及模型缩放比例，

2、UI 插槽

UI 头文件添加 slots，绑定控件事件，

#ifndef SETTINGSWINDOW_H
#define SETTINGSWINDOW_H#include <QMainWindow>#include <QScreen>
#include <QGuiApplication>namespace Ui {
class SettingsWindow;
}class SettingsWindow : public QMainWindow
{Q_OBJECTpublic:explicit SettingsWindow(QWidget *parent = nullptr);~SettingsWindow();
private slots:void onComboBoxRoleIndexChanged(int index);void onScaleValueChanged(int value);void onTranslateXValueChanged(int value);void onTranslateYValueChanged(int value);
private:Ui::SettingsWindow *ui;
};#endif // SETTINGSWINDOW_H

切换人物，

void SettingsWindow::onComboBoxRoleIndexChanged(int index){qDebug() << "onComboBoxRoleIndexChanged, Selected Index:" << index;LAppLive2DManager::GetInstance()->ChangeScene(index);
}

模型缩放，

void SettingsWindow::onScaleValueChanged(int value)
{// Scale [0,1]qDebug() << "Scale Value " << value * 0.01f;LAppLive2DManager::GetInstance()->GetModel(0)->GetModelMatrix()->Scale(value*0.01f,value*0.01f);}

X轴平移，

void SettingsWindow::onTranslateXValueChanged(int value)
{// TranslateX [-2,2]qDebug() << "TranslateX Value " << value * 0.01f;LAppLive2DManager::GetInstance()->GetModel(0)->GetModelMatrix()->TranslateX(value*0.01f);}

Y轴平移，

void SettingsWindow::onTranslateYValueChanged(int value)
{// TranslateY [-2,2]qDebug() << "TranslateY Value " << value * 0.01f;LAppLive2DManager::GetInstance()->GetModel(0)->GetModelMatrix()->TranslateY(value*0.01f);
}

三、参数记忆

配置面板设置了参数，只是临时的，并没有保存到配置文件，下次启动时，还是需要重新配置，为了解决这个问题，我们引入 QSettings 实现参数记忆。

1、记录当前人物

void SettingsWindow::onComboBoxRoleIndexChanged(int index){qDebug() << "onComboBoxRoleIndexChanged, Selected Index:" << index;QSettings settings("myapp.ini", QSettings::IniFormat);settings.setValue("Settings/Role", ui->comboBoxRole->currentText());settings.setValue("Settings/Index", index);LAppLive2DManager::GetInstance()->ChangeScene(index);
}

2、记录放缩比例

void SettingsWindow::onScaleValueChanged(int value)
{// Scale [0,1]qDebug() << "Scale Value " << value * 0.01f;QSettings settings("myapp.ini", QSettings::IniFormat);settings.setValue("Settings/ScaleX", value);settings.setValue("Settings/ScaleY", value);LAppLive2DManager::GetInstance()->GetModel(0)->GetModelMatrix()->Scale(value*0.01f,value*0.01f);
}

3、记录X轴平移

void SettingsWindow::onTranslateXValueChanged(int value)
{// TranslateX [-2,2]qDebug() << "TranslateX Value " << value * 0.01f;QSettings settings("myapp.ini", QSettings::IniFormat);settings.setValue("Settings/TranslateX", value);LAppLive2DManager::GetInstance()->GetModel(0)->GetModelMatrix()->TranslateX(value*0.01f);
}

4、记录Y轴平移

void SettingsWindow::onTranslateYValueChanged(int value)
{// TranslateY [-2,2]qDebug() << "TranslateY Value " << value * 0.01f;QSettings settings("myapp.ini", QSettings::IniFormat);settings.setValue("Settings/TranslateY", value);LAppLive2DManager::GetInstance()->GetModel(0)->GetModelMatrix()->TranslateY(value*0.01f);
}

四、启动参数

在第三步，我们记录了模型参数，接下来实现在启动时根据参数来渲染模型。

1、实现原理

通过源代码 debug，不难发现渲染逻辑是通过 LAppLive2DManager 类的构造方法调用 ChangeScene 方法渲染模型，

2、代码实现

修改构造方法，我们先从 myapp.ini 配置文件中获取参数，如果没有参数则采用默认值，

LAppLive2DManager::LAppLive2DManager(): _viewMatrix(NULL), _sceneIndex(0)
{_viewMatrix = new CubismMatrix44();// ChangeScene(_sceneIndex);// 加载上一次的运行参数QSettings settings("myapp.ini", QSettings::IniFormat);// 模型参数 读取参数值: 0 是默认值，如果 "Index" 不存在则返回 0_sceneIndex = settings.value("Settings/Index", 0).toInt();// 放缩参数csmInt32 scalesX =  settings.value("Settings/ScaleX", 100).toInt();csmInt32 scalesY = settings.value("Settings/ScaleY", 100).toInt();// 平移参数XcsmInt32 translateX = settings.value("Settings/TranslateX", 170).toInt();// 平移参数YcsmInt32 translateY = settings.value("Settings/TranslateY", -50).toInt();// 渲染模型CustomChangeScene(_sceneIndex,scalesX,scalesY,translateX,translateY);}

自定义实现 CustomChangeScene 方法，按指定的参数渲染模型，

void LAppLive2DManager::CustomChangeScene(Csm::csmInt32 index,Csm::csmInt32 scalesX, Csm::csmInt32 scalesY,Csm::csmInt32 translateX,Csm::csmInt32 translateY)
{_sceneIndex = index;if (DebugLogEnable){LAppPal::PrintLog("[APP]model index: %d", _sceneIndex);}// ModelDir[]に保持したディレクトリ名から// model3.jsonのパスを決定する.// ディレクトリ名とmodel3.jsonの名前を一致させておくこと.std::string model = ModelDir[index];std::string modelPath = ResourcesPath + model + "/";std::string modelJsonName = ModelDir[index];modelJsonName += ".model3.json";ReleaseAllModel();_models.PushBack(new LAppModel());_models[0]->LoadAssets(modelPath.c_str(), modelJsonName.c_str());// 自定义参数_models[0]->GetModelMatrix()->Scale(scalesX*0.01f,scalesY*0.01f);_models[0]->GetModelMatrix()->TranslateX(translateX*0.01f);_models[0]->GetModelMatrix()->TranslateY(translateY*0.01f);/** モデル半透明表示を行うサンプルを提示する。* ここでUSE_RENDER_TARGET、USE_MODEL_RENDER_TARGETが定義されている場合* 別のレンダリングターゲットにモデルを描画し、描画結果をテクスチャとして別のスプライトに張り付ける。*/{
#if defined(USE_RENDER_TARGET)// LAppViewの持つターゲットに描画を行う場合、こちらを選択LAppView::SelectTarget useRenderTarget = LAppView::SelectTarget_ViewFrameBuffer;
#elif defined(USE_MODEL_RENDER_TARGET)// 各LAppModelの持つターゲットに描画を行う場合、こちらを選択LAppView::SelectTarget useRenderTarget = LAppView::SelectTarget_ModelFrameBuffer;
#else \// デフォルトのメインフレームバッファへレンダリングする(通常)LAppView::SelectTarget useRenderTarget = LAppView::SelectTarget_None;
#endif#if defined(USE_RENDER_TARGET) || defined(USE_MODEL_RENDER_TARGET)// モデル個別にαを付けるサンプルとして、もう1体モデルを作成し、少し位置をずらす_models.PushBack(new LAppModel());_models[1]->LoadAssets(modelPath.c_str(), modelJsonName.c_str());_models[1]->GetModelMatrix()->TranslateX(0.2f);
#endifLAppDelegate::GetInstance()->GetView()->SwitchRenderingTarget(useRenderTarget);// 別レンダリング先を選択した際の背景クリア色float clearColor[3] = { 1.0f, 1.0f, 1.0f };LAppDelegate::GetInstance()->GetView()->SetRenderTargetClearColor(clearColor[0], clearColor[1], clearColor[2]);}
}