Rotated QML Text: Position with baseline anchor - qt

Question

I need to position rotated Text elements relative to a rectangle. Here an example:
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import QtQuick.Window 2.2
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle {
id: rectangle
x: 180
y: 99
width: 200
height: 200
color: "#b73131"
Text {
id: text1
x: -112
y: 85
text: qsTr("Text")
rotation: -90
anchors.right: parent.left
anchors.rightMargin: 20
font.pixelSize: 12
}
Text {
id: text2
x: -46
y: 160
text: qsTr("Textg")
font.pixelSize: 12
rotation: -90
anchors.right: parent.left
anchors.rightMargin: 20
}
}
}
However, I would like that text1 and text2 share the same baseline (which does not happen in the above example because the g character goes below the baseline and thus the right edge is different for the two texts). How can I use the baseline anchor for rotated texts?

Answer 1

you can change the rotation origin. I think this will give you the wanted result:
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import QtQuick.Window 2.2
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle {
id: rectangle
x: 180
y: 99
width: 200
height: 200
color: "#b73131"
Text {
id: text1
x: -112
y: 85
text: qsTr("Text")
//rotation: -90
anchors.right: parent.left
anchors.rightMargin: 20
font.pixelSize: 12
transform: Rotation { origin.x: text1.width; origin.y: 0; angle: -90}
}
Text {
id: text2
x: -46
y: 160
text: qsTr("Textg")
font.pixelSize: 12
//rotation: -90
anchors.right: parent.left
anchors.rightMargin: 20
transform: Rotation { origin.x: text2.width; origin.y: 0; angle: -90}
}
}
}