Qt – Androidアプリ開発 – バブルを動かすためのqml編集
津路です。こんにちは。
前回は準備だけでしたが、今回は、バブルイメージを加速させて動かすコーディングです。
まず、イメージを右クリックして、Move Component into Separate Fileを選択すると、ダイアログが表示されます。
Bubbleと入力し、x, y, ui.qml file のチェックを外して、OKを押すと、bubble.qmlが保存されます。
Page1Form.ui.qmlでは、Bubble型へのリンクが貼られます。
次に、Bubble.qmlを開いて、属性を書きます。
1 2 3 4 5 6 7 | Image { source: "Bluebubble.svg" smooth: true property real centerX property real centerY property real bubbleCenter } |
main.qmlを開いて、タイトルを設定します。
1 2 3 4 5 6 | ApplicationWindow { visible: true width: 640 height: 480 title: qsTr("Accelerate Bubble") } |
Bubbleの位置を指定します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | SwipeView { id: swipeView anchors.fill: parent currentIndex: tabBar.currentIndex Page1Form { bubble { id: bubble centerX: mainWindow.width / 2 centerY: mainWindow.height / 2 bubbleCenter: bubble.width / 2 x: bubble.centerX - bubble.bubbleCenter y: bubble.centerY - bubble.bubbleCenter } } } |
次に、動かすためのコーディングです。
import QtSensors 5.9 にて、センサーをインポート。
Accelerometerという型を宣言します。
1 2 3 4 5 | Accelerometer { id: accel dataRate: 100 active: true } |
以下の関数で、加速度に応じた位置を計算します。
1 2 3 4 5 6 | function calcPitch(x, y, z) { return -(Math.atan(y / Math.sqrt(x * x + z * z)) * 57.2957795); } function calcRoll(x, y, z) { return -(Math.atan(x / Math.sqrt(y * y + z * z)) * 57.2957795); } |