QML - tracking Globale position einer Komponente

Ich würde wie zu verfolgen eine Globale position eines Objektes (oder relativ zu einer seiner Vorfahren) und binden Sie es an ein anderes Element, position.

Ich dachte über die Verwendung von mapFromItem wie folgt:

SomeObject {
  x: ancestor.mapFromItem(trackedObject, trackedObject.x, 0).x
  y: ancestor.mapFromItem(trackedObject, 0, trackedObject.y).y
}

Das problem bei diesem Ansatz ist, dass die mapFromItem einmal ausgewertet und aktualisiert nicht als eine von Argumente wird aktualisiert. Darüber hinaus ist die Zuordnung manchmal gibt die neue position verändert werden, indem ein offset ich bin nicht in der Lage zu verfolgen, in den code (das ist aber nicht die Sache bei der hand).

Meine zweite Idee war die Berechnung der globalen position durch die Implementierung einer Funktion, die würde, die rekursiv die Summe der offsets, halt an den bereitgestellten Vorfahren (so etwas wie calculateOffsetFrom(ancestor)). Noch ist dies nur eine Funktion, und soweit ich bin besorgt, es wird nicht neu bewertet zu bekommen, als einer der Vorfahren position ändert (es sei denn, in dieser Funktion, ich werde binden, nannte es der onXChanged signal für jeden der Vorfahren auf dem Weg, das scheint wie eine dirty Lösung).

Also am Ende habe ich Hinzugefügt, die Eigenschaften zu dem Objekt, ich habe die Absicht zu verfolgen, und dann habe ich an Sie:

TrackedObject {
  property real offsetX: x + parent.x + parent.parent.x + parent.parent.parent.x ...
  property real offsetY: y + parent.y + parent.parent.y + parent.parent.parent.y ...
}

SomeObject {
  x: trackedObject.globalX
  y: trackedObject.globalY
}

Aber gut... ja... das man nicht skalieren und ist so hässlich wie es nur geht.

Hat jemand eine Idee, wie dieses problem gelöst werden könnte sauberer?

Edit:
Soweit ich bin besorgt, ich kann nicht mit Anker in diesem Fall. Die SomeObject Komponente ist eine benutzerdefinierte Komponente zeichnen einer Bézier-Kurve von einem Punkt zum anderen (es verbindet zwei TrackedObjects). Dafür muss ich die Differenz zwischen den Koordinaten. Wenn ich richtig bin Anker bieten keine Möglichkeit, die Berechnung der Entfernung zwischen Ihnen.

InformationsquelleAutor Konrad Madej | 2013-07-29

qml qt qt-quick qtquick2

Dies ist ein harter Punkt, aber hier ist der hack den ich verwendet in einem meiner Projekte : die blau-rect, die in einem anderen Elternteil als grün rect bewegen, zu bleiben, mit ihm ausgerichtet, wenn grün rect bewegt, sondern auch, wenn gelb rect (grün rect Eltern) bewegt :

import QtQuick 2.0;

Rectangle {
    id: window;
    width: 800;
    height: 480;

    property bool globalBit : true;

    function updatePos (item_orig, item_dest, bit) {
        var pos_abs = window.mapFromItem (item_orig.parent, item_orig.x, item_orig.y);
        return window.mapToItem (item_dest.parent, pos_abs.x, pos_abs.y);
    }

    Rectangle {
        id: rectYellow;
        width: 400;
        height: 300;
        x: 300;
        y: 200;
        color: "yellow";

        onXChanged: { globalBit = !globalBit; }
        onYChanged: { globalBit = !globalBit; }

        MouseArea {
            drag {
                target: rectYellow;
                minimumX: 0;
                minimumY: 0;
                maximumX: (rectYellow.parent.width - rectYellow.width);
                maximumY: (rectYellow.parent.height - rectYellow.height);
            }
            anchors.fill: parent;
        }
        Rectangle {
            id: rectGreen;
            x: 100;
            y: 100;
            width: 50;
            height: 50;
            color: "green";

            MouseArea {
                drag {
                    target: rectGreen;
                    minimumX: 0;
                    minimumY: 0;
                    maximumX: (rectGreen.parent.width - rectGreen.width);
                    maximumY: (rectGreen.parent.height - rectGreen.height);
                }
                anchors.fill: parent;
            }
        }
    }
    Rectangle {
        id: rectBlue;
        x: pos.x + 50;
        y: pos.y + 50;
        width: 50;
        height: 50;
        color: "blue";

        property var pos : updatePos (rectGreen, rectBlue, globalBit);
    }
}

