说明

下面用demo2的例子演示怎么在同一个样式插件中新增一个样式，新增的样式在demo1的基础上加入颜色以及幅度调节设置项，如上图所示。 demo2的目录结构如下所示：

top.mashiros.3rd-party-style-demo.advp
 ├── Demo1.qml
 ├── Demo2.qml
 └── package.json

package.json

修改demo1中的package.json文件，在resources中加入demo2新增的样式资源，如下所示。

{
    "name": "top.mashiros.3rd-party-style-demo.advp",
    "version": "1.0.0",
    
    "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.qml"
        },
        {
            "location": "/3rd-party-demo2",
            "catalog": "top.mashiros.advp-style",
            "title": "3rd party Demo2",
            "entry": "Demo2.qml"
        }
    ]
}

Demo2.qml

package.json更新完成，现在在demo1的基础上加入颜色与幅度调节设置项。这里我们需要用到AdvpCanvasTemplate的属性configs来读取设置项。方法为：需要读取的Preference设置项的name作为configs对象的键值。如需要读取下面ColorPreference的值，则其对应值为configs["Color"]。

P.ColorPreference {
    name: "Color"
    label: qsTr("Color")
    defaultValue: "red"
}

下面为demo2中的Demo2.qml代码实现，代码功能说明写在了注释里。

import QtQuick 2.12
import NERvGear.Preferences 1.0 as P
//通过相对路径导入ADV-Plugin插件目录下qml/api文件夹，调用相关的组件
import "../top.mashiros.widget.advp/qml/api"

AdvpStyleTemplate {
    style: AdvpCanvasTemplate {
        //幅度比例系数
        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"];
        }
    }

    //设置样式初始的默认值
    defaultValues: {
        //版本号，可自定义，用于更新设置项
        "Version": "1.0.0",
        "Color": "#FF4500",
        "AM Ratio": 20
    }

    //preference属性的值为配置项组件，其组件的version属性与选项的默认值推荐使用defaultValues中的值
    preference: AdvpPreference {
        version: defaultValues["Version"]

        P.ColorPreference {
            name: "Color"
            label: qsTr("Color")
            defaultValue: defaultValues["Color"]
        }

        P.SliderPreference {
            name: "AM Ratio"
            label: qsTr("AM Ratio")
            from: 1
            to: 50
            stepSize: 1
            defaultValue: defaultValues["AM Ratio"]
            displayValue: value + "%"
        }
    }
}

完成代码后，启动SU2程序加载挂件，切换样式到3rd party Demo2的选项，即可在挂件处进行预览（记得播放音频）。

至此，我们已经完成了一个音频样式扩展的开发，此扩展包提供了demo1与demo2两个样式。更多有趣的音频样式期待您的开发。