前節では高解像度のマウス座標オフセットの問題を解決しましたが、今回は動的ヒストグラム全体を使用して、リアルタイムのオーディオスペクトル表示を実現します。
チュートリアルは MediaStateT に適用されます
MediaStateT Github プロジェクトのアドレス: https://github.com/taxue-alfred/MediaStateT
MediaStateT Gitee プロジェクトのアドレス: https://gitee.com/MediaState/MediaStateT
結果を示す
効果は感じますか？手放してから、時間をかけて美しく美しくしてください。. また、マルチスレッド化する必要があるようです。.
実装説明
ここには 2 つのチャネルがあります。1 つのチャネルについて説明しますが、残りは同じです。基本的なフレームワークを作成することから始めます。
ChartView{
id:left_bar
// title: qsTr("左声道")
Layout.minimumWidth:320
Layout.minimumHeight:240
antialiasing:true
legend.visible:false
BarCategoryAxis{
id:left_bar_value_X
labelsVisible:false
gridVisible:false
//这里添加下标，到时候隐藏，不然到时候进行数据替换没法替换，数量一定要和想要显示的个数一致
categories: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]
}
ValueAxis{
id:left_bar_value_Y
visible:false
min:0
max:1000
}
BarSeries{
axisX:left_bar_value_X
axisY:left_bar_value_Y
BarSet {
id:bar1
label: "Bob";
//这里对应数值，到时候隐藏，不然到时候进行数据替换没法替换，数量一定要和想要显示的个数一致
values: [2, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
}
}
}
特定のデータ置換:
コードの一部をここに抜粋します. プロジェクトのソース コードと比較すると, ルック アンド フィールに影響を与える大量のコードを避けるために, 折れ線グラフ部分とヒストグラムの右チャネル部分が削除されています.すべてのコードについてはプロジェクトを参照してください
ここでは、いくつかの必要なことについて説明します。
- データの置換には
YourBarID.replace(index, value)関数が必要です - 名前が示すように、freInterFace.data_vector はデータを格納する場所であり、独自のデータに置き換えるだけです。
- 私のヒストグラムには合計 10 列あります。したがって、j<=10、特定の状況は自分で置き換えられます
- bar1 は左チャンネルのヒストグラム ID です。特定の状況では自分で置き換えてください
Timer{
id:update_value
repeat:true
running:true
interval:45
onTriggered: {
//检测窗口是否处于活跃状态
if(root_window.active === true){
for(var j = 0;j <= 10;j++){
bar1.replace(j, freInterface.data_vector[3][j+1])
}
}
}
}
}
上のセクションと下のセクションの他の記事については、私の Qt コレクションを参照してください。. 次のセクションを書くのが本当に面倒です。
しつこい: このチュートリアルは終わりに近づいているように感じます。バグの修正と小さな機能の追加にすぎません (MediaStateBoard ボードの実装もありますが、Qt とは関係ありません)。もちろん、面白い機能を追加すると、別の記事か何かにつながります。この記事は主に、プロジェクトを書く過程で遭遇したいくつかの落とし穴や、より良い経験を共有することについて書かれています。このプロジェクトを書くことは、Netease Cloud の MACOS ポップアップ ウィンドウを見ることです。これは非常に優れており、1 つを模倣して新しい機能を追加したいと考えています。Qt6 は登場したばかりの新しいもので、インターネット上にいくつかのチュートリアルがあります。多くのプラットフォームのチュートリアルは、直接かつ自動的にコピーされます。あなたもそれを見ることができると思います。.