Mashiro_Sorata
2 years ago
1 changed files with 157 additions and 0 deletions
@ -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**的选项,即可在挂件处进行预览(记得播放音频)。 |
Loading…
Reference in new issue