题外话
原本想用QML做个带频谱音乐播放器,奈何Qt自身的系统bug。
使用QAudioProbe获取音频的频谱,遇到下面错误提示:
提示[0x80004005] Failed to connect the audio sample grabber。
哪位哥们遇到过这个问题呀,后面解决掉的,求告知?
步入正题
Charts在QML中的使用
1、频谱效果
1、main.qml
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
VerticalSpectrum{}
}
2、VerticalSpectrum.qml
import QtQuick 2.15
import QtCharts 2.15
ChartView {
id:view
property bool isShow1: true
anchors.fill: parent
backgroundColor: "teal"
ValueAxis{
id:myAxisX
min:0
max:100
visible: false
tickCount: 101;
}
ValueAxis{
id:myAxisY
min:0
max:50
visible: false
tickCount: 51;
}
LineSeries{
id:myLine1
axisX: myAxisX
axisY: myAxisY
visible: isShow1
color: "#00ffff"
}
LineSeries{
id:myLine2
axisX: myAxisX
axisY: myAxisY
visible: !isShow1
color: "#00ffff"
}
Timer{
id:myTimer
interval: 300
running: true
repeat: true
onTriggered: {
isShow1=!isShow1
var index=0
var key=100
if(isShow1){//myLine1在显示,那么myLine2此时就在更新数据
myLine2.clear()
for(index;index<key;++index){
myLine2.append(index,Math.random()*50);
}
}
else{//myLine2在显示,那么myLine1此时就在更新数据
myLine1.clear();
for(index;index<key;++index){
for(index;index<key;index++){
myLine1.append(index,Math.random()*50);
}
}
}
}
}
}
效果如下:
音乐频谱效果
2、动态平移波纹效果
1、main.qml
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
HorizontalWave{}
}
2、HorizontalWave.qml
import QtQuick 2.15
import com.DataSource 1.0
import QtCharts 2.15
ChartView {
id: view
property int count: 0
property int baseX: 0 //view的横坐标,它随时间在自增,以达到平移效果
title: "Line"
backgroundColor: "teal"
anchors.fill: parent
antialiasing: true
animationOptions: ChartView.SeriesAnimations
ValueAxis {
id: myAxisX
min: 0
max: 10
tickCount: 11
visible: false
labelsColor: "#fff"
labelFormat: "%d"
}
ValueAxis {
id: myAxisY
min: 0
max: 50
tickCount: 51
visible: false
labelsColor: "#fff"
labelFormat: "%d"
}
LineSeries {
id:myline1
name: "LineSeries"
axisX:myAxisX
axisY: myAxisY
color: "#00ffff"
useOpenGL: true
}
Timer{
id:timer;
running: true
repeat: true
interval: 100
onTriggered: {
myline1.append(baseX,Math.random()*50);
count++;
baseX++;
if(count>=myAxisX.tickCount+1){
view.scrollRight(view.plotArea.width/(myAxisX.tickCount-1))
myline1.remove(myline1.at(0)); //移除已经消失在view显示范围内的点,防止内存爆表
}
console.log(myline1.count)
}
}
}
效果如下:
动态水平波效果
3、柱状频谱效果
import QtQuick 2.15
import QtCharts 2.15
ChartView {
id:view
property bool isShow1: true
width:parent.width/2
height:parent.height/2
anchors.fill: parent
ValueAxis{
id:xAxis
min:0
max:100
}
ValueAxis{
id:myAxisX
min:0
max:50
visible: false
tickCount: 51;
}
ValueAxis{
id:myAxisY
min:0
max:50
visible: false
tickCount: 51;
}
BarSeries{
id:myLine1
//axisX: myAxisX
axisY: myAxisY
visible: isShow1
barWidth:2
BarSet{
id:set1
color: "green"
values:["","","","","","","","","","","","","","","","","","","",""
,"","","", "","","","","","","","","","","","","","","","","","","","","","","","","","","",]
}
}
BarSeries{
id:myLine2
//axisX: myAxisX
axisY: myAxisY
visible: !isShow1
barWidth:2
labelsVisible: false
BarSet{
id:set2
color: "green"
values:["","","","","","","","","","","","","","","","","","","",""
,"","","", "","","","","","","","","","","","","","","","","","","","","","","","","","","",]
}
}
Timer{
property ListModel vaules:ListModel{}
id:myTimer
interval: 200
running: true
repeat: true
onTriggered: {
isShow1=!isShow1
if(isShow1)//myLine1在显示,那么myLine2此时就在更新数据
for(var i=0;i<50;i++)
set2.replace(i,Math.random()*50)
else //myLine2在显示,那么myLine1此时就在更新数据
for(var j=0;j<50;j++)
set1.replace(j,Math.random()*50)
}
}
}
效果如下: