title: Clear QML anchor
body: <p>I have a MouseArea that I want to start off centered and then have an absolute position once the up/down/left/right keys are pressed. My problem is that I don't know how to clear the anchor on the MouseArea so that I can specify an absolute position:</p>
  
  <pre><code>import QtQuick 2.0
  import QtQuick.Window 2.0
  
  Window {
      id: screen
      width: 360
      height: 360
      visible: true
  
      Rectangle {
          anchors.fill: parent
  
          states: [
              State {
                  name: "moved"
                  AnchorChanges {
                      target: mouseArea
                      anchors.bottom: undefined
                      anchors.left: undefined
                      anchors.right: undefined
                      anchors.top: undefined
                  }
              }
          ]
  
          MouseArea {
              id: mouseArea
              anchors.centerIn: parent
              width: 250
              height: 250
              focus: true
              onClicked: console.log("clicked!")
              onPositionChanged: console.log("position changed!")
  
              function moveMouseArea(x, y) {
                  mouseArea.x += x;
                  mouseArea.y += y;
                  mouseArea.state = "moved";
                  mouseAreaPosText.text = 'Mouse area was moved... new pos: '
                      + mouseArea.x + ', ' + mouseArea.y;
              }
  
              Keys.onPressed: {
                  if (event.key === Qt.Key_Up)
                      moveMouseArea(0, -1);
                  if (event.key === Qt.Key_Down)
                      moveMouseArea(0, 1);
                  if (event.key === Qt.Key_Left)
                      moveMouseArea(-1, 0);
                  if (event.key === Qt.Key_Right)
                      moveMouseArea(1, 0);
              }
  
              Rectangle {
                  anchors.fill: parent
                  border.width: 2
                  border.color: "black"
                  color: "transparent"
              }
  
              Text {
                  id: mouseAreaPosText
                  anchors.centerIn: parent
              }
          }
      }
  }
  </code></pre>
  
  <p>At first I just tried setting <code>mouseArea.anchors</code> to <code>undefined</code> but got an error about <code>anchors</code> being a read-only property. I then discovered AnchorChanges, but I can't find a way to remove/clear the anchor; setting <code>anchors.bottom</code> etc. to <code>undefined</code> doesn't work.</p>