Results 1 to 1 of 1

Thread: Qt QML click under the bounding box

  1. #1
    Join Date
    Mar 2020
    Posts
    7
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows

    Default Qt QML click under the bounding box

    What I'm trying to do is present in the following image: https://i.imgur.com/xW0kU3g.png?1


    So far the only solution I found is to create my button from C++ and to use setMask. Is there any other way in order to achieve the same results but just using QML?

    **My shape button:**

    Qt Code:
    1. import QtQuick 2.0
    2. import QtQuick.Shapes 1.14
    3.  
    4.  
    5.  
    6. Item {
    7. id: sideButtonID
    8. property alias mouseX: mouseArea.mouseX
    9. property alias mouseY: mouseArea.mouseY
    10. readonly property bool pressed: containsMouse && mouseArea.pressed
    11.  
    12. property point topLeftOffset: Qt.point(0, 0)
    13. property point topRightOffset: Qt.point(0, 0)
    14. property point bottomRightOffset: Qt.point(0, 0)
    15. property point bottomLeftOffset: Qt.point(0, 0)
    16.  
    17. property var colorPressed: "green"
    18. property var colorSelected: "red"
    19. property var colorUnselected: "darkorange"
    20.  
    21. signal clicked
    22.  
    23. property var coordinate: generateButtonShapeCoordinates(x,y,width,height)
    24. property point topLeft: coordinate.topLeft
    25. property point topRight: coordinate.topRight
    26. property point bottomRight: coordinate.bottomRight
    27. property point bottomLeft: coordinate.bottomLeft
    28.  
    29.  
    30. function generateButtonShapeCoordinates(x, y, width, height){
    31.  
    32. var topLeft = Qt.point(x-width/2 - topLeftOffset.x, y-height-topLeftOffset.y)
    33. var topRight = Qt.point(x+width/2-topRightOffset.x, y-height-topRightOffset.y)
    34. var bottomRight = Qt.point(x+width/2-bottomRightOffset.x, y-bottomRightOffset.y)
    35. var bottomLeft = Qt.point(x - width/2-bottomLeftOffset.x, y-bottomLeftOffset.y)
    36.  
    37. return {
    38. topLeft : topLeft,
    39. topRight : topRight,
    40. bottomRight : bottomRight,
    41. bottomLeft : bottomLeft
    42. };
    43. }
    44.  
    45. function inside(point, polygon) {
    46. // ray-casting algorithm based on
    47. // [url]http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html[/url]
    48. var x = point[0], y = point[1];
    49.  
    50. var inside = false;
    51. for (var i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
    52. var xi = polygon[i][0], yi = polygon[i][1];
    53. var xj = polygon[j][0], yj = polygon[j][1];
    54.  
    55. var intersect = ((yi > y) != (yj > y))
    56. && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
    57. if (intersect) inside = !inside;
    58. }
    59.  
    60. return inside;
    61. }
    62.  
    63. property bool containsMouse: {
    64. var topLeft = Qt.point(0-topLeftOffset.x, 0-topLeftOffset.y)
    65. var topRigh = Qt.point(width-topRightOffset.x, 0-topRightOffset.y)
    66. var bottomRight = Qt.point(width-bottomRightOffset.x, height-bottomRightOffset.y)
    67. var bottomLeft = Qt.point(0-bottomLeftOffset.x, height-bottomLeftOffset.y)
    68.  
    69. var polygon = [[topLeft.x,topLeft.y],[topRigh.x,topRigh.y],[bottomRight.x,bottomRight.y],[bottomLeft.x,bottomLeft.y]]
    70. var point = [mouseX, mouseY]
    71.  
    72. return inside(point, polygon)
    73. }
    74.  
    75. MouseArea {
    76. id: mouseArea
    77. anchors.fill: parent
    78. hoverEnabled: true
    79. acceptedButtons: Qt.LeftButton | Qt.RightButton
    80. onClicked: if (sideButtonID.containsMouse) sideButtonID.clicked()
    81. }
    82. Shape {
    83. antialiasing: true
    84. vendorExtensionsEnabled: true
    85. asynchronous: true
    86. anchors.centerIn: parent
    87.  
    88.  
    89. ShapePath {
    90. id: shapepathId
    91.  
    92. strokeWidth: -1
    93. fillColor: sideButtonID.pressed ? sideButtonID.colorPressed : (sideButtonID.containsMouse ? sideButtonID.colorSelected : sideButtonID.colorUnselected)
    94. startX: sideButtonID.topLeft.x; startY: sideButtonID.topLeft.y
    95. PathLine { x: sideButtonID.topRight.x; y: sideButtonID.topRight.y }
    96. PathLine { x: sideButtonID.bottomRight.x; y: sideButtonID.bottomRight.y }
    97. PathLine { x: sideButtonID.bottomLeft.x; y: sideButtonID.bottomLeft.y }
    98. }
    99. Component.onCompleted: {
    100. console.log("TopLeft: "+sideButtonID.topLeft)
    101. console.log("TopRight: "+sideButtonID.topRight)
    102. console.log("BottomLeft: "+sideButtonID.bottomLeft)
    103. console.log("BottomRight: "+sideButtonID.bottomRight)
    104. }
    105. }
    106. }
    To copy to clipboard, switch view to plain text mode 

    **The usage of my button:**

    Qt Code:
    1. SideButtons {
    2. z: 100
    3. id: sideButtonID
    4. width: 130
    5. height: 248
    6. anchors.verticalCenterOffset: 9
    7. anchors.horizontalCenterOffset: -255
    8. anchors.horizontalCenter: parent.horizontalCenter
    9. anchors.verticalCenter: parent.verticalCenter
    10. bottomRightOffset: Qt.point(100,0)
    11. onClicked: {
    12. print("X: "+mouseX)
    13. print("Y: "+mouseY)
    14. print("clicked")
    15. }
    16. }
    To copy to clipboard, switch view to plain text mode 

    Some of the options that I've heard so far but there are not good in my case.

    1. using an image with a transparent background (sure but I'm going to have the same problem)
    2. creating a C++ class which will inherit **QAbstractButton** (I would prefer to avoid as much as I can usage of C++ in the Ui side)
    3. usage of a **Shape** in combination with **MouseArea** (I'm doing this already but I am encountering the bounding box problem.

    Is there any other way which I don't know yet about?
    Attached Images Attached Images

Similar Threads

  1. Replies: 0
    Last Post: 31st July 2016, 19:54
  2. change bounding of QGraphicsScene
    By danics in forum Qt Programming
    Replies: 21
    Last Post: 20th July 2012, 01:09
  3. Bounding QWidget within QGraphicsView
    By crazymonkey in forum Newbie
    Replies: 1
    Last Post: 22nd September 2010, 20:44
  4. Getting the bounding rectangle
    By ioannis in forum Qt Programming
    Replies: 1
    Last Post: 22nd May 2009, 01:41
  5. hide bounding rect
    By dreamer in forum Qt Programming
    Replies: 1
    Last Post: 8th May 2008, 10:40

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.