2017-04-07 6 views
0

Ich versuche, einen Text genau in der Mitte eines Kreises in QML zu platzieren:Qt Quick 2 QML: Platz Text genau in der Mitte des Kreises

Rectangle { 
    id: rect 
    width: 20 
    height: 20 
    radius: width/2 
    color: "red" 
    anchors.verticalCenter: parent.verticalCenter 

    Label { // or Text 
     anchors.centerIn: parent // or anchors.fill: parent 
     text: "A" 
     color: "white" 
     verticalAlignment: Text.AlignVCenter 
     horizontalAlignment: Text.AlignHCenter 
    } 

    //EDIT: For testing different locations: 
    MouseArea { 
     anchors.fill: parent   
     drag.target: rect 
     drag.axis: Drag.XAxis 
    } 
} 

Das Problem dabei ist, dass der Text etwas weg ist von der Mitte (nach links und unten verschoben). Ich habe verschiedene Größen und Charaktere getestet, aber alle zeigen das gleiche Problem. Gibt es eine bessere Möglichkeit, den Text genau in der Mitte zu platzieren?

[EDIT]: Der Schriftoffset scheint mit der Position auf dem Bildschirm verwandt zu sein (aber ich konnte nicht bestimmen, was es verursacht - es passiert sowohl mit ungeraden als auch geraden x Koordinaten). Mit anderen Worten: Wenn Sie den Kreis ziehen, bewegt sich der zentrierte Charakter leicht herum.

Grüße,

+0

Ich habe Ihren Code versucht, und ich habe nicht das Problem beobachtet, könnten Sie ein Bild platzieren, wo Sie das Problem beobachten können. – eyllanesc

+2

Versuchte Ihren Code. Der Offset ist nur bemerkbar, wenn der Kreis sehr klein ist. Ich glaube, dass der Offset, den Sie sehen, auf den natürlichen Zeichenabstand der Schriftart zurückzuführen ist, die Sie verwenden. Sie könnten versuchen, nach einer symmetrischeren Schriftart zu suchen. Siehe: http://graphicdesign.stackexchange.com/questions/4035/what-does-the-size-of-the-font-translate-to-exactly –

+0

Sie können versuchen, 'anchors.margin' zu verwenden, um zu korrigieren für den Offset, aber in diesem Fall sollten Sie definitiv Ihre Schriftfamilie angeben. – m7913d

Antwort

1

Wenn Sie ein Element setzen, sagen Punkt A, genau in der Mitte von einem anderen Element, Sie sollte sich ausschalten A des anchors.alignWhenCentered (standardmäßig um wahr ist das Element crisply gemalt zu machen).

+0

Dies scheint das Problem tatsächlich zu beheben. – Hyndrix

0

Hier ist meine Art und Weise, nicht sehr elegant, aber es funktioniert ...

Text { 
    y: -4 
    text: "A" 
    color: "white" 
    font.pixelSize: 20 
    anchors.horizontalCenter: rect.horizontalCenter 
} 
Verwandte Themen