> On 21 Mar 2016, at 10:47, Elvis Stansvik <elvst...@gmail.com> wrote:
>
> 2016-03-21 10:42 GMT+01:00 Elvis Stansvik <elvst...@gmail.com>:
>> 2016-03-21 10:27 GMT+01:00 Elvis Stansvik <elvst...@gmail.com>:
>>> Hi all,
>>>
>>> I'm attempting to make a custom Button item where the size of the
>>> button is determined by the metrics of the text it holds. The reason
>>> is I want to put a thin rectangle below the text, sort of a stylistic
>>> underlining (text underlining is not sufficient, for aesthetic
>>> reasons).
>>>
>>> But I'm seeing strange metrics reported for some strings.
>>>
>>> BEGIN TEST CASE
>>>
>>> Button.qml:
>>>
>>> import QtQuick 2.5
>>>
>>> // Attempt at a button with a size determined by the metrics
>>> // of its text.
>>>
>>> Rectangle {
>>> property alias text: text.text
>>> property alias pointSize: text.font.pointSize
>>>
>>> width: textMetrics.width
>>> height: textMetrics.height
>>>
>>> TextMetrics {
>>> id: textMetrics
>>> font: text.font
>>> text: text.text
>>> }
>>>
>>> Text {
>>> id: text
>>> text: "Button"
>>> }
>>> }
>>>
>>>
>>> Test.qml:
>>>
>>> import QtQuick 2.5
>>>
>>> Rectangle {
>>> width: 800
>>> height: 600
>>>
>>> // Something wrong with the metrics on this one :/
>>>
>>> Button {
>>> text: "Hej"
>>> pointSize: 42
>>> border.color: "red"
>>>
>>> anchors.top: parent.top
>>> }
>>>
>>> // These two seem OK.
>>>
>>> Button {
>>> text: "Something longer"
>>> pointSize: 42
>>> border.color: "red"
>>>
>>> anchors.verticalCenter: parent.verticalCenter
>>> }
>>>
>>> Button {
>>> text: "Test"
>>> pointSize: 42
>>> border.color: "red"
>>>
>>> anchors.bottom: parent.bottom
>>> }
>>> }
>>>
>>> END TEST CASE
>>>
>>> See the attached screenshot (metrics_are_off.png) which shows the
>>> result. Notice how the size of the buttons (Rectangle) are correct for
>>> the last two buttons, but for the first, the text is sticking out a
>>> little :/
>>>
>>> Any idea why this is, and how I can solve it?
>>>
>>> I'm also attaching a sketch (sketch.png) of the look I'm after for my
>>> buttons. If you know of a simpler way to achieve this, I'm idle ears.
>>
>> Nevermind. I realize now that the metrics are actually correct, it's
>> just that the 'H' in "Hej" has some leading space, which seems to not
>> be included in the reported metrics.
>>
>> I'll have to rethink a little, but should get it to work now I think.
>> Still would appreciate if someone who's done something similar to what
>> I'm trying could chime in.
>
> Actually, I guess my question is now; how can I account for this
> leading space? I.e. how can I get the position where the string
> (visually) starts and ends in the X direction? In the "Test" and
> "Something longer" case, the TextMetrics seems pretty accurate, but
> the leading space that the 'H' has (in the font I guess) seems to not
> be included in the metric rect :/
>
> Elvis
In most cases you do not actually need to use TextMetrics explicitly in the way
that you are doing here. The Text item already has a built in “implicitWidth”
and “implicitHeight” properties that accounts for font metrics and any
leading/trailing space you need. Unless I am missing something, all you need to
do to make your example work is to simplify your button to this:
Rectangle {
property alias text: text.text
property alias pointSize: text.font.pointSize
width: text.implicitWidth
height: text.implicitHeight
Text {
id: text
text: "Button"
}
}
That said, you probably want some extra margins around the text label in most
cases regardless.
Cheers,
Jens Bache-Wiig
Cutehacks
_______________________________________________
Interest mailing list
Interest@qt-project.org
http://lists.qt-project.org/mailman/listinfo/interest