Der trick ist, um alle Koordinaten wieder auf den ersten gemeinsamen Vorfahren, mit beiden mapfromItem und mapToItem, und erzwingen Sie die Funktion überprüft werden, setzen Sie einfach eine Globale boolean-flag, das Sie an die computing-Funktion, und dass Sie umkehren, jeder Zeit mit einem beweglichen element auf der Karte bewegt... Sie nicht haben, um es zu stellen, wo jeder nur auf Eltern von Gegenständen, die sich bewegen und sind innerhalb der Vorfahr-Element.

So funktioniert es, Ihre Positionen werden immer Recht, und es ist durchaus skalierbar und nicht viel hinzuzufügen-code.

Vielen Dank. Hätte nicht gedacht, habe daran gedacht, mit, dass die Globale erzwingen re-evaluation. Dies scheint schmutzig, aber es funktioniert der trick.

InformationsquelleAutor TheBootroo

Die Lösung unten löst die qmlElementToTrack.onPropertyNameXChanged() und qmlElementToTrack.onPropertyNameYChanged() Veranstaltungen jedes mal, wenn man von seinen Eltern 'x' oder 'y' Werte ändern.

Er tut dies durch das anbringen an jeder Elternteil ist onXChanged() und onYChanged() Signale. Wenn einer dieser Werte ändert, berechnet die propertyNameX oder propertyNameY Werte durch das Durchlaufen aller qmlElementToTrack ist Eltern.

Machen es 'relativ' positioniert (statt "absolut"), fügen Sie current !== qmlElementToStopAt zu jedem while () - Bedingung.

HTML:

ElementToTrack {
  id: qmlElementToTrack
  property real propertyNameX: 0
  property real propertyNameY: 0
}

JS:

setPositionChangedToParents(qmlElementToTrack);


/**
  Connect to each parent's 'onXChanged' and 'onYChanged' signals.
*/
setPositionChangedToParents = function(current) {
    while (current && current.parent) {
        current.onXChanged.connect(calculatePropertyNameX);
        current.onYChanged.connect(calculatePropertyNameY);
        current = current.parent;
    }
};


/**
  Disconnects the signals set to all parents.
*/
removePositionChangedFromParents = function(current) {
    while (current && current.parent) {
        current.onXChanged.disconnect(calculatePropertyNameX);
        current.onYChanged.disconnect(calculatePropertyNameY);
        current = current.parent;
    }
};


/**
  When any parent's 'x' changes, recalculate the 'x' value for the 'property name'.
*/
calculatePropertyNameX = function() {
    var calculatedX, current;

    calculatedX = 0;
    current = qmlElementToTrack;

    while (current && current.parent) {
        calculatedX += current.x;
        current = current.parent;
    }

    propertyNameX = calculatedX;
};


/**
  When any parent's 'y' changes, recalculate the 'y' value for the 'property name'.
*/
calculatePropertyNameY = function() {
    var calculatedY, current;

    calculatedY = 0;
    current = qmlElementToTrack;

    while (current && current.parent) {
        calculatedY += current.y;
        current = current.parent;
    }

    propertyNameY = calculatedY;
};

Sehr schön. Ein Hinweis: zusätzlich zu der Verbindung mit onXChanged und onYChanged sollte es wohl auch eine Verbindung zu onParentChanged so, dass jede re-parenting Tricks auch verfolgt.

InformationsquelleAutor Brian Landblom

Ich weiß nicht, ob das helfen wird, aber für die oben gelb rechteckig,blau rect und grün rect problem erwähnt TheBootroo, ich verwendete den folgenden code, um das problem zu lösen

import QtQuick 2.0;

