Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. [SOLVED] Clipping of a QML item object slightly bigger than the text itself
Forum Updated to NodeBB v4.3 + New Features

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

Scheduled Pinned Locked Moved QML and Qt Quick
11 Posts 3 Posters 6.6k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • K Offline
    K Offline
    Katlin
    wrote on last edited by
    #1

    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.

    1 Reply Last reply
    0
    • sierdzioS Offline
      sierdzioS Offline
      sierdzio
      Moderators
      wrote on last edited by
      #2

      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.

      (Z(:^

      1 Reply Last reply
      0
      • K Offline
        K Offline
        Katlin
        wrote on last edited by
        #3

        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.

        1 Reply Last reply
        0
        • sierdzioS Offline
          sierdzioS Offline
          sierdzio
          Moderators
          wrote on last edited by
          #4

          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.

          (Z(:^

          1 Reply Last reply
          0
          • K Offline
            K Offline
            Katlin
            wrote on last edited by
            #5

            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 ;)

            1 Reply Last reply
            0
            • p3c0P Offline
              p3c0P Offline
              p3c0
              Moderators
              wrote on last edited by
              #6

              Hi,

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

              157

              1 Reply Last reply
              0
              • sierdzioS Offline
                sierdzioS Offline
                sierdzio
                Moderators
                wrote on last edited by
                #7

                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.

                (Z(:^

                1 Reply Last reply
                0
                • K Offline
                  K Offline
                  Katlin
                  wrote on last edited by
                  #8

                  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.

                  1 Reply Last reply
                  0
                  • K Offline
                    K Offline
                    Katlin
                    wrote on last edited by
                    #9

                    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.

                    1 Reply Last reply
                    0
                    • K Offline
                      K Offline
                      Katlin
                      wrote on last edited by
                      #10

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

                      1 Reply Last reply
                      0
                      • K Offline
                        K Offline
                        Katlin
                        wrote on last edited by
                        #11

                        Yep, thx!

                        1 Reply Last reply
                        0

                        • Login

                        • Login or register to search.
                        • First post
                          Last post
                        0
                        • Categories
                        • Recent
                        • Tags
                        • Popular
                        • Users
                        • Groups
                        • Search
                        • Get Qt Extensions
                        • Unsolved