QML Flickable Проблемы

Question

Мне нужен горизонтальный контроллер, состоящий из фона и движущегося джойстика. Это требует следующего поведения:

1. Изначально по центру джойстик может перемещаться влево или вправо в пределах фона.
2. Когда перетаскивание отпущено, джойстик перецентрируется.
3. При касании части фона джойстик переходит на ощупь.
4. Если касание отпущено, ручка большого пальца перецентрируется.
5. Если перетаскивание выполняется после касания, ручка для большого пальца будет перетаскиваться из позиции, которой коснулись.

Проблемы:

1. При касании джойстик переходит к TouchPoint по мере необходимости. Однако, если перетаскивание сразу же следует за касанием, джойстик возвращается в положение, в котором он находился до касания, до начала перетаскивания.

2. Если джойстик перетащить вправо и отпустить, он сразу же переместится обратно в центр по мере необходимости. Если он перетаскивается на левую границу, происходит задержка, прежде чем он возвращается к центру.

Выполнение приведенного ниже кода иллюстрирует работу контроллера и проблемы:

import QtQuick 2.0

Item {
id: horizontalController
width: 300
height: 100   

Rectangle {
    id: controllerBackground
    width: (parent.width / 3) * 2
    height: parent.height
    anchors.centerIn: parent
    color: "white"
}
Flickable
{
    id: controllerFlick
    width: parent.width / 3 * 2
    height: parent.height
    anchors.centerIn: parent
    contentX: width / 4
    contentWidth: bounds.width
    contentHeight:  bounds.height
    boundsBehavior: Flickable.StopAtBounds

    onMovementEnded: {
        contentX = width / 4
    }

    MultiPointTouchArea{
        id: controllerTouchArea
        enabled: true
        anchors.fill: bounds
        touchPoints: TouchPoint {id: controllerTouchPoint }
        onPressed: {
            controllerFlick.contentX = Math.min(Math.max(controllerBackground.width - controllerTouchPoint.x,0),controllerBackground.width / 2)
        }
        onReleased: {
            controllerFlick.contentX = controllerFlick.width / 4
        }
    }

    Item{
        id: bounds
        width: controllerFlick.width * 1.5
        height: controllerFlick.height
        Rectangle {
            id: image
            width: parent.width / 3
            height: parent.height
            anchors.centerIn: parent
            color: "red"
        }
    }
   }
}