Qt – Androidアプリ開発 – バブルを動かすためのqml編集

著者：津路高広

公開日：2020/02/07

最終更新日：2020/02/07

カテゴリー：技術情報

津路です。こんにちは。
前回は準備だけでしたが、今回は、バブルイメージを加速させて動かすコーディングです。
まず、イメージを右クリックして、Move Component into Separate Fileを選択すると、ダイアログが表示されます。
Bubbleと入力し、x, y, ui.qml file のチェックを外して、OKを押すと、bubble.qmlが保存されます。
Page1Form.ui.qmlでは、Bubble型へのリンクが貼られます。
次に、Bubble.qmlを開いて、属性を書きます。

Image {
    source: "Bluebubble.svg"
    smooth: true
    property real centerX
    property real centerY
    property real bubbleCenter
}

main.qmlを開いて、タイトルを設定します。

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Accelerate Bubble")
}

Bubbleの位置を指定します。

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という型を宣言します。

Accelerometer {
       id: accel
       dataRate: 100
       active: true
 }

以下の関数で、加速度に応じた位置を計算します。

    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);
    }