[SOLVED] Clipping of a QML item object slightly bigger than the text itself

[Katlin]

Hi,

Is it possible to clip the contents of a qml item (and obviously its contents) a little bigger than its boundaries?
For example I would like to clip it to -10 -> width+10 horizontally and -10 -> height+10 vertically.

[sierdzio]

Not really, the clip property is just a boolean. How would that work? The area outside an item is already empty... If I get you right, then you want to have clear "margin" around your item, right? Perhaps you can do this with a Rectangle wrapper around your text.

[Katlin]

Yep, I need a margin.
In fact it's for a Text object with clip set to on. But for some fonts, there are some bits that go outside the area (like for some italic fonts) so by having the clip=true it will cut those parts off.

The simplest solution that I could think of indeed implied having the text inside a slightly bigger rectangle, which in turn would have clip=true. I was just unsure if this is the "recommended" way to do it.

[sierdzio]

Are you sure you need clipping here? It can have a negative impact on the performance. See "this":http://qt-project.org/doc/qt-5/qtquick-performance.html#clipping

If the text is getting outside the text element (outside paintedWidth and paintedHeight, that is, not width and height properties), I would say it is a bug and should be reported.

[Katlin]

Yep, I need clipping because I want to hide the text lines which can go outside the box - like if I have a 3 lines text box and I put the equivalent of 5 lines in it. It's not a bug, it's intended to be a "smarter" text box which knows how to handle text that is bigger than it's (fixed) width and height.

So if that happens, this text box will display "pages" of text , using animations - like fading, moving, etc - as you can probably suspect by now, from my other questions ;)

[p3c0]

Hi,

May be you should go for "elide":http://qt-project.org/doc/qt-5/qml-qtquick-text.html#elide-prop then.

[sierdzio]

An idea:
@
// MyText.qml
Item {
property string text
height: 100
width: 200

Text {
anchors.centerIn: parent
height: parent.height + 5
width: parent.width + 5
clip: true
text: parent.text
}
}
@

I think this might work as you expect it to. The text will be slightly bigger than the parent item, so when you include MyText in your project, you will interact with that small root item. And the Text will have a 2.5pixel margin on each side.

[Katlin]

This is my label, working with a bigger-than-capacity text: http://youtu.be/wAsYnp0hw9s
As you can see, there are small pieces of text which are outside the box, and if I turn on the clipping they would just be cut off.
Your example is almost good for what I need although I would do the Text to be 10 px per axis smaller than the Rectangle, and turn on the clipping of the rectangle.

[Katlin]

In fact, the 10px per axis (5px on each side) should probably come from some font metrics property - don't know which one yet - and be proportional with the font size.

[Katlin]

Ok, so the solution was indeed nesting the labels inside a rectangle on which I set clip to on. Once this was done, I had to slightly enlarge the height of the rectangle to allow for the missing text parts to be shown. The delta for the enlargement was computed using text metrics; so now it works quite fine :)

[Katlin]

Yep, thx!