2016-03-21 11:09 GMT+01:00 Jens Bache-Wiig <jen...@gmail.com>:
>
>> 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.
Excellent. This was exactly the simplification I was looking for. Works great.
Elvis
>
> Cheers,
>
> Jens Bache-Wiig
> Cutehacks
>
>
>
>
>
_______________________________________________
Interest mailing list
Interest@qt-project.org
http://lists.qt-project.org/mailman/listinfo/interest
