diff --git a/demo2.md b/demo2.md new file mode 100644 index 0000000..9512a32 --- /dev/null +++ b/demo2.md @@ -0,0 +1,157 @@ +# 说明 + +
+ +下面用**demo2**的例子演示怎么在同一个Style插件中新增一个Style,该Style在**demo1**的基础上加入颜色以及幅度调节设置项,如上图所示。 +**demo2**的根目录为`top.mashiros.3rd-party-style-demo.advp`,目录结构如下所示: + +```powershell +top.mashiros.3rd-party-style-demo.advp + ├── demo1 + │ └── Style.qml + ├── demo2 + │ ├── Config.qml + │ └── Style.qml + └── package.json +``` + +# *package.json* + +修改**demo1**中的*package.json*文件,在`resources`中加入**demo2**新增的Style,如下所示。 + +```json +{ + "name": "top.mashiros.3rd-party-style-demo.advp", + "version": "0.0.1", + + "title": { + "en": "ADV-Plugin 3rd party style demo", + "zh": "音频可视化插件第三方样式演示" + }, + + "description": "3rd party style demo for ADV-Plugin", + + "author": { + "name": "Mashiro_Sorata", + "email": "mashiro_sorata@qq.com", + "url": "http://www.mashiros.top/" + }, + + "resources": [ + { + "location": "/3rd-party-demo1", + "catalog": "top.mashiros.advp-style", + "title": "3rd party Demo1", + "entry": "./demo1" + }, + { + "location": "/3rd-party-demo2", + "catalog": "top.mashiros.advp-style", + "title": "3rd party Demo2", + "entry": "./demo2" + } + ] +} +``` + +# *Style.qml* + +*package.json*更新完成,现在在**demo1**的基础上加入颜色与幅度调节设置项。这里我们需要用到`StyleAPI`的属性`configs`来读取*Config.qml*中的设置项。方法为:需要读取的Preference设置项的`name`作为`configs`的键值。如需要读取下面`ColorPreference`的值,则其对应值为`configs["Color"]`。 + +```qml +P.ColorPreference { + name: "Color" + label: qsTr("颜色") + defaultValue: "red" +} +``` + +下面为**demo2**的*Style.qml*代码实现,代码功能说明写在了注释里。 + +```qml +import QtQuick 2.12 +//通过相对路径导入ADV-Plugin插件目录下qml/api文件夹,调用StyleAPI.qml组件 +import "../../top.mashiros.widget.advp/qml/api" + +StyleAPI { + //幅度比例系数,读取Config.qml的设置项"幅度比例"的值 + readonly property real am_ratio: 400/configs["AM Ratio"] + + //音频数据更新时的处理代码,参数是长度为129的数组data + onAudioDataUpdeted: { + //清空画布 + context.clearRect(0, 0, width, height); + //左声道音量 + let left_channel = 0; + //右声道音量 + let right_channel = 0; + //取前128位左右声道的数据进行处理 + for (let i=0;i<128;i++) { + if(i<64) { + //左声道FFT数据求和 + left_channel += data[i]; + } else { + //右声道FFT数据求和 + right_channel += data[i]; + } + } + //利用最后一位归一化系数data[128]进行动态归一化,其中400/am_ratio为最大高度值的调节系数 + let normalize = am_ratio*data[128]/height; + left_channel /= normalize; + right_channel /= normalize; + //绘制左声道 + context.fillRect(0,height,width*0.45,-left_channel); + //绘制右声道 + context.fillRect(width*0.55,height,width*0.45,-right_channel); + //填充矩形 + context.fill(); + //QML Canvas绘制图形(绘制后需要显示必须调用canvas的requestPaint方法) + requestPaint(); + } + + //属性configs或者context改变时的处理代码,无参数 + onConfigsUpdated: { + //给canvas的context赋值初始样式(填充颜色),避免在onAudioDataUpdeted处理代码中重复调用 + context.fillStyle = configs["Color"]; + } +} +``` + +# *Config.qml* + +此文件为选项配置文件,让Style增加更多可自定义的设置项。此文件需要在`resources`定义的`entry`目录下。 + +下面为**demo2**的*Config.qml*代码实现。 + +```qml +import QtQuick 2.12 +import NERvGear.Preferences 1.0 as P + +//通过相对路径导入ADV-Plugin插件目录下qml/api文件夹,调用CfgAPI.qml组件 +import "../../top.mashiros.widget.advp/qml/api" + +CfgAPI { + version: "0.0.1" + cfg_height: 500 + + P.ColorPreference { + name: "Color" + label: qsTr("颜色") + defaultValue: "#FF4500" + } + + P.Separator {} + + P.SliderPreference { + name: "AM Ratio" + label: qsTr("幅度比例") + from: 1 + to: 50 + stepSize: 1 + defaultValue: 20 + displayValue: value + "%" + } +} +``` + +完成代码后,启动SDK程序加载挂件,切换Style到**3rd party Demo2**的选项,即可在挂件处进行预览(记得播放音频)。 \ No newline at end of file