QT quick-自制QML无人机地面站航向盘
1 import QtQuick 2.0 2 3 Rectangle 4 5 { 6 7 id:compassItem 8 9 width: 150 10 11 height: 150 12 13 color: "transparent" 14 15 property int m_Angle: 0 16 property int m_Yaw: 0 17 18 Rectangle 19 20 { 21 22 width: parent.width 23 24 height: parent.height 25 26 color: "transparent" 27 28 Canvas 29 30 { 31 32 anchors.fill: parent 33 34 onPaint: 35 36 { 37 38 var ctx = getContext("2d"); 39 40 //绘制圆圈 41 42 ctx.lineWidth = 2; 43 44 ctx.strokeStyle = "#000000"; 45 46 ctx.globalAlpha = 1.0; 47 48 ctx.beginPath(); 49 50 ctx.arc(width/2,width/2,width/2-2,0,2*Math.PI); 51 52 ctx.stroke(); 53 54 ctx.restore(); 55 56 for(var i = 0;i<36;i++) 57 58 { 59 60 ctx.save(); 61 62 ctx.translate(width/2,height/2); 63 64 ctx.rotate(i*10*Math.PI/180); 65 66 ctx.beginPath(); 67 68 if(i%9 ==0) 69 70 { 71 72 ctx.moveTo(0,-width/2+12); 73 74 ctx.lineTo(0,-width/2+2); 75 76 } 77 78 else 79 80 { 81 82 ctx.moveTo(0,-width/2+10); 83 84 ctx.lineTo(0,-width/2+2); 85 86 } 87 88 ctx.stroke(); 89 90 ctx.restore(); 91 92 } 93 94 } 95 96 } 97 98 Rectangle 99 100 { 101 102 width: 20 103 104 height: 20 105 106 anchors.horizontalCenter: parent.horizontalCenter 107 108 anchors.top: parent.top 109 110 anchors.topMargin: 12 111 112 rotation: -parent.rotation 113 114 color: "#00000000" 115 116 Text { 117 118 anchors.centerIn: parent 119 120 font.family: "微软雅黑" 121 122 font.pixelSize: 14 123 124 color: "#FF0000" 125 126 text: qsTr("N") 127 128 } 129 130 } 131 132 Rectangle 133 134 { 135 136 width: 20 137 138 height: 20 139 140 anchors.verticalCenter: parent.verticalCenter 141 142 anchors.right: parent.right 143 144 anchors.rightMargin: 12 145 146 color: "#00000000" 147 148 rotation: -parent.rotation 149 150 Text { 151 152 anchors.centerIn: parent 153 154 font.family: "微软雅黑" 155 156 font.pixelSize: 14 157 158 color: "#FF0000" 159 160 text: qsTr("E") 161 162 } 163 164 } 165 166 Rectangle 167 168 { 169 170 width: 20 171 172 height: 20 173 174 anchors.verticalCenter: parent.verticalCenter 175 176 anchors.left: parent.left 177 178 anchors.leftMargin: 12 179 180 color: "#00000000" 181 182 rotation: -parent.rotation 183 184 Text { 185 186 anchors.centerIn: parent 187 188 font.family: "微软雅黑" 189 190 font.pixelSize: 14 191 192 color: "#FF0000" 193 194 text: qsTr("W") 195 196 } 197 198 } 199 200 Rectangle 201 202 { 203 204 width: 20 205 206 height: 20 207 208 anchors.horizontalCenter: parent.horizontalCenter 209 210 anchors.bottom: parent.bottom 211 212 anchors.bottomMargin: 12 213 214 color: "#00000000" 215 216 rotation: -parent.rotation 217 218 Text { 219 220 anchors.centerIn: parent 221 222 font.family: "微软雅黑" 223 224 font.pixelSize: 14 225 226 color: "#FF0000" 227 228 text: qsTr("S") 229 230 } 231 232 } 233 234 Rectangle 235 236 { 237 238 width: 64 239 240 height: 64 241 242 color: "transparent" 243 244 rotation: compassItem.m_Angle 245 246 anchors.centerIn: parent 247 248 Image { 249 250 anchors.fill: parent 251 252 source: "Image/plane.svg" 253 254 } 255 256 } 257 Rectangle{ 258 width: 30 259 height: 20 260 color: "transparent" 261 anchors.centerIn: parent 262 Text { 263 id: compassValue 264 anchors.centerIn: parent 265 font.pixelSize: 12*dp 266 color: "#ffffff" 267 text: m_Yaw 268 } 269 } 270 271 } 272 273 }
成果展示
