Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    QML and masking an Item with another Item

    QML and Qt Quick
    5
    10
    17186
    Loading More Posts
    • 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.
    • 2
      2beers last edited by

      Hi everyone. I'm curious if it's implemented in qml a mask feature similar to the one in flash: "See the following demo":http://www.entheosweb.com/Flash/masking.asp

      If yes how can I do something like that, if no do you think it's a good idea to be implemented in future releases?

      Also if it's not implemented is there any way I can do it by combining c++ with qml?

      sorry for asking to many questions by I'm new to QML and I need to familiarize with it.

      1 Reply Last reply Reply Quote 0
      • D
        DenisKormalev last edited by

        You can for example put a rectangle over your item. Set its z greater than your item's z and place it by:
        @anchor.fill: maskedItemId@
        After it put inside this rectangle another rectangle and set it opacity to 0. Just as quick solution it will be enough I think, but if you want make it more stylish you can play with different transformations.

        1 Reply Last reply Reply Quote 0
        • 2
          2beers last edited by

          hi Denis, thanks for you answer. I tried something but with no luck. not sure is I understand. here is the example I used

          @ Rectangle{
          id:greenRectangle
          width:100
          height:100
          color:"green"
          y:100;
          radius:50;
          x:150;
          z:5

              anchors.fill:redRectangle
              opacity:0
          }
          
          Rectangle{
              id:redRectangle
              width:300;height:300
              color:"red"
              x:100;y:100
              z:4
          
          }@
          

          Let me know what I did wrong. The result that I expect is to show a red rectangle as the same shape and size as the green rectangle, with other words the small green rectangle masked the red rectangle, except for his area.

          In my code I see only the red rectangle which is not what I'm looking for

          1 Reply Last reply Reply Quote 0
          • 2
            2beers last edited by

            never mind I found the solution. QML is so cool. I'll post the example in case someone is interested in this problem.

            @ Rectangle{
            id:greenRectangle
            width:50;height:50
            color:"blue"
            x:100;y:100
            clip:true

                Rectangle{
                    id:redRectangle
                    width:300;height:300
                    color:"red"
                    x:0;y:0
                    z:4
                }
            }@
            

            so the idea is that inside the small rectangle(green one) you put the big rectangle(red one). then you set clip:true to the small rectangle (if clipping is enabled, an item will clip its own painting, as well as the painting of its children, to its bounding rectangle)

            My big problem now is this: "Non-rectangular clipping regions are not supported for performance reasons." so if you want to put a radius on a rectangle and then set clip to true it will show you as it will have radius:0 .

            Does anyone know if this feature will be updated in future releases so you can use clip with any type of shape?

            Also if someone else has a better idea than mine on how to solve this problem feel free to post :)

            1 Reply Last reply Reply Quote 0
            • J
              jdbastardy last edited by

              Nice work... Thank for providing a good solution. I think this needs a Wiki page! Does anybody agree?

              http://mattias-cibien.co.cc

              • Prepare for Qt consequences.
              1 Reply Last reply Reply Quote 0
              • 2
                2beers last edited by

                [quote author="jdbastardy" date="1285404385"]Nice work... Thank for providing a good solution. I think this needs a Wiki page! Does anybody agree?[/quote]

                Thanks but I realized that my solution is not a complete one. I just realized that a mask feature is needed to be implemented.

                The reasons:

                1. you can use only rectangular shapes

                2. if you rotate,scale,change position of the green square, the red square will also rotate,scale and change position. The purpose is to move only the green square and the red square to have a static position.

                Also working with the intersected area of 2 shapes will be nice. :)

                Anyway good job Qt team form QML and looking for new features on the next releases.

                PS: if someone has a better idea of how to manage this, feel free to post

                1 Reply Last reply Reply Quote 0
                • M
                  mbrasser last edited by

                  Hi,

                  There is this "suggestion":http://bugreports.qt.nokia.com/browse/QTBUG-11258 for allowing non-rectangular clipping. It would be great if you could add another suggestion for masking support -- that way this request won't get lost :-)

                  Regards,
                  Michael

                  1 Reply Last reply Reply Quote 0
                  • 2
                    2beers last edited by

                    [quote author="mbrasser" date="1285547594"]Hi,

                    There is this "suggestion":http://bugreports.qt.nokia.com/browse/QTBUG-11258 for allowing non-rectangular clipping. It would be great if you could add another suggestion for masking support -- that way this request won't get lost :-)

                    Regards,
                    Michael[/quote]

                    thanks. I submitted the "mask suggestion":http://bugreports.qt.nokia.com/browse/QTBUG-13970

                    Feel free to vote for this :)

                    1 Reply Last reply Reply Quote 0
                    • 2
                      2beers last edited by

                      Good news everyone. I just found there is already work in progress using qt quick components: http://bugreports.qt.nokia.com/browse/QTCOMPONENTS-388

                      1 Reply Last reply Reply Quote 0
                      • K
                        Kxyu last edited by

                        You can try QML Arsenal plugin, as far as I remember it implements masking image with another image

                        1 Reply Last reply Reply Quote 0
                        • First post
                          Last post