qtqmlqtquickcontrols2

Applying a mirror transformation to flip/reflect a QML Control

Can I horizontally flip/reflect a shape item in QML. For example; I have the below shape:

enter image description here

Can I flip/reflect it horizontally to produce:

enter image description here

I know I could edit my QML code to draw the lines differently but it would be much simpler to just use a QML animation or something to flip it if thats possible.

Shape {
    id: annotationHLine;
    anchors.left: annotationShp.right;
    anchors.top: annotationShp.top;
    anchors.topMargin: annotationShp.height * 0.5;

    ShapePath {
        strokeWidth: 2;
        strokeColor: "Green";
        fillColor: "transparent";
        startX: -slant; startY: 0;
        PathLine { x: relativeTargetX*0.5; y: 0 }
        PathLine { x: relativeTargetX; y: relativeTargetY }
    }
}
Solution

  • Yes you can, by simply setting a horizontal mirror transformation matrix to the shape:

    transform: Matrix4x4 {
      matrix: Qt.matrix4x4(-1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }

    Edit:

    The x position doesn't really change, it is still the same, it is just that the object is now rendered with the transformation. You can compensate for that by stacking a translate on top of the matrix:

    transform: [
  Matrix4x4 {
    matrix: Qt.matrix4x4(-1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  },
  Translate {
    x: annotationHLine.width
  }
]

    Edit 2:

    Actually, you can incorporate the translation in the original matrix to simplify things a bit:

    transform:  Matrix4x4 {
    matrix: Qt.matrix4x4( -1, 0, 0, but.width, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}
  }