Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. ScrollView and drawning a selection region with a mouse

ScrollView and drawning a selection region with a mouse

Scheduled Pinned Locked Moved Solved QML and Qt Quick
scrollviewmouseareamouse eventsdrawingtimed out
3 Posts 2 Posters 716 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • S Offline
    S Offline
    SoKaI
    wrote on 7 Jan 2020, 04:06 last edited by
    #1

    Hello,

    I've started learning Qt 5 some time ago but I've encountered an issue that I cannot solve by myself and also cannot find any solution to it.

    A bit of background: for training purposes I'm writing an app that manipulates Mandelbrot's Set. App is supposed to work under X11 - currently I don't need it to work in other types of platforms. It's based on QML with some components written in C++.

    The problem is following: one of the functionality is that user should be able to rescale a region by selecting an area with a mouse. And it works fine. But when I'm using ScrollView in the way that it contains painted area with the fractal (and also MouseArea for region selection) the selection behaves weird: I can do selection only for a split-second then selection stops working.

    I'm using Qt 5.12.6 but I've checked 5.14.0 and the problem still persist.

    I've isolated the issue into simpler app:

    import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Controls 2.12
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    
    
        //test
        ScrollView {
    
            width: 300
            height: 300
            clip: true
            ScrollBar.vertical.policy: ScrollBar.AlwaysOn
            ScrollBar.horizontal.policy: ScrollBar.AlwaysOn
    
            contentWidth: 400
            contentHeight: 400
    
            Rectangle {
    
                id: scrollItem
                width: 400
                height: 400
                color: "green"
    
                Rectangle {
    
                    id: selectArea
                    width: 1
                    height: 1
                    visible: false
                    color: "red"
    
                    border.width: 1
                    border.color: "darkgrey"
    
                    antialiasing: false
    
                }
    
                MouseArea {
    
                    anchors.fill: parent
                    hoverEnabled: true
    
                    property var rectStartingPoint: Qt.point(0,0)
    
                    onPositionChanged: {
    
                        if ( pressed ) {
    
                            var dx = mouseX - rectStartingPoint.x
                            var dy = mouseY - rectStartingPoint.y
    
                            if( dx >= 0){
                                selectArea.width = dx
                            }else{
                                selectArea.x = mouseX
                                selectArea.width = -dx
                            }
    
                            if( dy >= 0){
                                selectArea.height = dy
                            }else{
                                selectArea.y = mouseY
                                selectArea.height = -dy
                            }
                        }
                    }
    
                    onPressed: {
    
                        selectArea.visible = true
    
                        rectStartingPoint.x = mouseX
                        rectStartingPoint.y = mouseY
    
                        selectArea.x = rectStartingPoint.x
                        selectArea.y = rectStartingPoint.y
    
                    }
    
                    onReleased: {
    
                        selectArea.visible = false
                        selectArea.width = 1
                        selectArea.height = 1
    
                    }
    
                }//MouseArea
            }//Rectangle
        }//ScrollView
        //test
    
    }
    

    Try to draw a selection inside the green rectangle.

    Note: whenScrollView.width = ScrollView.contentWidth and ScrollView.height = ScrollView.contentHeight selection works as expected but then ScrollView is not much of use.

    What am I doing wrong?

    1 Reply Last reply
    0
    • Y Offline
      Y Offline
      Yunus
      wrote on 7 Jan 2020, 05:44 last edited by Yunus 1 Jul 2020, 05:53
      #2

      @SoKaI Hi. All you need is changing interactive property of scrollview when pressed and released:

      import QtQuick 2.11
      import QtQuick.Window 2.11
      import QtQuick.Controls 2.4
      
      Window {
          visible: true
          width: 640
          height: 480
          title: qsTr("Hello World")
      
      
          //test
          ScrollView {
      
              id: scrollView
      
              width: 300
              height: 300
              clip: true
              ScrollBar.vertical.policy: ScrollBar.AlwaysOn
              ScrollBar.horizontal.policy: ScrollBar.AlwaysOn
      
              contentWidth: 400
              contentHeight: 400
      
      
      
              Rectangle {
      
                  id: scrollItem
                  width: 400
                  height: 400
                  color: "green"
      
                  Rectangle {
      
                      id: selectArea
                      width: 1
                      height: 1
                      visible: false
                      color: "red"
      
                      border.width: 1
                      border.color: "darkgrey"
      
                      antialiasing: false
      
                  }
      
                  MouseArea {
      
                      anchors.fill: parent
                      hoverEnabled: true
      
                      property var rectStartingPoint: Qt.point(0,0)
      
                      onPositionChanged: {
      
                          if ( pressed ) {
      
                              var dx = mouseX - rectStartingPoint.x
                              var dy = mouseY - rectStartingPoint.y
      
                              if( dx >= 0){
                                  selectArea.width = dx
                              }else{
                                  selectArea.x = mouseX
                                  selectArea.width = -dx
                              }
      
                              if( dy >= 0){
                                  selectArea.height = dy
                              }else{
                                  selectArea.y = mouseY
                                  selectArea.height = -dy
                              }
                          }
                      }
      
                      onPressed: {
                          scrollView.contentItem.interactive = false
      
                          selectArea.visible = true
      
                          rectStartingPoint.x = mouseX
                          rectStartingPoint.y = mouseY
      
                          selectArea.x = rectStartingPoint.x
                          selectArea.y = rectStartingPoint.y
      
                      }
      
                      onReleased: {
      
                          selectArea.visible = false
                          selectArea.width = 1
                          selectArea.height = 1
      
                          scrollView.contentItem.interactive = true
      
      
                      }
      
                  }//MouseArea
              }//Rectangle
          }//ScrollView
          //test
      
      }
      
      
      

      You can also check this post

      1 Reply Last reply
      1
      • S Offline
        S Offline
        SoKaI
        wrote on 7 Jan 2020, 21:49 last edited by
        #3

        Thank you, it works!

        1 Reply Last reply
        0

        3/3

        7 Jan 2020, 21:49

        • Login

        • Login or register to search.
        3 out of 3
        • First post
          3/3
          Last post
        0
        • Categories
        • Recent
        • Tags
        • Popular
        • Users
        • Groups
        • Search
        • Get Qt Extensions
        • Unsolved