Rectangle {
id: window;
width: 800;
height: 480;


Rectangle {
    id: rectYellow;
    width: 400;
    height: 300;
    x: 300;
    y: 200;
    color: "yellow";

    MouseArea {
        drag {
            target: rectYellow;
            minimumX: 0;
            minimumY: 0;
            maximumX: (rectYellow.parent.width - rectYellow.width);
            maximumY: (rectYellow.parent.height - rectYellow.height);
        }
        anchors.fill: parent;
    }
    Rectangle {
        id: rectGreen;
        x: 100;
        y: 100;
        width: 50;
        height: 50;
        color: "green";

        MouseArea {
            drag {
                target: rectGreen;
                minimumX: 0;
                minimumY: 0;
                maximumX: (rectGreen.parent.width - rectGreen.width);
                maximumY: (rectGreen.parent.height - rectGreen.height);
            }
            anchors.fill: parent;
        }
    }
}
Rectangle {
    id: rectBlue;
    //Need to acheive the below behvior(commented)
    //x: window.x+rectYellow.x+rectGreen.x+50
    //y: window.y + rectYellow.y +rectGreen.y+50
    width: 50;
    height: 50;
    color: "blue";

}
Component.onCompleted: {
    rectBlue.x =Qt.binding(
                function()
                {
                     //Returns window.x+rectYellow.x+rectGreen.x+rectGreen.width
                    var docRoot = null;
                    var x=rectGreen.x;
                    if(!docRoot)
                    {
                       docRoot = rectGreen.parent;
                       x+=docRoot.x;

                       while(docRoot.parent)
                       {
                           docRoot = docRoot.parent;
                           x+=docRoot.x
                       }
                    }
                    return x+rectGreen.width;
                }

                )
    rectBlue.y = Qt.binding(
                function()
                {
                    //Returns window.y+rectYellow.y+rectGreen.y+rectGreen.height
                    var docRoot = null;
                    var y=rectGreen.y
                    if(!docRoot)
                    {
                       docRoot = rectGreen.parent;
                       y+=docRoot.y;

                       while(docRoot.parent)
                       {
                           docRoot = docRoot.parent;
                           y+=docRoot.y
                       }
                    }
                    return y+rectGreen.height;
                }

                )
    }


}

Die Idee ist, die zum berechnen der position des blauen Rechtecks relativ zu dem grünen Rechteck, durch
die Berechnung der position des grünen Rechtecks und seiner visuellen Vorfahren.

Die inspiration hinter dieser Lösung ist -> http://developer.nokia.com/Community/Wiki/How_to_create_a_Context_Menu_with_QML

Ähnlich wie die farbigen rect Lösung oben erwähnt, können Sie binden Sie die x-und y-Koordinaten der TrackedObject javascript-Funktionen, die traverse die visuelle Struktur und die Rückgabe der Koordinaten der Vorfahren.

InformationsquelleAutor Programmer

Habe ich zu verbessern versucht, auf @Shubhanga Antwort ein bisschen durch das verschieben des code in seine eigene ItemPositionTracker.qml-Datei:

import QtQuick 2.3

Item {
    id: root

    property Item trackedItem
    property Item movedItem

    Component.onCompleted: {
        movedItem.x =
                Qt.binding(
                    function()
                    {
                        if (trackedItem === null) return 0;

                        var docRoot = trackedItem;
                        var x = trackedItem.x;

                        while(docRoot.parent)
                        {
                            docRoot = docRoot.parent;
                            x += docRoot.x
                        }

                        return x;
                    }

                    )
        movedItem.y =
                Qt.binding(
                    function()
                    {
                        if (trackedItem === null) return 0;

                        var docRoot = trackedItem;
                        var y = trackedItem.y

                        while(docRoot.parent)
                        {
                            docRoot = docRoot.parent;
                            y += docRoot.y
                        }

                        return y;
                    }

                    )
    }
}

Kann der code nun eingefügt werden, QML-Objekt wie folgt:

ItemPositionTracker {
    trackedItem: rectGreen
    movedItem: rectBlue
}

Macht rectBlue Folgen rectGreen.

InformationsquelleAutor uldall

Tracking-bestimmtes Element der globalen Positionen scheint ein wichtiges problem, wenn die Entwicklung einige komplexe Grafiken-Interaktion. Ich kam mit einer relativ einfachen & anmutige Lösung. Hier ist mein core-codes:

Item{
    id: globalRoot
    signal globalPositionChanged(Item item, real newX, real newY);

    function tracking(item){
        var obj = item;
        var objN;
        function onGlobalXYChanged(){
            var pt = mapFromItem(item, item.x, item.y);
            globalRoot.globalPositionChanged(item, pt.x, pt.y);
        }
        do{
            objN = obj.objectName;
            obj.xChanged.connect(onGlobalXYChanged);
            obj.yChanged.connect(onGlobalXYChanged);
            obj = obj.parent;
        }while(objN !== "furthestAncestorObjectName");
    }
}

Ist der Kerngedanke ist: das, was im wesentlichen bewirkt, dass ein Element der globalen position ändern? Es vielleicht selbst, seine Eltern oder seine Eltern Elternteil usw. So machen eine traverse zurück zu seiner am weitesten übergeordneten und schließen jedes seiner Vorfahren, die x/y-Signalen ändern, um eine Funktion, innerhalb der wir das Element Globale position und broadcast außerhalb.

InformationsquelleAutor Jimmy Chen

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.