/
main.qml
177 lines (154 loc) · 5.47 KB
/
main.qml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
/******************************************************************************
Effect Chart: Special effects chart based on Qt and QML
Copyright (C) 2018-2019 yafeilinux <www.qter.org | yafeilinux@163.com>
* This file is part of effectchart
This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.
This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY. See the GNU Lesser General Public License
for more details.
You should have received a copy of the GNU Lesser General Public
License along with this library; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
******************************************************************************/
import QtQuick 2.9
import QtQuick.Window 2.2
import QtCharts 2.3
import QtQuick.XmlListModel 2.0
import QtGraphicalEffects 1.12
Window {
visible: true
width: 800
height: 480
property int currentIndex: -1
color: "black"
ChartView {
id: chartView
anchors.fill: parent
antialiasing: true
backgroundColor: "transparent"
legend.visible: false
// 曲线发生图片
Image {
id: img
source: "circle.png"
width: 100; height: 100
x: -10; y: 230
visible: true
Behavior on rotation {
NumberAnimation {
duration: 800
easing.type: Easing.InOutElastic;
easing.amplitude: 2.0;
easing.period: 1.5
}
}
}
// 显示数字的文本
Text {
id:txt
width: 200; height: 20
x: 350; y: 55
font.pointSize: 20
font.family: "Cambria"
color: "#F8F8FF"
}
}
// 解析XML数据
XmlListModel {
id: speedsXml
source: "speed.xml"
query: "/results/row"
XmlRole { name: "speedTrap"; query: "speedTrap/string()" }
XmlRole { name: "driver"; query: "driver/string()" }
XmlRole { name: "speed"; query: "speed/string()" }
onStatusChanged: {
if (status == XmlListModel.Ready) {
timer.start();
}
}
}
// 在定时器中动态添加数据
Timer {
id: timer
interval: 800
repeat: true
triggeredOnStart: true
running: false
onTriggered: {
currentIndex++;
if (currentIndex < speedsXml.count) {
var lineSeries = chartView.series(speedsXml.get(0).driver);
// 第一次运行时创建曲线
if (!lineSeries) {
lineSeries = chartView.createSeries(ChartView.SeriesTypeSpline,
speedsXml.get(0).driver);
chartView.axisY().min = 0;
chartView.axisY().max = 250;
chartView.axisY().tickCount = 6;
chartView.axisY().titleText = "speed (kph)";
chartView.axisX().titleText = "speed trap";
chartView.axisX().labelFormat = "%.0f";
lineSeries.color = "#87CEFA"
chartView.animationOptions = ChartView.SeriesAnimations
chartView.axisX().visible = false
chartView.axisY().visible = false
}
lineSeries.append(speedsXml.get(currentIndex).speedTrap,
speedsXml.get(currentIndex).speed);
txt.text = speedsXml.get(currentIndex).speed;
img.rotation += 360
if (speedsXml.get(currentIndex).speedTrap > 3) {
chartView.axisX().max =
Number(speedsXml.get(currentIndex).speedTrap)+1;
} else {
chartView.axisX().max = 5;
chartView.axisX().min = 0;
}
chartView.axisX().tickCount = chartView.axisX().max
- chartView.axisX().min + 1;
} else {
timer.stop();
chartView.animationOptions = ChartView.AllAnimations;
chartView.axisX().min = 0;
chartView.axisX().max = speedsXml.get(currentIndex - 1).speedTrap;
}
}
}
// 下面是对图表添加的图形效果
Glow {
id:glow
anchors.fill: chartView
radius: 18
samples: 37
color: "#87CEFA"
source: chartView
}
RadialBlur {
anchors.fill: chartView
source: chartView
angle: 360
samples: 20
}
ZoomBlur {
anchors.fill: chartView
source: chartView
length: 24
samples: 20
}
// 下面是图表边框及其发光效果
Image {
id: border
source: "border.png"
anchors.fill: parent
}
Glow {
anchors.fill: border
radius: 18
samples: 37
color: "#87CEFA"
source: border
}
}