2012-06-03 5 views
16

私は、中央に配置してから、上/下/左/右のキーが押されると絶対位置にしたいというMouseAreaを持っています。私の問題は、私は絶対位置を指定することができるようにMouseAreaにアンカーをクリアする方法がわからないということです:まずQMLアンカーをクリアします

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

私はちょうどundefinedからmouseArea.anchorsを設定しようとしたが、anchorsがあることについてエラーを得ました読み取り専用プロパティ。私はAnchorChangesを発見しましたが、アンカーを削除/クリアする方法は見つけられません。 anchors.bottomなどをundefinedに設定しても動作しません。

+1

Docs(http://qt-project.org/doc/qt-4.8/qml-anchor-layout.html)は、「アンカーベースの使用から絶対的な位置決めに変更する場合は、アンカーをクリアすることができます値を 'undefined'に設定してください。 – sergk

答えて

20

docsによれば、アンカー属性をundefinedに設定すると効果があります。あなたの助けの人たちのための

function moveMouseArea(x, y) { 
    mouseArea.anchors.centerIn = undefined; // <-- reset anchor before state change 
    mouseArea.pos.x += x; 
    mouseArea.pos.y += y; 
    mouseArea.state = "moved"; 
    mouseAreaPosText.text = 'Mouse area was moved... new pos: ' 
     + mouseArea.pos.x + ', ' + mouseArea.pos.y; 
} 
+1

ドキュメントリンクが壊れています。ここではリンク先https://doc.qt.io/qt-5/qtquick-positioning-anchors.html – vpicaver

0

ありがとう:AnchorChangesanchors.centerInを設定することはできませんでしたが、あなたはあなたのmoveMouseArea機能でそれを回避することができますなぜ私はかなり得ることはありません。私は状態の中で定義されていない設定が働いていることを発見しました。しかし、要素がいったん別の状態に移動すると、アンカーは魔法のように(そして非常にイライラして)戻ります。これは、最終状態ですべてのアンカーを未定義に設定しても同じことが起こります。しかし、上記のように、状態を変更する前に関数内で未定義に設定することは効果的です。私の場合は、onPressedのmouseAreaで設定しました。

   onPressed: { 
       plotWindow04Frame.anchors.bottom = undefined 
       plotWindow04Frame.anchors.left = undefined 
       plotWindow04Frame.state = "inDrag" 
      } 

onReleaseのアンカーに言及する必要はないことがわかりました。ちょうど次の状態です。 onReleased :また

{plotWindow04Frame.stateは= を "ドロップ"}、Iは、最終的な状態は、どちらかだけ不透明度をアンカーを言及していない "落下" ことを言及すべきです。いいです何

states: [ 
    State { 
     name: "inDrag" 
     PropertyChanges { 
      target: plotWindow04Frame 
      opacity: .5 
     } 
    }, 
    State { 
     name: "dropped" 
     PropertyChanges { 
      target: plotWindow04Frame 
      opacity: 1 
     } 
    } 

] 

    transitions: Transition { 
     NumberAnimation { properties: "opacity"; duration:200 } 
    } 
} 

(1)ユーザーは、それらをドロップしたときにここでの考え方は、これらのプロットウィンドウが(不透明、半透明になるというものであった:ドラッグ中)0.5が、不透明(不透明に戻ります)プロットウィンドウの「四角形」は最初GUIの下部に固定されていますが、ユーザーがそれらを選択すると、好きな場所に置くことができます。

関連する問題