Jak mogę uzyskać efekt upuszczania kreacji DragArea w celu animacji w stosunku do DropArea, która je otrzymała?

Question

Mam nadzieję, że to ma sens jako pytanie. W mojej aplikacji zdefiniowałem DragArea, którego używam do przeciągania rzeczy nad wierzchołkami różnych prostokątów, z których każdy zawiera DropArea. Wszystko działa poprawnie w moim kodzie z wyjątkiem dla efektu kosmetycznego, który chciałbym zmienić.

W QML, po uruchomieniu przeciąganie z DragArea i ostatecznie spaść, efekt animacji jest taki, że rzeczą jesteś przeciągając animuje (podczas wygaszania) z powrotem do miejsca, z którego rozpoczęła przeciąganie. Dzieje się tak nawet po upadku ponad DropArea, który skutecznie przechwytuje zrzut.

To, co chciałbym zrobić, to wywołać efekt kropli w kierunku DropArea, który otrzymał kroplę - tak, że wydaje mi się, że przeciągam i upuszczam rzeczy do prostokąta. Czy jest jakiś sposób to zrobić?

Zgaduję, że w jakiś sposób wiąże się to z właściwościami .source i .target tych obszarów, ale bez powodzenia, jeśli chodzi o wpływ na miejsce, w którym pojawia się animacja kropli.

Answer 1

Domyślnie QML nie zapewnia żadnego zachowania kosmetycznego podczas przeciągania i upuszczania. Cel przeciągania rozpocznie się w miejscu początkowym przeciągania i zakończy się w dowolnym miejscu, niezależnie od tego, czy przeciągnięcie zostało zaakceptowane, czy nie.

W ten sposób zakładam, że opisane przez Ciebie zachowanie zostało zaimplementowane w kodzie użytkownika, którego nie ujawniłeś. Niezależnie od tego, co chcesz zrobić, to całkiem proste, polega na śledzeniu pozycji, z której pochodzi przeciąganie, a kończy się na, więc możesz użyć dwóch współrzędnych do animacji pozycji.

W poniższym przykładzie czerwony prostokąt może zostać przeciągnięty, a po upuszczeniu poza obszar upuszczania będzie animowany od jego prądu do jego pozycji początkowej, natomiast po upuszczeniu w żółtym prostokącie będzie animował od początkowego do jego upuść pozycję.

Window { 
    width: 600 
    height: 600 
    visible: true 

    Rectangle { 
    width: 200 
    height: 200 
    color: "yellow" 
    DropArea { 
     anchors.fill: parent 
     onEntered: drag.source.accepted = true 
     onExited: drag.source.accepted = false 
    } 
    } 

    Rectangle { 
    id: rect 
    width: 50 
    height: 50 
    color: "red" 
    x: parent.width * 0.5 
    y: parent.height * 0.5 
    Drag.active: mouseArea.drag.active 

    property point begin 
    property point end 
    property bool accepted : false 

    MouseArea { 
     id: mouseArea 
     anchors.fill: parent 
     drag.target: parent 
     onPressed: rect.begin = Qt.point(rect.x, rect.y) 
     onReleased: { 
     rect.end = Qt.point(rect.x, rect.y) 
     aX.from = rect.accepted ? rect.begin.x : rect.end.x 
     aX.to = rect.accepted ? rect.end.x : rect.begin.x 
     aY.from = rect.accepted ? rect.begin.y : rect.end.y 
     aY.to = rect.accepted ? rect.end.y : rect.begin.y 
     anim.start() 
     } 
     ParallelAnimation { 
     id: anim 
     NumberAnimation { id: aX; target: rect; property: "x"; duration: 200 } 
     NumberAnimation { id: aY; target: rect; property: "y"; duration: 200 } 
     } 
    } 
    } 
}