How to render text with less height but same width?

[patrickkidd]

I am trying to improve on the Tumbler type in QtQuick.Controls by rendering the height of each item a little smaller according to the item's current displacement, just as is done in the iOS date picker. It might also make sense to decrease the padding between items as displacement increases as well.

Any ideas on how to do that?

Thanks!

[raven-worx]

@patrickkidd
you can play around with item transformations

Item {
    transform: [
       Scale { yScale: 3; ... },
       Rotation { axis { x: 1; y: 0; z: 0 } angle: ... }
   ]
}

[patrickkidd]

@raven-worx The following code:

    Component {
        id: delegateComponent
        Label {
            text: formatText(Tumbler.tumbler.count, modelData)
            height: Tumbler.tumbler.visibleItemCount * 5
            opacity: 1.0 - Math.abs(Tumbler.displacement) / (Tumbler.tumbler.visibleItemCount / 2)
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            font.pixelSize: fontMetrics.font.pixelSize * 1.25// * (1.0 - Math.abs(Tumbler.displacement) / Tumbler.tumbler.visibleItemCount)                                                                     
            transform: Scale {
                yScale: (1.0 - Math.abs(Tumbler.displacement) / Tumbler.visibleItemCount)
            }
        }
    }

gives me this warning on the line with transform: Scale {:

qrc:/qml/PK/PKDatePicker.qml(39): qrc:/qml/PK/PKDatePicker.qml:39:24: QML Scale: Tumbler: attached properties of Tumbler must be accessed through a delegate item
qrc:/qml/PK/PKDatePicker.qml(39): qrc:/qml/PK/PKDatePicker.qml:39:24: QML Scale: Tumbler: attached properties of Tumbler must be accessed through a delegate item
qrc:/qml/PK/PKDatePicker.qml(39): qrc:/qml/PK/PKDatePicker.qml:39:24: QML Scale: Tumbler: attached properties of Tumbler must be accessed through a delegate item
qrc:/qml/PK/PKDatePicker.qml(39): qrc:/qml/PK/PKDatePicker.qml:39:24: QML Scale: Tumbler: attached properties of Tumbler must be accessed through a delegate item
qrc:/qml/PK/PKDatePicker.qml(39): qrc:/qml/PK/PKDatePicker.qml:39:24: QML Scale: Tumbler: attached properties of Tumbler must be accessed through a delegate item
qrc:/qml/PK/PKDatePicker.qml(39): qrc:/qml/PK/PKDatePicker.qml:39:24: QML Scale: Tumbler: attached properties of Tumbler must be accessed through a delegate item
qrc:/qml/PK/PKDatePicker.qml(39): qrc:/qml/PK/PKDatePicker.qml:39:24: QML Scale: Tumbler: attached properties of Tumbler must be accessed through a delegate item
qrc:/qml/PK/PKDatePicker.qml(39): qrc:/qml/PK/PKDatePicker.qml:39:24: QML Scale: Tumbler: attached properties of Tumbler must be accessed through a delegate item
qrc:/qml/PK/PKDatePicker.qml(39): qrc:/qml/PK/PKDatePicker.qml:39:24: QML Scale: Tumbler: attached properties of Tumbler must be accessed through a delegate item

[Shrinidhi Upadhyaya]

Hi @patrickkidd ,

just create a simple property like this inside the Label

property real scaleVal: Math.abs(Tumbler.displacement) / (control.visibleItemCount / 2)

and then access it like this:-

 transform: Scale {
            yScale:1.0 - label.scaleVal
        }

And the font size of the current item and the other items is also different, so according to my needs i had written a simple login like this, you can customize according to your needs:-

opacity: Math.max(1.0 - Math.abs(Tumbler.displacement) / (control.visibleItemCount / 2), 0.4)
font.pixelSize: root.fontSize * opacity

And i guess you can also use the opacity mask if you want achieve fading effect which the items at the bottom and top have.

Sample code:-

 Image {
    id: masking

    height: tumblerItem.height
    width: tumblerItem.width
    source: "mask.png"
    visible: false
}

OpacityMask {
    height: tumblerItem.height
    width: tumblerItem.width
    source: tumblerItem
    maskSource: masking
}

Sample output:-

[GrecKo]

This effect is not just a scaling on the vertical axis.
My guess is that it should be done with shaders.

[patrickkidd]

@Shrinidhi-Upadhyaya this is very cool. It looks to me that apple decreases the space between items as displacement increases. Any thoughts on how to do that?

@GrecKo What else do you see? I know that at least in iOS 12 there is a scale and transform that occurs as soon as the current item enters into the two horizontal lines. It is very cool, no way to accomplish that without using a clipped child rectangle and second tumbler inside it.