Results 1 to 2 of 2

Thread: Flickable and PinchArea interoperability

  1. #1
    Join Date
    May 2016
    Posts
    4
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows

    Question Flickable and PinchArea interoperability

    Hi all.
    It looks like there is a different behavior when using Flickable and PinchArea together, depending on the way we arrange our items in the view.
    I tried to use a PinchArea inside a Flickable in order to get a behavior of moving and resizing of an item. The wanted behavior is to apply moving when the user touch only with one finger and, when the user touch with two fingers apply resizing.
    That behavior works fine when we put the target item inside the PinchArea, as follows:
    Qt Code:
    1. // Rectangle inside a PinchArea
    2. Rectangle
    3. {
    4. width: 200; height: 200
    5.  
    6. Flickable {
    7. id: f1
    8. anchors { fill: parent; margins: 2 }
    9. contentWidth: 300
    10. contentHeight: 300
    11. clip: true
    12. boundsBehavior: Flickable.StopAtBounds
    13.  
    14. PinchArea {
    15. width: Math.max(f1.contentWidth, f1.width)
    16. height: Math.max(f1.contentHeight, f1.height)
    17.  
    18. property real initialWidth
    19. property real initialHeight
    20.  
    21. onPinchStarted: {
    22. initialWidth = f1.contentWidth
    23. initialHeight = f1.contentHeight
    24. }
    25.  
    26. onPinchUpdated: {
    27. f1.resizeContent(initialWidth * pinch.scale, initialHeight * pinch.scale, pinch.center)
    28. }
    29.  
    30. Rectangle {
    31. width: f1.contentWidth
    32. height: f1.contentHeight
    33. color: "white"
    34.  
    35. RadialGradient
    36. {
    37. anchors.fill: parent
    38. gradient: Gradient{
    39. GradientStop { position: 0.0; color: "blue" }
    40. GradientStop { position: 0.25; color: "cyan" }
    41. GradientStop { position: 0.5; color: "green" }
    42. GradientStop { position: 0.75; color: "red" }
    43. GradientStop { position: 1; color: "orange" }
    44. }
    45. }
    46. }
    47. }
    48. }
    49. }
    To copy to clipboard, switch view to plain text mode 
    In the example above it works fine. We can start moving aour item and then resize it when we add another finger.
    But, this behavior doesn't work when we put the target item beside the PinchArea, as follows:
    Qt Code:
    1. // Rectangle beside a PinchArea
    2. Rectangle
    3. {
    4. width: 200; height: 200
    5. x: 200
    6.  
    7. Flickable {
    8. id: f2
    9. anchors { fill: parent; margins: 2 }
    10. contentWidth: 300
    11. contentHeight: 300
    12. clip: true
    13. boundsBehavior: Flickable.StopAtBounds
    14.  
    15. Rectangle {
    16. width: f2.contentWidth
    17. height: f2.contentHeight
    18. color: "white"
    19.  
    20. RadialGradient
    21. {
    22. anchors.fill: parent
    23. gradient: Gradient{
    24. GradientStop { position: 1; color: "blue" }
    25. GradientStop { position: 0.75; color: "cyan" }
    26. GradientStop { position: 0.5; color: "green" }
    27. GradientStop { position: 0.25; color: "red" }
    28. GradientStop { position: 0; color: "orange" }
    29. }
    30. }
    31. }
    32.  
    33. PinchArea {
    34. width: Math.max(f2.contentWidth, f2.width)
    35. height: Math.max(f2.contentHeight, f2.height)
    36.  
    37. property real initialWidth
    38. property real initialHeight
    39.  
    40. onPinchStarted: {
    41. initialWidth = f2.contentWidth
    42. initialHeight = f2.contentHeight
    43. }
    44.  
    45. onPinchUpdated: {
    46. f2.resizeContent(initialWidth * pinch.scale, initialHeight * pinch.scale, pinch.center)
    47. }
    48. }
    49. }
    50. }
    To copy to clipboard, switch view to plain text mode 
    When we put the target item beside the PinchArea we can resize the item (using the PinchArea) but, once we start moving a finger on the item, the Flickable steals all the touch events and the resizing (using the PinchArea) isn't applied.

    Can anyone explain the difference of the behavior (between using an item inside or beside a PinchArea)?
    Is there a way to make the wanted behavior (to apply moving when the user touch only with one finger and, when the user touch with two fingers apply resizing) to work also when we put the target item beside the PinchArea?

  2. #2
    Join Date
    May 2016
    Posts
    4
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows

    Default Re: Flickable and PinchArea interoperability

    I found a solution. If we put an item inside the pinch area (in addition to the target item that is beside the PinchArea), it works with the wanted behavior. For let it work I just put a transparent Rectangle inside the PinchArea, as follows:
    Qt Code:
    1. // Rectangle beside a PinchArea
    2. Rectangle
    3. {
    4. width: 200; height: 200
    5. x: 200
    6.  
    7. Flickable {
    8. id: f2
    9. anchors { fill: parent; margins: 2 }
    10. contentWidth: 300
    11. contentHeight: 300
    12. clip: true
    13. boundsBehavior: Flickable.StopAtBounds
    14.  
    15. Rectangle {
    16. width: f2.contentWidth
    17. height: f2.contentHeight
    18. color: "white"
    19.  
    20. RadialGradient
    21. {
    22. anchors.fill: parent
    23. gradient: Gradient{
    24. GradientStop { position: 1; color: "blue" }
    25. GradientStop { position: 0.75; color: "cyan" }
    26. GradientStop { position: 0.5; color: "green" }
    27. GradientStop { position: 0.25; color: "red" }
    28. GradientStop { position: 0; color: "orange" }
    29. }
    30. }
    31. }
    32.  
    33. PinchArea {
    34. width: Math.max(f2.contentWidth, f2.width)
    35. height: Math.max(f2.contentHeight, f2.height)
    36.  
    37. property real initialWidth
    38. property real initialHeight
    39.  
    40. onPinchStarted: {
    41. initialWidth = f2.contentWidth
    42. initialHeight = f2.contentHeight
    43. }
    44.  
    45. onPinchUpdated: {
    46. f2.resizeContent(initialWidth * pinch.scale, initialHeight * pinch.scale, pinch.center)
    47. }
    48.  
    49. Rectangle {
    50. anchors.fill: parent
    51. color: "transparent"
    52. }
    53. }
    54. }
    55. }
    To copy to clipboard, switch view to plain text mode 

    So, now it works. But, it still weird way we have to put an item inside a PinchArea, in order to make it work properly inside a Flickable.

Similar Threads

  1. Simulate pinch on PinchArea
    By sz in forum Qt Quick
    Replies: 0
    Last Post: 9th May 2016, 15:40
  2. Flickable
    By Binary01 in forum Qt Quick
    Replies: 4
    Last Post: 18th February 2016, 18:59
  3. Flickable some items
    By lqsa in forum Qt Quick
    Replies: 7
    Last Post: 29th August 2015, 14:10
  4. Replies: 0
    Last Post: 16th September 2012, 11:28
  5. Interoperability of C Callback function and Qt
    By Vogel Ubrhar in forum Qt Programming
    Replies: 2
    Last Post: 17th March 2010, 17:02

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.