B4J Question How to drag a control to move it to another position

[xulihang]

Hi there,

I am making a simple layered image editor. Its major function is to add text layers on images. I am trying to use Label as text layers and use snapshot to export merged images.

I try to use the mouse to drag a control to a new place.

I use the mousedragged event, but the dragging process is shaky.

Sub ImageView1_MouseDragged (EventData As MouseEvent)
    Dim node As Node
    node=Sender
    node.Left=EventData.X
    node.Top=EventData.Y
    node.MouseCursor=fx.Cursors.HAND
End Sub

 

[xulihang]

The log output shows the position changes. This is why the control will shake. I don't know the reason.

Log("Dragged")
Log(EventData.X)
Log(EventData.Y)

Dragged
48
89
Dragged
348
106
Dragged
46
91
Dragged
348
107
Dragged
45
94
Dragged
348
108
Dragged
45
96
Dragged
347
111
Dragged
45
97
Dragged
347
113
release
45
97

 

[Erel]

Your code is incorrect because X and Y are relative to the node position.

Sub Process_Globals
   Private fx As JFX
   Private MainForm As Form
   Type PositionData (PressedX As Int, PressedY As Int)
   Private Button1 As Button
End Sub

Sub AppStart (Form1 As Form, Args() As String)
   MainForm = Form1
   MainForm.RootPane.LoadLayout("1") 'Load the layout file.
   MainForm.Show
End Sub

Sub Button1_MouseDragged (EventData As MouseEvent)
   Dim view As B4XView = Sender
   Dim pd As PositionData = view.Tag
   Dim ParentX As Int = EventData.X + view.Left
   Dim ParentY As Int = EventData.Y + view.Top
   view.Left = ParentX - pd.PressedX
   view.Top = ParentY - pd.PressedY
End Sub

Sub Button1_MousePressed (EventData As MouseEvent)
   Dim view As B4XView = Sender
   Dim pd As PositionData
   pd.PressedX = EventData.X
   pd.PressedY = EventData.Y
   view.Tag = pd
End Sub

 

[xulihang]

I am facing a new problem. If the node is rotated in a degree over 60, I cannot drag it correctly.

Dim view As B4XView = Button1
view.Rotation = 60

 

[xulihang]

Sub Process_Globals
    Private fx As JFX
    Private MainForm As Form
    Type PositionData (PressedX As Int, PressedY As Int)
    Private Button1 As Button
End Sub

Sub AppStart (Form1 As Form, Args() As String)
    MainForm = Form1
    MainForm.RootPane.LoadLayout("Layout1") 'Load the layout file.
    MainForm.Show
    Dim view As B4XView = Button1
    view.Rotation = 135
End Sub

Sub Button1_MouseDragged (EventData As MouseEvent)
    Dim view As B4XView = Sender
    Dim pd As PositionData = view.Tag
    Dim event As JavaObject = EventData
    Dim ParentX As Int = event.RunMethod("getSceneX",Null) + view.Left
    Dim ParentY As Int = event.RunMethod("getSceneY",Null) + view.Top
    view.Left = ParentX - pd.PressedX
    view.Top = ParentY - pd.PressedY
    pd.PressedX = event.RunMethod("getSceneX",Null)
    pd.PressedY = event.RunMethod("getSceneY",Null)
End Sub

Sub Button1_MousePressed (EventData As MouseEvent)
    Dim view As B4XView = Sender
    Dim event As JavaObject = EventData
    Dim pd As PositionData
    pd.PressedX = event.RunMethod("getSceneX",Null)
    pd.PressedY = event.RunMethod("getSceneY",Null)
    view.Tag = pd
End Sub

Using SceneX and SceneY can avoid the rotation problem.

 

[xulihang]

Type PositionData (PressedX As Int, PressedY As Int)

In addition, the coordinates should better be saved in double or it may have a problem in high DPIs.