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.
Any ideas on how to do that?
Thanks!
-
@patrickkidd
you can play around with item transformationsItem { 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:-
-
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.