Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

How to render text with less height but same width?



  • 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.

    0_1559804518259_Screen Shot 2019-06-05 at 11.01.04 PM.png

    Any ideas on how to do that?

    Thanks!


  • Moderators

    @patrickkidd
    you can play around with item transformations

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


  • @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
    


  • 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:-

    0_1559807185515_326ad7c1-8e5d-4342-b66c-43389ed5f399-image.png


  • Qt Champions 2018

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



  • @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.

    0_1560107987795_40E819D4-847F-47A2-9A65-89462D32EB04.jpeg


Log in to reply