Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

QML Component not moved enough left?



  • I am having an issue positioning my custom QML component correctly. The component is an label with a line coming out of it (an annotation).

    To get the line to point to a specific point all I need to do is set the components x to target.x - width. Ie, move the whole component left. But this is not moving it far enough left. Any idea why?

    I get this result where the annotation line should point to the blue rectangle:

    enter image description here

    import QtQuick 2.0
    import QtQuick.Layouts 1.3
    import QtQuick.Controls 2.1
    import QtQuick.Shapes 1.0
    
    Item {
    
        property int slant: 10;
        property int voffset: 50;
        property int hoffset: 150;
        property point target: Qt.point(300, 300);
    
        implicitWidth: annotationLbl.implicitWidth + (slant*4);
        implicitHeight: annotationLbl.implicitHeight + (slant*2);
        x: target.x - width;
        y: target.y - height;
    
        // Draw line on right
        Shape {
            id: annotationLine
            x: parent.width - slant
            y: parent.height * 0.5
            ShapePath {
                strokeWidth: 2
                strokeColor: "Red"
                fillColor: "transparent"
                startX: 0; startY: 0
                PathLine { x: hoffset*0.15; y: 0 }
                PathLine { x: hoffset*0.35; y: voffset-annotationLbl.height }
            }
        }
    
        // Draw label shape
        Shape {
            id: annotationShp
            width: parent.width
            height: parent.height
            anchors.centerIn: parent
            ShapePath {
                strokeWidth: 0
                strokeColor: "transparent"
                fillColor: "Red"
                startX: slant; startY: 0
                PathLine { x: width; y: 0 }
                PathLine { x: width - slant; y: height }
                PathLine { x: 0; y: height }
            }
    
            Label {
                id: annotationLbl
                anchors.centerIn: parent
                text: "Foo"
            }
        }
    }
    

    Usage:

    Annotation {
        target: Qt.point(300, 300);
    }
    


  • Hi,
    I don't understand your logic exactly but codes below working with correct left coordinate according to target.

    import QtQuick 2.0
    import QtQuick.Layouts 1.3
    import QtQuick.Controls 2.1
    import QtQuick.Shapes 1.0
    
    Item {
        id: root
        property int slant: 10;
        property int voffset: 50;
        property int hoffset: 100;
        property point target: Qt.point(300, 300);
    
        implicitWidth: annotationLbl.implicitWidth + (slant*4);
        implicitHeight: annotationLbl.implicitHeight + (slant*2);
        x: target.x - width - hoffset
        y: target.y - height - voffset
    
        // Draw line on right
        Shape {
            id: annotationLine
            x: parent.width - slant
            y: parent.height * 0.5
            ShapePath {
                strokeWidth: 2
                strokeColor: "Red"
                fillColor: "transparent"
                startX: 0; startY: 0
                PathLine { x: hoffset*0.30; y: 0 }
                PathLine { x: hoffset + slant * 2; y: root.height/2 + voffset}
            }
        }
    
        // Draw label shape
        Shape {
            id: annotationShp
            width: parent.width
            height: parent.height
            anchors.centerIn: parent
            ShapePath {
                strokeWidth: 0
                strokeColor: "transparent"
                fillColor: "Red"
                startX: slant; startY: 0
                PathLine { x: width; y: 0 }
                PathLine { x: width - slant; y: height }
                PathLine { x: 0; y: height }
            }
    
            Label {
                id: annotationLbl
                anchors.centerIn: parent
                text: "Foo"
                font.pixelSize:10
            }
        }
    }
    
    
    

    Why don't you make it with anchors? It seems right to use it.


Log in to reply