qt - How can I create a sticky button in qml? -
i want create button can dragged around user, , when released return original position.
during movement button must animated following easing curve.
what have until this:
import qtquick 2.2 import qtgraphicaleffects 1.0 item { property bool wasdragged: false property real baseposx: (menubutton.width / 2) - (menubuttonicon.width / 2) //menubutton.horizontalcenter property real baseposy: (menubutton.height / 2) - (menubuttonicon.height / 2) //menubutton.verticalcenter id: menubutton x: parent.width - 55 y: parent.height - 60 state: "closed" rectangle { id: menubuttonicon x: baseposx y: baseposy color: "#d23f31" width: 65; height: 65; radius: width * 0.5 antialiasing: true smooth: true } rectangle { id: menubuttoniconbar1 anchors.centerin: menubuttonicon width: 17 height: 3 antialiasing: true } rectangle { id: menubuttoniconbar2 anchors.centerin: menubuttonicon width: 17 height: 3 antialiasing: true rotation: 90 } mousearea { id: mousearea anchors.fill: menubuttonicon onpressed: menubutton.state = menubutton.state === "open" ? "closed" : "open" onreleased: { if (wasdragged) { wasdragged = false menubutton.state = "closed" } } onpositionchanged: { wasdragged = true var currentposition = maptoitem(parent, mouse.x, mouse.y) updatebuttonposition(currentposition.x, currentposition.y) } } function updatebuttonposition(mousex, mousey) { console.log("pos change") menubuttonicon.x = mousex - (menubuttonicon.width / 2); menubuttonicon.y = mousey - (menubuttonicon.height / 2); } states: [ state { name: "closed" propertychanges { target: menubuttonicon; x: baseposx; y: baseposy} }, state { name: "open" propertychanges { target: menubuttoniconbar1; rotation: 135;} propertychanges { target: menubuttoniconbar2; rotation: 225;} propertychanges { target: menubuttonicon; x: baseposx; y: baseposy} } ] transitions: [ transition { springanimation { target: menubuttonicon; properties: "x, y"; spring: 3; damping: 0.25; epsilon: 0.2; mass: 1; modulus: 0; velocity: 0 } springanimation { target: menubuttoniconbar1; properties: "rotation, scale"; spring: 3; damping: 0.25; epsilon: 0.5; mass: 1; modulus: 0; velocity: 0 } springanimation { target: menubuttoniconbar2; properties: "rotation, scale"; spring: 3; damping: 0.25; epsilon: 0.5; mass: 1; modulus: 0; velocity: 0 } } ] } but issue if drag , hold still before rotation animation ends, button return original position, though never released it.
if remove 2 rectangles forming cross, animations, works intended.
why button returning original positions itself, , how can fixed?
try this:
import qtquick 2.0 import qtgraphicaleffects 1.0 item { property bool wasdragged: false property real baseposx: (menubutton.width / 2) - (menubuttonicon.width / 2) property real baseposy: (menubutton.height / 2) - (menubuttonicon.height / 2) property real currentposx: (menubutton.width / 2) - (menubuttonicon.width / 2) property real currentposy: (menubutton.height / 2) - (menubuttonicon.height / 2) id: menubutton x: parent.width - 55 y: parent.height - 60 state: "closed" rectangle { id: menubuttonicon x: baseposx y: baseposy color: "#d23f31" width: 65; height: 65; radius: width * 0.5 antialiasing: true smooth: true } rectangle { id: menubuttoniconbar1 anchors.centerin: menubuttonicon width: 17 height: 3 antialiasing: true } rectangle { id: menubuttoniconbar2 anchors.centerin: menubuttonicon width: 17 height: 3 antialiasing: true rotation: 90 } mousearea { id: mousearea anchors.fill: menubuttonicon onpressed: menubutton.state = menubutton.state === "open" ? "closed" : "open" onreleased: { if (wasdragged) { wasdragged = false menubutton.state = "closed" } } onpositionchanged: { wasdragged = true var currentposition = maptoitem(parent, mouse.x, mouse.y) updatebuttonposition(currentposition.x, currentposition.y) } } function updatebuttonposition(mousex, mousey) { console.log("pos change") menubuttonicon.x = mousex - (menubuttonicon.width / 2); menubuttonicon.y = mousey - (menubuttonicon.height / 2); currentposx = mousex - (menubuttonicon.width / 2); currentposy = mousey - (menubuttonicon.height / 2); } states: [ state { name: "closed" propertychanges { target: menubuttonicon; x: currentposx; y: currentposy} }, state { name: "open" propertychanges { target: menubuttoniconbar1; rotation: 135;} propertychanges { target: menubuttoniconbar2; rotation: 225;} propertychanges { target: menubuttonicon; x: currentposx; y: currentposy} } ] onstatechanged: if(state === "closed"){ currentposx = baseposx currentposy = baseposy } transitions: [ transition { springanimation { target: menubuttonicon; properties: "x, y"; spring: 3; damping: 0.25; epsilon: 0.2; mass: 1; modulus: 0; velocity: 0 } springanimation { id:tr1; target: menubuttoniconbar1; properties: "rotation, scale"; spring: 3; damping: 0.25; epsilon: 0.5; mass: 1; modulus: 0; velocity: 0 } springanimation { id:tr2; target: menubuttoniconbar2; properties: "rotation, scale"; spring: 3; damping: 0.25; epsilon: 0.5; mass: 1; modulus: 0; velocity: 0 } } ] } in state open should propertychanges of x , y on current position, bind on base position cause of reset of x , y. you'll need other properties take current x , current y. 90% of issue solved, you'll see small decalage 1 s , button return place. solve putted property change in close state , x , y change currentposition , added on statechanged slot within reset position. dont know root cause of strange behavior. workaround it's working fine. regards
Comments
Post a Comment