CODEWITHSUNDEEP
qtqml
maxwell
maxwell

Reputation: 377

Rotated QML Text: Position with baseline anchor

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?

Upvotes: 0

Views: 3324

Answers (1)

luffy
luffy

Reputation: 2388

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}
    }
  }
}

Upvotes: 1

Related Questions