添加 'demo2'

demo2.md

@@ -0,0 +1,157 @@
+# 说明
+
+<div align="center"><img src="https://p.qlogo.cn/zc_icon/0/5a4b53837d0debc26e26a1895cc4802b16284484276385/0.png" style="zoom:80%;" /></div>
+
+下面用**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**的选项，即可在挂件处进行预览（记得播放音频）。